+
이벤트 기간
@@ -30,16 +30,25 @@ export default function IntroductionDetail() {
-
-
참여방법
-
-
-
- 1
-
-
-
-
+
+
참여방법
+
+ {contentList.map((contentSubList, index) => (
+
+
+ {index + 1}
+
+
+ {contentSubList.map((content, index) => (
+
+ {content}
+
+ ))}
+
+ ))}
);
diff --git a/src/interactions/TabBar.jsx b/src/interactions/TabBar.jsx
new file mode 100644
index 00000000..323b0de2
--- /dev/null
+++ b/src/interactions/TabBar.jsx
@@ -0,0 +1,49 @@
+export default function TarBar({
+ currentInteraction,
+ setCurrentInteraction,
+ isJoinedList,
+}) {
+ return (
+ <>
+
+ EVENT 1
+
+
+
+ The 새로워진 IONIQ 5, 인터랙션으로 만나다
+
+
+
+ {`The new IONIQ 5의 새로운 기능을 날마다 체험하고 이벤트에 응모하세요!\n추첨을 통해 IONIQ과 함께하는 제주 여행 패키지를 드립니다`}
+
+
+
+ {isJoinedList.map((isJoined, index) => (
+
setCurrentInteraction(index)}
+ className="flex flex-col items-center select-none"
+ >
+
0 ? "" : "invisible"}`}
+ />
+
+
+ Day{index + 1}
+
+
+
0 ? "text-green-400" : "text-neutral-700"}`}
+ >
+ {isJoined > 0 ? "참여 완료" : !isJoined ? "미참여" : ""}
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/interactions/content.json b/src/interactions/content.json
index 52650d14..8f742396 100644
--- a/src/interactions/content.json
+++ b/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"
+ }
]
}
diff --git a/src/interactions/index.jsx b/src/interactions/index.jsx
index a796bfaf..0b6b4b14 100644
--- a/src/interactions/index.jsx
+++ b/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 (
-
- EVENT 1
-
-
-
- The 새로워진 IONIQ 5, 인터랙션으로 만나다
-
-
-
- {`The new IONIQ 5의 새로운 기능을 날마다 체험하고 이벤트에 응모하세요!\n추첨을 통해 IONIQ과 함께하는 제주 여행 패키지를 드립니다`}
-
-
-
- {isJoinedList.map((isJoined, index) => (
-
setCurrentInteraction(index)}
- className="flex flex-col items-center select-none"
- >
-
0 ? "" : "invisible"}`}
- />
-
-
- Day{index + 1}
-
-
-
0 ? "text-green-400" : "text-neutral-700"}`}
- >
- {isJoined > 0 ? "참여 완료" : !isJoined ? "미참여" : ""}
-
-
- ))}
-
- 스크롤
+ 인터랙션
-
-
-
+
+
+
);
diff --git a/src/interactions/star.svg b/src/interactions/star.svg
new file mode 100644
index 00000000..2a412f9d
--- /dev/null
+++ b/src/interactions/star.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index b672c917..b4e130d7 100644
--- a/vite.config.js
+++ b/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") }],
},
+
+