Merge pull request #198 from DevKor-github/feat/#186/pick-ux

feat: 날짜 비활성화 된건 선택 못하게

Author: halionaz

src/common/components/DatePicker/index.tsx

@@ -1,5 +1,5 @@
 import { formatDate } from 'date-fns';
-import Calendar from 'react-calendar';
+import Calendar, { type TileDisabledFunc } from 'react-calendar';
 
 import * as s from './style.css.ts';
 
@@ -13,8 +13,12 @@ interface Props {
   value: Value;
   setValue: (value: Value) => void;
   range?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  tileDisabled?: TileDisabledFunc;
+  checkMonthYear?: (month: number, year: number) => void;
 }
-const DatePicker = ({ value, setValue, range = false }: Props) => {
+const DatePicker = ({ value, setValue, range = false, minDate, maxDate, tileDisabled, checkMonthYear }: Props) => {
   return (
     <div className={s.Container}>
       <Calendar
@@ -23,14 +27,20 @@ const DatePicker = ({ value, setValue, range = false }: Props) => {
         prevLabel={<SlideIcon direction="left" />}
         nextLabel={<SlideIcon direction="right" />}
         formatDay={(_, date) => date.getDate().toString()}
-        formatMonthYear={(_, date) => formatDate(date, 'yyyy M월')}
+        formatMonthYear={(_, date) => {
+          checkMonthYear?.(date.getMonth() + 1, date.getFullYear());
+          return formatDate(date, 'yyyy M월');
+        }}
         allowPartialRange={true}
         minDetail="month"
         next2Label={null}
         prev2Label={null}
         selectRange={range}
         goToRangeStartOnSelect={false}
         showFixedNumberOfWeeks={true}
+        minDate={minDate}
+        maxDate={maxDate}
+        tileDisabled={tileDisabled}
       />
     </div>
   );

src/common/components/DatePicker/style.css.ts

@@ -45,6 +45,9 @@ export const Container = css({
     fontSize: '0.75rem',
     fontWeight: 400,
     letterSpacing: '-0.03rem',
+    '&:disabled': {
+      color: '20',
+    },
   },
   '& .react-calendar__month-view__days__day--neighboringMonth': {
     color: '20',

src/features/detail/components/PickOptionDrawer/index.tsx

@@ -29,7 +29,7 @@ const PickOptionDrawer = ({ itemId, type, tradeMethods, location }: Props) => {
         }}
       >
         <span>직거래</span>
-        <p>
+        <div>
           {canDirectTrade ? (
             <>
               <div className="mgc_location_fill" />
@@ -38,7 +38,7 @@ const PickOptionDrawer = ({ itemId, type, tradeMethods, location }: Props) => {
           ) : (
             '직거래가 불가능한 상품이에요'
           )}
-        </p>
+        </div>
       </button>
       <button
         className={s.SelectButton({ isActive: canParcelTrade })}
@@ -48,7 +48,7 @@ const PickOptionDrawer = ({ itemId, type, tradeMethods, location }: Props) => {
         }}
       >
         <span>택배거래</span>
-        <p>{canParcelTrade ? '내 주소로 판매자가 택배를 발송해 줘요' : '택배거래가 불가능한 상품이에요'}</p>
+        <div>{canParcelTrade ? '내 주소로 판매자가 택배를 발송해 줘요' : '택배거래가 불가능한 상품이에요'}</div>
       </button>
     </div>
   );

src/features/detail/components/PickOptionDrawer/style.css.ts

@@ -25,7 +25,7 @@ export const SelectButton = cva({
       letterSpacing: '-0.045rem',
       lineHeight: 'normal',
     },
-    '& p': {
+    '& div': {
       fontSize: '0.75rem',
       fontWeight: 400,
       letterSpacing: '-0.03rem',

src/features/pick/apis/useGetRentalAvailability.ts

@@ -0,0 +1,37 @@
+import client from '@/common/utils/client';
+import { QUERY_KEYS } from '@/libs/queryKeys';
+import { useQuery } from '@tanstack/react-query';
+
+interface GetRentalAvailabilityRequest {
+  itemId: number;
+  year: number;
+  month: number;
+}
+interface GetRentalAvailabilityResponse {
+  message: string;
+  data: {
+    itemId: number;
+    year: number;
+    month: number;
+    availability: {
+      [key: string]: boolean;
+    };
+  };
+}
+const getRentalAvailability = async ({ itemId, year, month }: GetRentalAvailabilityRequest) => {
+  const response = await client.get<GetRentalAvailabilityResponse>(`/api/v1/item/${itemId}/rental-availability`, {
+    params: {
+      year,
+      month,
+    },
+  });
+  return response.data.data.availability;
+};
+
+export const useGetRentalAvailability = (props: GetRentalAvailabilityRequest) => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.RENTAL_AVAILABILITY, props],
+    queryFn: () => getRentalAvailability(props),
+    enabled: props.year !== 0 && props.month !== 0,
+  });
+};

src/features/pick/components/DateDrawer/index.tsx

@@ -2,14 +2,23 @@ import DatePicker, { type Value } from '@/common/components/DatePicker';
 
 import * as s from './style.css.ts';
 import { formatDate } from 'date-fns';
+import { useGetRentalAvailability } from '@/features/pick/apis/useGetRentalAvailability.ts';
+import { useState } from 'react';
+import type { TileDisabledFunc } from 'react-calendar';
 
 interface Props {
+  itemId: number;
   dateTime: Date | null;
   setDateTime: (date: Date | null) => void;
   transactionText: '거래' | '대여' | '반납';
   next: () => void;
+  minDate?: Date;
+  maxDate?: Date;
 }
-const DateDrawer = ({ dateTime, setDateTime, transactionText, next }: Props) => {
+const DateDrawer = ({ itemId, dateTime, setDateTime, transactionText, next, minDate = new Date(), maxDate }: Props) => {
+  const [year, setYear] = useState(new Date().getFullYear());
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
+  const { data: rentalAvailability } = useGetRentalAvailability({ itemId, year, month });
   const value = dateTime as Value;
   const setValue = (value: Value) => {
     if (Array.isArray(value)) return;
@@ -18,12 +27,26 @@ const DateDrawer = ({ dateTime, setDateTime, transactionText, next }: Props) =>
 
   const reset = () => setDateTime(null);
 
-  // TODO: 날짜 선택해야 다음 버튼 활성화
+  const tileDisabled: TileDisabledFunc = ({ date }) => {
+    if (rentalAvailability === undefined) return true;
+    const canRental = !!rentalAvailability[formatDate(date, 'yyyy-MM-dd')];
+    return !canRental;
+  };
 
   return (
     <div className={s.Container}>
       <div className={s.DateWrapper}>
-        <DatePicker value={value} setValue={setValue} />
+        <DatePicker
+          value={value}
+          setValue={setValue}
+          minDate={minDate}
+          maxDate={maxDate}
+          tileDisabled={tileDisabled}
+          checkMonthYear={(month, year) => {
+            setMonth(month);
+            setYear(year);
+          }}
+        />
         <div className={s.SelectedDateWrapper}>
           <label>{transactionText}일</label>
           <div>{dateTime ? formatDate(dateTime, 'yyyy.MM.dd') : ''}</div>

src/features/pick/components/DateTimeBox/DateTimeButton.tsx

@@ -8,14 +8,26 @@ import DateDrawer from '@/features/pick/components/DateDrawer/index.tsx';
 import TimeDrawer from '@/features/pick/components/TimeDrawer/index.tsx';
 
 interface Props {
+  itemId: number;
   transactionText: '거래' | '대여' | '반납';
   label: string;
   dateTime: Date | null;
   setDateTime: (date: Date | null) => void;
   canSelectTime?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
 }
 
-const DateTimeButton = ({ transactionText, label, dateTime, setDateTime, canSelectTime = false }: Props) => {
+const DateTimeButton = ({
+  itemId,
+  transactionText,
+  label,
+  dateTime,
+  setDateTime,
+  canSelectTime = false,
+  minDate,
+  maxDate,
+}: Props) => {
   const { open: dateDrawerOpen, drawerState: dateDrawerState, close: dateDrawerClose } = useDrawer();
   const { open: timeDrawerOpen, drawerState: timeDrawerState, close: timeDrawerClose } = useDrawer();
 
@@ -70,6 +82,9 @@ const DateTimeButton = ({ transactionText, label, dateTime, setDateTime, canSele
         description={`${transactionText}를 원하는 날짜를 선택해주세요`}
       >
         <DateDrawer
+          minDate={minDate}
+          maxDate={maxDate}
+          itemId={itemId}
           dateTime={dateTime}
           setDateTime={setDateTime}
           transactionText={transactionText}

src/features/pick/components/DateTimeBox/index.tsx

@@ -9,6 +9,7 @@ const SALE_DIRECT_LABEL = '거래를 원하는 일시를 입력해 주세요';
 const SALE_PARCEL_LABEL = '희망 택배 발송 일자를 입력해주세요';
 
 interface Props {
+  itemId: number;
   transactionType: TransactionType;
   tradeMethod: TradeMethods;
   startDateTime: Date | null;
@@ -17,6 +18,7 @@ interface Props {
   setEndDateTime: (date: Date | null) => void;
 }
 const DateTimeBox = ({
+  itemId,
   transactionType,
   tradeMethod,
   startDateTime,
@@ -30,6 +32,8 @@ const DateTimeBox = ({
     <div className={s.Container({ isDirect })}>
       {isDirect ? (
         <DateTimeButton
+          itemId={itemId}
+          maxDate={endDateTime ?? undefined}
           transactionText={isRental ? '대여' : '거래'}
           label={isRental ? RENTAL_START_LABEL : SALE_DIRECT_LABEL}
           canSelectTime
@@ -38,6 +42,8 @@ const DateTimeBox = ({
         />
       ) : (
         <DateTimeButton
+          itemId={itemId}
+          maxDate={endDateTime ?? undefined}
           transactionText={isRental ? '대여' : '거래'}
           label={isRental ? RENTAL_START_LABEL : SALE_PARCEL_LABEL}
           dateTime={startDateTime}
@@ -47,6 +53,8 @@ const DateTimeBox = ({
       {isRental &&
         (isDirect ? (
           <DateTimeButton
+            itemId={itemId}
+            minDate={startDateTime ?? undefined}
             transactionText={'반납'}
             label={RENTAL_END_LABEL}
             canSelectTime
@@ -55,6 +63,8 @@ const DateTimeBox = ({
           />
         ) : (
           <DateTimeButton
+            itemId={itemId}
+            minDate={startDateTime ?? undefined}
             transactionText={'반납'}
             label={RENTAL_END_LABEL}
             dateTime={endDateTime}

src/libs/queryKeys.ts

@@ -12,4 +12,5 @@ export const QUERY_KEYS = {
   USER: 'user', // 내 정보
   PICK_DETAIL: 'pick', // 특정 id에 해당하는 약속 상세
   APPOINTMENT_LIST: 'pick-list', // 나의 픽 페이지 리스트
+  RENTAL_AVAILABILITY: 'rental-availability', // 특정 아이템에 대한 렌탈 가능 여부
 };

src/pages/EditPickPage/index.tsx

@@ -147,6 +147,7 @@ const EditPickPage = () => {
             />
           )}
           <DateTimeBox
+            itemId={itemData.itemId}
             transactionType={data.type}
             tradeMethod={data.tradeMethod}
             startDateTime={startDateTime}