Merge pull request #153 from softeerbootcamp4th/fix/#145/additionalCh…

…anges Fix/#145/additional changes
softeerbootcamp4th · Aug 21, 2024 · 5c71541 · 5c71541
2 parents 105e40e + 32e23cf
commit 5c71541
Show file tree

Hide file tree

Showing 24 changed files with 108 additions and 74 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -1,14 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/hyundai.svg" type="image/svg+xml" />
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>현대 캐스퍼 관리자</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/admin/public/hyundai.svg b/admin/public/hyundai.svg
diff --git a/admin/public/vite.svg b/admin/public/vite.svg
diff --git a/admin/src/components/form/InputForm.jsx b/admin/src/components/form/InputForm.jsx
@@ -24,8 +24,8 @@ function InputForm({ label, id, placeholder, value, onChange }) {
 InputForm.propTypes = {
   label: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  value: PropTypes.string.isRequired,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onChange: PropTypes.func.isRequired,
 };
 

diff --git a/admin/src/components/header/AdminHeader.jsx b/admin/src/components/header/AdminHeader.jsx
@@ -32,6 +32,9 @@ function AdminHeader() {
     } else {
       navigate('/login');
     }
+  }, []);
+
+  useEffect(() => {
     const getDate = async () => {
       const response = await getEventSchedules();
       if (response.code === 'UNAUTHORIZED') {
@@ -55,8 +58,7 @@ function AdminHeader() {
     if (!isPreviousDayDisabled) {
       const previousDay = new Date(dateInfo);
       previousDay.setDate(previousDay.getDate() - 1);
-      const pathSegments = location.pathname.split('/');
-      const tabName = pathSegments[2];
+      const [, , tabName] = location.pathname.split('/');
       navigate(
         `/${dateFormatting(previousDay)}${tabName !== undefined ? `/${tabName}` : ''}`,
       );
@@ -67,8 +69,7 @@ function AdminHeader() {
     if (!isNextDayDisabled) {
       const nextDay = new Date(dateInfo);
       nextDay.setDate(nextDay.getDate() + 1);
-      const pathSegments = location.pathname.split('/');
-      const tabName = pathSegments[2];
+      const [, , tabName] = location.pathname.split('/');
       navigate(
         `/${dateFormatting(nextDay)}${tabName !== undefined ? `/${tabName}` : ''}`,
       );

diff --git a/admin/src/pages/reward/Reward.jsx b/admin/src/pages/reward/Reward.jsx
@@ -39,14 +39,19 @@ function Reward() {
 
   const handleChange = (index, field, value) => {
     setModified(true);
+
+    const newValue =
+      field === 'ranking' || field === 'stock' ? Number(value) : value;
+
     setRewardData(prevState =>
       prevState.map((item, i) =>
-        i === index ? { ...item, [field]: value } : item,
+        i === index ? { ...item, [field]: newValue } : item,
       ),
     );
   };
 
   const handleSubmit = async () => {
+    console.log(rewardData);
     const formData = createFormData(rewardData);
     try {
       const response = await putAdminReward(formData);

diff --git a/admin/src/pages/reward/RewardContent.jsx b/admin/src/pages/reward/RewardContent.jsx
@@ -22,8 +22,8 @@ function RewardContent({ response, onChange }) {
           <InputForm
             label="등수"
             id={`ranking-${index}`}
-            placeholder={String(item.ranking)}
-            value={String(item.ranking)}
+            placeholder={item.ranking}
+            value={item.ranking}
             onChange={value => handleInputChange(index, 'ranking', value)}
           />
           <InputForm
@@ -36,8 +36,8 @@ function RewardContent({ response, onChange }) {
           <InputForm
             label="재고"
             id={`stock-${index}`}
-            placeholder={String(item.stock)}
-            value={String(item.stock)}
+            placeholder={item.stock}
+            value={item.stock}
             onChange={value => handleInputChange(index, 'stock', value)}
           />
           <ImageUploader

diff --git a/service/src/components/modal/AlreadyGetCarModal.jsx b/service/src/components/modal/AlreadyGetCarModal.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext } from 'react';
 import BlueButton from '@/components/buttons/BlueButton';
 import { AuthContext } from '@/context/authContext';
 import { useNavigate } from 'react-router-dom';
@@ -11,9 +11,7 @@ function AlreadyGetCarModal({ close }) {
   const { userInfo, setUserInfo } = useContext(AuthContext);
   const navigate = useNavigate();
 
-  const handleExit = useCallback(() => {
-    navigate('/event');
-  }, [navigate]);
+  const handleExit = () => navigate('/event');
 
   return (
     <ModalFrame

diff --git a/service/src/components/modal/ExitModal.jsx b/service/src/components/modal/ExitModal.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import BlueButton from '@/components/buttons/BlueButton';
 import WhiteButton from '@/components/buttons/WhiteButton';
 import PropTypes from 'prop-types';
@@ -7,13 +7,13 @@ import { useNavigate } from 'react-router-dom';
 function ExitModal({ onClose, game }) {
   const navigate = useNavigate();
 
-  const gotoBack = useCallback(() => {
+  const gotoBack = () => {
     if (game === 'worldCup') {
       navigate(`/event`, { state: { scrollTo: 'worldCup' } });
     } else {
       navigate(`/event`, { state: { scrollTo: 'miniQuiz' } });
     }
-  }, []);
+  };
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-opacity-50 bg-neutral-black z-[100]">
       <div className="bg-neutral-white px-2000 rounded-[20px] pt-1500 pb-800">

diff --git a/service/src/components/modal/GetItemModal.jsx b/service/src/components/modal/GetItemModal.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext } from 'react';
 import BlueButton from '@/components/buttons/BlueButton';
 import getCarModalImage from '@/assets/images/getCarModalImage.svg';
 import getItemModalImage from '@/assets/images/getItemModalImage.svg';
@@ -13,7 +13,7 @@ function GetItemModal({ close, item }) {
   const { toolBoxCnt } = userInfo;
 
   const navigate = useNavigate();
-  const handleParticipants = useCallback(async () => {
+  const handleParticipants = async () => {
     try {
       if (item === '자동차 아이템') {
         const result = await postParticipants();
@@ -29,7 +29,7 @@ function GetItemModal({ close, item }) {
     } catch (error) {
       console.error('WorldCup 참여 등록 API 통신 실패:', error);
     }
-  }, [navigate]);
+  };
   return (
     <ModalFrame handleExit={close} tag={item} title="아이템을 얻었어요!">
       <div className="flex-col px-1500 set-center">

diff --git a/service/src/constants/newCarIntro/newCarDetailData.jsx b/service/src/constants/newCarIntro/newCarDetailData.jsx
@@ -10,36 +10,42 @@ const newCarDetailData = [
     id: 1,
     title: '실내/외 V2L (Vehicle to Load)',
     description: '야외/실내에서 자유로운 전자기기 사용',
+    alt: '캐스퍼 차량의 실내외에서 V2L을 활용하여 전자기기를 사용하는 모습',
     imageSrc: image1,
   },
   {
     id: 2,
     title: '넓은 2열 공간',
     description: '길어진 휠 베이스',
+    alt: '캐스퍼의 넓어진 2열 공간을 보여주는 이미지',
     imageSrc: image2,
   },
   {
     id: 3,
     title: '클러스터 & 내비게이션',
     description: '더 커진 10.25인치 화면',
+    alt: '캐스퍼의 10.25인치 화면 클러스터와 내비게이션 이미지',
     imageSrc: image3,
   },
   {
     id: 4,
     title: '고속도로 주행 보조',
     description: '장거리 고속도로 운전도 편안하게',
+    alt: '캐스퍼의 고속도로 주행 보조 기능을 설명하는 이미지',
     imageSrc: image4,
   },
   {
     id: 5,
     title: '서라운드 뷰 모니터',
     description: '좁은 길을 지날 때, 주차할 때',
+    alt: '캐스퍼의 서라운드 뷰 모니터를 활용하는 모습',
     imageSrc: image5,
   },
   {
     id: 6,
     title: '스마트폰 무선 충전',
     description: 'USB 연결 없이',
+    alt: '캐스퍼 차량에서 스마트폰을 무선으로 충전하는 장면',
     imageSrc: image6,
   },
 ];

diff --git a/service/src/pages/joinEvent/CarCard.jsx b/service/src/pages/joinEvent/CarCard.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext } from 'react';
 import noCarImage from '@/assets/images/noCarImage.svg';
 import carImage from '@/assets/images/carImage.svg';
 import BlueButton from '@/components/buttons/BlueButton';
@@ -10,9 +10,9 @@ function CarCard() {
   const { userInfo } = useContext(AuthContext);
   const navigate = useNavigate();
 
-  const gotoWorldCup = useCallback(() => {
+  const gotoWorldCup = () => {
     navigate('/event/worldCup');
-  }, []);
+  };
 
   return (
     <div className="flex flex-col justify-between hover-scale-ani bg-carCard px-800 pt-700 pb-500 w-[320px] h-[417px] rounded-[30px]">

diff --git a/service/src/pages/joinEvent/JoinEventIntroMain.jsx b/service/src/pages/joinEvent/JoinEventIntroMain.jsx
@@ -23,7 +23,6 @@ function JoinEventIntroMain() {
     const getData = async () => {
       try {
         const response = await getScenario();
-        console.log(response);
         const { day, commonScenario } = response;
         setDay(day);
         setScenario(commonScenario);

diff --git a/service/src/pages/joinEvent/MiniQuiz.jsx b/service/src/pages/joinEvent/MiniQuiz.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import BlueButton from '@/components/buttons/BlueButton';
 import miniQuizIntro1 from '@/assets/images/miniQuizIntro1.svg';
 import miniQuizIntro2 from '@/assets/images/miniQuizIntro2.svg';
@@ -51,10 +51,6 @@ function MiniQuiz() {
     }
   }, [countDownStart]);
 
-  const gotoMiniQuiz = useCallback(() => {
-    navigate('/event/miniQuiz');
-  }, []);
-
   return (
     <div className="flex px-3000 pt-2000 pb-2900">
       <div className="relative min-w-[610px] h-[400px]">
@@ -75,7 +71,7 @@ function MiniQuiz() {
           <img src={miniQuizIntro3} alt="miniQuizIntro3" />
         </div>
       </div>
-      <div className="w-[780px] z-0 ml-3000">
+      <div className="relative w-[780px] z-0 ml-3000">
         <div className="space-y-800">
           <div className="text-primary-blue text-detail-1-bold">
             Event2. 툴박스 얻기
@@ -90,14 +86,16 @@ function MiniQuiz() {
             </div>
           </div>
         </div>
-        <div className="whitespace-pre-line text-detail-2-medium mt-400 mb-1200">
+        <div className="whitespace-pre-line text-detail-2-medium mt-400 mb-200">
           {`월드컵에서 알 수 있는 캐스퍼 EV에 대한  일일 미니 퀴즈를 맞추고
                     툴박스 아이템을 받아요. 툴박스 아이템은 응모에 한번 참여하면 사라져요.`}
         </div>
+        <div className="text-gray-500 text-detail-3-regular mb-400">
+          *12시부터 13시까지는 퀴즈 준비시간으로 퀴즈 참여가 불가능합니다.
+        </div>
         <BlueButton
           value="이벤트 참여하기"
-          // 당일 toolbox 수령했으면 이미 아이템을 수령하여 재수령이 불가능합니다 모달 보여주고 돌아가기 참여하기 버튼 만들어서 다시 navigate하면 될 듯 팀원 상의 후 정한 내용
-          onClickFunc={gotoMiniQuiz}
+          onClickFunc={() => navigate('/event/miniQuiz')}
           styles="px-2000 py-400 text-detail-2-medium"
         />
       </div>

diff --git a/service/src/pages/joinEvent/ToolBoxCard.jsx b/service/src/pages/joinEvent/ToolBoxCard.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext } from 'react';
 import BlueButton from '@/components/buttons/BlueButton';
 import noToolBoxImage from '@/assets/images/noToolBoxImage.svg';
 import toolBoxImage from '@/assets/images/toolBoxImage.svg';
@@ -10,9 +10,9 @@ function ToolBoxCard() {
   const navigate = useNavigate();
   const { userInfo } = useContext(AuthContext);
 
-  const gotoMiniQuiz = useCallback(() => {
+  const gotoMiniQuiz = () => {
     navigate('/event/miniQuiz');
-  }, []);
+  };
 
   return (
     <div className="flex flex-col justify-between hover-scale-ani bg-toolBoxCard px-800 pt-700 pb-500 h-[417px] w-[320px] rounded-[30px]">

diff --git a/service/src/pages/joinEvent/WorldCup.jsx b/service/src/pages/joinEvent/WorldCup.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import BlueButton from '@/components/buttons/BlueButton';
 import worldCupIntro1 from '@/assets/images/worldCupIntro1.svg';
 import worldCupIntro2 from '@/assets/images/worldCupIntro2.svg';
@@ -8,9 +8,10 @@ import { useNavigate } from 'react-router-dom';
 function WorldCup() {
   const navigate = useNavigate();
 
-  const gotoWorldCup = useCallback(() => {
+  const gotoWorldCup = () => {
     navigate('/event/worldCup');
-  }, []);
+  };
+
   return (
     <>
       <div className="px-3000 pt-2000 pb-500">

diff --git a/service/src/pages/miniquiz/LoadingQuiz.jsx b/service/src/pages/miniquiz/LoadingQuiz.jsx
@@ -5,9 +5,10 @@ import { useNavigate } from 'react-router-dom';
 
 function LoadingQuiz() {
   const navigate = useNavigate();
-  const handleExit = useCallback(() => {
+
+  const handleExit = () => {
     navigate('/event');
-  }, [navigate]);
+  };
 
   const handleRefresh = useCallback(() => {
     window.location.reload();

diff --git a/service/src/pages/miniquiz/MiniQuizResultMain.jsx b/service/src/pages/miniquiz/MiniQuizResultMain.jsx
@@ -29,9 +29,9 @@ function MiniQuizResultMain({ response }) {
     check();
   }, []);
 
-  const handleExit = useCallback(() => {
+  const handleExit = () => {
     navigate('/event', { state: { scrollTo: 'miniQuiz' } });
-  }, []);
+  };
 
   const closeToolBoxModal = useCallback(() => {
     setToolBoxModal(false);

diff --git a/service/src/pages/miniquiz/NoQuizMain.jsx b/service/src/pages/miniquiz/NoQuizMain.jsx
@@ -3,16 +3,23 @@ import WhiteButton from '@/components/buttons/WhiteButton';
 import { useNavigate } from 'react-router-dom';
 
 function NoQuizMain() {
-  const navigate = useNavigate(); //useNavigate은 리렌더링 시에는 재생성이 되지 않음 그렇기에 useCallback 안 씀
+  const navigate = useNavigate();
+  //useNavigate는 훅이기에 랜더링될 때 navigate의 레퍼런스가 바뀜
+  //따라서 useCallback으로 선언해서 의존성을 넣는 것은 child의 재렌더링을 방지할 수 없음
+  /* const navigateRef = useRef(navigate);
+   *
+   *const handleExit = useCallback(() => {
+   *  navigateRef.current('/some-path');
+   *}, []);
+   */
+  //이런 식으로 하면 되긴 하지만 이 페이지에서는 불필요한 최적화임
 
-  const handleExit = useCallback(() => {
-    navigate('/event');
-  }, []);
+  const handleExit = () => navigate('/event');
 
   return (
     <div className="flex flex-col items-center h-screen bg-miniquiz-paper pt-5000">
       <div className="text-heading-banner-title-3 text-gradient-blue-purple py-500">
-        퀴즈 정보가 없습니다.
+        12시부터 13까지는 퀴즈 준비시간입니다!!!
       </div>
       <div className="text-heading-banner-title-3 text-gradient-blue-purple pb-1000">
         이벤트 페이지로 돌아가시겠습니까???