Merge pull request #54 from softeerbootcamp4th/feature/14-qna

[feat] QnA 섹션, 푸터 섹션 구현, 약간의 SEO 개선
softeerbootcamp4th · Jul 31, 2024 · 0a9636b · 0a9636b
2 parents 88fedb9 + 0a8ff01
commit 0a9636b
Show file tree

Hide file tree

Showing 17 changed files with 175 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="HI. Five. The new IONIQ 5. 소프티어 부트캠프 4기-팀 어썸 오렌지의 IONIQ 5 이벤트 페이지입니다." />
     <title>Awesome Orange FE</title>
   </head>
   <body>

diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /admin
+Allow: /
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import IntroSection from "./introSection";
 import Header from "./header";
+import QnA from "./qna";
+import Footer from "./footer";
 
 function App() {
   useEffect(() => {
@@ -12,7 +14,13 @@ function App() {
     <>
       <IntroSection />
       <Header />
-      <img src="https://image.utoimage.com/preview/cp872655/2018/03/201803016775_500.jpg" className="h-[2000px]"/>
+      <img
+        src="https://image.utoimage.com/preview/cp872655/2018/03/201803016775_500.jpg"
+        className="h-[2000px]"
+        alt="test image"
+      />
+      <QnA />
+      <Footer />
     </>
   );
 }

diff --git a/src/footer/index.jsx b/src/footer/index.jsx
@@ -0,0 +1,12 @@
+function Footer() {
+  return (
+    <footer className="bg-neutral-50 w-full h-24 md:h-32 lg:h-[11.25rem] px-6 flex justify-center items-center">
+      <div className="w-full max-w-[1200px] text-neutral-400 text-body-m">
+        <p>고객센터 : 080-600-6000</p>
+        <p>COPYRIGHT ⓒ HYUNDAI MOTOR COMPANY. ALL RIGHTS RESERVED.</p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/src/header/index.jsx b/src/header/index.jsx
@@ -44,7 +44,7 @@ export default function Header() {
   }
 
   return (
-    <div className="sticky top-0 h-[60px] backdrop-blur-xl flex justify-center items-center font-bold select-none">
+    <div className="sticky top-0 h-[60px] z-40 bg-white/[.36] backdrop-blur-xl flex justify-center items-center font-bold select-none">
       <span
         onClick={gotoTop}
         className="absolute left-9 text-black text-body-l cursor-pointer"

diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx
@@ -36,7 +36,7 @@ function DistanceDrivenInteraction({ interactCallback, $ref }) {
       />
       <div className="absolute top-1/2">
         <div
-          className="rounded-full size-8 bg-blue-500 cursor-pointer before:size-8 before:rounded-full before:absolute before:left-0 before:top-0 before:z-10 before:bg-blue-500 before:opacity-50"
+          className="rounded-full size-8 bg-blue-500 cursor-pointer transition-transform duration-300 active:duration-0 before:size-8 before:rounded-full before:absolute before:left-0 before:top-0 before:z-10 before:bg-blue-500 before:opacity-50"
           onPointerDown={(e) => {
             onPointerDown(e);
             pulseAnimation(e);

diff --git a/src/interactions/subsidy/index.jsx b/src/interactions/subsidy/index.jsx
@@ -60,7 +60,7 @@ function SubsidyInteraction({ interactCallback, $ref }) {
           loop={false}
         />
       </div>
-      <p className="text-white absolute bottom-32 md:bottom-36 lg:bottom-[180px] text-title-s pointer-events-none">
+      <p className="text-white absolute bottom-32 md:bottom-36 lg:bottom-[180px] text-title-s pointer-events-none select-none">
         <span className="text-head-m md:text-head-l lg:text-[4.375rem] mr-1.5 lg:mr-2.5">
           {count * 10}
         </span>

diff --git a/src/interactions/v2l/Puzzle.jsx b/src/interactions/v2l/Puzzle.jsx
@@ -83,7 +83,7 @@ function Puzzle({ interactCallback, $ref }) {
           );
         })}
       </div>
-      <div className="flex items-end absolute bottom-0 -right-28 md:relative md:bottom-auto md:right-auto">
+      <div className="flex items-end absolute bottom-0 -right-28 md:relative md:bottom-auto md:right-auto select-none">
         <div className="w-28 h-28 flex items-center relative">
           <svg className="stroke-blue-300 w-12 h-28 overflow-visible fill-none">
             <path
@@ -92,7 +92,7 @@ function Puzzle({ interactCallback, $ref }) {
             />
           </svg>
           <img
-            className="object-left w-16 h-28 object-scale-down"
+            className="object-left w-16 h-28 object-contain"
             width="80"
             height="130"
             src={panContainer1x}

diff --git a/src/introSection/LineHighlight.jsx b/src/introSection/LineHighlight.jsx
@@ -0,0 +1,36 @@
+import style from "./index.module.css";
+
+function LineHighlight() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={style.openVector}
+      width="808"
+      height="47"
+      viewBox="0 0 808 47"
+      fill="none"
+    >
+      <path
+        d="M10.3035 36.014C16.8072 35.8761 23.0392 35.0956 29.423 34.3444C72.8649 29.233 116.318 24.8301 160.561 23.0018C202.39 21.2733 244.061 18.73 285.855 16.7248C336.338 14.3026 386.656 13.6948 437.181 13.2858C481.317 12.9285 525.453 11.411 569.59 10.8226C612.985 10.2441 656.203 10.6204 699.472 11.6882C724.41 12.3037 748.936 14.2539 773.784 15.1688C781.807 15.4642 789.751 16.3816 797.831 16.2103"
+        stroke="url(#paint0_linear_4220_1683)"
+        strokeWidth="20"
+        strokeLinecap="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_4220_1683"
+          x1="10.1518"
+          y1="28.8581"
+          x2="797.745"
+          y2="12.1558"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3ED7BE" />
+          <stop offset="1" stopColor="#069AF8" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export default LineHighlight;
diff --git a/src/introSection/index.jsx b/src/introSection/index.jsx
@@ -1,5 +1,5 @@
 import useScrollTransition from "@/common/useScrollTransition.js";
-import vector from "./vector.svg";
+import LineHighlight from "./LineHighlight.jsx";
 import style from "./index.module.css";
 import SpinningCarVideo from "./car-spin.mp4";
 import Pointer from "./pointer.svg";
@@ -54,11 +54,7 @@ function IntroSection() {
           className="absolute top-[66px] z-0 overflow-hidden"
           style={titleStyle}
         >
-          <img src={vector} />
-
-          <div
-            className={`${style.openVector} w-full h-full bg-white absolute top-0`}
-          />
+          <LineHighlight />
         </div>
       </div>
 
@@ -79,7 +75,7 @@ function IntroSection() {
       </div>
 
       <div className="flex justify-center pt-[100px] animate-bounce">
-        <img src={Pointer} />
+        <img src={Pointer} alt="다음으로 넘어가기" />
       </div>
     </div>
   );

diff --git a/src/introSection/index.module.css b/src/introSection/index.module.css
@@ -14,14 +14,16 @@
 }
 
 .openVector {
+  stroke-dasharray: 790px;
+  stroke-dashoffset: 790px;
   animation: open-vector 0.3s ease-in-out 0.3s forwards;
 }
 
 @keyframes open-vector {
   from {
-    transform: translateX(0%);
+    stroke-dashoffset: 790px;
   }
   to {
-    transform: translateX(100%);
+    stroke-dashoffset: 0px;
   }
-}
+}
diff --git a/src/introSection/vector.svg b/src/introSection/vector.svg
diff --git a/src/qna/QnAArticle.jsx b/src/qna/QnAArticle.jsx
@@ -0,0 +1,49 @@
+import { useState, useRef } from "react";
+import arrow from "./assets/arrow.svg";
+
+function QnAArticle({ question, answer }) {
+  const [opened, setOpened] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const timeoutRef = useRef(null);
+
+  function onClick() {
+    if (!opened) {
+      setVisible(true);
+      clearTimeout(timeoutRef.current);
+      requestAnimationFrame(() => setOpened(true));
+    } else {
+      setOpened(false);
+      timeoutRef.current = setTimeout(() => setVisible(false), 200);
+    }
+  }
+  const staticArticleStyle = `text-neutral-400 text-justify relative
+  text-body-s md:text-body-m lg:text-body-l
+	before:w-full before:h-full before-block before:absolute before:bg-white before:pointer-events-none
+	before:scale-y-0 before:transition-transform before:duration-200 before:ease-linear before:origin-bottom`;
+  const staticIconStyle =
+    "size-[1.8181818em] transition-transform ease-in-out-cubic";
+
+  return (
+    <article className="w-full max-w-[1200px] flex flex-col gap-4 md:gap-6 lg:gap-8 py-2 md:py-4 lg:py-6 border-b border-neutral-200">
+      <div className="flex justify-between items-center" onClick={onClick}>
+        <h3 className="flex gap-2 lg:gap-3 font-bold text-black text-body-m lg:text-body-l">
+          <span className="text-blue-400">Q.</span>
+          {question}
+        </h3>
+        <img
+          className={`${staticIconStyle} ${opened ? "rotate-0" : "rotate-180"}`}
+          src={arrow}
+          alt={opened ? "닫기" : "열기"}
+          draggable="false"
+        />
+      </div>
+      <p
+        className={`${staticArticleStyle} ${opened ? "before:scale-y-0" : "before:scale-y-100"} ${visible ? "block" : "hidden"}`}
+      >
+        {answer}
+      </p>
+    </article>
+  );
+}
+
+export default QnAArticle;
diff --git a/src/qna/assets/arrow.svg b/src/qna/assets/arrow.svg
diff --git a/src/qna/content.json b/src/qna/content.json
@@ -0,0 +1,30 @@
+[
+  {
+    "question": "이벤트는 하나만 참여할 수 있나요?",
+    "answer": "EVENT 1과 EVENT 2는 중복 참여가 가능합니다. 다만 이벤트와 무관하거나 부적절한 방법을 통한 참여는 모두 무효 처리될 수 있습니다."
+  },
+  {
+    "question": "이벤트 참여 시 꼭 본인인증을 해야 하나요?",
+    "answer": "모든 이벤트는 참여자 정보를 등록한 이후에만 응모할 수 있습니다. 당첨자 발표 및 경품 수령 방법은 당첨자에 한해 이벤트 종료 후 입력하신 연락처로 개별 안내될 예정입니다. 본 이벤트를 위하여 수집된 개인 정보는 상품 지급 외 다른 용도로 사용되지 않으며 지급 후 폐기됩니다."
+  },
+  {
+    "question": "이벤트 경품이 변경될 수도 있나요?",
+    "answer": "경품 내용 및 당첨 인원은 사전 고지 없이 변경될 수 있습니다. 실제 지급되는 경품은 세부 조건이 상기 이미지와 상이할 수 있습니다. 경품에 대한 제세공과금은 주최사에서 부담합니다. 또한 EVENT1의 1,2등 경품의 경우 미성년자는 수령이 불가한 점 참고 바랍니다."
+  },
+  {
+    "question": "추첨 이벤트는 어떻게 응모할 수 있나요?",
+    "answer": "EVENT 1은 1일 1회만 응모가 가능하며 이벤트 기간동안 최대 5회까지 응모가 가능합니다. 이벤트 참여시 당일 인터랙션을 수행하고 참여자 정보를 입력해야 해당 날짜의 이벤트의 응모가 정상적으로 완료됩니다. 인터랙션을 수행하더라도 지난 날짜의 이벤트 응모는 불가합니다."
+  },
+  {
+    "question": "당첨 확률을 높일 수 있는 방법이 있나요?",
+    "answer": "응모 횟수가 많을수록 해당 이벤트 당첨 확률이 증가합니다. 또한 응모를 완료한 참여자에 한해 기대평 작성을 완료하면 해당 이벤트 당첨 확률이 증가합니다."
+  },
+  {
+    "question": "선착순 이벤트는 몇 번까지 응모할 수 있나요?",
+    "answer": "EVENT 2는 이벤트 기간동안 중복 참여가 가능하지만, 당일 당첨(상품 수령) 횟수는 1일 최대 1회만 가능합니다. 또한 해당 이벤트 참여시 사전에 반드시 참여자 정보 등록이 완료되어야 하는 점 유의 바랍니다."
+  },
+  {
+    "question": "기대평은 어떻게 작성하나요?",
+    "answer": "기대평은 1일 1회만 작성이 가능하며 당일 추첨 이벤트에 응모를 완료해야만 작성할 수 있습니다. 작성 시아래의 사항을 유의해주세요.\n1. 상품 또는 업체 홍보 목적 글, 직접 작성하지 않은 기대평은 기대평 작성 완료로 인정되지 않을 수 있습니다.\n2. 동일한 문자, 문구 등을 단순히 반복한 기대평, 복사/붙여넣기 또는 자동화된 수단을 사용한 기대평 등 이벤트 취지에 맞지 않는 기대평은 기대평 작성 완료로 인정되지 않을 수 있습니다.\n3. 비속어, 금칙어 등이 포함된 부적절한 내용의 기대평은 작성이 불가합니다."
+  }
+]
diff --git a/src/qna/index.jsx b/src/qna/index.jsx
@@ -0,0 +1,15 @@
+import QnAArticle from "./QnAArticle.jsx";
+import content from "./content.json";
+
+function QnASection() {
+  return (
+    <section className="w-full px-6 py-20 lg:py-[7.5rem] flex flex-col items-center gap-5">
+      <h2 className="text-head-s lg:text-head-m">자주 묻는 질문</h2>
+      {content.map((item) => (
+        <QnAArticle key={item.question} {...item} />
+      ))}
+    </section>
+  );
+}
+
+export default QnASection;
diff --git a/tailwind.redefine.js b/tailwind.redefine.js
@@ -71,4 +71,7 @@ export default {
     "head-m": ["45px", "64px"],
     "head-l": ["57px", "80px"],
   },
+  transitionTimingFunction: {
+    'in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
+  }
 };