[feat, chore] 자잘한 것들 수정 및 성능 개선

build.js

@@ -86,8 +86,9 @@ async function injectSSGToHtml(mode) {
 			await mkdir(dir, { recursive: true });
 			await writeFile(absolutePath, html);
 			console.log(`pre-rendered : ${path}`);
-		} catch {
+		} catch(e) {
 			console.log(`pre-rendered failed : ${path}`);
+			console.error(e);
 		}
 	} );
 	await Promise.allSettled(promises);

package.json

@@ -14,6 +14,7 @@
     "preview-admin": "vite preview --outDir dist/admin"
   },
   "dependencies": {
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-lottie-player": "^2.1.0",

src/adminPage/features/eventEdit/businessLogic/FcfsData.js

@@ -94,6 +94,15 @@ function verifyItems(map, { startTime, endTime, prevSnapshot = new Map() }) {
   return result;
 }
 
+function hasDuplicatedDate(newDate, map) {
+  if (newDate === undefined) return true;
+  if (newDate === null) return false;
+  const dateSet = new Set([...map.values()].map(({ date }) => date?.valueOf() ?? null));
+
+  if (dateSet.has(newDate.valueOf())) return true;
+  return false;
+}
+
 function getDefaultFcfsArray(
   startTime,
   endTime,
@@ -194,12 +203,17 @@ class FcfsData {
   modify(key, data, { startTime, endTime }) {
     const newData = new FcfsData(this.map);
     const oldItem = newData.map.get(key);
+
     const verified = verifyItem(
       { ...oldItem, ...data },
       { startTime, endTime, prevSnapshot: oldItem },
     );
     if (verified === null) newData.map.delete(key);
-    else newData.map.set(key, verified);
+    else {
+      if (hasDuplicatedDate(verified.date, this.map)) verified.date = oldItem.date;
+
+      newData.map.set(key, verified);
+    }
     return newData;
   }
   modifyAll(data, { startTime, endTime }) {

src/mainPage/App.jsx

@@ -11,14 +11,14 @@ import QnA from "./features/qna";
 import Footer from "./features/footer";
 
 import Modal from "@common/modal/modal.jsx";
-import { initLoginState, logout } from "@main/auth/store.js";
+import { logout } from "@main/auth/store.js";
 import useLogoutMiddleware from "@common/dataFetch/initLogoutMiddleware";
 
 function App() {
   useEffect(() => {
     window.scrollTo(0, 0);
     history.scrollRestoration = "manual";
-    initLoginState();
+    //initLoginState();
   }, []);
   useLogoutMiddleware(logout);
 

src/mainPage/features/comment/commentForm/index.jsx

@@ -13,6 +13,7 @@ import openModal from "@common/modal/openModal.js";
 const submitCommentErrorHandle = {
   400: "negative",
   401: "unauthorized",
+  404: "no_participated",
   409: "하루에 1번만 기대평을 등록할 수 있습니다.",
   offline: "offline",
 };
@@ -32,6 +33,10 @@ function CommentForm() {
         setButtonFetchState(submitted ? "disabled" : "enabled");
       })
       .catch((e) => {
+        if (e.status === 401) {
+          setButtonFetchState("enabled");
+          return;
+        }
         console.error(e);
         setButtonFetchState("error");
       })
@@ -70,6 +75,7 @@ function CommentForm() {
         case submitCommentErrorHandle[400]:
           return openModal(negativeModal);
         case submitCommentErrorHandle[401]:
+        case submitCommentErrorHandle[404]:
           return openModal(noUserModal);
         case submitCommentErrorHandle["offline"]:
           return openModal(noServerModal);

src/mainPage/features/comment/mock.js

@@ -18,7 +18,7 @@ const handlers = [
   http.get("/api/v1/comment/info", ({ request }) => {
     const token = request.headers.get("authorization");
 
-    if (token === null) return HttpResponse.json({ submitted: false });
+    if (token === null) return HttpResponse.json({ submitted: false }, { status: 401 });
     return HttpResponse.json({ submitted: false });
   }),
   http.get("/api/v1/comment/:eventFrameId", () => {

src/mainPage/features/detailInformation/DetailItem.jsx

@@ -7,6 +7,7 @@ function DetailItem({ img, title, description }) {
         className="absolute w-full h-full -z-10 top-0 left-0 object-cover"
         width="1920"
         height="1080"
+        loading="lazy"
       />
       <div className="text-white w-full flex flex-col gap-4">
         <h3 className="whitespace-pre-wrap text-title-s font-bold md:text-title-m lg:text-title-l">

src/mainPage/features/fcfs/cardGame/Card.jsx

@@ -46,13 +46,15 @@ function Card({ index, locked, isFlipped, setFlipped, setGlobalLock, getCardAnsw
           srcSet={`${hidden1x} 1x, ${hidden2x} 2x`}
           alt="hidden"
           draggable="false"
+          loading="lazy"
         />
         <img
           className={`${cardFaceBaseStyle} ${style.back}`}
           src={answer1x}
           srcSet={`${answer1x} 1x, ${answer2x} 2x`}
           alt={isCorrect ? "축하합니다, 당첨입니다!" : "아쉽게도 정답이 아니네요!"}
           draggable="false"
+          loading="lazy"
         />
       </div>
     </button>

src/mainPage/features/fcfs/description/DateEventPrize.jsx

@@ -14,7 +14,7 @@ function DateEventPrize({ date, title, capacity, image }) {
 
   return (
     <div className={`flex gap-6 p-6 ${bgColor} ${opacity}`}>
-      <img src={image} alt={title} width="130" height="88" />
+      <img src={image} alt={title} width="130" height="88" loading="lazy" />
       <div className="font-bold">
         <p
           className={`text-body-m ${dateStatus === "ended" ? "text-neutral-500" : "text-blue-400"}`}

src/mainPage/features/fcfs/mock.js

@@ -16,11 +16,11 @@ const handlers = [
   }),
   http.get("/api/v1/event/fcfs/:eventFrameId/participated", async ({ request }) => {
     const token = request.headers.get("authorization");
-    if (token === null) return HttpResponse.json({ answerResult: false, winner: false });
+    if (token === null) return HttpResponse.json(false);
 
     //await delay(10000);
 
-    return HttpResponse.json({ answerResult: false, winner: false });
+    return HttpResponse.json(false);
   }),
   http.post("/api/v1/event/fcfs/:eventFrameId", async ({ request }) => {
     const { eventAnswer } = await request.json();

src/mainPage/features/header/Hamburger/Button.jsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import style from "./style.module.css";
+
+function HamburgerButton({ children }) {
+  const [opened, setOpened] = useState(false);
+  return (
+    <>
+      <button
+        className="flex md:hidden justify-center items-center size-6 z-10"
+        aria-label="open-menu"
+        onClick={() => setOpened((state) => !state)}
+      >
+        <div className={style.hamburger} data-opened={opened}>
+          <div></div>
+        </div>
+      </button>
+      <div className="fixed -z-10 w-full top-0 left-0 bg-white flex md:hidden flex-col justify-center items-center gap-2">
+        <div className="w-full mt-16 shadow-xl">{opened && children}</div>
+      </div>
+    </>
+  );
+}
+
+export default HamburgerButton;

src/mainPage/features/header/Hamburger/style.module.css

@@ -0,0 +1,53 @@
+.hamburger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 24px;
+  height: 20px;
+}
+
+.hamburger > div,
+.hamburger > div::before,
+.hamburger > div::after {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background-color: currentColor;
+  transition: all 0.3s;
+}
+
+.hamburger > div {
+  position: absolute;
+  border-color: #24adaf;
+}
+
+.hamburger > div::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-10px);
+}
+
+.hamburger > div::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(10px);
+}
+
+.hamburger[data-opened="true"] > div {
+  transform: rotate(135deg);
+}
+
+.hamburger[data-opened="true"] > div::before {
+  transform: translateY(0px) rotate(180deg);
+}
+
+.hamburger[data-opened="true"] > div::after {
+  transform: translateY(-0px) rotate(-270deg);
+}

src/mainPage/features/header/index.jsx

@@ -1,6 +1,7 @@
 import scrollTo from "@main/scroll/scrollTo";
 import { useSectionStore } from "@main/scroll/store";
 import AuthButtonSection from "./AuthButtonSection.jsx";
+import HamburgerButton from "./Hamburger/Button.jsx";
 
 import style from "./index.module.css";
 
@@ -52,6 +53,22 @@ export default function Header() {
       <div className="hidden md:flex">
         <AuthButtonSection />
       </div>
+      <HamburgerButton>
+        <div className="w-full px-6 py-2 flex flex-col sm:flex-row gap-4 justify-between items-center">
+          <ul className="flex flex-col sm:flex-row gap-4 lg:gap-8 text-body-s lg:text-body-m relative">
+            {scrollSectionList.map((scrollSection, index) => (
+              <li
+                key={index}
+                onClick={() => onClickScrollSection(index + 1)}
+                className={`flex justify-center items-center w-20 lg:w-24 cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`}
+              >
+                {scrollSection}
+              </li>
+            ))}
+          </ul>
+          <AuthButtonSection />
+        </div>
+      </HamburgerButton>
     </nav>
   );
 }

src/mainPage/features/interactions/description/GiftDetail.jsx

@@ -5,7 +5,7 @@ export default function GiftDetail({ contentList }) {
     <div className="flex flex-col font-bold">
       {contentList.map((content, index) => (
         <div key={index} className="bg-neutral-900 p-6 mb-5 flex z-0 relative">
-          <img src={content.src} alt="경품" />
+          <img src={content.src} alt="경품" width="130" height="89" loading="lazy" />
 
           <div className="pl-8 flex flex-col">
             <span className="text-body-m sm:text-body-l text-white">

src/mainPage/features/interactions/description/InteractionSlide.jsx

@@ -60,11 +60,13 @@ export default function InteractionSlide({ interactionDesc, index, isCurrent, sl
       <img
         src={inactiveImgPath}
         alt="inactiveImage"
+        loading="lazy"
         className={`-z-10 absolute transition ease-in-out duration-200 ${isCurrent ? "opacity-0" : "opacity-100"}`}
       />
       <img
         src={activeImgPath}
         alt="activeImage"
+        loading="lazy"
         className={`-z-10 absolute transition ease-in-out duration-200 ${isCurrent ? "opacity-100" : "opacity-30 sm:opacity-0"}`}
       />
     </div>

src/mainPage/features/simpleInformation/contentSection.jsx

@@ -45,7 +45,14 @@ export default function ContentSection({ content }) {
       onAnimationEnd={() => setIsHighlighted(true)}
       className={`${isVisible ? style.fadeIn : "opacity-0"} z-0 flex flex-col font-bold`}
     >
-      <img src={content.src} alt={content.title} width="1200" height="456" className="w-full" />
+      <img
+        src={content.src}
+        alt={content.title}
+        width="1200"
+        height="456"
+        className="w-full"
+        loading="lazy"
+      />
 
       <span className="pt-10 text-body-m sm:text-body-l text-neutral-800">{content.title}</span>
 

src/mainPage/shared/auth/mock.js

@@ -4,6 +4,9 @@ function isValidInput(name, phoneNumber) {
   return name.length >= 2 && phoneNumber.length < 12 && phoneNumber.startsWith("01");
 }
 
+const token =
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ0ZWFtLW9yYW5nZSIsImlhdCI6MTcyNDA0NDc5MCwiZXhwIjoxNzI0MDQ4MzkwLCJzdWIiOiJldmVudFVzZXIiLCJ1c2VyTmFtZSI6Iuq5gOyCoeu6qSIsInVzZXJJZCI6ImtpbXBpcHB5YXAiLCJyb2xlIjoiZXZlbnRfdXNlciJ9.m5m_PkwmYz5Mt-kjn28435bQtwgph3WO-2J42X82lCg";
+
 const handlers = [
   http.post("/api/v1/event-user/send-auth", async ({ request }) => {
     const { name, phoneNumber } = await request.json();
@@ -22,7 +25,7 @@ const handlers = [
       return HttpResponse.json({ error: "응답 내용이 잘못됨" }, { status: 400 });
     if (+authCode < 500000 === false)
       return HttpResponse.json({ error: "인증번호 일치 안 함" }, { status: 401 });
-    return HttpResponse.json({ token: "test_token" });
+    return HttpResponse.json({ token });
   }),
 
   http.post("/api/v1/event-user/login", async ({ request }) => {
@@ -32,7 +35,7 @@ const handlers = [
       return HttpResponse.json({ error: "응답 내용이 잘못됨" }, { status: 400 });
     if (name !== "오렌지" || phoneNumber !== "01019991999")
       return HttpResponse.json({ error: "사용자 없음" }, { status: 404 });
-    return HttpResponse.json({ token: "test_token" });
+    return HttpResponse.json({ token });
   }),
 ];