[refactor] 코드 리팩터링

softeerbootcamp4th · Aug 17, 2024 · 7b8dba4 · 7b8dba4
1 parent 8c24e63
commit 7b8dba4
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 80 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,6 @@
   "trailingComma": "all",
   "semi": true,
   "tabWidth": 2,
-  "useTabs": false
+  "useTabs": false,
+  "printWidth": 100
 }
diff --git a/src/common/constants.js b/src/common/constants.js
@@ -5,3 +5,5 @@ export const EVENT_START_DATE = new Date(2024, 8, 9);
 
 export const SERVICE_TOKEN_ID = "AWESOME_ORANGE_ACCESS_TOKEN";
 export const ADMIN_TOKEN_ID = "AWESOME_ORANGE_ADMIN_ACCESS_TOKEN";
+
+export const DAY_MILLISEC = 1000 * 24 * 60 * 60;
diff --git a/src/common/utils.js b/src/common/utils.js
@@ -1,3 +1,5 @@
+import { DAY_MILLISEC } from "./constants";
+
 export function clamp(target, min, max) {
   if (target < min) return min;
   if (target > max) return max;
@@ -107,8 +109,7 @@ export function getDayDifference(_date1, _date2) {
     date2.getDate(),
   );
 
-  const timeDifference = date2WithoutTime - date1WithoutTime;
-  const dayDifference = timeDifference / (1000 * HOURS * MINUTES * SECONDS);
+  const dayDifference = (date2WithoutTime - date1WithoutTime) / DAY_MILLISEC;
 
   return dayDifference;
 }
diff --git a/src/mainPage/features/interactions/description/InteractionSlide.jsx b/src/mainPage/features/interactions/description/InteractionSlide.jsx
@@ -1,13 +1,12 @@
 import InteractionModal from "../modal/InteractionModal";
 import openModal from "@common/modal/openModal.js";
 import { padNumber } from "@common/utils.js";
-import { EVENT_START_DATE } from "@common/constants";
+import { EVENT_START_DATE, DAY_MILLISEC } from "@common/constants";
+import useEventStore from "@main/realtimeEvent/store.js";
 
-function getEventDate(index) {
+function getEventDateString(eventDate) {
   const day = ["일", "월", "화", "수", "목", "금", "토"];
-  const fullDate = new Date(
-    EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000,
-  );
+  const fullDate = new Date(eventDate);
 
   const month = fullDate.getMonth() + 1;
   const date = fullDate.getDate();
@@ -19,21 +18,21 @@ export default function InteractionSlide({
   interactionDesc,
   index,
   isCurrent,
-  joined,
+  isJoined,
   slideTo,
   answer,
 }) {
+  const currentServerTime = useEventStore((state) => state.currentServerTime);
   const activeImgPath = `images/active${index + 1}.png`;
   const inactiveImgPath = `images/inactive${index + 1}.png`;
   const numberImgPath = `icons/rect${index + 1}.svg`;
+  const eventDate = EVENT_START_DATE.getTime() + index * DAY_MILLISEC;
+  const isOpened = currentServerTime >= eventDate;
 
   function onClickExperience() {
-    if (joined < 0) return;
+    if (isJoined < 0) return;
 
-    openModal(
-      <InteractionModal index={index} answer={answer} />,
-      "interaction",
-    );
+    openModal(<InteractionModal index={index} answer={answer} />, "interaction");
   }
 
   return (
@@ -42,7 +41,7 @@ export default function InteractionSlide({
       className="w-full h-full flex flex-col justify-center items-center select-none"
     >
       <span className="sm:pt-10 text-body-m sm:text-body-l text-white font-bold">
-        {getEventDate(index)}
+        {getEventDateString(eventDate)}
       </span>
 
       <div className="pt-5 flex items-center">
@@ -57,17 +56,13 @@ export default function InteractionSlide({
 
       <button
         onClick={onClickExperience}
-        disabled={!isCurrent || joined < 0}
-        className={`mt-8 py-1 sm:py-4 px-5 sm:px-10 bg-white ${joined < 0 ? "hidden" : isCurrent ? "opacity-100" : "opacity-50"}`}
+        disabled={!isCurrent}
+        className={`mt-8 py-1 sm:py-4 px-5 sm:px-10 bg-white ${!isOpened ? "hidden" : isCurrent ? "opacity-100" : "opacity-50"}`}
       >
-        <span className="text-detail-l sm:text-body-s text-black font-bold">
-          인터랙션 체험하기
-        </span>
+        <span className="text-detail-l sm:text-body-s text-black font-bold">인터랙션 체험하기</span>
       </button>
 
-      <span
-        className={`pt-5 text-title-m text-neutral-200 ${joined < 0 ? "" : "hidden"}`}
-      >
+      <span className={`pt-5 text-title-m text-neutral-200 ${isOpened && "hidden"}`}>
         오픈 예정
       </span>
 

diff --git a/src/mainPage/features/interactions/description/TapBar.jsx b/src/mainPage/features/interactions/description/TapBar.jsx
@@ -1,4 +1,4 @@
-export default function TapBar({ currentInteraction, joinedList, slideTo }) {
+export default function TapBar({ currentInteraction, isJoinedList, slideTo }) {
   return (
     <>
       <span className="py-5 text-body-l text-neutral-200 font-bold items-center border-b-[3px] border-b-neutral-400">
@@ -14,17 +14,13 @@ export default function TapBar({ currentInteraction, joinedList, slideTo }) {
       </span>
 
       <div className="py-12 flex gap-5 sm:gap-[60px]">
-        {joinedList.map((joined, index) => (
+        {isJoinedList.map((isJoined, index) => (
           <div
             key={index}
             onClick={() => slideTo(index)}
             className="flex flex-col items-center select-none cursor-pointer"
           >
-            <img
-              src="icons/check-mint.svg"
-              alt="체크"
-              className={`${joined > 0 ? "" : "invisible"}`}
-            />
+            <img src="icons/check-mint.svg" alt="체크" className={`${!isJoined && "invisible"}`} />
 
             <span
               className={`text-body-l font-bold transition ease-in-out duration-200 ${currentInteraction === index ? "text-neutral-100" : "text-neutral-500"}`}
@@ -33,9 +29,9 @@ export default function TapBar({ currentInteraction, joinedList, slideTo }) {
             </span>
 
             <span
-              className={`text-body-m font-bold ${joined > 0 ? "text-green-400" : "text-neutral-700"}`}
+              className={`text-body-m font-bold ${isJoined ? "text-green-400" : "text-neutral-700"}`}
             >
-              {joined > 0 ? "참여 완료" : !joined ? "미참여" : ""}
+              {isJoined ? "참여 완료" : "미참여"}
             </span>
           </div>
         ))}

diff --git a/src/mainPage/features/interactions/index.jsx b/src/mainPage/features/interactions/index.jsx
@@ -8,52 +8,39 @@ import EventDescriptionLayout from "@main/eventDescription/EventDescriptionLayou
 import useSectionInitialize from "@main/scroll/useSectionInitialize.js";
 import { INTERACTION_SECTION } from "@main/scroll/constants.js";
 import useSwiperState from "@main/hooks/useSwiperState.js";
-import useEventStore from "@main/realtimeEvent/store.js";
 
 import { fetchServer } from "@common/dataFetch/fetchServer.js";
-import { EVENT_DRAW_ID } from "@common/constants.js";
 import { getDayDifference } from "@common/utils.js";
-import { EVENT_START_DATE } from "@common/constants.js";
+import { EVENT_DRAW_ID, EVENT_START_DATE } from "@common/constants.js";
 
 export default function InteractionPage() {
   const sectionRef = useRef(null);
   const [currentInteraction, swiperRef] = useSwiperState();
-  const currentServerTime = useEventStore((state) => state.currentServerTime);
-  const [joinedList, setJoinedList] = useState([-1, -1, -1, -1, -1]);
+  const [isJoinedList, setIsJoinedList] = useState([false, false, false, false, false]);
   const slideTo = (_index) => swiperRef.current.swiper.slideTo(_index);
+
   useSectionInitialize(INTERACTION_SECTION, sectionRef);
 
   useEffect(() => {
     fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`)
       .then(({ dates }) => {
-        let newJoinedList = [0, 0, 0, 0, 0];
+        let newJoinedList = [false, false, false, false, false];
         dates.forEach((date) => {
           const day = getDayDifference(EVENT_START_DATE, new Date(date));
-          newJoinedList[day] = 1;
+          newJoinedList[day] = true;
         });
-        for (let i = 0; i < newJoinedList.length; i++) {
-          if (
-            currentServerTime <
-            EVENT_START_DATE.getTime() + i * 24 * 60 * 60 * 1000
-          ) {
-            newJoinedList[i] = -1;
-          }
-        }
-        setJoinedList(newJoinedList);
+        setIsJoinedList(newJoinedList);
       })
       .catch((e) => {
         console.log(e);
       });
-  }, [currentServerTime]);
+  }, []);
 
   return (
-    <section
-      ref={sectionRef}
-      className="bg-black py-24 lg:py-60 flex flex-col items-center"
-    >
+    <section ref={sectionRef} className="bg-black py-24 lg:py-60 flex flex-col items-center">
       <TapBar
         currentInteraction={currentInteraction}
-        joinedList={joinedList}
+        isJoinedList={isJoinedList}
         slideTo={slideTo}
       />
 
@@ -71,13 +58,14 @@ export default function InteractionPage() {
               interactionDesc={interactionDesc}
               index={index}
               isCurrent={currentInteraction === index}
-              joined={joinedList[index]}
+              isJoined={isJoinedList[index]}
               slideTo={slideTo}
               answer={JSONData.answer[index]}
             />
           </swiper-slide>
         ))}
       </swiper-container>
+
       <div className="w-full pt-[7.5rem] px-6 flex flex-col justify-center items-center">
         <EventDescriptionLayout detail={JSONData.detail}>
           <GiftDetail contentList={JSONData.gift} />

diff --git a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx
@@ -7,26 +7,19 @@ import openModal from "@common/modal/openModal.js";
 import Button from "@common/components/Button.jsx";
 import { fetchServer } from "@common/dataFetch/fetchServer";
 import userStore from "@main/auth/store.js";
-import { EVENT_START_DATE } from "@common/constants.js";
+import { EVENT_START_DATE, DAY_MILLISEC } from "@common/constants.js";
 import useEventStore from "@main/realtimeEvent/store.js";
 import getEventDateState from "@main/realtimeEvent/getEventDateState";
 
 import style from "./InteractionAnswer.module.css";
 import joinEvent from "./joinEvent";
 
-export default function InteractionAnswer({
-  isAnswerUp,
-  setIsAnswerUp,
-  answer,
-  close,
-  index,
-}) {
+export default function InteractionAnswer({ isAnswerUp, setIsAnswerUp, answer, close, index }) {
   const isLogin = userStore((state) => state.isLogin);
   const currentServerTime = useEventStore((state) => state.currentServerTime);
-  const eventDate = EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000;
+  const eventDate = EVENT_START_DATE.getTime() + index * DAY_MILLISEC;
   const [isAniPlaying, setIsAniPlaying] = useState(false);
-  const isEventToday =
-    getEventDateState(currentServerTime, eventDate) === "active";
+  const isEventToday = getEventDateState(currentServerTime, eventDate) === "active";
   const authModal = <AuthModal onComplete={() => joinEvent(index)} />;
 
   async function onClickWrite() {
@@ -77,29 +70,21 @@ export default function InteractionAnswer({
         </span>
 
         <div className="flex flex-col gap-4">
-          <span className="text-body-l xl:text-title-s text-neutral-50">
-            {answer.desc}
-          </span>
+          <span className="text-body-l xl:text-title-s text-neutral-50">{answer.desc}</span>
 
-          <span className="text-detail-l xl:text-body-s text-neutral-300">
-            {answer.subdesc}
-          </span>
+          <span className="text-detail-l xl:text-body-s text-neutral-300">{answer.subdesc}</span>
         </div>
       </div>
 
       <div className="absolute bottom-10 flex flex-col items-center gap-10">
         {isLogin || !isEventToday ? (
           <>
             <span className="text-body-m text-green-400 font-bold">
-              {isEventToday
-                ? "오늘 응모가 완료되었습니다!"
-                : "응모 기간이 지났습니다!"}
+              {isEventToday ? "오늘 응모가 완료되었습니다!" : "응모 기간이 지났습니다!"}
             </span>
 
             <div className="flex gap-4 items-end">
-              <div
-                className={`${isEventToday ? "flex" : "hidden"} flex-col gap-2}`}
-              >
+              <div className={`${isEventToday ? "flex" : "hidden"} flex-col gap-2}`}>
                 <div className="flex relative flex-col items-center animate-bounce">
                   <span className=" bg-green-400 text-nowrap text-body-s xl:text-body-m text-neutral-800 rounded-full px-4 xl:px-8 py-1 xl:py-2 font-bold">
                     당첨확률 UP!

diff --git a/src/mainPage/features/interactions/modal/joinEvent.js b/src/mainPage/features/interactions/modal/joinEvent.js
@@ -1,20 +1,21 @@
 import userStore from "@main/auth/store.js";
 import { EVENT_DRAW_ID } from "@common/constants.js";
 import { fetchServer } from "@common/dataFetch/fetchServer.js";
-import { EVENT_START_DATE } from "@common/constants";
+import { EVENT_START_DATE, DAY_MILLISEC } from "@common/constants";
 import useEventStore from "@main/realtimeEvent/store.js";
 import { getDayDifference } from "@common/utils";
 
 export default function joinEvent(index) {
   const isLogin = userStore.getState().isLogin;
-  const eventDate = EVENT_START_DATE.getTime() + index * 24 * 60 * 60 * 1000;
+  const eventDate = EVENT_START_DATE.getTime() + index * DAY_MILLISEC;
   const currentServerTime = useEventStore.getState().currentServerTime;
 
   if (isLogin && getDayDifference(eventDate, currentServerTime) === 0) {
     fetchServer(`/api/v1/event/draw/${EVENT_DRAW_ID}/participation`, {
       method: "POST",
     }).catch((e) => {
       console.log(e);
+      alert("이벤트 참여 전송 실패.")
     });
   }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,5 @@ export const EVENT_START_DATE = new Date(2024, 8, 9);

		export const SERVICE_TOKEN_ID = "AWESOME_ORANGE_ACCESS_TOKEN";
		export const ADMIN_TOKEN_ID = "AWESOME_ORANGE_ADMIN_ACCESS_TOKEN";

		export const DAY_MILLISEC = 1000 * 24 * 60 * 60;