Merge pull request #3 from sugoring/step2

강원대 FE_허윤수 4주차 과제 STEP2

README.md

@@ -17,24 +17,24 @@
 - **UI 프레임워크:** `chakra-ui` 또는 직접 구현한 UI 컴포넌트만 사용 (외부 라이브러리 사용 금지)
 - **폼 상태 관리:** React 기본 기능 (`form`, `ref`, `state`)으로 폼 상태 관리 (외부 라이브러리 사용 금지)
 
-- **상품 상세 페이지 (`@/pages/ProductDetail`):**
+- **상품 상세 페이지 (`@/pages/ProductDetail`)**
   - [x] `/components/features/Theme/ThemeGoodsSection` 또는 `/components/features/Home/GoodsRankingSection/List`에서 상품 ID (productId)를 전달받아 페이지 이동
   - [x] 유효하지 않은 productId일 경우 메인 페이지 (/)로 리다이렉트
-  - **상품 정보 표시:**
+  - **상품 정보 표시**
     - [x] `/v1/products/{productId}/detail` API 호출하여 데이터 불러오기
       - [x] 상품 ID (id)
       - [x] 상품명 (name)
       - [x] 이미지 URL (imageURL)
       - [x] 브랜드 정보 (brand)
       - [x] 기본 가격 (basicPrice)
-  - **상품 옵션 선택:**
+  - **상품 옵션 선택**
     - [ ] `/v1/products/{productId}/options` API 호출하여 데이터 불러오기
       - [ ] 옵션 목록 (`optionId`, `optionName`, `optionPrice`, `subOptions`)
-  - **"나에게 선물하기" 버튼:**
+  - **"나에게 선물하기" 버튼**
     - [x] 로그인 상태: 주문 결제 페이지 (`@/pages/Payment`)로 이동하며, productId 전달
     - [x] 비로그인 상태: 로그인 페이지 (`@/pages/Login`)로 이동
 
-- **상품 결제 페이지(`@/pages/Payment`):**
+- **상품 결제 페이지(`@/pages/Payment`)**
   - [x] "선물과 함께 보낼 메세지" 입력란
   - [x] `/v1/products/{productId}/detail` API 호출하여 주문 상품 정보 표시 (이미지, 브랜드, 이름)
   - [x] 결제 정보 입력 (현금영수증, 소득공제 등)
@@ -45,12 +45,17 @@
 
 ### 2단계 - 유효성 검사 구현
 
-- 상품 옵션 선택 시 `giftOrderLimit`을 초과할 수 없도록 제한합니다.
-- 주문 폼의 유효성을 검사합니다. (4주차 미션 결과물 참고)
-  - 카드 메시지 미입력 시 안내 메시지 표시
-  - 카드 메시지 100자 초과 시 안내 메시지 표시
-  - 현금영수증 체크 시 현금영수증 번호 입력 여부 확인
-  - 현금영수증 번호는 숫자만 입력 가능하도록 제한
+- **상품 상세 페이지 (`@/pages/ProductDetail`)**
+  - **상품 옵션 선택**
+    - [ ] 상품 옵션을 선택할 때, `giftOrderLimit`을 초과할 수 없도록 제한
+
+- **상품 결제 페이지 (`@/pages/Payment`)**
+  - **카드 메시지**
+    - [x] 카드 메시지를 입력하지 않은 경우, 안내 메시지를 표시
+    - [x] 카드 메시지가 100자를 초과할 경우, 안내 메시지를 표시
+  - **현금영수증**
+    - [x] 현금영수증 체크 시, 현금영수증 번호 입력 여부를 확인
+    - [x] 현금영수증 번호는 숫자만 입력 가능하도록 제한
 
 ---
 

src/pages/Payment/index.tsx

@@ -21,6 +21,34 @@ const PaymentPage = () => {
   const [receipt, setReceipt] = useState(false);
   const [receiptType, setReceiptType] = useState('personal');
   const [receiptNumber, setReceiptNumber] = useState('');
+  const [messageError, setMessageError] = useState('');
+  const [receiptError, setReceiptError] = useState('');
+
+  const handlePayment = () => {
+    // 카드 메시지 유효성 검사
+    if (!message) {
+      setMessageError('카드 메시지를 입력해주세요.');
+      return;
+    }
+    if (message.length > 100) {
+      setMessageError('카드 메시지는 100자를 초과할 수 없습니다.');
+      return;
+    }
+    setMessageError('');
+
+    // 현금영수증 번호 유효성 검사
+    if (receipt && !receiptNumber) {
+      setReceiptError('현금영수증 번호를 입력해주세요.');
+      return;
+    }
+    if (receipt && !/^\d*$/.test(receiptNumber)) {
+      setReceiptError('현금영수증 번호는 숫자만 입력 가능합니다.');
+      return;
+    }
+    setReceiptError('');
+
+    alert('주문이 완료되었습니다');
+  };
 
   if (isDetailLoading) {
     return (
@@ -41,10 +69,6 @@ const PaymentPage = () => {
     );
   }
 
-  const handlePayment = () => {
-    alert('주문이 완료되었습니다');
-  };
-
   return (
     <Box display="flex" p={4} justifyContent="space-between" maxWidth="1200px" margin="0 auto">
       <Box flex="1" mr={4}>
@@ -61,6 +85,11 @@ const PaymentPage = () => {
             bg="#F7FAFC"
             borderRadius="md"
           />
+          {messageError && (
+            <Text color="red.500" mt={2}>
+              {messageError}
+            </Text>
+          )}
         </Box>
         <Box mb={4} borderWidth={1} p={4} borderRadius="md" bg="#fff" boxShadow="sm">
           <Text fontWeight="bold" mb={2} fontSize="lg">
@@ -96,6 +125,11 @@ const PaymentPage = () => {
                 placeholder="(-없이) 숫자만 입력하세요."
                 invalid={!/^\d*$/.test(receiptNumber)}
               />
+              {receiptError && (
+                <Text color="red.500" mt={2}>
+                  {receiptError}
+                </Text>
+              )}
             </Box>
           )}
           <Box mt={4} borderTop="1px solid #e2e8f0" pt={4}>