[file] 하단 컴포넌트 파일 분리

src/interactions/GiftDetail.jsx

@@ -0,0 +1,3 @@
+export default function GiftDetail() {
+  return <div></div>;
+}

src/interactions/IntroductionDetail.jsx

@@ -0,0 +1,46 @@
+export default function IntroductionDetail() {
+  return (
+    <div className="flex flex-col">
+      <span className="text-body-l text-neutral-50 font-bold">상세 안내</span>
+
+      <div className="mt-10 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">
+        <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>
+    </div>
+  );
+}

src/interactions/content.json

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

src/interactions/index.jsx

@@ -1,5 +1,7 @@
 import { useRef, useState } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize";
+import IntroductionDetail from "./IntroductionDetail";
+import GiftDetail from "./GiftDetail";
 
 export default function InteractionPage() {
   const SECTION_IDX = 1;
@@ -54,6 +56,14 @@ export default function InteractionPage() {
         ))}
       </div>
 
+      <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>
     </section>
   );
 }