Feat: 가격 필터 기능 적용

ssumai-kr · Jul 14, 2024 · 32b553d · 32b553d
2 parents f3eb9bf + 26efffc
commit 32b553d
Show file tree

Hide file tree

Showing 63 changed files with 1,770 additions and 458 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
@@ -125,7 +125,7 @@ export function CircleCloseButton({ onClick }: SimpleButtonProps) {
 /* 닫기 버튼 - 기본 버전  */
 export function CloseButton({ onClick }: SimpleButtonProps) {
   return (
-    <button onClick={onClick}>
+    <button onClick={onClick} className="cursor-pointer">
       <Image src="/icon/btn_x_medium.svg" width={24} height={24} alt="닫기" />
     </button>
   );
@@ -185,7 +185,7 @@ export function MeatballButton({ onClick }: SimpleButtonProps) {
 /* 추가하기 버튼 - 항목 추가 시 사용 */
 export function PlusButton({ onClick }: SimpleButtonProps) {
   return (
-    <button onClick={onClick}>
+    <button type="button" onClick={onClick}>
       <Image src="/icon/btn_plus.svg" width={56} height={56} alt="추가하기" />
     </button>
   );
@@ -194,7 +194,7 @@ export function PlusButton({ onClick }: SimpleButtonProps) {
 /* 제거하기 버튼 - 항목 제거 시 사용 */
 export function MinusButton({ onClick }: SimpleButtonProps) {
   return (
-    <button onClick={onClick}>
+    <button type="button" onClick={onClick}>
       <Image src="/icon/btn_minus.svg" width={56} height={56} alt="제거하기" />
     </button>
   );
@@ -215,14 +215,11 @@ export function ArrowCircleButton({ onClick }: SimpleButtonProps) {
 }
 
 /* 이미지 등록하기 버튼 */
-export function ImageUploadButton({ onClick }: SimpleButtonProps) {
+export function ImageUploadButton() {
   return (
-    <button
-      className="flex flex-col gap-[40px] items-center justify-center w-[180px] h-[180px] border border-dashed border-var-gray8 rounded-lg"
-      onClick={onClick}
-    >
+    <div className="flex flex-col gap-[40px] items-center justify-center w-[180px] h-[180px] border border-dashed border-var-gray8 rounded-lg">
       <Image src="/icon/icon_plus.svg" width={30} height={30} alt="추가" />
       <p className="text-[24px]">이미지 등록</p>
-    </button>
+    </div>
   );
 }
diff --git a/components/Button/Button.types.ts b/components/Button/Button.types.ts
@@ -1,7 +1,7 @@
 export interface PrimaryButtonProps {
   size: 'small' | 'medium' | 'large';
   style: 'dark' | 'bright' | 'disabled' | 'enabled';
-  children: string;
+  children?: string;
   disabled?: boolean;
   onClick: () => void;
 }

diff --git a/components/InputBox/InputBox.tsx b/components/InputBox/InputBox.tsx
@@ -21,8 +21,13 @@ export default function InputBox({
 }: InputBoxProps) {
   return (
     <div className="flex flex-col gap-[16px] relative">
-      {label && <label className="text-[24px] font-bold">{label}</label>}
+      {label && (
+        <label className="text-[24px] font-bold" htmlFor={name}>
+          {label}
+        </label>
+      )}
       <input
+        id={name}
         className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6`}
         type={type}
         placeholder={placeholder}

diff --git a/components/InputBox/TextArea.tsx b/components/InputBox/TextArea.tsx
@@ -0,0 +1,40 @@
+import { InputBoxProps } from './InputBox.types';
+
+/*
+	label: label은 optional입니다.
+	type: 옵셔널이며 기본은 text입니다.
+	placeholder: placeholder입니다.
+	name: register의 필드 명입니다. 데이터를 담는 변수명 입니다.
+	validation: 옵셔널이며 유효성 검사 조건을 담는 변수입니다.
+	register, errors: 해당 input을 담는 리액트 훅 폼의 register와 errors객체를 넣어주세요.
+*/
+
+export default function TextArea({
+  label = '',
+  type = 'text',
+  placeholder,
+  name,
+  validation = {},
+  register,
+  errors,
+  readOnly = false,
+}: InputBoxProps) {
+  return (
+    <div className="flex flex-col gap-[16px] relative">
+      {label && <label className="text-[24px] font-bold">{label}</label>}
+      <textarea
+        className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6 w-full h-[346px] resize-none`}
+        type={type}
+        placeholder={placeholder}
+        {...register(name, { ...validation, readOnly })}
+        readOnly={readOnly}
+      />
+      {/* 에러 메세지 */}
+      {errors[name] && (
+        <span className="text-[12px] text-var-red2">
+          {errors[name]?.message}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/components/KategorieDropdown/KategorieDropdown.tsx b/components/KategorieDropdown/KategorieDropdown.tsx
@@ -64,7 +64,7 @@ function KategorieDropdown() {
   };
 
   return (
-    <div className="w-[800px] h-[56px] relative" ref={KateDropdownElement}>
+    <div className="w-[800px] h-[56px] relative z-10" 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`}
         onClick={handleOpen}
@@ -89,8 +89,7 @@ function KategorieDropdown() {
         )}
       </div>
       {isOpen ? (
-        <ul className="w-[800px] h-[260px] rounded-md bg-white absolute animate-slideDown bottom-[-266px] flex flex-col items-center justify-center">
-
+        <ul className="w-[800px] h-[260px] rounded-md bg-white absolute animate-slideDown bottom-[-266px] flex flex-col items-center justify-center shadow-kategorieDropdown">
           {Object.values(Kategories).map((category) => (
             <Kategorie key={category} name={category} setIsOpen={setIsOpen} />
           ))}