[DESIGN] 테스트 결과 전체 유형 UI 구현

src/app/test/result/_components/ResultContents.tsx

@@ -24,7 +24,7 @@ const ResultContents = () => {
       <main className="pb-10">
         <section className="flex flex-col items-center justify-center">
           {/* TODO : 컴포넌트 분리 예정 */}
-          <article className="my-4xs flex w-full px-2xs ">
+          <article className="my-4xs flex w-full px-2xs">
             <div className="flex w-full flex-col items-center justify-center  rounded-xl border  border-gray-100 py-xs">
               <Typography type="body2" className="mb-5xs w-[240px] text-center text-gray-1000">
                 &quot;단체 플래시샷 1인분 책임질게요&quot;
@@ -43,19 +43,23 @@ const ResultContents = () => {
             <ShareBox id={1} />
           </article>
           <div className="flex w-full gap-4xs px-2xs">
-            <Button width="full" className="bg-primary-200 text-primary-800 ">
-              테스트 다시 하기
-            </Button>
-            <Button width="full" variant="secondary">
-              전체 유형 보러가기
-            </Button>
+            <Link href="/test" className="w-full">
+              <Button width="full" className="bg-primary-200 text-primary-800 ">
+                테스트 다시 하기
+              </Button>
+            </Link>
+            <Link href="/test/result/total" className="w-full">
+              <Button width="full" variant="secondary">
+                전체 유형 보러가기
+              </Button>
+            </Link>
           </div>
 
           <article className="w-full px-2xs pt-lg">
             <div className="flex  flex-col items-center gap-3xs">
               <Typography type="heading3">투표로 더 많은 논쟁을 해결해봐요</Typography>
               <VoteCard className="w-full border-b-0">
-                <VoteCard.Header categories="축의금" remainingDay={1} />
+                <VoteCard.Header categories="축의금" remainingDay={{ hour: 0, day: 1 }} />
                 <VoteCard.Description
                   title="갑자기 연락온 동창 축의금 얼마할까요? 고민됩니다."
                   content="제목 그대로 학창시절 조금 친했던 친구였는데요. 서로 하고 지내다가 최근에 연락이 되었어요. 옛날 생각이 나.."

src/app/test/result/total/page.tsx

@@ -0,0 +1,105 @@
+import Image from 'next/image';
+
+import { Header } from '@/components/layout/header';
+import { Typography } from '@/foundations/typography';
+
+const TotalPage = () => {
+  return (
+    <>
+      <Header>
+        <Header.Previous />
+        <Header.Text text="전체유형" />
+        {/* //FIXME : 고쳐주세요 */}
+        <Header.Text text=" " />
+      </Header>
+
+      <section className="pb-10">
+        {RESULT_TYPE_LIST.map((resultType) => {
+          console.log('resultType', resultType);
+          return (
+            <article className="my-4xs flex w-full px-2xs" key={resultType.id}>
+              <div className="flex w-full items-center rounded-xl border border-gray-100 p-3xs">
+                <div className="flex w-full items-center justify-center">
+                  <Typography type="heading2" className="pr-xs 390:pr-3xs">
+                    {resultType.id}
+                  </Typography>
+                  <div className="flex w-full flex-1 justify-between">
+                    <div className="flex flex-col gap-4xs">
+                      <div>
+                        <Typography type="heading3">{resultType.text.firstLine}</Typography>
+                        <Typography type="heading3" className="text-primary-800">
+                          {resultType.text.secondLine}
+                        </Typography>
+                      </div>
+                      <div>
+                        <Typography type="body3" className="text-gray-500">
+                          {resultType.text.firstHash}
+                        </Typography>
+                        <Typography type="body3" className="text-gray-500">
+                          {resultType.text.secondHash}
+                        </Typography>
+                      </div>
+                    </div>
+
+                    <Image
+                      src={resultType.image}
+                      alt="first_small_result_type"
+                      width={100}
+                      height={125}
+                    />
+                  </div>
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </section>
+    </>
+  );
+};
+
+export default TotalPage;
+
+// 임시 상수 설정입니다. constant에 만들었으나 undefined 에러가 나서 우선 이 파일에서 선언하였습니다.
+const RESULT_TYPE_LIST = [
+  {
+    id: 1,
+    image: '/images/firstSmallResultType.png',
+    text: {
+      firstLine: '내 결혼식날',
+      secondLine: '나타나지 않을 원수',
+      firstHash: '#축하_이모티콘_한_큰술',
+      secondHash: '#불참이지만_괜찮아',
+    },
+  },
+  {
+    id: 2,
+    image: '/images/secondSmallResultType.png',
+    text: {
+      firstLine: '내 결혼식날 자리에서',
+      secondLine: '유튜브만 볼 남남',
+      firstHash: '#최소한_성의표시만',
+      secondHash: '#이구역_프로참석러',
+    },
+  },
+  {
+    id: 3,
+    image: '/images/thirdSmallResultType.png',
+    text: {
+      firstLine: '내 결혼식날 단체사진',
+      secondLine: '플래시를 켜 줄 지인',
+      firstHash: '#식사값은_낼게요',
+      secondHash: '#단체사진_1인분',
+    },
+  },
+  {
+    id: 4,
+    image: '/images/forthSmallResultType.png',
+    text: {
+      firstLine: '내 결혼식날 내 부모님',
+      secondLine: '뒷자리에 앉을 친구',
+      firstHash: '#아낌없이_주는_축의금',
+      secondHash: '#둘도없는사이',
+    },
+  },
+];

src/constants/index.ts

@@ -1 +1,2 @@
 export { META } from './metadata';
+

src/constants/test/index.ts

@@ -1,3 +1,4 @@
 export { QUESTIONS_ORDERS_LENGTH } from './progress';
+
 export { QUESTIONS, QUESTIONS_ORDERS } from './step';