From acfcb0d8b4cb382f321975809bebf5b620e35d15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Mon, 15 Jul 2024 23:41:18 +0900
Subject: [PATCH] feat(entity/idealPartner): add ideal partner profile

---
 .../api/__mock__/idealPartner.mock.ts         | 18 ++++++
 .../IdealPartnerProfile.stories.ts            | 16 +++++
 .../IdealPartnerProfile.tsx                   | 64 +++++++++++++++++++
 .../profile/ui/MyProfile/MyProfile.tsx        | 45 ++++++-------
 .../ui/Profile/Profile.module.css}            |  1 -
 src/shared/ui/Profile/ProfileCellHeader.tsx   | 11 ++++
 6 files changed, 127 insertions(+), 28 deletions(-)
 create mode 100644 src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts
 create mode 100644 src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.stories.ts
 create mode 100644 src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx
 rename src/{entities/profile/ui/MyProfile/MyProfile.module.css => shared/ui/Profile/Profile.module.css} (96%)
 create mode 100644 src/shared/ui/Profile/ProfileCellHeader.tsx

diff --git a/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts b/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts
new file mode 100644
index 0000000..22d7ce7
--- /dev/null
+++ b/src/entities/ideal_partner/api/__mock__/idealPartner.mock.ts
@@ -0,0 +1,18 @@
+import { IdealPartner } from 'src/entities/ideal_partner/model/idealPartnerStore';
+
+export const MockIdealPartner: IdealPartner = {
+  ageRange: { max: 25, min: 20 },
+  drinking: { drinkingAmount: '주 1-2회 가볍게는 괜찮아요', drinkingCategory: '' },
+  heightRange: { max: 180, min: 175 },
+  hobbies: [{ name: '맛집탐방' }, { name: '뜨개질' }],
+  images: [],
+  locations: [
+    { city: { cityName: '서울시', city: 'SEOUL' }, town: [{ town: 'GANGNAM', townName: '강남구' }] },
+    { city: { cityName: '경기도', city: 'RUDRL' }, town: [{ town: 'SUWON', townName: '수원시' }] },
+  ],
+  religion: { religionCategory: 'NONE', religionName: '' },
+  requiredOptions: [],
+  smoking: { smokingAmount: '', smokingCategory: 'NON_SMOKER' },
+  style: '눈이 크신 분',
+  toMatchMaker: '잘 부탁드립니다 !',
+};
diff --git a/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.stories.ts b/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.stories.ts
new file mode 100644
index 0000000..31c32ce
--- /dev/null
+++ b/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.stories.ts
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IdealPartnerProfile } from 'src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile';
+import { MockIdealPartner } from 'src/entities/ideal_partner/api/__mock__/idealPartner.mock';
+
+const meta: Meta<typeof IdealPartnerProfile> = {
+  component: IdealPartnerProfile,
+};
+
+export default meta;
+type Story = StoryObj<typeof IdealPartnerProfile>;
+
+export const Default: Story = {
+  args: {
+    profile: MockIdealPartner,
+  },
+};
diff --git a/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx b/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx
new file mode 100644
index 0000000..057790d
--- /dev/null
+++ b/src/entities/ideal_partner/ui/IdealPartnerProfile/IdealPartnerProfile.tsx
@@ -0,0 +1,64 @@
+import { IdealPartner } from 'src/entities/ideal_partner/model/idealPartnerStore';
+import { AvatarList } from 'src/shared/ui/AvatarList/AvatarList';
+import { Chip } from 'src/shared/ui/Chip/Chip';
+import { ProfileCellHeader } from 'src/shared/ui/Profile/ProfileCellHeader';
+import styles from 'src/shared/ui/Profile/Profile.module.css';
+
+export const IdealPartnerProfile = ({ profile }: { profile: IdealPartner }) => {
+  return (
+    <section className={styles.Grid}>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'선호하는 연령대'} />
+        <span>
+          {profile.ageRange.min}-{profile.ageRange.max}
+        </span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'선호하는 키'} />
+        <span>
+          {profile.heightRange.min}-{profile.heightRange.max}
+        </span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'선호하는 스타일'} />
+        <span>{profile.style}</span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'이상형 참고 사진'} />
+        <span>
+          <AvatarList files={profile.images} />
+        </span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'희망 지역'} />
+        <span>
+          {profile.locations.map(({ city, town }) => town.map((t) => `${city.cityName} ${t.townName}`)).join(', ')}
+        </span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'취미'} />
+        <div className={styles.HorizontalList}>
+          {profile.hobbies.map((hobby) => (
+            <Chip key={hobby.name}>{hobby.name}</Chip>
+          ))}
+        </div>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'종교'} />
+        <span>{profile.religion.religionCategory}</span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'음주 빈도'} />
+        <span>{profile.drinking.drinkingCategory}</span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'흡연여부'} />
+        <span>{profile.smoking.smokingCategory}</span>
+      </div>
+      <div className={styles.Cell}>
+        <ProfileCellHeader title={'주선자에게 전달하고 싶은 말'} />
+        <span>{profile.toMatchMaker}</span>
+      </div>
+    </section>
+  );
+};
diff --git a/src/entities/profile/ui/MyProfile/MyProfile.tsx b/src/entities/profile/ui/MyProfile/MyProfile.tsx
index 0db484a..de4995f 100644
--- a/src/entities/profile/ui/MyProfile/MyProfile.tsx
+++ b/src/entities/profile/ui/MyProfile/MyProfile.tsx
@@ -1,31 +1,31 @@
 import { Accordion } from 'src/shared/ui/Accordion/Accordion';
-import { Edit } from 'src/shared/ui/icons';
-import styles from './MyProfile.module.css';
+import styles from 'src/shared/ui/Profile/Profile.module.css';
 import { Spacing } from 'src/shared/ui/Spacing/Spacing';
 import { Chip } from 'src/shared/ui/Chip/Chip';
 import { MyProfile } from 'src/entities/profile/model/myProfileStore';
 import { calculateAge } from 'src/shared/vo/date';
 import { AvatarList } from 'src/shared/ui/AvatarList/AvatarList';
+import { ProfileCellHeader } from 'src/shared/ui/Profile/ProfileCellHeader';
 
 export const MyProfileView = ({ profile }: { profile: MyProfile }) => {
   return (
-    <>
+    <section>
       <Accordion summary={'기본 개인정보'} initialOpen>
         <Spacing size={32} />
         <div className={styles.Grid}>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'이름'} />
+              <ProfileCellHeader title={'이름'} />
               <span>{profile.name}</span>
             </div>
             <div className={styles.Cell}>
-              <Header title={'성별'} />
+              <ProfileCellHeader title={'성별'} />
               <span>{profile.gender}</span>
             </div>
           </div>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'나이'} />
+              <ProfileCellHeader title={'나이'} />
               <span>
                 {calculateAge(
                   new Date(`${profile.birthDate.year}-${profile.birthDate.month}-${profile.birthDate.date}`),
@@ -34,23 +34,23 @@ export const MyProfileView = ({ profile }: { profile: MyProfile }) => {
               </span>
             </div>
             <div className={styles.Cell}>
-              <Header title={'키(신장)'} />
+              <ProfileCellHeader title={'키(신장)'} />
               <span>{profile.height}cm</span>
             </div>
           </div>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'MBTI'} />
+              <ProfileCellHeader title={'MBTI'} />
               <span>{profile.mbti}</span>
             </div>
             <div className={styles.Cell}>
-              <Header title={'종교'} />
+              <ProfileCellHeader title={'종교'} />
               <span>{profile.religion.religionCategory}</span>
             </div>
           </div>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'업로드 사진'} />
+              <ProfileCellHeader title={'업로드 사진'} />
               <div className={styles.HorizontalList}>
                 <AvatarList files={profile.images} />
               </div>
@@ -58,13 +58,13 @@ export const MyProfileView = ({ profile }: { profile: MyProfile }) => {
           </div>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'신분'} />
+              <ProfileCellHeader title={'신분'} />
               <span>{profile.job.jobCategory}</span>
             </div>
           </div>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'주로 머무는 지역'} />
+              <ProfileCellHeader title={'주로 머무는 지역'} />
               <span>{profile.location.map((loc) => `${loc.city.cityName} ${loc.town[0].townName}`).join(', ')}</span>
             </div>
           </div>
@@ -76,7 +76,7 @@ export const MyProfileView = ({ profile }: { profile: MyProfile }) => {
         <div className={styles.Grid}>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'취미'} />
+              <ProfileCellHeader title={'취미'} />
               <div className={styles.HorizontalList}>
                 {profile.hobbies.map((hob) => (
                   <Chip key={hob.name}>{hob.name}</Chip>
@@ -86,16 +86,16 @@ export const MyProfileView = ({ profile }: { profile: MyProfile }) => {
           </div>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'흡연여부'} />
+              <ProfileCellHeader title={'흡연여부'} />
               <span>{profile.smoking}</span>
             </div>
             <div className={styles.Cell}>
-              <Header title={'음주 빈도'} />
+              <ProfileCellHeader title={'음주 빈도'} />
               <span>{profile.drinking}</span>
             </div>
           </div>
           <div className={styles.Cell}>
-            <Header title={'자기 소개'} />
+            <ProfileCellHeader title={'자기 소개'} />
             <span>{profile.introduction}</span>
           </div>
         </div>
@@ -106,21 +106,12 @@ export const MyProfileView = ({ profile }: { profile: MyProfile }) => {
         <div className={styles.Grid}>
           <div className={styles.GridRow}>
             <div className={styles.Cell}>
-              <Header title={'반려동물'} />
+              <ProfileCellHeader title={'반려동물'} />
               <span>강아지</span>
             </div>
           </div>
         </div>
       </Accordion>
-    </>
-  );
-};
-
-const Header = ({ title }: { title: string }) => {
-  return (
-    <div className={styles.CellHeader}>
-      <span className={styles.CellHeaderTitle}>{title}</span>
-      <Edit width={15} height={15} />
-    </div>
+    </section>
   );
 };
diff --git a/src/entities/profile/ui/MyProfile/MyProfile.module.css b/src/shared/ui/Profile/Profile.module.css
similarity index 96%
rename from src/entities/profile/ui/MyProfile/MyProfile.module.css
rename to src/shared/ui/Profile/Profile.module.css
index 339350d..34526ec 100644
--- a/src/entities/profile/ui/MyProfile/MyProfile.module.css
+++ b/src/shared/ui/Profile/Profile.module.css
@@ -31,7 +31,6 @@
     display: flex;
     overflow-x: auto;
     gap: 8px;
-    height: 72px;
 
     & > * {
         flex-shrink: 0;
diff --git a/src/shared/ui/Profile/ProfileCellHeader.tsx b/src/shared/ui/Profile/ProfileCellHeader.tsx
new file mode 100644
index 0000000..1c539fb
--- /dev/null
+++ b/src/shared/ui/Profile/ProfileCellHeader.tsx
@@ -0,0 +1,11 @@
+import styles from './Profile.module.css';
+import { Edit } from 'src/shared/ui/icons';
+
+export const ProfileCellHeader = ({ title }: { title: string }) => {
+  return (
+    <div className={styles.CellHeader}>
+      <span className={styles.CellHeaderTitle}>{title}</span>
+      <Edit width={15} height={15} />
+    </div>
+  );
+};