Merge pull request eunji-0623#26 from eunji-0623/조혜진

Feat: Loading Spinner, 404Page, build CI
ssumai-kr · Jul 13, 2024 · 26efffc · 26efffc
2 parents 629307c + 64736fa
commit 26efffc
Show file tree

Hide file tree

Showing 21 changed files with 248 additions and 157 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,19 @@
+name: Build # workflow 의 이름
+
+on: push # workflow 의 실행 시점
+
+jobs:
+  build: # job 의 이름
+    runs-on: ubuntu-latest # 실행할 OS 환경
+    steps: # job 의 세부 단계
+      # step1 : 코드 체크아웃
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # step2 : Node.js 설치
+      - name: Install dependencies
+        run: npm install
+
+      # step3 : 빌드
+      - name: Build Next.js app
+        run: npm run build
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -19,6 +19,7 @@ import {
   getActivityInfoResponse,
   getActivityReviewsResponse,
 } from '@/pages/api/activities/apiactivities.types';
+import Spinner from '../Spinner/Spinner';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -50,7 +51,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
   });
 
   if (isLoadingActivity || isLoadingReviews) {
-    return <div>Loading...</div>;
+    return <Spinner />;
   }
 
   if (activityError || reviewError) {

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/components/ReservationListCard/ReservationListCard.tsx b/components/ReservationListCard/ReservationListCard.tsx
@@ -1,6 +1,8 @@
 import Image from 'next/image';
 import { PrimaryButton } from '../Button/Button';
 import { statusStyle, statusTitles } from './reservationStatusInfo';
+import { useModal } from '@/hooks/useModal';
+import Review from '../Review/Review';
 import { ReservationCardProps } from '../ReservationFilter/myReservationTypes.types';
 import { usePopup } from '@/hooks/usePopup';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -10,6 +12,16 @@ import { formatCurrency } from '@/utils/formatCurrency';
 import Link from 'next/link';
 
 const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
+  const { openModal, closeModal } = useModal();
+
+  const handleOpenReviewModal = () => {
+    openModal({
+      title: '후기 작성',
+      hasButton: false,
+      content: <Review reservation={reservationData} closeModal={closeModal} />,
+    });
+  };
+
   const { openPopup } = usePopup();
   const userData = useUserData();
   const queryClient = useQueryClient();
@@ -85,7 +97,7 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
             <PrimaryButton
               size="medium"
               style="dark"
-              onClick={handleCancelReservation}
+              onClick={handleOpenReviewModal}
             >
               후기 작성
             </PrimaryButton>