Merge branch 'dev' of https://github.com/codeit-team6/nomadia into dev

Author: jyn

src/features/activityId/components/reservation-form.tsx

@@ -1,6 +1,7 @@
 'use client';
 import axios from 'axios';
 import { ArrowLeft, Minus, Plus, X } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -74,6 +75,7 @@ const ReservationForm = ({
     year: String(year),
     month: String(month + 1).padStart(2, '0'),
   });
+  const router = useRouter();
 
   // 리액트훅폼
   const {
@@ -398,7 +400,6 @@ const ReservationForm = ({
 
           {/* 예약하기/확인 버튼 */}
           <button
-            disabled={!isLoggedIn}
             type="submit"
             className={cn(
               'cursor-pointer text-white',
@@ -409,6 +410,10 @@ const ReservationForm = ({
               'z-100 lg:mt-0 lg:w-[13.5rem]',
             )}
             onClick={(e) => {
+              if (!isLoggedIn) {
+                openSecondModal(undefined, 'need-login');
+                return;
+              }
               if (!isDesktop) {
                 if (!appear && !isValid) {
                   appearModal();
@@ -450,6 +455,30 @@ const ReservationForm = ({
           </div>
         </SecondModal>
       )}
+      {secondModalName === 'need-login' && (
+        <SecondModal type="warning" extraClassName="md:pb-[1rem]">
+          <Modal.Header>로그인이 필요합니다.</Modal.Header>
+          <div className="mb-0 flex w-[23.4rem] gap-2 md:w-[28.2rem] md:gap-3">
+            <Modal.Button
+              color="white"
+              ariaLabel="취소"
+              onClick={closeSecondModal}
+            >
+              취소
+            </Modal.Button>
+            <Modal.Button
+              color="blue"
+              ariaLabel="로그인하기"
+              onClick={() => {
+                router.push('/login');
+                closeSecondModal();
+              }}
+            >
+              로그인 하기
+            </Modal.Button>
+          </div>
+        </SecondModal>
+      )}
     </>
   );
 };

src/features/activityId/components/reviews.tsx

@@ -12,6 +12,8 @@ import StarImage from '@/shared/components/star';
 import { cn } from '@/shared/libs/cn';
 import { formatPrice } from '@/shared/libs/utils/formatPrice';
 
+import { formatDateWithDots } from '../libs/utils/formatDateWithDots';
+
 const Reviews = ({ activityId }: { activityId: number }) => {
   const [page, setPage] = useState(1);
   const { data } = useReviewsQuery(activityId, { page: page, size: 3 });
@@ -67,7 +69,7 @@ const Reviews = ({ activityId }: { activityId: number }) => {
                     dateTime={review.createdAt}
                     className="text-[1.2rem] font-semibold text-gray-400"
                   >
-                    {review.createdAt}
+                    {formatDateWithDots(review.createdAt)}
                   </time>
                 </header>
                 <section className="mt-[0.4rem] mb-[0.8rem] flex items-center">

src/features/activityId/libs/utils/formatDateWithDots.ts

@@ -0,0 +1,4 @@
+export const formatDateWithDots = (date: string) => {
+  const targetDate = new Date(date);
+  return `${targetDate.getFullYear()}.${targetDate.getMonth() + 1}.${targetDate.getDate()}`;
+};

src/shared/components/calendar/components/calendar-for-form.tsx

@@ -57,7 +57,8 @@ const CalendarForForm = ({
   isForReservation?: boolean;
   changeFormValue?: () => void;
 }) => {
-  const { setDate, setSelectedDate, year, month, date } = useCalendarStore();
+  const { setDate, setSelectedDate, year, month, selectedDate } =
+    useCalendarStore();
   const { thisMonthDays } = getMonthRange(year, month);
 
   const handleClick = (day: number) => {
@@ -100,30 +101,30 @@ const CalendarForForm = ({
         {/* children */}
         {thisMonthDays.map((day) => {
           const dateStr = formatDateToYMD(new Date(year, month, day));
+          const isSelected = dateStr === selectedDate;
           const hasSchedule = scheduleArray?.find(
             (schedule) => schedule.date === dateStr,
           );
-          const isSelected = day === date; //--> bg-main 적용
 
           return (
             <button
+              disabled={!hasSchedule}
               type="button"
               key={day}
               onKeyDown={(e) => e.key === 'Enter' && handleClick(day)}
               onClick={() => handleClick(day)}
               className={cn(
-                'flex-center hover:bg-sub cursor-pointer',
+                'flex-center text-gray-300',
                 defaultCellStyle,
                 cellStyle,
-                hasSchedule && 'text-main',
-                isSelected && 'text-white',
+                hasSchedule &&
+                  'hover:text-main cursor-pointer text-gray-800 transition hover:scale-110',
+                isSelected && 'text-white hover:text-white',
               )}
             >
               {day}
+              {hasSchedule && <div className={cn(selectedCircle, 'bg-sub')} />}
               {isSelected && <div className={cn(selectedCircle, 'bg-main')} />}
-              {hasSchedule && (
-                <div className={cn(selectedCircle, 'bg-sub -z-2')} />
-              )}
             </button>
           );
         })}

src/shared/components/calendar/components/not-this-month.tsx

@@ -11,7 +11,7 @@ const NotThisMonth = ({
   return daysArray.map((date) => (
     <div
       key={`lead-${date}`}
-      className={cn(defaultCellStyle, cellStyle, 'text-gray-300 select-none')}
+      className={cn(defaultCellStyle, cellStyle, 'text-gray-100 select-none')}
     >
       {date}
     </div>

src/shared/components/calendar/libs/constants/calendarStyles.ts

@@ -2,7 +2,7 @@ export const selectedCircle =
   'absolute inset-0 -z-1 m-auto size-[4.6rem] rounded-full';
 
 export const defaultCellStyle =
-  'relative z-0 h-[5.4rem] w-[4.67rem] text-[1.6rem] font-medium text-gray-800';
+  'relative z-0 h-[5.4rem] w-[4.67rem] text-[1.6rem] font-medium';
 
 export const defaultDayOfWeekStyle =
   'flex-center size-[4.6rem] text-[1.6rem] font-semibold text-gray-800';