From d5984127b07eb3e3d2be1bb8bd0faa83cb128c77 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:20:55 +0900 Subject: [PATCH 01/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20avatar=20x?= =?UTF-8?q?l=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=B6=94=EA=B0=80=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/avatar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/constants/avatar.ts b/src/constants/avatar.ts index 991c7b9c..4e6f7028 100644 --- a/src/constants/avatar.ts +++ b/src/constants/avatar.ts @@ -2,6 +2,7 @@ export const AVATAR_SIZE = { sm: 'h-[29px] w-[29px]', md: 'h-[38px] w-[38px]', lg: 'h-[56px] w-[56px]', + xl: 'h-[74px] w-[71px]', } as const; export type AvatarSize = keyof typeof AVATAR_SIZE; From b7125f3dd24232e5105c045f9e7aafdcf84f3664 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:21:29 +0900 Subject: [PATCH 02/19] =?UTF-8?q?=E2=9C=A8[Feat]=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/EditIcon.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 public/icons/EditIcon.tsx diff --git a/public/icons/EditIcon.tsx b/public/icons/EditIcon.tsx new file mode 100644 index 00000000..da762f81 --- /dev/null +++ b/public/icons/EditIcon.tsx @@ -0,0 +1,26 @@ +import { SVGProps } from 'react'; + +interface EditIconProps extends SVGProps { + width?: number; + height?: number; +} + +function EditIcon({ width = 7, height = 9, ...props }: EditIconProps) { + return ( + + + + ); +} + +export default EditIcon; From 9cde451b1517ad7d74971340c0ddea677300004b Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:22:50 +0900 Subject: [PATCH 03/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20className?= =?UTF-8?q?=EC=9D=84=20prop=EC=9C=BC=EB=A1=9C=20=EB=B0=9B=EC=95=84=20?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/Button.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index e2b2e042..0c7c6747 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { twMerge } from 'tailwind-merge'; import { BASE_CLASSES, COLOR_GROUPS, SIZE } from '@/constants'; -interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> { +export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> { text: string; size: 'large' | 'medium' | 'small' | 'modal'; fillType: 'solid' | 'outline' | 'lightSolid' | 'lightOutline'; @@ -13,6 +13,7 @@ interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> { | 'gray-normal-02' | 'gray-darker'; isSubmitting?: boolean; + className?: string; } export default function Button({ @@ -21,6 +22,7 @@ export default function Button({ fillType = 'solid', themeColor = 'green-normal-01', isSubmitting, + className, ...buttonProps }: ButtonProps) { const { disabled } = buttonProps; @@ -75,6 +77,7 @@ export default function Button({ baseClasses, variantClasses, isButtonDisabled && 'cursor-not-allowed', + className, ); return ( From 554d9fcc58048ea791d3bb43cc941cbc3b8a33aa Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:23:38 +0900 Subject: [PATCH 04/19] =?UTF-8?q?=E2=9C=A8[Feat]=20Modal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/Modal.tsx | 68 ++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/components/modal/Modal.tsx diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx new file mode 100644 index 00000000..7dc91672 --- /dev/null +++ b/src/components/modal/Modal.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import Button, { ButtonProps } from '../button/Button'; + +interface ModalProps { + isOpen: boolean; + onClose: () => void; + children: React.ReactNode; + title: string; + onConfirm: () => void; + cancelText: string; + confirmText: string; + cancelButtonProps?: Partial; + confirmButtonProps?: Partial; +} + +function Modal({ + isOpen, + onClose, + children, + title, + onConfirm, + cancelText, + confirmText, + cancelButtonProps, + confirmButtonProps, +}: ModalProps) { + if (!isOpen) return null; + + return ( +
+
+ +
+
+

{title}

+ +
+ +
{children}
+ +
+
+
+
+ ); +} + +export default Modal; From 74e6b145b2e86ae0403ef96b5d131dd1a842cd50 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:24:06 +0900 Subject: [PATCH 05/19] =?UTF-8?q?=E2=9C=A8[Feat]=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EA=B0=9C?= =?UTF-8?q?=EB=B0=9C=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/ProfileEditModal.tsx | 108 ++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 src/components/modal/ProfileEditModal.tsx diff --git a/src/components/modal/ProfileEditModal.tsx b/src/components/modal/ProfileEditModal.tsx new file mode 100644 index 00000000..8ff128a4 --- /dev/null +++ b/src/components/modal/ProfileEditModal.tsx @@ -0,0 +1,108 @@ +import { useState } from 'react'; +import { useAuthStore } from '@/store/authStore'; +import Avatar from '@/components/avatar/Avatar'; +import EditIcon from '../../../public/icons/EditIcon'; +import Modal from './Modal'; + +interface ProfileEditModalProps { + isOpen: boolean; + onClose: () => void; + onConfirm: (updatedData: ProfileData) => void; + profileData: ProfileData; +} + +interface ProfileData { + name: string; + companyName: string; + image?: string | null; +} + +function ProfileEditModal({ + isOpen, + onClose, + onConfirm, + profileData, +}: ProfileEditModalProps) { + const { user } = useAuthStore(); + const [formData, setFormData] = useState({ + name: profileData.name || user?.name || '', + companyName: profileData.companyName || user?.companyName || '', + image: profileData.image || user?.image || '/images/profile.png', + }); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleConfirm = () => { + onConfirm(formData); + }; + + const ProfileEditContent = () => ( +
+
+
+
+ +
+ +
+ +
+
+ 닉네임 + +
+
+ 회사명 + +
+
+
+
+ ); + + return ( + + + + ); +} + +export default ProfileEditModal; From fdbc3730b129cef319a120779bf945b419364df9 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:25:38 +0900 Subject: [PATCH 06/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/ProfileEditModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modal/ProfileEditModal.tsx b/src/components/modal/ProfileEditModal.tsx index 8ff128a4..76481ccc 100644 --- a/src/components/modal/ProfileEditModal.tsx +++ b/src/components/modal/ProfileEditModal.tsx @@ -90,7 +90,7 @@ function ProfileEditModal({ title="프로필 수정하기" onConfirm={handleConfirm} cancelText="취소하기" - confirmText="수정하" + confirmText="수정하기" cancelButtonProps={{ themeColor: 'gray-normal-03', fillType: 'lightSolid', From 47fe3a1eacb5a8ff1f8ae036a362183d7da935a8 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:32:00 +0900 Subject: [PATCH 07/19] =?UTF-8?q?=F0=9F=9A=9A[Rename]=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile/components}/ProfileEditModal.tsx | 4 ++-- src/features/profile/components/index.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) rename src/{components/modal => features/profile/components}/ProfileEditModal.tsx (96%) delete mode 100644 src/features/profile/components/index.ts diff --git a/src/components/modal/ProfileEditModal.tsx b/src/features/profile/components/ProfileEditModal.tsx similarity index 96% rename from src/components/modal/ProfileEditModal.tsx rename to src/features/profile/components/ProfileEditModal.tsx index 76481ccc..92844409 100644 --- a/src/components/modal/ProfileEditModal.tsx +++ b/src/features/profile/components/ProfileEditModal.tsx @@ -1,8 +1,8 @@ import { useState } from 'react'; import { useAuthStore } from '@/store/authStore'; import Avatar from '@/components/avatar/Avatar'; -import EditIcon from '../../../public/icons/EditIcon'; -import Modal from './Modal'; +import EditIcon from '../../../../public/icons/EditIcon'; +import Modal from '@/components/modal/Modal'; interface ProfileEditModalProps { isOpen: boolean; diff --git a/src/features/profile/components/index.ts b/src/features/profile/components/index.ts deleted file mode 100644 index cb0ff5c3..00000000 --- a/src/features/profile/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; From a79dcf8e59d6a1e07ff6e8726397b639c1985a12 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 20:16:43 +0900 Subject: [PATCH 08/19] =?UTF-8?q?=E2=9C=85[Test]=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EC=BD=94=EB=93=9C,=20storybook=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/Modal.stories.tsx | 38 ++++++++++++++++++ src/components/modal/Modal.test.tsx | 55 ++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 src/components/modal/Modal.stories.tsx create mode 100644 src/components/modal/Modal.test.tsx diff --git a/src/components/modal/Modal.stories.tsx b/src/components/modal/Modal.stories.tsx new file mode 100644 index 00000000..0e320e09 --- /dev/null +++ b/src/components/modal/Modal.stories.tsx @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import Modal from './Modal'; + +const meta: Meta = { + title: 'Components/Modal', + component: Modal, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + title: '모달 제목', + cancelText: '취소', + confirmText: '확인', + children: '모달 내용입니다.', + onClose: () => console.log('닫기 클릭'), + onConfirm: () => console.log('확인 클릭'), + }, +}; + +export const CustomButtons: Story = { + args: { + ...Default.args, + cancelButtonProps: { + themeColor: 'gray-darker', + }, + confirmButtonProps: { + themeColor: 'green-light-03', + }, + }, +}; diff --git a/src/components/modal/Modal.test.tsx b/src/components/modal/Modal.test.tsx new file mode 100644 index 00000000..b6546cf3 --- /dev/null +++ b/src/components/modal/Modal.test.tsx @@ -0,0 +1,55 @@ +import '@testing-library/jest-dom'; +import { render, screen, fireEvent } from '@testing-library/react'; +import Modal from './Modal'; + +describe('Modal 컴포넌트', () => { + const defaultProps = { + isOpen: true, + onClose: jest.fn(), + title: '테스트 모달', + onConfirm: jest.fn(), + cancelText: '취소', + confirmText: '확인', + children:
모달 내용
, + }; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('isOpen이 true일 때 모달이 렌더링되어야 함', () => { + render(); + + expect(screen.getByText('테스트 모달')).toBeInTheDocument(); + expect(screen.getByText('모달 내용')).toBeInTheDocument(); + expect(screen.getByText('취소')).toBeInTheDocument(); + expect(screen.getByText('확인')).toBeInTheDocument(); + }); + + it('isOpen이 false일 때 모달이 렌더링되지 않아야 함', () => { + render(); + + expect(screen.queryByText('테스트 모달')).not.toBeInTheDocument(); + }); + + it('닫기 버튼 클릭 시 onClose가 호출되어야 함', () => { + render(); + + fireEvent.click(screen.getByText('✕')); + expect(defaultProps.onClose).toHaveBeenCalledTimes(1); + }); + + it('취소 버튼 클릭 시 onClose가 호출되어야 함', () => { + render(); + + fireEvent.click(screen.getByText('취소')); + expect(defaultProps.onClose).toHaveBeenCalledTimes(1); + }); + + it('확인 버튼 클릭 시 onConfirm이 호출되어야 함', () => { + render(); + + fireEvent.click(screen.getByText('확인')); + expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1); + }); +}); From b577686a8f5ab1b44a0a7b5af13a8eae981cd4aa Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 20:35:23 +0900 Subject: [PATCH 09/19] =?UTF-8?q?=F0=9F=92=84[Design]=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=EB=90=9C=20=EC=83=89=EC=83=81=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/profile/components/ProfileEditModal.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/features/profile/components/ProfileEditModal.tsx b/src/features/profile/components/ProfileEditModal.tsx index 92844409..f7936455 100644 --- a/src/features/profile/components/ProfileEditModal.tsx +++ b/src/features/profile/components/ProfileEditModal.tsx @@ -92,11 +92,13 @@ function ProfileEditModal({ cancelText="취소하기" confirmText="수정하기" cancelButtonProps={{ - themeColor: 'gray-normal-03', + themeColor: 'gray-dark-01', + lightColor: 'gray-normal-01', fillType: 'lightSolid', }} confirmButtonProps={{ - themeColor: 'green-light-03', + themeColor: 'green-normal-01', + lightColor: 'green-light-03', fillType: 'lightSolid', }} > From 038f7c136ef3aa746e13823ee1613a39d9e81bfb Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 20:38:44 +0900 Subject: [PATCH 10/19] =?UTF-8?q?=F0=9F=92=84[Design]=20margin=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index 7dc91672..b69fc53c 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -30,7 +30,7 @@ function Modal({
-
+

{title}

From 5f0f647b54f868f30b6a8e63f1afa3fa8cbedf84 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 22:51:53 +0900 Subject: [PATCH 12/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=9C=84=EC=B9=98=20=EA=B0=80=EB=8F=85=EC=84=B1=20?= =?UTF-8?q?=EC=A2=8B=EA=B2=8C=20=EC=88=98=EC=A0=95=20#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile/components/ProfileEditModal.tsx | 68 +++++++++++-------- 1 file changed, 38 insertions(+), 30 deletions(-) diff --git a/src/features/profile/components/ProfileEditModal.tsx b/src/features/profile/components/ProfileEditModal.tsx index f7936455..2e0a95ff 100644 --- a/src/features/profile/components/ProfileEditModal.tsx +++ b/src/features/profile/components/ProfileEditModal.tsx @@ -4,42 +4,27 @@ import Avatar from '@/components/avatar/Avatar'; import EditIcon from '../../../../public/icons/EditIcon'; import Modal from '@/components/modal/Modal'; -interface ProfileEditModalProps { - isOpen: boolean; - onClose: () => void; - onConfirm: (updatedData: ProfileData) => void; - profileData: ProfileData; -} - interface ProfileData { name: string; companyName: string; image?: string | null; } -function ProfileEditModal({ - isOpen, - onClose, - onConfirm, - profileData, -}: ProfileEditModalProps) { - const { user } = useAuthStore(); - const [formData, setFormData] = useState({ - name: profileData.name || user?.name || '', - companyName: profileData.companyName || user?.companyName || '', - image: profileData.image || user?.image || '/images/profile.png', - }); - - const handleChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setFormData((prev) => ({ ...prev, [name]: value })); - }; - - const handleConfirm = () => { - onConfirm(formData); - }; +interface ProfileEditModalProps { + isOpen: boolean; + onClose: () => void; + onConfirm: (updatedData: ProfileData) => void; + profileData: ProfileData; +} - const ProfileEditContent = () => ( +function ProfileEditContent({ + formData, + handleChange, +}: { + formData: ProfileData; + handleChange: (e: React.ChangeEvent) => void; +}) { + return (
@@ -82,6 +67,29 @@ function ProfileEditModal({
); +} + +function ProfileEditModal({ + isOpen, + onClose, + onConfirm, + profileData, +}: ProfileEditModalProps) { + const { user } = useAuthStore(); + const [formData, setFormData] = useState({ + name: profileData.name || user?.name || '', + companyName: profileData.companyName || user?.companyName || '', + image: profileData.image || user?.image || '/images/profile.png', + }); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleConfirm = () => { + onConfirm(formData); + }; return ( - + ); } From 3000eb5062f182e288952ea930e930df168d1fc3 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 22:52:21 +0900 Subject: [PATCH 13/19] =?UTF-8?q?=E2=9C=A8[Feat]=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=ED=8F=89=EC=A0=90=20=ED=95=98=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20?= =?UTF-8?q?#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/ReviewHeartIcon.tsx | 40 ++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 public/icons/ReviewHeartIcon.tsx diff --git a/public/icons/ReviewHeartIcon.tsx b/public/icons/ReviewHeartIcon.tsx new file mode 100644 index 00000000..890dc462 --- /dev/null +++ b/public/icons/ReviewHeartIcon.tsx @@ -0,0 +1,40 @@ +import { SVGProps } from 'react'; + +interface ReviewHeartIconProps extends SVGProps { + width?: number; + height?: number; + isClicked: boolean; + onClick?: () => void; +} + +function ReviewHeartIcon({ + width = 20.1, + height = 17.48, + isClicked = false, + onClick, + ...props +}: ReviewHeartIconProps) { + return ( + + + + ); +} + +export default ReviewHeartIcon; From 540dcc3c99388b6e9b49cc4047debf3589ac2d67 Mon Sep 17 00:00:00 2001 From: Sungu Kim <108677235+haegu97@users.noreply.github.com> Date: Thu, 12 Dec 2024 22:52:44 +0900 Subject: [PATCH 14/19] =?UTF-8?q?=E2=9C=A8[Feat]=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EA=B0=9C=EB=B0=9C=20?= =?UTF-8?q?#141?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../profile/components/WriteReviewModal.tsx | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 src/features/profile/components/WriteReviewModal.tsx diff --git a/src/features/profile/components/WriteReviewModal.tsx b/src/features/profile/components/WriteReviewModal.tsx new file mode 100644 index 00000000..803717d8 --- /dev/null +++ b/src/features/profile/components/WriteReviewModal.tsx @@ -0,0 +1,101 @@ +'use client'; + +import React, { useState } from 'react'; +import Modal from '@/components/modal/Modal'; +import ReviewHeartIcon from '../../../../public/icons/ReviewHeartIcon'; + +const INITIAL_RATING = 5; +const RATING_RANGE = [1, 2, 3, 4, 5] as const; + +interface WriteReviewContentProps { + rating: number; + setRating: (rating: number) => void; + review: string; + setReview: (review: string) => void; +} + +interface WriteReviewModalProps { + isOpen: boolean; + onClose: () => void; + onConfirm: (rating: number, review: string) => void; +} +function WriteReviewContent({ + rating, + setRating, + review, + setReview, +}: WriteReviewContentProps) { + return ( +
+
+

+ 모임은 어떠셨나요? +

+
+ {RATING_RANGE.map((heart) => ( + + ))} +
+
+
+

+ 모임에 참여한 경험을 공유해주세요. +

+