Merge pull request #74 from 3rdflr/feat/TRI-83-pay

Feat: TRI-83 결제 서비스 구현

Author: DreamPaste

package-lock.json

@@ -40,6 +40,8 @@
     "@tanstack/react-query": "^5.85.5",
     "@tanstack/react-query-devtools": "^5.85.5",
     "@tanstack/react-virtual": "^3.13.12",
+    "@tosspayments/payment-widget-sdk": "^0.12.0",
+    "@tosspayments/tosspayments-sdk": "^2.4.0",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -50,6 +52,7 @@
     "lottie-react": "^2.4.1",
     "lucide-react": "^0.540.0",
     "motion": "^12.23.12",
+    "nanoid": "^5.1.5",
     "next": "^14.2.32",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.5.6",

package.json

@@ -156,7 +156,6 @@ export function EditDropDown({ activityId, isOwner, open, setOpen }: EditDropDow
                 'hover:bg-gray-100 focus:bg-gray-100 focus:outline-none',
                 'disabled:text-gray-400 disabled:cursor-not-allowed disabled:hover:bg-transparent',
               )}
-              whileHover={isOwner ? { backgroundColor: 'rgba(0, 0, 0, 0.05)' } : {}}
               whileTap={isOwner ? { scale: 0.98 } : {}}
             >
               수정하기
@@ -171,7 +170,6 @@ export function EditDropDown({ activityId, isOwner, open, setOpen }: EditDropDow
                 'hover:bg-red-50 hover:text-red-600 focus:bg-red-50 focus:text-red-600 focus:outline-none',
                 'disabled:text-gray-400 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-gray-400',
               )}
-              whileHover={isOwner ? { backgroundColor: 'rgba(239, 68, 68, 0.1)' } : {}}
               whileTap={isOwner ? { scale: 0.98 } : {}}
             >
               삭제하기

src/components/pages/activities/EditDropDown.tsx

@@ -46,10 +46,11 @@ const BookingConfirmModal = ({
       reservationData: ReservationRequest;
     }) => createReservation(activityId, reservationData),
 
-    onSuccess: (data) => {
+    onSuccess: async (data) => {
       console.log('🎫 [BookingConfirmModal] 예약 성공:', data);
       onClose();
       successToast.run('예약이 완료되었습니다!');
+      router.push('/mypage/reservation-list');
     },
     onError: (error: unknown) => {
       console.error('❗ [BookingConfirmModal] 예약 실패:', error);
@@ -80,13 +81,11 @@ const BookingConfirmModal = ({
         return;
       }
 
-      // 기타 에러인 경우 재시도 옵션 제공
-      //@todo: 이미 예약한경우 구체적인 에러메시지 노출
       overlay.open(({ isOpen, close }) => (
         <ConfirmActionModal
           isOpen={isOpen}
           onClose={close}
-          title='예약에 실패했습니다.'
+          title={axiosError?.response?.data?.message ?? '예약에 실패했습니다.'}
           actionText='다시 시도'
           exitText='취소'
           onAction={() => {

src/components/pages/activities/bookingCard/BookingConfirm.Modal.tsx

@@ -30,8 +30,11 @@ export function BookingDateInput({
   const [monthValue, setMonthValue] = useState('');
   const [dayValue, setDayValue] = useState('');
 
+  const today = new Date();
+
   // selectedDate가 변경될 때 각 input value 업데이트
   useEffect(() => {
+    console.log('📅 selectedDate 변경:', selectedDate);
     if (selectedDate) {
       setYearValue(format(selectedDate, 'yyyy'));
       setMonthValue(format(selectedDate, 'MM'));
@@ -176,7 +179,7 @@ export function BookingDateInput({
           type='number'
           value={yearValue}
           onChange={handleYearChange}
-          placeholder='2025'
+          placeholder={format(today, 'yyyy')}
           min='2025'
           max='2030'
           className={cn('w-16', baseInputStyles)}
@@ -190,7 +193,7 @@ export function BookingDateInput({
           type='number'
           value={monthValue}
           onChange={handleMonthChange}
-          placeholder='09'
+          placeholder={format(today, 'MM')}
           min='1'
           max='12'
           className={cn('w-12', baseInputStyles)}
@@ -204,7 +207,7 @@ export function BookingDateInput({
           type='number'
           value={dayValue}
           onChange={handleDayChange}
-          placeholder='16'
+          placeholder={format(today, 'dd')}
           min='1'
           max='31'
           className={cn('w-12', baseInputStyles)}

src/components/pages/activities/bookingCard/BookingDateInput.tsx

@@ -26,9 +26,9 @@ export default function BookingTimeList({
         {/* Time Slots */}
         <div className='font-bold flex items-center'>예약 가능한 시간</div>
 
-        {!selectedDate || !selectedSchedule ? (
+        {!selectedSchedule || selectedSchedule.length === 0 ? (
           <div className='p-4 text-center text-gray-500 '>
-            {!selectedDate ? '날짜를 선택해주세요' : '예약 가능한 시간이 없습니다'}
+            {selectedDate ? '예약 가능한 시간이 없습니다' : '날짜를 선택해주세요'}
           </div>
         ) : (
           <div className='flex flex-col gap-2 lg:gap-3 max-h-[150px] lg:max-h-[200px] overflow-y-auto'>

src/components/pages/activities/bookingCard/BookingTimeList.tsx

@@ -0,0 +1,24 @@
+import { Modal } from 'react-simplified-package';
+import { Button } from '@/components/ui/button';
+
+interface PaymentsErrorProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function PaymentsError({ isOpen, onClose }: PaymentsErrorProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} modalClassName='max-w-[400px] w-full'>
+      <div className='flex flex-col items-center gap-4 p-6'>
+        <div className='text-red-500 text-2xl'>⚠️</div>
+        <div className='text-center'>
+          <h3 className='font-medium text-gray-900 mb-1'>결제 오류</h3>
+          <p className='text-sm text-gray-500'>결제 시스템에 문제가 발생했습니다</p>
+        </div>
+        <Button onClick={onClose} className='w-full'>
+          닫기
+        </Button>
+      </div>
+    </Modal>
+  );
+}