From 8c12b704ec96ad3ff71447affd7d4dfcaab0df9b Mon Sep 17 00:00:00 2001 From: yuni Date: Fri, 19 Jul 2024 14:15:58 +0900 Subject: [PATCH 1/6] =?UTF-8?q?docs:=20step2=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b3c8210a..d4e3f856 100644 --- a/README.md +++ b/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`)** + - **카드 메시지** + - [ ] 카드 메시지를 입력하지 않은 경우, 안내 메시지를 표시 + - [ ] 카드 메시지가 100자를 초과할 경우, 안내 메시지를 표시 + - **현금영수증** + - [ ] 현금영수증 체크 시, 현금영수증 번호 입력 여부를 확인 + - [ ] 현금영수증 번호는 숫자만 입력 가능하도록 제한 --- From 07de0a272c505a4fee657f801888cdb6016be6f7 Mon Sep 17 00:00:00 2001 From: yuni Date: Fri, 19 Jul 2024 14:18:48 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat(payment):=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=AF=B8=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?=EC=8B=9C=20=EC=95=88=EB=82=B4=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 카드 메시지를 입력하지 않은 경우 경고 메시지 표시 --- src/pages/Payment/index.tsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/pages/Payment/index.tsx b/src/pages/Payment/index.tsx index 0afd9c61..f46c0db4 100644 --- a/src/pages/Payment/index.tsx +++ b/src/pages/Payment/index.tsx @@ -21,6 +21,17 @@ const PaymentPage = () => { const [receipt, setReceipt] = useState(false); const [receiptType, setReceiptType] = useState('personal'); const [receiptNumber, setReceiptNumber] = useState(''); + const [messageError, setMessageError] = useState(''); + + const handlePayment = () => { + if (!message) { + setMessageError('카드 메시지를 입력해주세요.'); + return; + } + setMessageError(''); + + alert('주문이 완료되었습니다'); + }; if (isDetailLoading) { return ( @@ -41,10 +52,6 @@ const PaymentPage = () => { ); } - const handlePayment = () => { - alert('주문이 완료되었습니다'); - }; - return ( @@ -61,6 +68,11 @@ const PaymentPage = () => { bg="#F7FAFC" borderRadius="md" /> + {messageError && ( + + {messageError} + + )} @@ -106,7 +118,7 @@ const PaymentPage = () => { {productDetail.price.sellingPrice.toLocaleString()}원 - From 36e1b63e51553c7e8bf41f7f96d71bfbd76395e1 Mon Sep 17 00:00:00 2001 From: yuni Date: Fri, 19 Jul 2024 14:19:22 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EC=B9=B4=EB=93=9C=20=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20100=EC=9E=90=20=EC=B4=88=EA=B3=BC=20?= =?UTF-8?q?=EC=8B=9C=20=EC=95=88=EB=82=B4=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 카드 메시지가 100자를 초과할 경우 경고 메시지 표시 --- src/pages/Payment/index.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/pages/Payment/index.tsx b/src/pages/Payment/index.tsx index f46c0db4..16994729 100644 --- a/src/pages/Payment/index.tsx +++ b/src/pages/Payment/index.tsx @@ -52,6 +52,20 @@ const PaymentPage = () => { ); } + const handlePayment = () => { + if (!message) { + setMessageError('카드 메시지를 입력해주세요.'); + return; + } + if (message.length > 100) { + setMessageError('카드 메시지는 100자를 초과할 수 없습니다.'); + return; + } + setMessageError(''); + + alert('주문이 완료되었습니다'); + }; + return ( From 234f74f7c6739a189f62a40c279d42ffcc63759b Mon Sep 17 00:00:00 2001 From: yuni Date: Fri, 19 Jul 2024 14:19:50 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=ED=98=84=EA=B8=88=EC=98=81?= =?UTF-8?q?=EC=88=98=EC=A6=9D=20=EC=B2=B4=ED=81=AC=20=EC=8B=9C=20=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=9E=85=EB=A0=A5=20=EC=97=AC=EB=B6=80=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 현금영수증 체크 시 번호 입력 필드 표시 - 번호가 입력되지 않은 경우 경고 메시지 표시 --- src/pages/Payment/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/Payment/index.tsx b/src/pages/Payment/index.tsx index 16994729..e2536d5e 100644 --- a/src/pages/Payment/index.tsx +++ b/src/pages/Payment/index.tsx @@ -63,6 +63,12 @@ const PaymentPage = () => { } setMessageError(''); + if (receipt && !receiptNumber) { + setReceiptError('현금영수증 번호를 입력해주세요.'); + return; + } + setReceiptError(''); + alert('주문이 완료되었습니다'); }; From a18ed640400cae0a6190e53643e3f06df77bca91 Mon Sep 17 00:00:00 2001 From: yuni Date: Fri, 19 Jul 2024 14:21:25 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=ED=98=84=EA=B8=88=EC=98=81?= =?UTF-8?q?=EC=88=98=EC=A6=9D=20=EB=B2=88=ED=98=B8=EB=8A=94=20=EC=88=AB?= =?UTF-8?q?=EC=9E=90=EB=A7=8C=20=EC=9E=85=EB=A0=A5=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 현금영수증 번호가 숫자인지 유효성 검사 추가 --- src/pages/Payment/index.tsx | 44 +++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/pages/Payment/index.tsx b/src/pages/Payment/index.tsx index e2536d5e..87765fcd 100644 --- a/src/pages/Payment/index.tsx +++ b/src/pages/Payment/index.tsx @@ -22,14 +22,31 @@ const PaymentPage = () => { 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('주문이 완료되었습니다'); }; @@ -52,26 +69,6 @@ const PaymentPage = () => { ); } - const handlePayment = () => { - if (!message) { - setMessageError('카드 메시지를 입력해주세요.'); - return; - } - if (message.length > 100) { - setMessageError('카드 메시지는 100자를 초과할 수 없습니다.'); - return; - } - setMessageError(''); - - if (receipt && !receiptNumber) { - setReceiptError('현금영수증 번호를 입력해주세요.'); - return; - } - setReceiptError(''); - - alert('주문이 완료되었습니다'); - }; - return ( @@ -128,6 +125,11 @@ const PaymentPage = () => { placeholder="(-없이) 숫자만 입력하세요." invalid={!/^\d*$/.test(receiptNumber)} /> + {receiptError && ( + + {receiptError} + + )} )} @@ -138,7 +140,7 @@ const PaymentPage = () => { {productDetail.price.sellingPrice.toLocaleString()}원 - From db8babca7977a388e22dbee54eb590a45bdbb85e Mon Sep 17 00:00:00 2001 From: yuni Date: Fri, 19 Jul 2024 14:23:16 +0900 Subject: [PATCH 6/6] =?UTF-8?q?docs:=20step2=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d4e3f856..bda061c5 100644 --- a/README.md +++ b/README.md @@ -47,15 +47,15 @@ - **상품 상세 페이지 (`@/pages/ProductDetail`)** - **상품 옵션 선택** - - 상품 옵션을 선택할 때, `giftOrderLimit`을 초과할 수 없도록 제한 + - [ ] 상품 옵션을 선택할 때, `giftOrderLimit`을 초과할 수 없도록 제한 - **상품 결제 페이지 (`@/pages/Payment`)** - **카드 메시지** - - [ ] 카드 메시지를 입력하지 않은 경우, 안내 메시지를 표시 - - [ ] 카드 메시지가 100자를 초과할 경우, 안내 메시지를 표시 + - [x] 카드 메시지를 입력하지 않은 경우, 안내 메시지를 표시 + - [x] 카드 메시지가 100자를 초과할 경우, 안내 메시지를 표시 - **현금영수증** - - [ ] 현금영수증 체크 시, 현금영수증 번호 입력 여부를 확인 - - [ ] 현금영수증 번호는 숫자만 입력 가능하도록 제한 + - [x] 현금영수증 체크 시, 현금영수증 번호 입력 여부를 확인 + - [x] 현금영수증 번호는 숫자만 입력 가능하도록 제한 ---