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

Feat: 예약 현황 반응형
eunji-0623 · Jul 17, 2024 · 0f14a30 · 0f14a30
2 parents 1719475 + 0b3fbb0
commit 0f14a30
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 12 deletions.
diff --git a/components/ActivityDetails/Map/Map.tsx b/components/ActivityDetails/Map/Map.tsx
@@ -40,5 +40,10 @@ export default function Map({ address }: MapProps) {
     };
   }, [address]);
 
-  return <div id="map" className="w-[800px] h-[500px] rounded-2xl" />;
+  return (
+    <div
+      id="map"
+      className="w-[800px] h-[500px] rounded-2xl t:w-full t:h-[276px] m:w-full m:h-[450px]"
+    />
+  );
 }
diff --git a/components/ActivityDetails/Reservation/Reservation.tsx b/components/ActivityDetails/Reservation/Reservation.tsx
@@ -13,6 +13,7 @@ import { ReservationProps } from './Reservation.types';
 import { useMutation } from '@tanstack/react-query';
 import { postActivityRequestParams } from '@/pages/api/activities/apiactivities.types';
 import { postActivityRequest } from '@/pages/api/activities/apiactivities';
+import { AxiosError } from 'axios';
 
 export default function Reservation({ activity }: ReservationProps) {
   const [selectedDate, setSelectedDate] = useState<Date | null>(
@@ -108,11 +109,35 @@ export default function Reservation({ activity }: ReservationProps) {
         callBackFnc: () => router.push(`/activity-details/${activity.id}`),
       });
     },
-    onError: (error) => {
+    onError: (error: AxiosError) => {
       console.error('예약 중 오류 발생:', error);
+      let errorMessage = '알 수 없는 오류가 발생했습니다.';
+
+      if (error.response) {
+        switch (error.response.status) {
+          case 400:
+            errorMessage = '이미 지난 일정은 예약할 수 없습니다.';
+            break;
+          case 401:
+            errorMessage =
+              '인증되지 않은 사용자입니다. 로그인 후 다시 시도해 주세요.';
+            break;
+          case 404:
+            errorMessage = '존재하지 않는 체험입니다.';
+            break;
+          case 409:
+            errorMessage =
+              '이미 예약된 활동이거나 확정 예약이 있는 체험입니다.';
+            break;
+          default:
+            errorMessage = error.message;
+            break;
+        }
+      }
+
       openPopup({
         popupType: 'alert',
-        content: '예약 중 오류가 발생했습니다. 다시 시도해 주세요.',
+        content: errorMessage,
         btnName: ['확인'],
       });
     },

diff --git a/components/Calendar/StyleWrapper.tsx b/components/Calendar/StyleWrapper.tsx
@@ -1,25 +1,35 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const StyleWrapper = styled.div`
   .fc {
     display: flex;
     flex-direction: column;
     height: 800px;
     overflow: hidden;
+    z-index: 0;
   }
 
   .fc-daygrid-day {
     height: auto;
     overflow: hidden;
     position: relative;
   }
+  .fc-scroller-harness {
+    @media (max-width: 768px) {
+      z-index: 0;
+    }
+  }
 
   .fc-daygrid-day-events {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     height: 80px;
     overflow: hidden;
+
+    @media (max-width: 768px) {
+      height: 50px;
+    }
   }
 
   .fc-daygrid-day-top {
@@ -34,6 +44,10 @@ export const StyleWrapper = styled.div`
     padding-left: 8px;
     height: 24px;
     overflow: hidden;
+
+    @media (max-width: 768px) {
+      padding-left: 4px;
+    }
   }
 
   .fc-event-inner {

diff --git a/components/CustomCalendar/CustomCalendar.tsx b/components/CustomCalendar/CustomCalendar.tsx
@@ -25,8 +25,9 @@ const CustomCalendar: React.FC<CustomCalendarProps> = ({
         onChange={handleDateChange}
         value={selectedDate}
         minDate={addDays(new Date(), 1)}
-        locale="en-US"
+        locale="ko"
         className="custom-calendar"
+        formatDay={(locale, date) => date.getDate().toString()}
       />
     </div>
   );

diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
@@ -32,7 +32,7 @@ function Modal() {
   return modal.isOpen ? (
     <>
       {/* 모바일에서는 화면 전체 크기로 띄우기 */}
-      <div className="hidden m:fixed m:inset-0 m:flex m:justify-center bg-white m:z-20">
+      <div className="hidden m:fixed m:inset-0 m:flex m:justify-center bg-white m:z-20 m:mt-[70px]">
         <div className="bg-white rounded-lg border border-nomad-black w-[480px] min-h-[600px] text-lg flex flex-col items-center p-6 relative">
           <div className="w-full flex justify-between items-center mb-5">
             <h2 className="text-[28px] font-bold">{modal.title}</h2>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -17,7 +17,7 @@ export default function Document() {
           content="사람들이 여행을 갈 때, 가서 뭘 할지, 비용은 얼마인지 등 여러 고민을 하게 된다. 바쁜 현대인의 이런 고민을 줄여주기 위해 플랫폼 안에 잘 짜인 체험 상품을 보고 간단하게 예약할 수 있는 서비스입니다."
         />
         <meta property="og:image" content="/image/globalnomad.png" />
-        {/* <meta property="og:url" content="https://globalnomad.com" /> */}
+        <meta property="og:url" content="https://globalnomad-5-8.netlify.app" />
         <meta property="og:type" content="website" />
       </Head>
       <body>

diff --git a/pages/calendar.tsx b/pages/calendar.tsx
@@ -7,9 +7,18 @@ import { useQuery } from '@tanstack/react-query';
 import { getMyActivityList } from '@/pages/api/myActivities/apimyActivities';
 import { getMyActivityListResponse } from '@/pages/api/myActivities/apimyActivities.types';
 import Spinner from '@/components/Spinner/Spinner';
+import { sideNavigationState } from '@/states/sideNavigationState';
+import { useRecoilState } from 'recoil';
+import SidenNavigationMobile from '@/components/SideNavigation/SideNavigationMobile';
+import hamburgerIcon from '@/public/icon/hamburger_icon.svg';
 
 export default function CalendarPage() {
   const [activityId, setActivityId] = useState<number | null>(null);
+  const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
+
+  const openSideNavigation = () => {
+    setIsOpen(!isOpen);
+  };
 
   const { data, error, isLoading } = useQuery<getMyActivityListResponse, Error>(
     {
@@ -33,17 +42,34 @@ export default function CalendarPage() {
   const hasActivities = data && data.activities.length > 0;
 
   return (
-    <div className="flex justify-center w-full mt-[72px] mb-12 gap-[24px] t:mt-[24px] t:gap-[16px]">
-      <SideNavigation />
-      <div className="flex flex-col w-[792px] gap-[24px] t:w-[429px] t:h-[556px] m:w-full m:h-[492px] m:pb-[210px]">
-        <p className="text-[32px] font-bold">예약 현황</p>
+    <div className="flex justify-center w-full mt-[72px] mb-12 gap-[24px] t:mt-[24px] t:gap-[16px] m:mt-[26px] m:gap-0">
+      <div className="m:hidden">
+        <SideNavigation />
+      </div>
+      <div className="p:hidden t:hidden">
+        {isOpen && <SidenNavigationMobile />}
+      </div>
+      <div className="flex flex-col w-[792px] gap-[24px] t:w-[429px] t:h-full m:w-full m:h-full m:px-[15px]">
+        <div className="flex m:gap-[15px]">
+          <Image
+            src={hamburgerIcon}
+            alt="햄버거 메뉴 아이콘"
+            className="p:hidden t:hidden"
+            onClick={() => openSideNavigation()}
+          />
+          <p className="text-[32px] font-bold">예약 현황</p>
+        </div>
         {hasActivities ? (
           <>
             <ActivitySelector
               onSelectActivity={handleSelectActivity}
               selectedActivityId={activityId}
             />
-            {activityId && <Calendar activityId={activityId} />}
+            {activityId && (
+              <div className="m:h-[800px]">
+                <Calendar activityId={activityId} />
+              </div>
+            )}
           </>
         ) : (
           <div className="flex flex-col items-center justify-center h-[500px]">