Merge branch 'master' into feature-jisung

eunji-0623 · Jul 15, 2024 · 40659ce · 40659ce
2 parents a608d88 + 71eea91
commit 40659ce
Show file tree

Hide file tree

Showing 48 changed files with 1,453 additions and 479 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/Button/Button.tsx b/components/Button/Button.tsx
@@ -20,19 +20,21 @@ const primaryStyleClasses = {
 
 /* 기본 버튼 - 로그인하기, 신청 불가 등 기본적인 형태의 버튼
 
-   size, style, onClick, children 필수 입력, disabled 선택 입력
+   size, style 필수 입력 onClick, children, disabled 선택 입력
    size 옵션 - small - width auto | medium - width 144px | large - width 100%
    style 옵션 - dark-어두운 배경에 흰글씨 | bright - 흰 배경에 어두운 글씨 | disabled - 회색 배경에 흰 글씨
    사용 예시 <Button size="small" style="dark" onClick={handleClick}>로그인하기</Button> */
 export function PrimaryButton({
+  type = 'button',
   size,
   style,
   children,
-  onClick,
+  onClick = () => {},
   disabled,
 }: PrimaryButtonProps) {
   return (
     <button
+      type={type}
       className={`flex items-center justify-center rounded-md ${primarySizeClasses[size]} ${primaryStyleClasses[style]} ${disabled ? 'cursor' : ''}`}
       onClick={onClick}
       disabled={disabled ?? false}
@@ -185,7 +187,7 @@ export function MeatballButton({ onClick }: SimpleButtonProps) {
 /* 추가하기 버튼 - 항목 추가 시 사용 */
 export function PlusButton({ onClick }: SimpleButtonProps) {
   return (
-    <button type="button" onClick={onClick}>
+    <button type="button" onClick={onClick} className="shrink-0">
       <Image src="/icon/btn_plus.svg" width={56} height={56} alt="추가하기" />
     </button>
   );
@@ -194,7 +196,7 @@ export function PlusButton({ onClick }: SimpleButtonProps) {
 /* 제거하기 버튼 - 항목 제거 시 사용 */
 export function MinusButton({ onClick }: SimpleButtonProps) {
   return (
-    <button type="button" onClick={onClick}>
+    <button type="button" onClick={onClick} className="shrink-0">
       <Image src="/icon/btn_minus.svg" width={56} height={56} alt="제거하기" />
     </button>
   );
@@ -217,7 +219,7 @@ export function ArrowCircleButton({ onClick }: SimpleButtonProps) {
 /* 이미지 등록하기 버튼 */
 export function ImageUploadButton() {
   return (
-    <div className="flex flex-col gap-[40px] items-center justify-center w-[180px] h-[180px] border border-dashed border-var-gray8 rounded-lg">
+    <div className="flex flex-col gap-[40px] items-center justify-center w-[180px] h-[180px] t:w-[206px] t:h-[206px] m:w-[167px] m:h-[167px] border border-dashed border-var-gray8 rounded-lg">
       <Image src="/icon/icon_plus.svg" width={30} height={30} alt="추가" />
       <p className="text-[24px]">이미지 등록</p>
     </div>

diff --git a/components/Button/Button.types.ts b/components/Button/Button.types.ts
@@ -1,9 +1,10 @@
 export interface PrimaryButtonProps {
+  type?: 'button' | 'submit' | 'reset' | undefined;
   size: 'small' | 'medium' | 'large';
   style: 'dark' | 'bright' | 'disabled' | 'enabled';
   children?: string;
   disabled?: boolean;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 export interface PaginationButtonProps {

diff --git a/components/KategorieDropdown/KategorieDropdown.tsx b/components/KategorieDropdown/KategorieDropdown.tsx
@@ -9,7 +9,7 @@ import { KategoriedDropState } from '@/states/KategorieDropState';
 import useClickOutside from '@/hooks/useClickOutside';
 
 const Kategories: { [key: string]: string } = {
-  '문화 예술': '문화 예술',
+  '문화 예술': '문화 · 예술',
   식음료: '식음료',
   스포츠: '스포츠',
   투어: '투어',
@@ -31,7 +31,7 @@ function Kategorie({ name, setIsOpen }: KategorieDropdownProps) {
   const textColor = isSelected ? 'text-white' : 'text-black';
   return (
     <li
-      className={`w-[784px] h-[40px] flex items-center pl-[36px] ${backgroundColor} ${textColor} relative rounded-md hover:bg-gray-100`}
+      className={`w-[784px] h-[40px] flex items-center pl-[36px] ${backgroundColor} ${textColor} relative rounded-md hover:bg-gray-100 t:w-full m:w-full`}
       onClick={changeKateogireInfo}
       style={{ pointerEvents: isSelected ? 'none' : 'auto' }}
     >
@@ -64,9 +64,12 @@ function KategorieDropdown() {
   };
 
   return (
-    <div className="w-[800px] h-[56px] relative z-10" ref={KateDropdownElement}>
+    <div
+      className="w-[800px] h-[56px] relative z-10 t:w-full m:w-full"
+      ref={KateDropdownElement}
+    >
       <div
-        className={`w-[800px] h-[56px] border-solid border border-var-gray7 rounded flex items-center pl-[16px] text-[16px] font-[400] font-sans ${isSelected} bg-white`}
+        className={`w-[800px] h-[56px] border-solid border border-var-gray7 rounded flex items-center pl-[16px] text-[16px] font-[400] font-sans ${isSelected} bg-white t:w-full m:w-full`}
         onClick={handleOpen}
       >
         {SelectedKateogorie.name ? SelectedKateogorie.name : '카테고리'}
@@ -88,14 +91,12 @@ function KategorieDropdown() {
           ></Image>
         )}
       </div>
-      {isOpen ? (
-        <ul className="w-[800px] h-[260px] rounded-md bg-white absolute animate-slideDown bottom-[-266px] flex flex-col items-center justify-center shadow-kategorieDropdown">
+      {isOpen && (
+        <ul className="w-[800px] h-[260px] rounded-md bg-white absolute animate-slideDown bottom-[-266px] flex flex-col items-center justify-center shadow-kategorieDropdown t:w-full m:w-full">
           {Object.values(Kategories).map((category) => (
             <Kategorie key={category} name={category} setIsOpen={setIsOpen} />
           ))}
         </ul>
-      ) : (
-        <div></div>
       )}
     </div>
   );