[feat] 하단 상세안내와 경품안내 컴포넌트 구현

package.json

@@ -36,11 +36,12 @@
     "postcss": "^8.4.39",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.6",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
   }
-}
+}

src/interactions/GiftDetail.jsx

@@ -1,3 +1,37 @@
-export default function GiftDetail() {
-  return <div></div>;
+import Star from "./star.svg?react";
+
+export default function GiftDetail({ contentList }) {
+  return (
+    <div className="flex flex-col font-bold">
+      <span className="text-body-l text-neutral-50 pb-10">경품 안내</span>
+
+      {contentList.map((content, index) => (
+        <div key={index} className="bg-neutral-900 p-6 mb-5 flex z-0 relative">
+          <img src={content.src} alt="경품" />
+
+          <div className="pl-8 flex flex-col">
+            <span className="text-body-l text-white">
+              {content.name}
+              <span className="text-blue-400 pl-2">{content.num}명</span>
+            </span>
+
+            <span className="pt-2 text-body-m text-neutral-400 whitespace-pre-wrap">
+              {content.desc}
+            </span>
+          </div>
+
+          <div className="absolute right-0 top-0 z-40 translate-x-1/2 -translate-y-1/3">
+            <Star fill={content.starColor} />
+
+            <span
+              style={{ color: content.starTextColor }}
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-body-s"
+            >
+              {content.star}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 }

src/interactions/IntroductionDetail.jsx

@@ -1,9 +1,9 @@
-export default function IntroductionDetail() {
+export default function IntroductionDetail({ contentList }) {
   return (
     <div className="flex flex-col">
-      <span className="text-body-l text-neutral-50 font-bold">상세 안내</span>
+      <span className="text-body-l pb-10 text-neutral-50 font-bold">상세 안내</span>
 
-      <div className="mt-10 flex gap-5">
+      <div className="flex gap-5">
         <div className="bg-neutral-900 p-6 flex flex-col font-bold">
           <span className="text-body-m text-neutral-300">이벤트 기간</span>
 
@@ -30,16 +30,25 @@ export default function IntroductionDetail() {
         </div>
       </div>
 
-      <div className="mt-5 p-6 bg-neutral-900 flex flex-col">
-        <span className="text-body-m text-neutral-300 font-bold">참여방법</span>
-
-        <div className="pt-6">
-          <span className="bg-neutral-100 text-neutral-900 text-body-s px-2 py-0.5 rounded-[4px]">
-            1
-          </span>
-
-          <span className=""></span>
-        </div>
+      <div className="mt-5 p-6 bg-neutral-900 flex flex-col font-bold">
+        <span className="pb-6 text-body-m text-neutral-300">참여방법</span>
+
+        {contentList.map((contentSubList, index) => (
+          <div key={index} className="mt-[9px]">
+            <span className="bg-neutral-100 text-neutral-900 text-body-s px-2 py-0.5 rounded-[4px] mr-4">
+              {index + 1}
+            </span>
+
+            {contentSubList.map((content, index) => (
+              <span
+                key={index}
+                className={`${index % 2 ? "text-neutral-400" : "text-white"} text-body-m`}
+              >
+                {content}
+              </span>
+            ))}
+          </div>
+        ))}
       </div>
     </div>
   );

src/interactions/TabBar.jsx

@@ -0,0 +1,49 @@
+export default function TarBar({
+  currentInteraction,
+  setCurrentInteraction,
+  isJoinedList,
+}) {
+  return (
+    <>
+      <span className="py-5 text-body-l text-neutral-200 font-bold items-center border-b-[3px] border-b-neutral-400">
+        EVENT 1
+      </span>
+
+      <span className="pt-9 text-head-m text-white font-bold">
+        The 새로워진 IONIQ 5, 인터랙션으로 만나다
+      </span>
+
+      <span className="pt-4 text-title-s text-neutral-300 whitespace-pre-wrap text-center">
+        {`The new IONIQ 5의 새로운 기능을 날마다 체험하고 이벤트에 응모하세요!\n추첨을 통해 IONIQ과 함께하는 제주 여행 패키지를 드립니다`}
+      </span>
+
+      <div className="py-12 flex gap-[60px]">
+        {isJoinedList.map((isJoined, index) => (
+          <div
+            key={index}
+            onClick={() => setCurrentInteraction(index)}
+            className="flex flex-col items-center select-none"
+          >
+            <img
+              src="icons/check-mint.svg"
+              alt="체크"
+              className={`${isJoined > 0 ? "" : "invisible"}`}
+            />
+
+            <span
+              className={`text-body-l  font-bold ${currentInteraction === index ? "text-neutral-100" : "text-neutral-500"}`}
+            >
+              Day{index + 1}
+            </span>
+
+            <span
+              className={`text-body-m font-bold ${isJoined > 0 ? "text-green-400" : "text-neutral-700"}`}
+            >
+              {isJoined > 0 ? "참여 완료" : !isJoined ? "미참여" : ""}
+            </span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

src/interactions/content.json

@@ -2,6 +2,35 @@
   "howto": [
     ["매일매일 공개되는", " 더 뉴 아이오닉5과 관련한 ", "인터랙션을 수행한다."],
     ["", "이벤트 경품을 받기 위한 ", "필수 정보를 입력하면 응모 완료!"],
-    ["", "날마다 응모하고 기대평을 작성하면 당첨 확률 UP!"]
+    ["", "날마다 응모하고", " 기대평을 작성하면 당첨 확률 UP!"]
+  ],
+  "gift": [
+    {
+      "src": "gift_jeju.png",
+      "name": "제주 여행 패키지",
+      "num": 10,
+      "desc": "항공권, 숙박비, 아이오닉5 렌터카\n(충전 비용 포함)",
+      "star": "1st",
+      "starColor": "#F9BB44",
+      "starTextColor": "#957029"
+    },
+    {
+      "src": "gift_car.png",
+      "name": "더뉴 아이오닉5 시승권",
+      "num": 50,
+      "desc": "10-12월 중 날짜 선택 가능",
+      "star": "2nd",
+      "starColor": "#CFF0FF",
+      "starTextColor": "#36B1E6"
+    },
+    {
+      "src": "gift_portable.png",
+      "name": "포터블 인덕션",
+      "num": 100,
+      "desc": "블랙/화이트 컬러 랜덤 증정",
+      "star": "3rd",
+      "starColor": "#B6423C",
+      "starTextColor": "#F9BB44"
+    }
   ]
 }

src/interactions/index.jsx

@@ -2,6 +2,8 @@ import { useRef, useState } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize";
 import IntroductionDetail from "./IntroductionDetail";
 import GiftDetail from "./GiftDetail";
+import JSONData from "./content.json";
+import TarBar from "./TabBar";
 
 export default function InteractionPage() {
   const SECTION_IDX = 1;
@@ -14,55 +16,21 @@ export default function InteractionPage() {
   return (
     <section
       ref={sectionRef}
-      className="bg-black h-[2017px] flex flex-col items-center"
+      className="bg-black py-60 flex flex-col items-center"
     >
-      <span className="mt-60 py-5 text-body-l text-neutral-200 font-bold items-center border-b-[3px] border-b-neutral-400">
-        EVENT 1
-      </span>
-
-      <span className="pt-9 text-head-m text-white font-bold">
-        The 새로워진 IONIQ 5, 인터랙션으로 만나다
-      </span>
-
-      <span className="pt-4 text-title-s text-neutral-300 whitespace-pre-wrap text-center">
-        {`The new IONIQ 5의 새로운 기능을 날마다 체험하고 이벤트에 응모하세요!\n추첨을 통해 IONIQ과 함께하는 제주 여행 패키지를 드립니다`}
-      </span>
-
-      <div className="pt-12 flex gap-[60px]">
-        {isJoinedList.map((isJoined, index) => (
-          <div
-            key={index}
-            onClick={() => setCurrentInteraction(index)}
-            className="flex flex-col items-center select-none"
-          >
-            <img
-              src="icons/check-mint.svg"
-              alt="체크"
-              className={`${isJoined > 0 ? "" : "invisible"}`}
-            />
-
-            <span
-              className={`text-body-l  font-bold ${currentInteraction === index ? "text-neutral-100" : "text-neutral-500"}`}
-            >
-              Day{index + 1}
-            </span>
-
-            <span
-              className={`text-body-m font-bold ${isJoined > 0 ? "text-green-400" : "text-neutral-700"}`}
-            >
-              {isJoined > 0 ? "참여 완료" : !isJoined ? "미참여" : ""}
-            </span>
-          </div>
-        ))}
-      </div>
+      <TarBar
+        currentInteraction={currentInteraction}
+        setCurrentInteraction={setCurrentInteraction}
+        isJoinedList={isJoinedList}
+      />
 
       <div className="h-[456px] w-[500px] border border-white flex justify-center items-center text-white">
-        스크롤
+        인터랙션
       </div>
 
-      <div className="flex gap-[140px]">
-        <IntroductionDetail />
-        <GiftDetail />
+      <div className="pt-32 flex flex-col xl:flex-row gap-[140px]">
+        <IntroductionDetail contentList={JSONData.howto} />
+        <GiftDetail contentList={JSONData.gift} />
       </div>
     </section>
   );

vite.config.js

@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",
-  plugins: [react()],
+  plugins: [react(), svgr()],
   resolve: {
     alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
   },