Merge pull request #72 from softeerbootcamp4th/feature/10-interaction…

…page

[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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,55 @@
+export default function IntroductionDetail({ contentList }) {
+  return (
+    <div className="flex flex-col">
+      <span className="text-body-l pb-10 text-neutral-50 font-bold">상세 안내</span>
+
+      <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>
+
+          <span className="pt-6 text-body-m text-blue-100">2024년</span>
+
+          <span className="text-body-l text-blue-400">
+            09월09일(월)~13일(금)
+          </span>
+        </div>
+
+        <div className="bg-neutral-900 p-6 flex flex-col">
+          <span className="text-body-m text-neutral-300 font-bold">
+            당첨자 발표
+          </span>
+
+          <span className="pt-6 text-body-l text-white font-bold">
+            2024년 9월 말
+            <span className="font-normal text-neutral-300">{` (예정)`}</span>
+          </span>
+
+          <span className="pt-2 text-body-s text-neutral-300">
+            * 추후 응모 시 입력한 연락처로 개별 안내
+          </span>
+        </div>
+      </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

@@ -0,0 +1,36 @@
+{
+  "howto": [
+    ["매일매일 공개되는", " 더 뉴 아이오닉5과 관련한 ", "인터랙션을 수행한다."],
+    ["", "이벤트 경품을 받기 위한 ", "필수 정보를 입력하면 응모 완료!"],
+    ["", "날마다 응모하고", " 기대평을 작성하면 당첨 확률 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

@@ -1,10 +1,58 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize";
+import IntroductionDetail from "./IntroductionDetail";
+import GiftDetail from "./GiftDetail";
+import JSONData from "./content.json";
+import TabBar from "./TabBar";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Pagination } from "swiper/modules";
 
 export default function InteractionPage() {
   const SECTION_IDX = 1;
   const sectionRef = useRef(null);
+  const [currentInteraction, setCurrentInteraction] = useState(0);
   useSectionInitialize(SECTION_IDX, sectionRef);
 
-  return <div ref={sectionRef} className="bg-black h-[2017px]"></div>;
+  const isJoinedList = [1, 0, 0, 1, -1];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="bg-black py-60 flex flex-col items-center"
+    >
+      <TabBar
+        currentInteraction={currentInteraction}
+        setCurrentInteraction={setCurrentInteraction}
+        isJoinedList={isJoinedList}
+      />
+
+      <Swiper
+        slidesPerView={"auto"}
+        centeredSlides={true}
+        spaceBetween={15}
+        pagination={{
+          clickable: true,
+        }}
+        modules={[Pagination]}
+        className="w-full bg-white h-full"
+      >
+        <SwiperSlide className="w-1/3 h-[500px]">
+          <div className="bg-red-400">1</div>
+        </SwiperSlide>
+        <SwiperSlide className="w-1/3 h-[500px]">
+          <div className="bg-red-500">2</div>
+        </SwiperSlide>
+        <SwiperSlide className="w-1/3 h-[500px]">
+          <div className="bg-red-400">3</div>
+        </SwiperSlide>
+      </Swiper>
+
+      <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") }],
   },