;
14 |
15 | export const Primary: Story = {
16 | render: () => ,
17 | };
18 |
19 | export const Selected: Story = {
20 | render: () => ,
21 | };
22 |
23 | export const WithCancelIcon: Story = {
24 | render: () => ,
25 | };
26 | export const WithPlusIcon: Story = {
27 | render: () => ,
28 | };
29 |
30 | export const SelectedWithIcon: Story = {
31 | render: () => ,
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/Chip/index.ts:
--------------------------------------------------------------------------------
1 | export { Chip } from './Chip';
2 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/ConfirmCreateIdCard/ConfirmCreateIdCard.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { Button } from '~/components/Button';
3 | import { TextButton } from '~/components/Button';
4 | import { ConfirmType } from '~/components/ConfirmPopup/useConfirmPopup';
5 | import Popup from '~/components/Popup/Popup';
6 |
7 | // const TITLE = '주민증이 없으면 댓글을 남길 수 없어요';
8 | const DESC = '주민증이 없으면 댓글을 남길 수 없어요';
9 |
10 | type ConfirmCreateIdCardProps = {
11 | confirm: (type: ConfirmType) => void;
12 | };
13 |
14 | export const ConfirmCreateIdCard = ({ confirm }: ConfirmCreateIdCardProps) => {
15 | const buttons = (
16 |
17 |
20 | confirm('CANCEL')}
22 | type="button"
23 | className="rounded-xl pt-13pxr text-b3 text-grey-900"
24 | >
25 | 다음에 만들기
26 |
27 |
28 | );
29 |
30 | return ;
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/ConfirmCreateIdCard/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ConfirmCreateIdCard.client';
2 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/ConfirmDeleteKeyword/ConfirmDeleteKeyword.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { Button } from '~/components/Button';
3 | import { TextButton } from '~/components/Button';
4 | import { ConfirmType } from '~/components/ConfirmPopup/useConfirmPopup';
5 | import Popup from '~/components/Popup/Popup';
6 |
7 | const TITLE = '키워드를 삭제하시겠어요?';
8 | const DESC = '키워드 세부 내용까지 없어져요';
9 |
10 | type ConfirmDeleteKeywordProps = {
11 | confirm: (type: ConfirmType) => void;
12 | };
13 |
14 | export const ConfirmDeleteKeyword = ({ confirm }: ConfirmDeleteKeywordProps) => {
15 | const buttons = (
16 |
17 |
20 | confirm('OK')}
22 | type="button"
23 | className="rounded-xl pt-13pxr text-b3 text-grey-900"
24 | >
25 | 삭제하기
26 |
27 |
28 | );
29 |
30 | return ;
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/ConfirmDeleteKeyword/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ConfirmDeleteKeyword.client';
2 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/ConfirmUnSave/ConfirmUnSave.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { Button } from '~/components/Button';
3 | import { TextButton } from '~/components/Button';
4 | import { ConfirmType } from '~/components/ConfirmPopup/useConfirmPopup';
5 | import Popup from '~/components/Popup/Popup';
6 |
7 | const TITLE = '저장되지 않은 변경사항이 있어요';
8 | const DESC = '변경 사항을 취소할까요?';
9 |
10 | type ConfirmUnSaveProps = {
11 | confirm: (type: ConfirmType) => void;
12 | };
13 |
14 | export const ConfirmUnSave = ({ confirm }: ConfirmUnSaveProps) => {
15 | const buttons = (
16 |
17 |
20 | confirm('OK')}
22 | type="button"
23 | className="rounded-xl pt-13pxr text-b3 text-grey-900"
24 | >
25 | 네, 저장하지 않을래요
26 |
27 |
28 | );
29 |
30 | return ;
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/ConfirmUnSave/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ConfirmUnSave.client';
2 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/CopyInvitation/CopyInvitation.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { Button } from '~/components/Button';
3 | import { TextButton } from '~/components/Button';
4 | import { ConfirmType } from '~/components/ConfirmPopup/useConfirmPopup';
5 | import Popup from '~/components/Popup/Popup';
6 |
7 | const TITLE = '초대 링크 복사 완료';
8 | const DESC = '초대 링크를 공유해 보세요';
9 |
10 | type CopyInvitationProps = {
11 | confirm: (type: ConfirmType) => void;
12 | };
13 |
14 | export const CopyInvitation = ({ confirm }: CopyInvitationProps) => {
15 | const buttons = (
16 |
17 |
20 | confirm('CANCEL')}
22 | type="button"
23 | className="rounded-xl pt-13pxr text-b3 text-grey-900"
24 | >
25 | 닫기
26 |
27 |
28 | );
29 |
30 | return ;
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/CopyInvitation/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CopyInvitation.client';
2 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/SimpleConfirmPopup/SimpleConfirmPopup.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { Button } from '~/components/Button';
3 | import { TextButton } from '~/components/Button';
4 | import { ConfirmType } from '~/components/ConfirmPopup/useConfirmPopup';
5 | import Popup from '~/components/Popup/Popup';
6 |
7 | type SimpleConfirmPopupProps = {
8 | confirm: (type: ConfirmType) => void;
9 | title: string;
10 | description: string;
11 | confirmText?: string;
12 | cancelText?: string;
13 | };
14 |
15 | export const SimpleConfirmPopup = ({
16 | confirm,
17 | title,
18 | description,
19 | confirmText,
20 | cancelText,
21 | }: SimpleConfirmPopupProps) => {
22 | const buttons = (
23 |
24 |
27 | confirm('CANCEL')}
29 | type="button"
30 | className="rounded-xl pt-13pxr text-b3 text-grey-900"
31 | >
32 | {cancelText}
33 |
34 |
35 | );
36 |
37 | return ;
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/SimpleConfirmPopup/index.ts:
--------------------------------------------------------------------------------
1 | export * from './SimpleConfirmPopup.client';
2 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ConfirmDeleteKeyword';
2 | export * from './ConfirmUnSave';
3 | export * from './CopyInvitation';
4 | export * from './SimpleConfirmPopup';
5 | export * from './useConfirmPopup';
6 |
--------------------------------------------------------------------------------
/src/components/ConfirmPopup/useConfirmPopup.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | /**
4 | * 단순 실행만 할 경우 "OPEN"
5 | */
6 | export type ConfirmType = 'OK' | 'CANCEL' | 'OPEN';
7 |
8 | export const useConfirmPopup = (initialState = false) => {
9 | const [isOpen, setIsOpen] = useState(initialState);
10 |
11 | const [resolveFunc, setResolveFunc] = useState<((result: boolean) => void) | null>(null);
12 |
13 | const openPopup = () => {
14 | setIsOpen(true);
15 |
16 | return new Promise(resolve => {
17 | setResolveFunc(() => resolve);
18 | });
19 | };
20 |
21 | const closePopup = () => {
22 | setIsOpen(false);
23 | };
24 |
25 | const confirm = (type: ConfirmType = 'OPEN') => {
26 | const isOk = type === 'OK';
27 | if (resolveFunc) {
28 | resolveFunc(isOk);
29 | setResolveFunc(null);
30 | }
31 | };
32 |
33 | return {
34 | isOpen,
35 | openPopup,
36 | closePopup,
37 | confirm,
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/Divider/Divider.tsx:
--------------------------------------------------------------------------------
1 | import { tw } from '~/utils/tailwind.util';
2 |
3 | type DividerProps = {
4 | className?: string;
5 | };
6 |
7 | export const Divider = ({ className = 'bg-grey-100' }: DividerProps) => {
8 | return ;
9 | };
10 |
--------------------------------------------------------------------------------
/src/components/Divider/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Divider';
2 |
--------------------------------------------------------------------------------
/src/components/ErrorBoundary/RetryErrorBoundary.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ErrorBoundary } from 'react-error-boundary';
4 |
5 | const RetryErrorBoundary = ({ children }: { children: React.ReactNode }) => {
6 | return (
7 | (
9 |
10 |
문제가 발생했습니다
11 |
페이지를 불러오는데 실패했습니다.
12 |
18 |
12 | {children}
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/components/Menu/MenuWrapper.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, PropsWithChildren } from 'react';
2 |
3 | export const MenuWrapper = ({
4 | className,
5 | children,
6 | ...rest
7 | }: PropsWithChildren>) => {
8 | return (
9 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/components/Menu/index.ts:
--------------------------------------------------------------------------------
1 | import { MenuElement } from '~/components/Menu/MenuElement';
2 | import { MenuHeader } from '~/components/Menu/MenuHeader';
3 | import { MenuWrapper } from '~/components/Menu/MenuWrapper';
4 |
5 | export const Menu = Object.assign(MenuWrapper, {
6 | Header: MenuHeader,
7 | Element: MenuElement,
8 | });
9 |
--------------------------------------------------------------------------------
/src/components/NudgeIconSelector/NudgeIconSelector.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CelebrationIcon,
3 | EyeIcon,
4 | HeartExchangeIcon,
5 | NudgeIcon,
6 | RiceIcon,
7 | } from '~/components/Icon';
8 | import { NudgeIconSelectorType } from '~/types/nudge';
9 | import { ClassNameType } from '~/types/util';
10 |
11 | type NudgeIconSelectorProps = {
12 | nudgeType: NudgeIconSelectorType;
13 | className?: ClassNameType;
14 | };
15 |
16 | type IconWithProps = {
17 | className: ClassNameType;
18 | };
19 |
20 | const bellIconMap: Record> = {
21 | DEFAULT: ({ className, ...rest }) => ,
22 | MEET: ({ className, ...rest }) => ,
23 | FRIENDLY: ({ className, ...rest }) => ,
24 | SIMILARITY: ({ className, ...rest }) => ,
25 | TALKING: ({ className, ...rest }) => ,
26 | };
27 |
28 | export const NudgeIconSelector = ({ nudgeType, className, ...rest }: NudgeIconSelectorProps) => {
29 | const IconComponent = bellIconMap[nudgeType];
30 | return ;
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/NudgeIconSelector/index.tsx:
--------------------------------------------------------------------------------
1 | export { NudgeIconSelector } from './NudgeIconSelector';
2 |
--------------------------------------------------------------------------------
/src/components/Popup/Popup.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Button } from '~/components/Button';
4 |
5 | import Popup from './Popup';
6 |
7 | const meta: Meta = {
8 | title: 'components/Popup',
9 | component: Popup,
10 | };
11 |
12 | type Story = StoryObj;
13 |
14 | export const Default: Story = {
15 | args: {
16 | title: '타이틀',
17 | description: '세부 내용',
18 | buttons: (
19 | <>
20 |
23 |
26 |
27 | ),
28 | },
29 | };
30 |
31 | export default meta;
32 |
33 | export const Positive: Story = {
34 | args: {
35 | title: '타이틀',
36 | description: '세부 내용',
37 | buttons: (
38 | <>
39 |
42 |
43 | ),
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/src/components/Popup/Popup.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ReactNode } from 'react';
4 |
5 | import { AnimatedPortal } from '~/components/Portal';
6 |
7 | export type PopupProps = {
8 | title?: string;
9 | description?: string;
10 | buttons?: ReactNode;
11 | };
12 |
13 | const Popup = ({ title, description, buttons }: PopupProps) => {
14 | return (
15 |
18 |
19 |
20 | {title &&
{title}
}
21 | {description &&
{description}
}
22 | {buttons &&
{buttons}
}
23 |
24 |
22 |
23 |
24 |
{currentStep}
25 |
26 |
14 |
15 |
16 | <>
17 | {message}
18 | 를 나에게 보냈어요
19 |
20 |
21 |
24 |
{label}
;
27 | };
28 |
29 | export default Tag;
30 |
--------------------------------------------------------------------------------
/src/components/Tag/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Tag';
2 |
--------------------------------------------------------------------------------
/src/components/Template/TemplateButton.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { Button, ButtonProps } from '~/components/Button/Button';
4 | import { tw } from '~/utils/tailwind.util';
5 |
6 | type TemplateButtonProps = Partial> & {
7 | children: ReactNode | string;
8 | className?: string;
9 | };
10 |
11 | export const TemplateButton = ({ children, className, onClick, ...rest }: TemplateButtonProps) => {
12 | return (
13 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/Template/TemplateContent.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { tw } from '~/utils/tailwind.util';
4 |
5 | type TemplateContentProps = {
6 | children?: ReactNode;
7 | className?: string;
8 | };
9 |
10 | export const TemplateContent = ({ children, className }: TemplateContentProps) => {
11 | return {children}
;
12 | };
13 |
--------------------------------------------------------------------------------
/src/components/Template/TemplateDescription.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | type TemplateDescriptionProps = {
4 | children: ReactNode;
5 | className?: string;
6 | };
7 |
8 | export const TemplateDescription = ({ children, className }: TemplateDescriptionProps) => {
9 | return {children}
;
10 | };
11 |
--------------------------------------------------------------------------------
/src/components/Template/TemplateTitle.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | type TemplateTitleProps = {
4 | children: ReactNode;
5 | className?: string;
6 | };
7 |
8 | export const TemplateTitle = ({ children, className }: TemplateTitleProps) => {
9 | return {children}
;
10 | };
11 |
--------------------------------------------------------------------------------
/src/components/Template/TemplateWrapper.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { tw } from '~/utils/tailwind.util';
4 |
5 | type TemplateWrapperProps = {
6 | children: ReactNode;
7 | className?: string;
8 | };
9 |
10 | export const TemplateWrapper = ({ children, className }: TemplateWrapperProps) => {
11 | return {children}
;
12 | };
13 |
--------------------------------------------------------------------------------
/src/components/Template/index.ts:
--------------------------------------------------------------------------------
1 | import { TemplateButton } from './TemplateButton';
2 | import { TemplateContent } from './TemplateContent';
3 | import { TemplateDescription } from './TemplateDescription';
4 | import { TemplateTitle } from './TemplateTitle';
5 | import { TemplateWrapper } from './TemplateWrapper';
6 |
7 | export const Template = Object.assign(TemplateWrapper, {
8 | Title: TemplateTitle,
9 | Description: TemplateDescription,
10 | Content: TemplateContent,
11 | Button: TemplateButton,
12 | });
13 |
--------------------------------------------------------------------------------
/src/components/TextArea/TextAreaHeader.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { PropsWithChildren } from 'react';
4 |
5 | import { tw } from '~/utils/tailwind.util';
6 |
7 | type TextAreaHeaderProps = {
8 | className?: string;
9 | };
10 |
11 | export const TextAreaHeader = ({ className, children }: PropsWithChildren) => {
12 | return {children}
;
13 | };
14 |
--------------------------------------------------------------------------------
/src/components/TextArea/TextAreaImage.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import Image from 'next/image';
3 |
4 | import { tw } from '~/utils/tailwind.util';
5 |
6 | type SafeNumber = number | `${number}`;
7 |
8 | type TextAreaImageProps = { src: string; alt: string; height?: SafeNumber };
9 |
10 | export const TextAreaImage = ({ src, alt, height }: TextAreaImageProps) => {
11 | return (
12 |
13 |
20 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/TextArea/TextAreaLabel.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { PropsWithChildren } from 'react';
3 |
4 | import { ClassNameType } from '~/types/util';
5 | import { tw } from '~/utils/tailwind.util';
6 |
7 | type TextAreaLabelProps = {
8 | name: string;
9 | required?: boolean;
10 | className?: ClassNameType;
11 | };
12 |
13 | export const TextAreaLabel = ({
14 | name,
15 | required,
16 | className,
17 | children,
18 | }: PropsWithChildren) => {
19 | const requiredPseudoCss =
20 | required &&
21 | 'after:content-[" "] after:inline-block after:w-[4px] after:h-[4px] after:rounded-full after:bg-[#FF5555] after:absolute after:top-0 after:right-[-10px] ';
22 |
23 | return (
24 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/TextArea/TextAreaWrapper.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { ReactNode } from 'react';
3 |
4 | import { tw } from '~/utils/tailwind.util';
5 |
6 | type TextAreaWrapperProps = {
7 | children: ReactNode;
8 | className?: string;
9 | };
10 |
11 | export const TextAreaWrapper = ({ children, className }: TextAreaWrapperProps) => {
12 | return {children}
;
13 | };
14 |
--------------------------------------------------------------------------------
/src/components/TextArea/index.tsx:
--------------------------------------------------------------------------------
1 | import { TextAreaBorder } from './TextAreaBorder';
2 | import { TextAreaContent } from './TextAreaContent';
3 | import { TextAreaHeader } from './TextAreaHeader';
4 | import { TextAreaImage } from './TextAreaImage';
5 | import { TextAreaLabel } from './TextAreaLabel';
6 | import { TextAreaWrapper } from './TextAreaWrapper';
7 |
8 | export * from './useTextArea';
9 |
10 | export const TextArea = Object.assign(TextAreaWrapper, {
11 | Label: TextAreaLabel,
12 | Header: TextAreaHeader,
13 | Content: TextAreaContent,
14 | Border: TextAreaBorder,
15 | Image: TextAreaImage,
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/TextArea/useAutoHeightTextArea.tsx:
--------------------------------------------------------------------------------
1 | import { RefObject, useEffect } from 'react';
2 |
3 | type UseAutoHeightTextAreaProps = {
4 | isAutoSize: boolean;
5 | ref: RefObject | null;
6 | value: string | number | readonly string[] | undefined;
7 | };
8 |
9 | export const useAutoHeightTextArea = ({ isAutoSize, ref, value }: UseAutoHeightTextAreaProps) => {
10 | useEffect(() => {
11 | if (isAutoSize && ref && ref.current) {
12 | ref.current.style.height = '0px';
13 | const scrollHeight = ref.current.scrollHeight;
14 | ref.current.style.height = scrollHeight + 'px';
15 | }
16 | }, [ref, isAutoSize, value]);
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/TextArea/useTextArea.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { ChangeEvent, ChangeEventHandler, useCallback, useState } from 'react';
3 |
4 | export type UseTextAreaProps = {
5 | initValue?: string;
6 | onChange: ChangeEventHandler;
7 | maxLength?: number;
8 | };
9 |
10 | export const useTextArea = ({ initValue = '', onChange, maxLength }: UseTextAreaProps) => {
11 | const [value, setValue] = useState(initValue);
12 |
13 | const onChangeHandler = useCallback(
14 | (e: ChangeEvent) => {
15 | e.target.value = e.target.value.slice(0, maxLength);
16 | onChange(e);
17 | setValue(e.target.value);
18 | },
19 | [maxLength, onChange],
20 | );
21 |
22 | return { value, onChangeHandler };
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/TextInput/TextInputContent.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { forwardRef, InputHTMLAttributes } from 'react';
3 |
4 | import { ClassNameType } from '~/types/util';
5 | import { tw } from '~/utils/tailwind.util';
6 |
7 | type TextInputProps = InputHTMLAttributes & {
8 | inputClassName?: ClassNameType;
9 | };
10 |
11 | // eslint-disable-next-line react/display-name
12 | export const TextInputContent = forwardRef(
13 | (
14 | {
15 | inputClassName,
16 | name,
17 | placeholder,
18 | value,
19 | onChange,
20 | onBlur,
21 | type = 'text',
22 | disabled,
23 | ...rest
24 | },
25 | ref,
26 | ) => {
27 | const disabledCss = disabled && 'cursor-not-allowed';
28 | return (
29 |
43 | );
44 | },
45 | );
46 |
--------------------------------------------------------------------------------
/src/components/TextInput/TextInputLabel.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { PropsWithChildren } from 'react';
3 |
4 | import { ClassNameType } from '~/types/util';
5 | import { tw } from '~/utils/tailwind.util';
6 |
7 | type TextInputLabelProps = {
8 | name: string;
9 | required?: boolean;
10 | className?: ClassNameType;
11 | };
12 |
13 | export const TextInputLabel = ({
14 | name,
15 | required,
16 | className,
17 | children,
18 | }: PropsWithChildren) => {
19 | const requiredPseudoCss =
20 | required &&
21 | 'after:content-[" "] after:inline-block after:w-[4px] after:h-[4px] after:rounded-full after:bg-[#FF5555] after:absolute after:top-0 after:right-[-10px] ';
22 |
23 | return (
24 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/TextInput/TextInputWrapper.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { HTMLAttributes, PropsWithChildren } from 'react';
4 |
5 | import { tw } from '~/utils/tailwind.util';
6 |
7 | export const TextInputWrapper = ({
8 | className,
9 | children,
10 | ...rest
11 | }: PropsWithChildren>) => {
12 | return (
13 |
14 | {children}
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/TextInput/index.tsx:
--------------------------------------------------------------------------------
1 | import { TextInputBorder } from './TextInputBorder';
2 | import { TextInputContent } from './TextInputContent';
3 | import { TextInputLabel } from './TextInputLabel';
4 | import { TextInputWrapper } from './TextInputWrapper';
5 |
6 | export * from './useTextInput';
7 |
8 | export const TextInput = Object.assign(TextInputWrapper, {
9 | Label: TextInputLabel,
10 | Content: TextInputContent,
11 | Border: TextInputBorder,
12 | });
13 |
--------------------------------------------------------------------------------
/src/components/TextInput/useTextInput.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { ChangeEvent, ChangeEventHandler, useCallback, useState } from 'react';
3 |
4 | export type UseTextInputProps = {
5 | initValue?: string;
6 | onChange: ChangeEventHandler;
7 | maxLength?: number;
8 | };
9 |
10 | export const useTextInput = ({ initValue = '', onChange, maxLength }: UseTextInputProps) => {
11 | const [value, setValue] = useState(initValue);
12 |
13 | const onChangeHandler = useCallback(
14 | (e: ChangeEvent) => {
15 | e.target.value = e.target.value.slice(0, maxLength);
16 | onChange(e);
17 | setValue(e.target.value);
18 | },
19 | [maxLength, onChange],
20 | );
21 |
22 | return { value, onChangeHandler };
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/ToastMessage/ToastMessage.tsx:
--------------------------------------------------------------------------------
1 | import { ToastMessageModel, ToastMessageType } from '~/stores/toastMessage.store';
2 | import { tw } from '~/utils/tailwind.util';
3 |
4 | type ToastMessageProps = Omit;
5 |
6 | const colors: Record = {
7 | error: 'bg-grey-500 text-white',
8 | success: 'bg-grey-500 text-white',
9 | info: 'bg-grey-500 text-white',
10 | };
11 |
12 | export const ToastMessage = ({ message, type }: ToastMessageProps) => {
13 | return (
14 |
21 | {message}
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/ToastMessage/ToastMessageProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { AnimatePresence, motion } from 'framer-motion';
3 |
4 | import { Portal } from '~/components/Portal';
5 | import { ToastMessage } from '~/components/ToastMessage/ToastMessage';
6 | import { useToastMessageStore } from '~/stores/toastMessage.store';
7 |
8 | export const ToastMessageProvider = () => {
9 | const { toastMessageList } = useToastMessageStore();
10 | return (
11 |
12 |
13 |
14 |
15 | {toastMessageList.map(({ toastId, message, type }) => (
16 |
23 |
24 |
25 | ))}
26 |
27 |
28 |
{children}
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/TopNavigation/TopNavigationProgressBar.tsx:
--------------------------------------------------------------------------------
1 | import { ProgressBar } from '../ProgressBar';
2 |
3 | type TopNavigationProgressBarProps = {
4 | currentStep: number;
5 | stepsLength: number;
6 | };
7 |
8 | export const TopNavigationProgressBar = ({
9 | currentStep,
10 | stepsLength,
11 | }: TopNavigationProgressBarProps) => {
12 | return (
13 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/TopNavigation/TopNavigationRight.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren } from 'react';
2 |
3 | import { tw } from '~/utils/tailwind.util';
4 |
5 | type TopNavigationRightProps = {
6 | className?: string;
7 | };
8 |
9 | export const TopNavigationRight = ({
10 | children,
11 | className,
12 | }: PropsWithChildren) => {
13 | return {children}
;
14 | };
15 |
--------------------------------------------------------------------------------
/src/components/TopNavigation/TopNavigationTitle.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren } from 'react';
2 |
3 | import { tw } from '~/utils/tailwind.util';
4 |
5 | type TopNavigationTitleProps = {
6 | className?: string;
7 | };
8 |
9 | export const TopNavigationTitle = ({
10 | children,
11 | className,
12 | }: PropsWithChildren) => {
13 | return {children}
;
14 | };
15 |
--------------------------------------------------------------------------------
/src/components/TopNavigation/TopNavigationWrapper.tsx:
--------------------------------------------------------------------------------
1 | import { PropsWithChildren } from 'react';
2 |
3 | type TopNavigationWrapperProps = {
4 | /**
5 | * border-bottom 컬러 값이 주어지면 표시합니다. ex) color-primary
6 | */
7 | bottomBorderColor?: string;
8 | bgColor?: string;
9 | };
10 | export const TopNavigationWrapper = ({
11 | bottomBorderColor,
12 | bgColor = 'bg-white',
13 | children,
14 | }: PropsWithChildren) => {
15 | const borderBottomStyle = bottomBorderColor ? `border-b-${bottomBorderColor} border-b-[1px]` : '';
16 | return (
17 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/TopNavigation/index.tsx:
--------------------------------------------------------------------------------
1 | import { TopNavigationBackButton } from './TopNavigationBackButton';
2 | import { TopNavigationLeft } from './TopNavigationLeft';
3 | import { TopNavigationProgressBar } from './TopNavigationProgressBar';
4 | import { TopNavigationRight } from './TopNavigationRight';
5 | import { TopNavigationTitle } from './TopNavigationTitle';
6 | import { TopNavigationWrapper } from './TopNavigationWrapper';
7 |
8 | export const TopNavigation = Object.assign(TopNavigationWrapper, {
9 | Left: TopNavigationLeft,
10 | Title: TopNavigationTitle,
11 | Right: TopNavigationRight,
12 | BackButton: TopNavigationBackButton,
13 | ProgressBar: TopNavigationProgressBar,
14 | });
15 |
--------------------------------------------------------------------------------
/src/constant/planet.ts:
--------------------------------------------------------------------------------
1 | export const DEFAULT_SELECT_PLANET_INDEX = 0;
2 |
--------------------------------------------------------------------------------
/src/constant/recommendKeyword.ts:
--------------------------------------------------------------------------------
1 | import { OptionType } from '~/components/KeywordInput';
2 |
3 | export const DEFAULT_RECOMMEND_KEYWORD_OPTIONS: OptionType[] = [
4 | {
5 | title: '밤 산책',
6 | imageUrl: '',
7 | content: '',
8 | },
9 | {
10 | title: '아메리카노',
11 | imageUrl: '',
12 | content: '',
13 | },
14 | {
15 | title: '해외 축구',
16 | imageUrl: '',
17 | content: '',
18 | },
19 | {
20 | title: '음악',
21 | imageUrl: '',
22 | content: '',
23 | },
24 | {
25 | title: '공포영화',
26 | imageUrl: '',
27 | content: '',
28 | },
29 | {
30 | title: '셀프 인테리어',
31 | imageUrl: '',
32 | content: '',
33 | },
34 | {
35 | title: '엽떡',
36 | imageUrl: '',
37 | content: '',
38 | },
39 | {
40 | title: '우주 맛집 투어',
41 | imageUrl: '',
42 | content: '',
43 | },
44 | {
45 | title: '필름카메라',
46 | imageUrl: '',
47 | content: '',
48 | },
49 | {
50 | title: '강아지 영상보기',
51 | imageUrl: '',
52 | content: '',
53 | },
54 | {
55 | title: '오버워치',
56 | imageUrl: '',
57 | content: '',
58 | },
59 | ];
60 |
--------------------------------------------------------------------------------
/src/hooks/useIsMounted.hooks.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | function useIsMounted() {
4 | const [isMounted, setIsMounted] = useState(false);
5 |
6 | useEffect(() => {
7 | setIsMounted(true);
8 | }, []);
9 |
10 | return isMounted;
11 | }
12 |
13 | export default useIsMounted;
14 |
--------------------------------------------------------------------------------
/src/hooks/usePlanetNavigate.ts:
--------------------------------------------------------------------------------
1 | export const usePlanetNavigate = () => {
2 | const extractPlanetIdFromPathname = (currentPathname: string) => {
3 | const parts = currentPathname.split('/');
4 | const planetIdIndex = parts.findIndex(part => part === 'planet' || part === 'my-page');
5 |
6 | const notFoundPlanetID = planetIdIndex === -1;
7 | const planetIdIndexOverPathLength = planetIdIndex + 1 >= parts.length;
8 |
9 | if (notFoundPlanetID) return null;
10 | if (planetIdIndexOverPathLength) return null;
11 |
12 | return Number(parts[planetIdIndex + 1]);
13 | };
14 | return {
15 | extractPlanetIdFromPathname,
16 | };
17 | };
18 |
--------------------------------------------------------------------------------
/src/lib/tanstackQuery/getQueryClient.tsx:
--------------------------------------------------------------------------------
1 | import { QueryClient } from '@tanstack/react-query';
2 | import { cache } from 'react';
3 |
4 | const getQueryClient = cache(() => new QueryClient());
5 | export default getQueryClient;
6 |
--------------------------------------------------------------------------------
/src/mocks/browser.ts:
--------------------------------------------------------------------------------
1 | import { setupWorker } from 'msw';
2 |
3 | import { handlers } from './handlers';
4 |
5 | export const worker = setupWorker(...handlers);
6 |
--------------------------------------------------------------------------------
/src/mocks/handlers.ts:
--------------------------------------------------------------------------------
1 | import { commentMockHandler } from '~/mocks/comment/comment.mockHandler';
2 | import { communityMockHandler } from '~/mocks/community/community.mockHandler';
3 | import { idCardMockHandler } from '~/mocks/idCard/idCard.mockHandler';
4 | import { notificationMockHandler } from '~/mocks/notification/notification.mockHandler';
5 | import { nudgeMockHandler } from '~/mocks/nudge/nudge.mockHandler';
6 | import { userMockHandler } from '~/mocks/user/user.mockHandler';
7 |
8 | export const handlers = [
9 | ...idCardMockHandler,
10 | ...communityMockHandler,
11 | ...commentMockHandler,
12 | ...notificationMockHandler,
13 | ...userMockHandler,
14 | ...nudgeMockHandler,
15 | ];
16 |
--------------------------------------------------------------------------------
/src/mocks/idCard/idCard.mock.ts:
--------------------------------------------------------------------------------
1 | import { faker } from '@faker-js/faker/locale/ko';
2 |
3 | import { generateRandomNudge } from '~/mocks/nudge.util';
4 | import { IdCardCreateResponse, IdCardDetailModel } from '~/types/idCard';
5 |
6 | export const idCardDetailMock = (): IdCardDetailModel => ({
7 | idCardId: faker.number.int(),
8 | userId: faker.number.int(),
9 | nickname: faker.person.fullName(),
10 | profileImageUrl: faker.image.avatar(),
11 | aboutMe: faker.lorem.paragraph(),
12 | keywords: Array.from({ length: 3 }, () => ({
13 | keywordId: faker.number.int(),
14 | title: faker.lorem.word(),
15 | imageUrl: faker.image.avatar(),
16 | content: faker.lorem.paragraph(),
17 | })),
18 | characterType: faker.helpers.arrayElement(['TRUE', 'PIPI', 'TOBBY', 'BUDDY']),
19 | commentCount: faker.number.int({ min: 0, max: 999 }),
20 | toNudgeType: generateRandomNudge(),
21 | unreadNudges: faker.number.int({ min: 0, max: 999 }),
22 | });
23 |
24 | export const createIdCardMock: IdCardCreateResponse = { id: 1 };
25 |
--------------------------------------------------------------------------------
/src/mocks/idCard/idCard.mockHandler.ts:
--------------------------------------------------------------------------------
1 | import { rest } from 'msw';
2 |
3 | import { ROOT_API_URL } from '~/api/config/requestUrl';
4 | import { createIdCardMock, idCardDetailMock } from '~/mocks/idCard/idCard.mock';
5 | import { generateResponse } from '~/mocks/mock.util';
6 |
7 | export const idCardMockHandler = [
8 | rest.get(`${ROOT_API_URL}/id-cards/:idCardId`, () => {
9 | return generateResponse({ statusCode: 200, data: { idCardDetailsDto: idCardDetailMock() } });
10 | }),
11 | rest.get(`${ROOT_API_URL}/communities/:communityId/users/idCards`, () => {
12 | return generateResponse({ statusCode: 200, data: { idCardDetailsDto: idCardDetailMock() } });
13 | }),
14 | rest.put(`${ROOT_API_URL}/id-cards/:idCardId`, () => {
15 | return generateResponse({ statusCode: 200, data: idCardDetailMock() });
16 | }),
17 | rest.post(`${ROOT_API_URL}/id-cards`, () => {
18 | return generateResponse({ statusCode: 200, data: createIdCardMock });
19 | }),
20 | ];
21 |
--------------------------------------------------------------------------------
/src/mocks/image/image.mock.ts:
--------------------------------------------------------------------------------
1 | import { faker } from '@faker-js/faker/locale/ko';
2 |
3 | export const imageUrlMock = {
4 | imageUrl: faker.image.avatar(),
5 | };
6 |
--------------------------------------------------------------------------------
/src/mocks/image/image.mockHandler.ts:
--------------------------------------------------------------------------------
1 | import { rest } from 'msw';
2 |
3 | import { ROOT_API_URL } from '~/api/config/requestUrl';
4 | import { generateResponse } from '~/mocks/mock.util';
5 |
6 | import { imageUrlMock } from './image.mock';
7 |
8 | export const imageMockHandler = [
9 | rest.post(`${ROOT_API_URL}/images`, () => {
10 | return generateResponse({ statusCode: 200, data: imageUrlMock });
11 | }),
12 | ];
13 |
--------------------------------------------------------------------------------
/src/mocks/index.ts:
--------------------------------------------------------------------------------
1 | const initMocks = async () => {
2 | const isServer = typeof window === 'undefined';
3 |
4 | if (isServer) {
5 | const { server } = await require('./server');
6 | server.listen({ onUnhandledRequest: 'bypass' });
7 | } else {
8 | const { worker } = await require('./browser');
9 | worker.start({ onUnhandledRequest: 'bypass' });
10 | }
11 | };
12 |
13 | export default initMocks;
14 |
--------------------------------------------------------------------------------
/src/mocks/mock.util.ts:
--------------------------------------------------------------------------------
1 | import { context, response } from 'msw';
2 |
3 | import { DefaultServerResponseType } from '~/api/config/api.types';
4 |
5 | export const generateResponse = ({
6 | data,
7 | statusCode,
8 | delay = 0,
9 | }: Omit, 'success'> & { delay?: number }) => {
10 | const isSuccess = statusCode < 400;
11 | return response(
12 | context.status(statusCode),
13 | context.delay(delay),
14 | context.json({
15 | data,
16 | statusCode,
17 | success: isSuccess,
18 | }),
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/src/mocks/notification/notification.mockHandler.ts:
--------------------------------------------------------------------------------
1 | import { rest } from 'msw';
2 |
3 | import { ROOT_API_URL } from '~/api/config/requestUrl';
4 | import { generateResponse } from '~/mocks/mock.util';
5 |
6 | import { createNotificationList } from './notification.mock';
7 |
8 | export const notificationMockHandler = [
9 | rest.get(`${ROOT_API_URL}/notifications?page=:page&size=10`, req => {
10 | const { searchParams } = req.url;
11 | const page = Number(searchParams.get('page'));
12 | return generateResponse({
13 | statusCode: 200,
14 | data: createNotificationList(10, page, 10),
15 | });
16 | }),
17 | ];
18 |
--------------------------------------------------------------------------------
/src/mocks/nudge.util.ts:
--------------------------------------------------------------------------------
1 | import { NudgeModel } from '~/types/nudge';
2 |
3 | const keywords: NudgeModel[] = ['MEET', 'SIMILARITY', 'TALKING', 'FRIENDLY'];
4 |
5 | export const generateRandomNudge = () => {
6 | const randomIndex = Math.floor(Math.random() * keywords.length);
7 | const keyword = keywords[randomIndex];
8 |
9 | return keyword;
10 | };
11 |
--------------------------------------------------------------------------------
/src/mocks/nudge/nudge.mock.ts:
--------------------------------------------------------------------------------
1 | import { faker } from '@faker-js/faker/locale/ko';
2 |
3 | import { NudgeListModel } from '~/types/nudge/model.type';
4 |
5 | export const createNudgeList = (): NudgeListModel[] => {
6 | return Array.from({ length: 5 }, () => ({
7 | nudgeId: faker.number.int(),
8 | opponentUser: {
9 | userId: faker.number.int(),
10 | profileImageUrl: faker.image.avatar(),
11 | nickname: faker.person.fullName(),
12 | },
13 | toUserNudgeType: faker.helpers.arrayElement(['FRIENDLY', 'SIMILARITY', 'TALKING', 'MEET']),
14 | fromUserNudgeType: faker.helpers.arrayElement([
15 | 'FRIENDLY',
16 | 'SIMILARITY',
17 | 'TALKING',
18 | 'MEET',
19 | null,
20 | ]),
21 | }));
22 | };
23 |
--------------------------------------------------------------------------------
/src/mocks/nudge/nudge.mockHandler.ts:
--------------------------------------------------------------------------------
1 | import { rest } from 'msw';
2 |
3 | import { ROOT_API_URL } from '~/api/config/requestUrl';
4 | import { generateResponse } from '~/mocks/mock.util';
5 | import { createNudgeList } from '~/mocks/nudge/nudge.mock';
6 |
7 | export const nudgeMockHandler = [
8 | rest.get(`${ROOT_API_URL}/nudges/id-cards/:idCardsId`, () => {
9 | return generateResponse({ statusCode: 200, data: { nudgeInfoDtos: createNudgeList() } });
10 | }),
11 | ];
12 |
--------------------------------------------------------------------------------
/src/mocks/server.ts:
--------------------------------------------------------------------------------
1 | import { setupServer } from 'msw/node';
2 |
3 | import { handlers } from './handlers';
4 |
5 | export const server = setupServer(...handlers);
6 |
--------------------------------------------------------------------------------
/src/mocks/user/user.mock.ts:
--------------------------------------------------------------------------------
1 | import { faker } from '@faker-js/faker/locale/ko';
2 |
3 | import { UserInfoModel } from '~/types/user';
4 |
5 | export const createUserInfo = (): UserInfoModel => ({
6 | userId: faker.number.int(),
7 | email: faker.internet.email(),
8 | nickname: faker.person.fullName(),
9 | gender: faker.person.gender(),
10 | ageRange: '',
11 | profileImageUrl: faker.image.avatar(),
12 | characterType: 'BUDDY',
13 | communityIds: [1],
14 | });
15 |
--------------------------------------------------------------------------------
/src/mocks/user/user.mockHandler.ts:
--------------------------------------------------------------------------------
1 | import { rest } from 'msw';
2 |
3 | import { ROOT_API_URL } from '~/api/config/requestUrl';
4 | import { generateResponse } from '~/mocks/mock.util';
5 | import { createUserInfo } from '~/mocks/user/user.mock';
6 |
7 | export const userMockHandler = [
8 | rest.get(`${ROOT_API_URL}/user/profile`, () => {
9 | return generateResponse({
10 | statusCode: 200,
11 | data: {
12 | userProfileDto: createUserInfo(),
13 | },
14 | });
15 | }),
16 | rest.post(`${ROOT_API_URL}/user/character`, () => {
17 | return generateResponse({ statusCode: 200, data: {} });
18 | }),
19 | ];
20 |
--------------------------------------------------------------------------------
/src/modules/CommentInput/CommentInput.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useGetCommunityUserInfo } from '~/api/domain/community.api';
4 | import { ActiveCommentInput } from '~/modules/CommentInput/ActiveCommentInput.client';
5 | import { DisabledCommentInput } from '~/modules/CommentInput/DisabledCommentInput.client';
6 |
7 | type CommentInputProps = {
8 | idCardId: number;
9 | communityId: number;
10 | };
11 |
12 | export const CommentInput = ({ idCardId, communityId }: CommentInputProps) => {
13 | const { data } = useGetCommunityUserInfo(communityId);
14 |
15 | const shouldActiveCommentInput = data?.myInfoInInCommunityDto.isExistsIdCard;
16 |
17 | return (
18 |
19 | {shouldActiveCommentInput ? (
20 |
25 | ) : (
26 |
27 | )}
28 |
22 | {nickname}님에게 답글 남기는 중
23 |
26 |
27 |
28 | ) : (
29 | <>
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/modules/CommentInput/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CommentInput.client';
2 |
--------------------------------------------------------------------------------
/src/modules/CommentList/Comment/Comment.stories.tsx:
--------------------------------------------------------------------------------
1 | import { faker } from '@faker-js/faker/locale/ko';
2 | import type { Meta, StoryObj } from '@storybook/react';
3 |
4 | import { createComment } from '~/mocks/comment/comment.mock';
5 |
6 | import { Comment } from './index';
7 |
8 | const meta: Meta = {
9 | title: 'modules/Comment',
10 | component: Comment,
11 | args: {},
12 | };
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | const MOCK_COMMENT = createComment(123123, 123);
19 |
20 | export const Primary: Story = {
21 | render: () => ,
22 | };
23 |
24 | export const DetailShow: Story = {
25 | render: () => ,
26 | };
27 |
--------------------------------------------------------------------------------
/src/modules/CommentList/Comment/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Comment.client';
2 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/CommentOptions.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useEffect, useState } from 'react';
4 |
5 | import { DeleteButton } from '~/modules/CommentList/CommentCommon/DeleteButton.client';
6 | import { ReportButton } from '~/modules/CommentList/CommentCommon/ReportButton.client';
7 | import { CommentModel } from '~/types/comment';
8 | import { getUserIdClient } from '~/utils/auth/getUserId.client';
9 |
10 | type CommentOptionsProps = Pick & {
11 | onClickToDeleteComment: VoidFunction;
12 | };
13 |
14 | export const CommentOptions = ({ writerInfo, onClickToDeleteComment }: CommentOptionsProps) => {
15 | const { userId: writerId } = writerInfo;
16 | const userId = getUserIdClient();
17 |
18 | const [isMine, setIsMine] = useState(false);
19 |
20 | const isWriterSameAsUser = userId === writerId;
21 |
22 | // Text content does not match server-rendered HTML 이슈로 useEffect로 분리처리
23 | useEffect(() => {
24 | setIsMine(isWriterSameAsUser);
25 | }, [isWriterSameAsUser, userId, writerId]);
26 |
27 | return (
28 | <>
29 | {isMine ? : }
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/DeleteButton.client.tsx:
--------------------------------------------------------------------------------
1 | import { SimpleConfirmPopup, useConfirmPopup } from '~/components/ConfirmPopup';
2 |
3 | type DeleteButtonProps = {
4 | onClickToDeleteComment: () => void;
5 | };
6 |
7 | export const DeleteButton = ({ onClickToDeleteComment }: DeleteButtonProps) => {
8 | const { isOpen, openPopup, closePopup, confirm } = useConfirmPopup();
9 |
10 | const deleteComment = () => {
11 | onClickToDeleteComment();
12 | };
13 |
14 | const onDeleteComment = async () => {
15 | const isOk = await openPopup();
16 | closePopup();
17 | if (isOk) {
18 | deleteComment();
19 | }
20 | };
21 |
22 | return (
23 | <>
24 |
27 | {isOpen && (
28 |
35 | )}
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/Empty.client.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | export const Empty = () => {
4 | return (
5 |
6 |
7 | 가장 먼저 댓글을 남겨보세요
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/Header.client.tsx:
--------------------------------------------------------------------------------
1 | import { CommentModel, CommentWriterIntoModel } from '~/types/comment';
2 | import { getCreatedAtFormat } from '~/utils/time.util';
3 |
4 | type HeaderProps = Pick & Pick;
5 |
6 | export const Header = ({ nickname, createdAt }: HeaderProps) => {
7 | return (
8 |
9 | {nickname}
10 | {getCreatedAtFormat(createdAt)}전
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/LikeCount.client.tsx:
--------------------------------------------------------------------------------
1 | import { CommentLikeModel } from '~/types/comment';
2 |
3 | type LikeCountProps = Pick;
4 |
5 | export const LikeCount = ({ likeCount }: LikeCountProps) => {
6 | const isShowLikeText = likeCount !== 0;
7 | return (
8 | <>
9 | {isShowLikeText && (
10 | 좋아요 {likeCount}개
11 | )}
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/LikeIcon.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { HeartFillIcon, HeartIcon } from '~/components/Icon';
4 | import { CommentLikeModel } from '~/types/comment';
5 |
6 | type LikeIconProps = Pick & {
7 | onClickToLikeCancel: () => Promise;
8 | onClickToLike: () => Promise;
9 | };
10 |
11 | export const LikeIcon = ({
12 | likedByCurrentUser,
13 | onClickToLikeCancel,
14 | onClickToLike,
15 | }: LikeIconProps) => {
16 | return (
17 | <>
18 | {likedByCurrentUser ? (
19 |
20 | ) : (
21 |
22 | )}
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/ReplyHideButton.client.tsx:
--------------------------------------------------------------------------------
1 | import { DashIcon } from '~/components/Icon';
2 |
3 | type ReplyHideButtonProps = {
4 | isShowReplyList: boolean;
5 | onClickHideReplyList: VoidFunction;
6 | };
7 |
8 | export const ReplyHideButton = ({
9 | isShowReplyList,
10 | onClickHideReplyList,
11 | }: ReplyHideButtonProps) => {
12 | return (
13 | <>
14 | {isShowReplyList && (
15 |
19 | )}
20 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/ReplyShowButton.client.tsx:
--------------------------------------------------------------------------------
1 | import { DashIcon } from '~/components/Icon';
2 | import { CommentModel } from '~/types/comment';
3 |
4 | type ReplyShowButtonProps = Pick & {
5 | isShowReplyList: boolean;
6 | onClickShowReplyList: VoidFunction;
7 | };
8 |
9 | export const ReplyShowButton = ({
10 | isShowReplyList,
11 | onClickShowReplyList,
12 | repliesCount,
13 | }: ReplyShowButtonProps) => {
14 | const isReplyListEmpty = repliesCount === 0;
15 |
16 | const isShowButton = !isShowReplyList && !isReplyListEmpty;
17 |
18 | return (
19 | <>
20 | {isShowButton && (
21 |
31 | )}
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/ReplySubmitButton.client.tsx:
--------------------------------------------------------------------------------
1 | import { useReplyRecipientStore } from '~/stores/comment.store';
2 |
3 | type ReplySubmitButtonProps = {
4 | nickname: string;
5 | commentId: number;
6 | };
7 |
8 | export const ReplySubmitButton = ({ nickname, commentId }: ReplySubmitButtonProps) => {
9 | const { setReplyRecipient } = useReplyRecipientStore();
10 | return (
11 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/ReportButton.client.tsx:
--------------------------------------------------------------------------------
1 | import { SimpleConfirmPopup, useConfirmPopup } from '~/components/ConfirmPopup';
2 | import { useToastMessageStore } from '~/stores/toastMessage.store';
3 |
4 | export const ReportButton = () => {
5 | const { isOpen, openPopup, closePopup, confirm } = useConfirmPopup();
6 | const { infoToast } = useToastMessageStore();
7 | const handleReport = async () => {
8 | const isOk = await openPopup();
9 | closePopup();
10 | if (isOk) {
11 | infoToast('신고가 접수됐습니다');
12 | }
13 | };
14 |
15 | return (
16 | <>
17 |
20 | {isOpen && (
21 |
28 | )}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/UserProfile.client.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | import { CommentWriterIntoModel } from '~/types/comment';
4 |
5 | type UserProfileProps = Pick;
6 |
7 | export const UserProfile = ({ profileImageUrl }: UserProfileProps) => {
8 | return (
9 |
10 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentCommon/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CommentOptions.client';
2 | export * from './Content.client';
3 | export * from './DeleteButton.client';
4 | export * from './Empty.client';
5 | export * from './Header.client';
6 | export * from './LikeCount.client';
7 | export * from './LikeIcon.client';
8 | export * from './ReplyHideButton.client';
9 | export * from './ReplyShowButton.client';
10 | export * from './ReplySubmitButton.client';
11 | export * from './ReportButton.client';
12 | export * from './UserProfile.client';
13 |
--------------------------------------------------------------------------------
/src/modules/CommentList/CommentReplyList/index.ts:
--------------------------------------------------------------------------------
1 | export * from './CommentReply.client';
2 | export * from './CommentReplyList.client';
3 |
--------------------------------------------------------------------------------
/src/modules/CommentList/useLike.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | import { CommentLikeModel } from '~/types/comment';
4 |
5 | type UseLikeProps = CommentLikeModel;
6 |
7 | export const useLike = ({
8 | likedByCurrentUser: initLikedByCurrentUser,
9 | likeCount: initLikeCount,
10 | }: UseLikeProps) => {
11 | const [likedByCurrentUser, setLikedByCurrentUser] = useState(initLikedByCurrentUser);
12 | const [likeCount, setLikeCount] = useState(initLikeCount);
13 |
14 | const likeComment = () => {
15 | setLikedByCurrentUser(true);
16 | setLikeCount(prev => prev + 1);
17 | };
18 |
19 | const cancelLikeComment = () => {
20 | setLikedByCurrentUser(false);
21 | setLikeCount(prev => (prev === 0 ? prev : prev - 1));
22 | };
23 |
24 | return {
25 | likedByCurrentUser,
26 | likeCount,
27 | likeComment,
28 | cancelLikeComment,
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/src/modules/CommunityAdmin/CommunityAdmin.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { CommunityAdmin } from './CommunityAdmin';
4 | import { CommunityAdminCreate } from './CommunityAdminCreate.client';
5 | import { CommunityAdminEdit } from './CommunityAdminEdit.client';
6 |
7 | const meta: Meta = {
8 | title: 'modules/CommunityAdmin',
9 | component: CommunityAdmin,
10 | };
11 |
12 | type Story = StoryObj;
13 |
14 | export const Default: Story = {
15 | render: () => ,
16 | };
17 |
18 | export default meta;
19 |
20 | export const Create: StoryObj = {
21 | render: () => ,
22 | };
23 |
24 | export const Edit: StoryObj = {
25 | render: () => ,
26 | };
27 |
--------------------------------------------------------------------------------
/src/modules/CommunityAdmin/CommunityAdmin.type.ts:
--------------------------------------------------------------------------------
1 | export type DuplicateState = 'DEFAULT' | 'SUCCESS' | 'ERROR';
2 |
--------------------------------------------------------------------------------
/src/modules/CommunityProfile/CommunityLogoImage.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import { twMerge } from 'tailwind-merge';
3 |
4 | type LogoSize = 'small' | 'medium' | 'large';
5 | type CommunityLogoImageProps = {
6 | logoImageUrl?: string;
7 | size?: LogoSize;
8 | };
9 |
10 | const sizes: Record = {
11 | small: 'h-20pxr w-20pxr',
12 | medium: 'h-32pxr w-32pxr',
13 | large: 'h-60pxr w-60pxr',
14 | };
15 | export const CommunityLogoImage = ({ logoImageUrl, size = 'large' }: CommunityLogoImageProps) => {
16 | const logoSize = sizes[size];
17 | const defaultPlanetLogoImage = logoImageUrl || '/assets/images/default_planet_logo.png';
18 |
19 | return (
20 |
21 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/modules/CommunityProfile/CommunityProfile.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { CommunityBgImage } from './CommunityBgImage.client';
4 | import { CommunityProfile } from './CommunityProfile';
5 |
6 | const meta: Meta = {
7 | title: 'modules/CommunityProfile',
8 | component: CommunityProfile,
9 | };
10 |
11 | export default meta;
12 |
13 | type Story = StoryObj;
14 | export const CommunityProfileStory: Story = {
15 | render: () => (
16 |
21 | ),
22 | };
23 |
24 | export const CommunityBgImageStory: StoryObj = {
25 | render: () => (
26 |
37 | ),
38 | };
39 |
--------------------------------------------------------------------------------
/src/modules/CommunityProfile/CommunityProfile.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { CommunityDetailModel } from '~/types/community';
4 |
5 | import { CommunityLogoImage } from './CommunityLogoImage';
6 |
7 | type CommunityProfileProps = Pick<
8 | CommunityDetailModel,
9 | 'logoImageUrl' | 'description' | 'userCount'
10 | > & { top?: ReactNode };
11 |
12 | export const CommunityProfile = ({
13 | logoImageUrl,
14 | description,
15 | userCount,
16 | top,
17 | }: CommunityProfileProps) => {
18 | return (
19 |
20 | {top}
21 |
22 |
23 |
24 |
{`주민 ${userCount}명`}
25 |
{description}
26 |
27 |
28 |
23 | {/* eslint-disable-next-line @next/next/no-img-element */}
24 |
25 |
26 |
27 |
28 |
15 |
{title}
16 |
17 | {keywords.map((keyword: FormKeywordModel, index: number) => {
18 | return ;
19 | })}
20 |
21 |
16 |
{title}
17 | (
21 |
32 | )}
33 | />
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/modules/IdCardCreation/Step/LoadingStep.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Image from 'next/image';
4 |
5 | type LoadingStepProps = {
6 | planetName: string;
7 | };
8 |
9 | export const LoadingStep = ({ planetName }: LoadingStepProps) => {
10 | return (
11 |
12 |
{`${planetName}으로\n광속으로 이동중...`}
13 |
22 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/modules/IdCardCreation/Step/index.ts:
--------------------------------------------------------------------------------
1 | export * from './BoardingStep.client';
2 | export * from './CompleteStep.client';
3 | export * from './KeywordContentImage.client';
4 | export * from './KeywordContentStep.client';
5 | export * from './KeywordStep.client';
6 | export * from './LoadingStep.client';
7 | export * from './ProfileStep.client';
8 |
--------------------------------------------------------------------------------
/src/modules/IdCardCreation/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Form';
2 | export * from './IdCardCreationSteps';
3 | export * from './Step';
4 |
--------------------------------------------------------------------------------
/src/modules/IdCardDetail/KeywordContentCard.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { tw } from '~/utils/tailwind.util';
4 |
5 | type KeywordContentCardProps = {
6 | title: ReactNode | string;
7 | image: ReactNode | null;
8 | content: ReactNode | string;
9 | className?: string;
10 | onClick?: () => void;
11 | };
12 |
13 | export const KeywordContentCard = ({
14 | title,
15 | image,
16 | content,
17 | className,
18 | onClick,
19 | ...props
20 | }: KeywordContentCardProps) => {
21 | return (
22 |
23 |
{title}
24 |
25 | {image}
26 |
{content}
27 |
28 |
29 |
7 |
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/modules/LoginStep/LoginStep.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { LoginStep } from './index';
4 |
5 | const meta: Meta = {
6 | title: 'modules/LoginStep',
7 | component: LoginStep,
8 | args: {},
9 | };
10 |
11 | export default meta;
12 |
13 | type Story = StoryObj;
14 |
15 | export const Primary: Story = {
16 | render: () => ,
17 | };
18 |
--------------------------------------------------------------------------------
/src/modules/LoginStep/index.ts:
--------------------------------------------------------------------------------
1 | export * from './LoginStep.client';
2 |
--------------------------------------------------------------------------------
/src/modules/LoginStep/kakaoLoginButton.client.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import Image from 'next/image';
3 | import { ClientSafeProvider, signIn } from 'next-auth/react';
4 |
5 | type KakaoLoginButtonProps = {
6 | provider: ClientSafeProvider;
7 | };
8 |
9 | export const KakaoLoginButton = ({ provider }: KakaoLoginButtonProps) => {
10 | return (
11 |
12 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/modules/LoginStep/style.css:
--------------------------------------------------------------------------------
1 | .swiper-pagination-bullet {
2 | width: 8px !important;
3 | height: 8px !important;
4 | /* bg-grey-500 */
5 | background-color: #949494 !important;
6 | }
7 |
8 | .swiper-pagination-bullet-active {
9 | width: 28px !important;
10 | border-radius: 41px !important;
11 | /* bg-primary-500 */
12 | background-color: #5445ff !important;
13 | }
14 |
--------------------------------------------------------------------------------
/src/modules/Notification/Notification.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/react';
2 |
3 | import { createNotification, createNotificationList } from '~/mocks/notification/notification.mock';
4 |
5 | import { NotificationItem } from './NotificationItem';
6 | import { NotificationList } from './NotificationList';
7 | import { NotificationNoData } from './NotificationNoData';
8 |
9 | const meta: Meta = {
10 | title: 'modules/Notification',
11 | component: NotificationItem,
12 | args: {},
13 | };
14 |
15 | export default meta;
16 |
17 | const MOCK_NOTIFICATION = createNotification(123);
18 | export const Item = () => ;
19 |
20 | const MOCK_NOTIFICATIONS = createNotificationList(10, 1, 10);
21 | export const List = () => (
22 |
23 |
24 |
25 | );
26 |
27 | export const NoData = () => ;
28 |
--------------------------------------------------------------------------------
/src/modules/Notification/NotificationList.tsx:
--------------------------------------------------------------------------------
1 | import { NotificationModel } from '~/types/notification';
2 |
3 | import { NotificationItem } from './NotificationItem';
4 |
5 | type NotificationListProps = {
6 | notifications: NotificationModel[];
7 | notificationAgoList?: Record;
8 | };
9 | export const NotificationList = ({ notifications, notificationAgoList }: NotificationListProps) => {
10 | return (
11 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/modules/Notification/NotificationNoData.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | export const NotificationNoData = () => {
4 | return (
5 |
6 |
11 |
12 |
13 | 아직 알람이 없어요.
14 |
15 | 다른 주민들에게 먼저 말을 건네보세요.
16 |
17 |
18 |
19 | 받은 딩동
20 |
21 |
22 | {data?.nudgeInfoDtos.map((nudge, idx) => (
23 |
24 | ))}
25 |
26 |
27 |
28 |
16 |
26 |
12 |
router.push(`/planet/${DINGDONG_PLANET.DINGDONG_PLANET_ID}`)}
15 | >
16 | 딩동행성 둘러보기
17 |
18 |
19 |
22 |
23 |