Fix: build error

eunji-0623 · Jul 12, 2024 · 88cf0bc · 88cf0bc
1 parent 11065ca
commit 88cf0bc
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 82 deletions.
diff --git a/components/ActivityDetails/Reservation/Reservation.tsx b/components/ActivityDetails/Reservation/Reservation.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { format, addDays } from 'date-fns';
 import { PrimaryButton } from '@/components/Button/Button';
 import { usePopup } from '@/hooks/usePopup';
@@ -25,21 +25,47 @@ export default function Reservation({ activity }: ReservationProps) {
   const { openPopup } = usePopup();
   const { openModal, closeModal } = useModal();
 
-  useEffect(() => {
-    if (selectedDate) {
-      updateModal(selectedDate, selectedTime);
-    }
-  }, [selectedDate]);
+  const getAvailableTimes = useCallback(
+    (date: Date | null) => {
+      if (!date) return [];
+      return schedules
+        .filter(
+          (schedule) =>
+            format(new Date(schedule.date), 'yyyy-MM-dd') ===
+            format(date, 'yyyy-MM-dd')
+        )
+        .map((schedule) => `${schedule.startTime} ~ ${schedule.endTime}`);
+    },
+    [schedules]
+  );
+
+  const updateModal = useCallback(
+    (date: Date | null, time: string | null) => {
+      setModal((prevModal) => ({
+        ...prevModal,
+        content: (
+          <ReservationModal
+            selectedDate={date}
+            handleDateChange={handleDateChange}
+            getAvailableTimes={getAvailableTimes}
+            selectedTime={time}
+            handleTimeChange={handleTimeChange}
+          />
+        ),
+      }));
+    },
+    [getAvailableTimes, setModal]
+  );
 
   useEffect(() => {
-    if (selectedTime) {
+    if (selectedDate) {
       updateModal(selectedDate, selectedTime);
     }
 
     if (selectedDate && selectedTime) {
       setButtonText(`${format(selectedDate, 'yy/MM/dd')} ${selectedTime}`);
     }
-  }, [selectedTime]);
+  }, [selectedDate, selectedTime, updateModal]);
 
   useEffect(() => {
     const isDisabled = !selectedTime;
@@ -79,32 +105,6 @@ export default function Reservation({ activity }: ReservationProps) {
 
   const totalPrice = pricePerPerson * participants;
 
-  const updateModal = (date: Date | null, time: string | null) => {
-    setModal((prevModal) => ({
-      ...prevModal,
-      content: (
-        <ReservationModal
-          selectedDate={date}
-          handleDateChange={handleDateChange}
-          getAvailableTimes={getAvailableTimes}
-          selectedTime={time}
-          handleTimeChange={handleTimeChange}
-        />
-      ),
-    }));
-  };
-
-  const getAvailableTimes = (date: Date | null) => {
-    if (!date) return [];
-    return schedules
-      .filter(
-        (schedule) =>
-          format(new Date(schedule.date), 'yyyy-MM-dd') ===
-          format(date, 'yyyy-MM-dd')
-      )
-      .map((schedule) => `${schedule.startTime} ~ ${schedule.endTime}`);
-  };
-
   useEffect(() => {
     setModal((prevModal) => ({
       ...prevModal,

diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
@@ -12,29 +12,27 @@ function AllActivity() {
         className="w-[286px] t:w-[223px] m:w-[170px] h-[286px] t:h-[223px] m:h-[170px] rounded-xl bg-[url('/image/Testimage.jpg')]"
         style={{
           backgroundImage:
-            'linear-gradient(180deg, rgba(0, 0, 0, 0.10) 20.33%, rgba(0, 0, 0, 0.60) 100%),url("/image/Testimage.jpg")',
+            'linear-gradient(180deg, rgba(0, 0, 0, 0.10) 20.33%, rgba(0, 0, 0, 0.60) 100%), url("/image/Testimage.jpg")',
         }}
       ></div>
       <div>
         <div className="flex items-center mt-[16.5px]">
-          <Image
-            src={StarImg}
-            alt="별점 표시 이미지"
-            width={20}
-            height={20}
-          ></Image>
+          <Image src={StarImg} alt="별점 표시 이미지" width={20} height={20} />
           <div className="font-sans text-[16px] font-[500] ml-[5px]">
             별 점{' '}
-            <span className="font-sans text-[16px] text-[#A1A1A1] font-[500] ">
+            <span className="font-sans text-[16px] text-[#A1A1A1] font-[500]">
               (리뷰 수)
             </span>
           </div>
         </div>
         <div className="font-sans text-[24px] m:text-[18px] font-[600] mt-[10px]">
           체험 제목
         </div>
-        <div className="font-sans text-[28px] text-[20px] font-[700] mt-[15px]">
-          ₩ 가격 <span className="font-sans text-[20px] text-[16px] font-[400]">/ 인</span>
+        <div className="font-sans text-[28px] m:text-[20px] font-[700] mt-[15px]">
+          ₩ 가격{' '}
+          <span className="font-sans text-[20px] m:text-[16px] font-[400]">
+            / 인
+          </span>
         </div>
       </div>
     </div>
@@ -45,10 +43,10 @@ function AllActivities() {
   return (
     <div>
       <div className="flex justify-between">
-        <div className='relative t:w-[520px] m:w-[230px]'>
+        <div className="relative t:w-[520px] m:w-[230px]">
           <div className="flex gap-[24px] t:gap-[14px] m:gap-[8px] t:w-[520px] m:w-[230px] overflow-auto scrollbar-hide">
-            {Kategories.map((Kategorie) => (
-              <CatergoryBtn categoryName={Kategorie} />
+            {Kategories.map((Kategorie, index) => (
+              <CatergoryBtn key={index} categoryName={Kategorie} />
             ))}
           </div>
           <div className="p:hidden absolute top-0 right-0 w-20 m:w-3 h-full pointer-events-none bg-gradient-to-l from-white to-transparent"></div>
@@ -59,16 +57,18 @@ function AllActivities() {
         🛼 모든 체험
       </div>
       <div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[6px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide">
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
+        <AllActivity />
+        <AllActivity />
+        <AllActivity />
+        <AllActivity />
+        <AllActivity />
+        <AllActivity />
+        <AllActivity />
+        <AllActivity />
+      </div>
+      <div className="text-[30px] font-[700] flex justify-center mb-[342px] mt-[70px]">
+        페이지네이션 버튼
       </div>
-      <div className='text-[30px] font-[700] flex justify-center mb-[342px] mt-[70px]'>페이지네이션 버튼</div>
     </div>
   );
 }

diff --git a/components/Lander/BestActivities.tsx b/components/Lander/BestActivities.tsx
@@ -40,7 +40,7 @@ function BestActivities() {
           🔥 인기 체험
         </span>
         <div className="t:hidden m:hidden">
-          <PaginationArrowButton></PaginationArrowButton>
+          {/* <PaginationArrowButton></PaginationArrowButton> */}
         </div>
       </div>
       <div className="flex gap-[32px] m:gap-[16px] mt-[34px] overflow-auto scrollbar-hide">

diff --git a/components/PriceFilterBtn/PriceFilterBtn.tsx b/components/PriceFilterBtn/PriceFilterBtn.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import filterIcon from '@/public/icon/filter_arrowdown.svg';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import useClickOutside from '@/hooks/useClickOutside';
 
 export default function PriceFilterBtn() {
@@ -10,7 +10,7 @@ export default function PriceFilterBtn() {
   );
 
   return (
-    <div className='relative'>
+    <div className="relative">
       <button
         className="flex justify-between items-center w-[127px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[120px] m:w-[90px] m:h-[41px] border-var-green2 px-[20px] bg-white"
         ref={dropDownElement}
@@ -27,10 +27,10 @@ export default function PriceFilterBtn() {
       {showMenuList && (
         <div className="absolute">
           <div className="relative left-0 bottom-[-8px] z-50 flex w-[127px] t:w-[120px] m:w-[90px] flex-col shadow-lg rounded-[8px] animate-slideDown">
-            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 w-[127px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-t-[8px] bg-white hover:bg-var-gray2 ">
+            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 w-[127px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-t-[8px] bg-white hover:bg-var-gray2">
               가격이 낮은 순
             </button>
-            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 border-t-0  w-[127px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-b-[8px] bg-white hover:bg-var-gray2">
+            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 border-t-0 w-[127px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-b-[8px] bg-white hover:bg-var-gray2">
               가격이 높은 순
             </button>
           </div>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,13 +8,14 @@ export default function Document() {
         <title>GlobalNomad</title>
         <link rel="icon" href="/favicon.ico" />
         <script
+          async
           type="text/javascript"
           src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&libraries=services,clusterer,drawing`}
         ></script>
         <meta property="og:title" content="GlobalNomad" />
         <meta
           property="og:description"
-          content="사람들이 여행을 갈 때, 가서 뭘 할지, 비용은 얼마인지 등 여러 고민을 하게 된다. 바쁜 현대인의 이런 고민을 줄여주기 위해 플랫폼 안에 잘 짜인 체험 상품을 보고 간단하게 예약할 수 있는 서비스입니다."
+          content="사람들이 여행을 갈 때, 가서 뭘 할지, 비용은 얼마인지 등 여러 고민을 하게 된다. 바쁜 현대인의 이런 고민을 줄여주기 위해 플랫폼 안에 잘 짜인 체험 상품을 보고 간단하게 예약할 수 있는 서비스입니다."
         />
         <meta property="og:image" content="/image/globalnomad.png" />
         {/* <meta property="og:url" content="https://globalnomad.com" /> */}

diff --git a/pages/activity-details/[id].tsx b/pages/activity-details/[id].tsx
@@ -1,7 +1,7 @@
 import ActivityDetails from '@/components/ActivityDetails/ActivityDetails';
 import { useRouter } from 'next/router';
 
-export default function activityDetails() {
+export default function ActivityDetailsPage() {
   const router = useRouter();
   const { id } = router.query;
   const activityId = typeof id === 'string' ? parseInt(id, 10) : undefined;

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -35,11 +35,11 @@ export default function LoginPage() {
     const isFormFilled = !!email && !!password;
 
     return isFormFilled && isNotError;
-  }, [errors.email, errors.password, watchFields]);
+  }, [errors.email, errors.password, getValues]);
 
   useEffect(() => {
     if (isLoggedIn) router.push('/');
-  }, [isLoggedIn]);
+  }, [isLoggedIn, router]);
 
   return (
     <div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">

diff --git a/pages/logoutTest.tsx b/pages/logoutTest.tsx
diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -60,14 +60,15 @@ export default function SingupPage() {
     errors.password,
     errors.passwordCheck,
     errors.nickname,
-    watchFields,
+    getValues,
+    isChecked,
   ]);
 
   useEffect(() => {
     if (isLoggedIn) {
       router.push('/mypage');
     }
-  }, [isLoggedIn]);
+  }, [isLoggedIn, router]);
 
   return (
     <div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">