fix(demo, bottle, ui): minor design issues (#85)

* fix(bottle): create profile steps * fix(e2e): update create profile e2e * fix(bottle): profile edit page items order * feat(ui): warning icon asset * feat(bottle): add guide carousel for kakao id step * fix(bottle): profile layout width * feat(demo): add iOS app store scheme link
Nexters · Nov 10, 2024 · bd649af · bd649af
1 parent 13aa1a9
commit bd649af
Show file tree

Hide file tree

Showing 16 changed files with 409 additions and 248 deletions.
diff --git a/apps/bottle/src/app/intro/create/page.tsx b/apps/bottle/src/app/intro/create/page.tsx
@@ -32,7 +32,7 @@ export default function CreateIntroPage() {
     () => [
       <ProfileLayout key={0}>
         <GradientBackground />
-        <ProfileLayout.Contents style={{ padding: '0 16px', position: 'absolute', top: 48, left: 0 }}>
+        <ProfileLayout.Contents style={{ padding: '0 16px', position: 'absolute', top: 48, left: 0, width: '100%' }}>
           <Stepper current={1} max={MAX_STEPS} />
           <Questions
             onNext={answers => {

diff --git a/apps/bottle/src/app/profile/create/page.tsx b/apps/bottle/src/app/profile/create/page.tsx
@@ -3,23 +3,21 @@
 import { Header } from '@/components/common/header';
 import { Stepper } from '@/components/common/stepper';
 import { MBTI } from '@/components/profile/MBTI';
-import { Alcohol } from '@/components/profile/alcohol';
 import { Height } from '@/components/profile/height';
 import { Interests } from '@/components/profile/interests';
 import { Job } from '@/components/profile/job';
 import { KakaoId } from '@/components/profile/kakao-id';
 import { Keywords } from '@/components/profile/keywords';
 import { ProfileLayout } from '@/components/profile/layout';
 import { Region } from '@/components/profile/region';
-import { Religion } from '@/components/profile/religion';
-import { Smoking } from '@/components/profile/smoking';
 import { useFunnel } from '@/features/funnel';
 import { Profile } from '@/models/profile';
 import { User } from '@/models/user';
 import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
 import { useRouter } from 'next/navigation';
+import { useMemo } from 'react';
 
-const MAX_STEPS = 10;
+const MAX_STEPS = 7;
 
 type CreateProfileFunnelValues = Profile & Pick<User, 'kakaoId'>;
 
@@ -29,137 +27,101 @@ export default function CreateProfilePage() {
   const { onNextStep, currentStep, getValue, getValues } = useFunnel<CreateProfileFunnelValues>('/profile/create');
   const { mutate } = useProfileMutation({ type: 'create' });
 
-  const steps = [
-    <ProfileLayout key={1}>
-      <Header />
-      <ProfileLayout.Contents>
-        <Stepper current={1} max={MAX_STEPS} />
-        <MBTI
-          initialValue={getValue('mbti')}
-          onNext={mbti => {
-            onNextStep('mbti', mbti);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={2}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={2} max={MAX_STEPS} />
-        <Keywords
-          initialValue={getValue('keyword')}
-          onNext={keyword => {
-            onNextStep('keyword', keyword);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={3}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={3} max={MAX_STEPS} />
-        <Interests
-          initialValue={getValue('interest')}
-          onNext={interest => {
-            onNextStep('interest', interest);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={4}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={4} max={MAX_STEPS} />
-        <Job
-          initialValue={getValue('job')}
-          onNext={job => {
-            onNextStep('job', job);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={5}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={5} max={MAX_STEPS} />
-        <Height
-          initialValue={getValue('height')}
-          onNext={height => {
-            onNextStep('height', height);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={6}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={6} max={MAX_STEPS} />
-        <Smoking
-          initialValue={getValue('smoking')}
-          onNext={smoking => {
-            onNextStep('smoking', smoking);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={7}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={7} max={MAX_STEPS} />
-        <Alcohol
-          initialValue={getValue('alcohol')}
-          onNext={alcohol => {
-            onNextStep('alcohol', alcohol);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={8}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={8} max={MAX_STEPS} />
-        <Religion
-          initialValue={getValue('religion')}
-          onNext={religion => {
-            onNextStep('religion', religion);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={9}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={9} max={MAX_STEPS} />
-        <Region
-          initialValue={getValue('region')}
-          onNext={region => {
-            onNextStep('region', region);
-          }}
-          ctaButtonText="다음"
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-    <ProfileLayout key={10}>
-      <Header onGoBack={router.back} />
-      <ProfileLayout.Contents>
-        <Stepper current={10} max={MAX_STEPS} />
-        <KakaoId
-          initialValue={getValue('kakaoId')}
-          onNext={kakaoId => {
-            mutate({ ...(getValues() as Profile), kakaoId });
-          }}
-        />
-      </ProfileLayout.Contents>
-    </ProfileLayout>,
-  ];
+  const newSteps = useMemo(
+    () => [
+      <ProfileLayout key={1}>
+        <Header onGoBack={router.back} />
+        <ProfileLayout.Contents>
+          <Stepper current={1} max={MAX_STEPS} />
+          <Job
+            initialValue={getValue('job')}
+            onNext={job => {
+              onNextStep('job', job);
+            }}
+            ctaButtonText="다음"
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+      <ProfileLayout key={2}>
+        <Header onGoBack={router.back} />
+        <ProfileLayout.Contents>
+          <Stepper current={2} max={MAX_STEPS} />
+          <Height
+            initialValue={getValue('height')}
+            onNext={height => {
+              onNextStep('height', height);
+            }}
+            ctaButtonText="다음"
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+      <ProfileLayout key={3}>
+        <Header onGoBack={router.back} />
+        <ProfileLayout.Contents>
+          <Stepper current={3} max={MAX_STEPS} />
+          <Region
+            initialValue={getValue('region')}
+            onNext={region => {
+              onNextStep('region', region);
+            }}
+            ctaButtonText="다음"
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+      <ProfileLayout key={4}>
+        <Header />
+        <ProfileLayout.Contents>
+          <Stepper current={4} max={MAX_STEPS} />
+          <MBTI
+            initialValue={getValue('mbti')}
+            onNext={mbti => {
+              onNextStep('mbti', mbti);
+            }}
+            ctaButtonText="다음"
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+      <ProfileLayout key={5}>
+        <Header onGoBack={router.back} />
+        <ProfileLayout.Contents>
+          <Stepper current={5} max={MAX_STEPS} />
+          <Keywords
+            initialValue={getValue('keyword')}
+            onNext={keyword => {
+              onNextStep('keyword', keyword);
+            }}
+            ctaButtonText="다음"
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+      <ProfileLayout key={6}>
+        <Header onGoBack={router.back} />
+        <ProfileLayout.Contents>
+          <Stepper current={6} max={MAX_STEPS} />
+          <Interests
+            initialValue={getValue('interest')}
+            onNext={interest => {
+              onNextStep('interest', interest);
+            }}
+            ctaButtonText="다음"
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+      <ProfileLayout key={7}>
+        <Header onGoBack={router.back} />
+        <ProfileLayout.Contents>
+          <Stepper current={7} max={MAX_STEPS} />
+          <KakaoId
+            initialValue={getValue('kakaoId')}
+            onNext={kakaoId => {
+              mutate({ ...(getValues() as Profile), kakaoId });
+            }}
+          />
+        </ProfileLayout.Contents>
+      </ProfileLayout>,
+    ],
+    [getValue, getValues, mutate, onNextStep, router.back]
+  );
 
-  return <>{steps[currentStep - 1]}</>;
+  return <>{newSteps[currentStep - 1]}</>;
 }
diff --git a/apps/bottle/src/app/profile/edit/ProfileArea.tsx b/apps/bottle/src/app/profile/edit/ProfileArea.tsx
@@ -7,6 +7,8 @@ import Link from 'next/link';
 import { useMemo } from 'react';
 import { profileItemLeftStyle, profileItemStyle, profileSelectListStyle } from './profileEditStyle.css';
 
+const NOT_SELECTED_DESCRIPTION = '아직 작성하지 않았어요';
+
 export function ProfileArea() {
   const {
     data: {
@@ -28,6 +30,21 @@ export function ProfileArea() {
   const editProfileItems = useMemo(
     () => [
       { title: '카카오톡 아이디', description: kakaoId, endpoint: '/profile/edit/kakao-id' },
+      {
+        title: '직업 · 직무',
+        description: job,
+        endpoint: '/profile/edit/job',
+      },
+      {
+        title: '키',
+        description: `${height}cm`,
+        endpoint: '/profile/edit/height',
+      },
+      {
+        title: '지역',
+        description: `${city} ${state}`,
+        endpoint: '/profile/edit/region',
+      },
       {
         title: '나의 성격',
         description: mbti,
@@ -48,36 +65,21 @@ export function ProfileArea() {
         ].join(', '),
         endpoint: '/profile/edit/interests',
       },
-      {
-        title: '직업 · 직무',
-        description: job,
-        endpoint: '/profile/edit/job',
-      },
-      {
-        title: '키',
-        description: `${height}cm`,
-        endpoint: '/profile/edit/height',
-      },
       {
         title: '흡연 스타일',
-        description: smoking,
+        description: smoking ?? NOT_SELECTED_DESCRIPTION,
         endpoint: '/profile/edit/smoking',
       },
       {
         title: '음주 스타일',
-        description: alcohol,
+        description: alcohol ?? NOT_SELECTED_DESCRIPTION,
         endpoint: '/profile/edit/alcohol',
       },
       {
         title: '종교',
-        description: religion,
+        description: religion ?? NOT_SELECTED_DESCRIPTION,
         endpoint: '/profile/edit/religion',
       },
-      {
-        title: '지역',
-        description: `${city} ${state}`,
-        endpoint: '/profile/edit/region',
-      },
     ],
     [mbti, keyword, kakaoId, culture, sports, entertainment, job, height, smoking, alcohol, religion, city, state, etc]
   );

diff --git a/apps/bottle/src/components/common/selected-profile/index.tsx b/apps/bottle/src/components/common/selected-profile/index.tsx
@@ -30,7 +30,12 @@ export function SelectedProfileImpl({
   },
   items,
 }: Props) {
-  const basicInformation = [job, mbti, city, `${height}cm`, smoking, alcohol];
+  const basicInformation =
+    smoking != null && alcohol != null
+      ? [job, mbti, city, `${height}cm`, smoking, alcohol]
+      : smoking != null
+        ? [job, mbti, city, `${height}cm`, smoking]
+        : [job, mbti, city, `${height}cm`];
   const personalities = keyword;
   const hobbies = [
     ...Object.values(culture),

diff --git a/apps/bottle/src/components/intro/questions/index.tsx b/apps/bottle/src/components/intro/questions/index.tsx
@@ -54,6 +54,7 @@ export function Questions({ onNext, ctaButtonText }: Props) {
           flexDirection: 'column',
           margin: `${spacings.xxl} 0`,
           gap: spacings.xxl,
+          width: '100%',
         }}
       >
         <QuestionCard