💄 메인 페이지 UI 반영

dnd-side-project · Mar 30, 2024 · fc1b0c7 · fc1b0c7
1 parent c0d556f
commit fc1b0c7
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/src/app/test/_components/TestHomePage.tsx b/src/app/test/_components/TestHomePage.tsx
@@ -1,7 +1,4 @@
-import Image from 'next/image';
-
-import LogoImage from '@/assets/images/logo.png';
-import { default as WorryImage } from '@/assets/images/test-worry.png';
+import MainLogo from '@/assets/images/mainLogo.svg';
 import { Button } from '@/components/common/button';
 import { Input } from '@/components/common/input';
 import { Typography } from '@/components/common/typography';
@@ -37,28 +34,39 @@ const TestHomePage = () => {
         <Header.IconLink href="/mypage" icon="mypage" />
       </Header>
 
-      <main className="flex size-full flex-col items-center px-2xs">
-        <div className="flex h-full flex-col items-center justify-evenly">
-          <div className="flex flex-col items-center gap-4xs">
-            <Image src={LogoImage} width={150} height={91} alt="logo" priority />
-            <Typography type="title1">축의금 결정이 너무 어려웠나요?</Typography>
+      <main className="flex size-full flex-col items-center">
+        <div className="flex flex-col items-center justify-center py-sm">
+          <h1 className="text-[32px] font-semibold">축의금 얼마 내지?</h1>
+          <div className="h-md  rounded-md border-2 border-primary-700 text-center">
+            <div className="flex items-center justify-between gap-2 px-4xs text-[24px] font-bold leading-[145%] text-primary-700">
+              <span>₩</span>
+              <p>??,???</p>
+            </div>
           </div>
-
-          <div className="flex flex-col items-center gap-xs">
-            <Image src={WorryImage} width={275} alt="logo" priority />
+          <Typography type="title4" className="pt-4xs text-gray-500">
+            상대와의 친밀도 알아보고 축의금 결정해보세요
+          </Typography>
+        </div>
+        <section className=" flex w-full flex-1 flex-col items-center">
+          <MainLogo width="100%" height="70%" />
+          <div className="w-[70%]">
             <Input
               type="fit"
               placeholder=" 상대 이름을 입력해주세요"
-              className="text-center"
+              className="text-center placeholder:text-gray-1000"
+              bgcolor="lightGray"
               value={test.buddy}
               onChange={(e) => dispatch({ type: 'setBuddyName', value: e.target.value })}
               onKeyUp={handleOnKeyEnter}
             />
           </div>
-        </div>
-        <Button width="full" onClick={handleTestFormInvalid}>
-          테스트하고 축의금 알아보기
-        </Button>
+        </section>
+
+        <footer className="w-full px-2xs">
+          <Button width="full" onClick={handleTestFormInvalid}>
+            테스트하고 축의금 알아보기
+          </Button>
+        </footer>
       </main>
     </div>
   );