projectcleanroom · sw326 · Sep 9, 2024 · Sep 5, 2024 · Sep 9, 2024 · Sep 9, 2024
diff --git a/cors-config.json b/cors-config.json
@@ -0,0 +1,17 @@
+{
+    "CORSRules": [
+        {
+            "AllowedOrigins": [
+                "https://your-domain.com"
+            ],
+            "AllowedMethods": [
+                "GET",
+                "HEAD"
+            ],
+            "AllowedHeaders": [
+                "*"
+            ],
+            "MaxAgeSeconds": 3000
+        }
+    ]
+}
diff --git a/index.html b/index.html
@@ -21,12 +21,12 @@
         font-style: normal;
       }
     </style>
-    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
     <title>깔끔한방</title>
     <script
       type="text/javascript"
       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_MAP_API_KEY%&libraries=services,clusterer,drawing"
     ></script>
+    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@portone/browser-sdk": "^0.0.9",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.12",
     "@types/react-datepicker": "^7.0.0",
@@ -22,14 +23,15 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.13.0",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@reduxjs/toolkit": "^2.2.6",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.19",
@@ -52,12 +54,9 @@
     "react-bootstrap": "^2.10.4",
     "react-id-generator": "^3.0.2",
     "react-modal": "^3.16.1",
-    "react-redux": "^9.1.2",
     "react-router-dom": "^6.25.1",
-    "redux": "^5.0.1",
     "styled-components": "^6.1.12",
     "tailwindcss": "^3.4.6",
-    "vite": "^5.3.4",
-    "zustand": "^4.5.4"
+    "vite": "^5.3.4"
   }
-}
+}
diff --git a/public/KakaoIcon.webp b/public/KakaoIcon.webp
diff --git a/public/NaverIcon.webp b/public/NaverIcon.webp
diff --git a/public/SamsungIcon.png b/public/SamsungIcon.png
diff --git a/public/SsgIcon.webp b/public/SsgIcon.webp
diff --git a/src/api/partner.ts b/src/api/partner.ts
@@ -86,3 +86,14 @@ export const verifyPartnerEmail = async (
   });
   return response.data;
 };
+
+export const withdrawPartner = async (): Promise<{
+  id: number;
+  message: string;
+}> => {
+  const response = await partnerApiInstance.patch<{
+    id: number;
+    message: string;
+  }>('/partner/delete');
+  return response.data;
+};
diff --git a/src/api/payment.ts b/src/api/payment.ts
@@ -0,0 +1,29 @@
+import api from './axiosConfig';
+import { PaymentRequest, PaymentResponse } from '../types/portone';
+
+export const getPaymentData = async (
+  estimateId: number,
+): Promise<PaymentRequest> => {
+  const response = await api.get<PaymentRequest>(
+    `/payments/data/${estimateId}`,
+  );
+  return response.data;
+};
+
+export const completePayment = async (
+  impUid: string,
+): Promise<PaymentResponse> => {
+  const response = await api.get<PaymentResponse>(`/payments/${impUid}`);
+  return response.data;
+};
+
+export const cancelPayment = async (
+  merchantUid: string,
+  reason: string,
+): Promise<PaymentResponse> => {
+  const response = await api.post<PaymentResponse>(
+    `/payment/cancel/${merchantUid}`,
+    { reason },
+  );
+  return response.data;
+};
diff --git a/src/components/common/EmailVerification.tsx b/src/components/common/EmailVerification.tsx
@@ -7,6 +7,7 @@ import {
   handleApiError,
   showErrorNotification,
 } from '../../utils/errorHandler';
+import toast from 'react-hot-toast';
 
 interface EmailVerificationProps {
   email: string;
@@ -48,7 +49,7 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({
       setIsVerificationSent(true);
       setTimer(600); // 10 minutes
       setError('');
-      showErrorNotification('인증 이메일이 발송되었습니다.');
+      toast.success('인증 이메일이 발송되었습니다.');
     } catch (error) {
       const errorMessage = handleApiError(error);
       showErrorNotification(errorMessage);
@@ -68,7 +69,7 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({
       setIsVerified(true);
       onVerificationComplete(true);
       setError('');
-      showErrorNotification('이메일이 성공적으로 인증되었습니다.');
+      toast.success('이메일이 성공적으로 인증되었습니다.');
     } catch (error) {
       const errorMessage = handleApiError(error);
       showErrorNotification(errorMessage);
@@ -80,7 +81,7 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({
     let interval: NodeJS.Timeout;
     if (timer > 0) {
       interval = setInterval(() => {
-        setTimer((prevTimer) => prevTimer - 1);
+        setTimer(prevTimer => prevTimer - 1);
       }, 1000);
     } else if (timer === 0) {
       setIsVerificationSent(false);
@@ -120,7 +121,7 @@ const EmailVerification: React.FC<EmailVerificationProps> = ({
           <input
             type="text"
             value={verificationCode}
-            onChange={(e) => setVerificationCode(e.target.value)}
+            onChange={e => setVerificationCode(e.target.value)}
             placeholder="인증번호 입력"
             className="w-2/3 p-2 border border-gray-300 rounded"
           />

diff --git a/src/components/members/SimplePayButton.tsx b/src/components/members/SimplePayButton.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+interface SimplePayButtonProps {
+  id: string;
+  name: string;
+  icon: string;
+  isSelected: boolean;
+  onClick: (id: string) => void;
+}
+
+const SimplePayButton: React.FC<SimplePayButtonProps> = ({
+  id,
+  name,
+  icon,
+  isSelected,
+  onClick,
+}) => (
+  <button
+    className={`flex items-center justify-start w-full p-3 border rounded-lg transition-colors ${
+      isSelected ? 'bg-brand text-white' : 'hover:bg-gray-50'
+    }`}
+    onClick={() => onClick(id)}
+  >
+    <img src={icon} alt={name} className="w-6 h-6 mr-3" />
+    <span className="flex-grow text-left">{name}</span>
+  </button>
+);
+
+const SimplePaySection: React.FC<{
+  simplePayMethod: string;
+  setSimplePayMethod: (method: string) => void;
+}> = ({ simplePayMethod, setSimplePayMethod }) => {
+  const simplePay = [
+    { id: 'naverpay', name: '네이버 페이', icon: '/public/NaverIcon.webp' },
+    { id: 'kakaopay', name: '카카오 페이', icon: '/public/KakaoIcon.webp' },
+    { id: 'ssgpay', name: 'SSG 페이', icon: '/public/SsgIcon.webp' },
+    { id: 'samsungpay', name: '삼성 페이', icon: '/public/SamsungIcon.png' },
+  ];
+
+  return (
+    <div className="mb-8">
+      <h3 className="text-lg font-semibold mb-2">간편 결제 선택</h3>
+      <div className="grid grid-cols-2 gap-4">
+        {simplePay.map(method => (
+          <SimplePayButton
+            key={method.id}
+            {...method}
+            isSelected={simplePayMethod === method.id}
+            onClick={setSimplePayMethod}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SimplePaySection;
diff --git a/src/hooks/usePartners.ts b/src/hooks/usePartners.ts
@@ -26,7 +26,7 @@ export const useUpdatePartner = () => {
   return useMutation<Partner, Error, Partial<Partner>>({
     mutationFn: (updatePartner: Partial<Partner>) =>
       partner.updatePartner(updatePartner),
-    onSuccess: (data) => {
+    onSuccess: data => {
       queryClient.setQueryData(['currentPartner'], data);
       queryClient.invalidateQueries({ queryKey: ['currentPartner'] });
     },
@@ -46,7 +46,7 @@ export const useDeletePartner = () => {
 
 export const usePartnerLogin = () => {
   return useMutation<PartnerLoginResponse, Error, PartnerLoginCredentials>({
-    mutationFn: async (formData) => {
+    mutationFn: async formData => {
       const response = await partnerLogin(formData); // Login API 호출
       return response; // 여기에서 바로 response를 반환합니다.
     },
@@ -65,7 +65,7 @@ export const usePartnerSignup = () => {
 
 export const useRequestPartnerEmailVerification = () => {
   return useMutation<void, Error, { email: string }>({
-    mutationFn: (data) => partner.requestPartnerEmailVerification(data.email),
+    mutationFn: data => partner.requestPartnerEmailVerification(data.email),
   });
 };
 
@@ -74,3 +74,13 @@ export const useVerifyPartnerEmail = () => {
     mutationFn: ({ email, code }) => partner.verifyPartnerEmail(email, code),
   });
 };
+
+export const useWithdrawPartner = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{ id: number; message: string }, Error>({
+    mutationFn: partner.withdrawPartner,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['currentPartner'] });
+    },
+  });
+};
diff --git a/src/hooks/usePayment.ts b/src/hooks/usePayment.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import * as api from '../api/payment';
+import { PaymentRequest, PaymentResponse } from '../types/portone';
+
+export const useGetPaymentData = (estimateId: number) => {
+  return useQuery<PaymentRequest, Error>({
+    queryKey: ['paymentData', estimateId],
+    queryFn: () => api.getPaymentData(estimateId),
+  });
+};
+
+export const useCompletePayment = () => {
+  return useMutation<PaymentResponse, Error, string>({
+    mutationFn: (impUid: string) => api.completePayment(impUid),
+  });
+};
+
+export const useCancelPayment = () => {
+  return useMutation<
+    PaymentResponse,
+    Error,
+    { merchantUid: string; reason: string }
+  >({
+    mutationFn: ({ merchantUid, reason }) =>
+      api.cancelPayment(merchantUid, reason),
+  });
+};
diff --git a/src/pages/members/CommissionEdit.tsx b/src/pages/members/CommissionEdit.tsx
@@ -4,7 +4,11 @@ import {
   useCommissionConfirmed,
   useUpdateCommission,
 } from '../../hooks/useCommissions';
-import { Commission, HouseTypeKorean, CleanTypeKorean } from '../../types/commission';
+import {
+  Commission,
+  HouseTypeKorean,
+  CleanTypeKorean,
+} from '../../types/commission';
 import { toast } from 'react-hot-toast';
 import { showErrorNotification } from '../../utils/errorHandler';
 import { Save, ArrowLeft } from 'lucide-react';
@@ -27,7 +31,12 @@ const CommissionEdit: React.FC = () => {
 
   useEffect(() => {
     if (commission) {
-      setEditedCommission(commission);
+      setEditedCommission({
+        ...commission,
+        desiredDate: commission.desiredDate
+          ? new Date(commission.desiredDate).toISOString().slice(0, 16)
+          : '',
+      });
     }
   }, [commission]);
 
@@ -37,7 +46,7 @@ const CommissionEdit: React.FC = () => {
     >,
   ) => {
     const { name, value } = e.target;
-    setEditedCommission((prev) => ({ ...prev, [name]: value }));
+    setEditedCommission(prev => ({ ...prev, [name]: value }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -46,10 +55,16 @@ const CommissionEdit: React.FC = () => {
       if (!editedCommission.commissionId || !editedCommission.addressId) {
         throw new Error('Invalid commissionId or addressId');
       }
+      const updatedCommission = {
+        ...editedCommission,
+        desiredDate: new Date(
+          editedCommission.desiredDate as string,
+        ).toISOString(),
+      };
       await updateCommissionMutation.mutateAsync({
         commissionId: editedCommission.commissionId,
         addressId: editedCommission.addressId,
-        commission: editedCommission,
+        commission: updatedCommission,
       });
       toast.success('의뢰가 성공적으로 수정되었습니다');
       navigate(`/commissiondetail?commissionId=${commissionId}`);
@@ -155,19 +170,13 @@ const CommissionEdit: React.FC = () => {
             htmlFor="desiredDate"
             className="block text-sm font-medium text-gray-700 mb-1"
           >
-            희망 날짜
+            희망 날짜 및 시간
           </label>
           <input
-            type="date"
+            type="datetime-local"
             id="desiredDate"
             name="desiredDate"
-            value={
-              editedCommission.desiredDate
-                ? new Date(editedCommission.desiredDate)
-                    .toISOString()
-                    .split('T')[0]
-                : ''
-            }
+            value={editedCommission.desiredDate || ''}
             onChange={handleChange}
             className="w-full p-2 border border-gray-300 rounded-md focus:ring-brand focus:border-brand"
             required