경북대 FE_정서현 4주차 Step2

README.md

@@ -20,6 +20,17 @@
 
 <h3>2️⃣ Step 2 체크리스트</h3>
 
+- [x] 상품 상세 페이지에서 상품의 개수를 Option API 의 giftOrderLimit 을 초과한 경우 선택이 불가능하도록 구현
+
+- [x] 결제 페이지의 Form 을 Validation 하도록 구현
+
+  - [x] 카드 메시지를 입력하지 않으면 메시지를 입력하라고 안내
+
+  - [x] 카드 메시지가 100자를 넘어가면 100자 이내로 입력하라고 안내
+
+  - [x] 현금 영수증 checkbox 클릭 시 현금 영수증 번호가 입력되었는지 확인
+
+  - [x] 현금 영수증 입력은 숫자만 입력하도록 안내 
 
 <br>
 

src/api/hooks/useGetProductsInfo.ts

@@ -1,18 +1,30 @@
 import { useQuery } from '@tanstack/react-query'
 
-import type { ProductsInfoData } from '@/types'
+import type { ProductsDetailData, ProductsOptionData } from '@/types'
 
 import { fetchInstance } from '../instance'
 
-const getProductsPath = (product: string) => `/v1/products/${product}/detail`
+const getProductsDetailPath = (product: string) => `/v1/products/${product}/detail`
+const getProductsOptionPath = (product: string) => `/v1/products/${product}/options`
 
-export const getProducts = async (product: string) => {
-  const response = await fetchInstance.get<ProductsInfoData>(getProductsPath(product))
+export const getProductsDetail = async (product: string) => {
+  const response = await fetchInstance.get<ProductsDetailData>(getProductsDetailPath(product))
   return response.data.detail
 }
 
+export const getProductsOptions = async (product: string) => {
+  const response = await fetchInstance.get<ProductsOptionData>(getProductsOptionPath(product))
+  return response.data.options
+}
+
 export const useGetProductsInfo = (product: string) =>
   useQuery({
-    queryKey: [getProductsPath(product)],
-    queryFn: () => getProducts(product)
+    queryKey: [getProductsDetailPath(product), getProductsOptionPath(product)],
+    queryFn: async () => {
+      const [detail, options] = await Promise.all([
+        getProductsDetail(product),
+        getProductsOptions(product),
+      ])
+      return { detail, options }
+    }
   })

src/components/features/Order/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Checkbox, Grid, GridItem, HStack, Image,Input, Select, Text, VStack } from '@chakra-ui/react';
+import { Box, Button, Checkbox, Grid, GridItem, HStack, Image, Input, Select, Text, VStack } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -18,23 +18,33 @@ export const Order = () => {
     const number = numberRef.current?.value;
     const message = messageRef.current?.value;
 
+    // 카드 메시지가 100자를 초과할 경우 경고 표시
+    if (message && message.length > 100) {
+      alert('카드 메시지는 100자 이내로 입력해 주세요!');
+      return;
+    }
+
+    // 현금 영수증 신청을 한 경우 (체크 박스 활성화 상태)
     if (check) {
       if (number && message) {
         if (Number.isNaN(Number(number))) {
-          alert('현금 영수증 번호는 숫자만 입력해주세요');
+          alert('현금 영수증 전화번호는 숫자만 입력 가능합니다!');
         } else {
           alert('주문이 완료되었습니다.');
         }
-      } else if (!number) {
-        alert('현금 영수증 번호를 입력해주세요');
       } else if (!message) {
-        alert('메시지를 입력해주세요');
-      }
-    } else {
+        alert('선물과 함께 보낼 카드 메시지를 작성해 주세요!');
+      } else if (!number) {
+        alert('현금 영수증에 필요한 전화번호를 입력해주세요!');
+      } 
+    } 
+
+    // 현금 영수증 신청을 하지 않은 경우 (체크 박스 비활성화 상태)
+    else {
       if (message) {
         alert('주문이 완료되었습니다.');
       } else if (!message) {
-        alert('메시지를 입력해주세요');
+        alert('선물과 함께 보낼 카드 메시지를 작성해 주세요!');
       }
     }
   };
@@ -49,28 +59,29 @@ export const Order = () => {
         p={4}
       >
         <GridItem>
-          <VStack align="start" spacing={10}>
-            <Box>
+          <VStack align="center" spacing={10}>
+            <Box textAlign="center">
               <Text fontSize="2xl" fontWeight="bold">나에게 주는 선물</Text>
               <Input
                 backgroundColor="gray.100"
                 placeholder="선물과 함께 보낼 메시지를 적어보세요"
                 ref={messageRef}
                 mt={4}
                 size="lg"
-                width="300px"
+                width="750px" 
+                height="150px" 
               />
             </Box>
             <Box w="100%">
               <Text fontSize="xl" fontWeight="bold">선물 내역</Text>
               <GiftDetailBox>
-                <Image src={location.state.data.imageURL} alt={location.state.data.name} width="150px" height="150px" />
+                <Image src={location.state.data.detail.imageURL} alt={location.state.data.detail.name} width="150px" height="150px" />
                 <Box>
                   <Text fontSize="lg" fontWeight="semibold" color="gray.700">
-                    {location.state.data.brandInfo.name}
+                    {location.state.data.detail.brandInfo.name}
                   </Text>
                   <Text fontSize="md" fontWeight="medium" color="gray.500">
-                    {location.state.data.name} x {location.state.itemCount}개
+                    {location.state.data.detail.name} x {location.state.itemCount}개
                   </Text>
                 </Box>
               </GiftDetailBox>

src/components/features/Products/ProductsDetail/index.tsx

@@ -21,10 +21,36 @@ export const ProductsDetail = ({ productId }: Props) => {
   const authInfo = useAuth()
   const navigate = useNavigate()
 
+  // 선물 최대 제한 수량 
+  const giftOrderLimit = data?.options?.giftOrderLimit ?? 0
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = Number(event.target.value)
-    if (isNaN(value)) return
-    setItemCount(value)
+    if (isNaN(value)) {
+      return
+    }
+
+    if (value > giftOrderLimit) {
+      alert(`최대 선물 가능 수량은 ${giftOrderLimit}개 입니다.`)
+      setItemCount(giftOrderLimit)
+    } 
+    else {
+      setItemCount(value)
+    }
+  }
+
+  const handleIncrement = () => {
+    if (itemCount < giftOrderLimit) {
+      setItemCount(itemCount + 1)
+    } else {
+      alert(`최대 선물 가능 수량은 ${giftOrderLimit}개 입니다.`)
+    }
+  }
+
+  const handleDecrement = () => {
+    if (itemCount > 1) {
+      setItemCount(itemCount - 1)
+    }
   }
 
   const handleNavigate = () => {
@@ -39,10 +65,11 @@ export const ProductsDetail = ({ productId }: Props) => {
   }
 
   useEffect(() => {
-    if (data) {
-      setTotalPrice(data.price.basicPrice * itemCount)
+    if (data) 
+      setTotalPrice(data.detail.price.basicPrice * itemCount)
+      console.log(`상품명: ${data.detail.name} / 선물 최대 제한 수량: ${giftOrderLimit}`)
     }
-  }, [data, itemCount])
+  }, [data, itemCount, giftOrderLimit])
 
   if (isLoading) {
     return (
@@ -68,30 +95,31 @@ export const ProductsDetail = ({ productId }: Props) => {
         p={4}
       >
         <GridItem>
-          <Image src={data?.imageURL} alt={data?.name} />
+          <Image src={data?.detail?.imageURL} alt={data?.detail?.name} />
         </GridItem>
 
         <GridItem>
           <Box>
-            <Text fontSize="2xl" fontWeight="bold">{data?.name}</Text>
-            <Text fontSize="xl" color="gray.600">{data?.price.basicPrice} 원</Text>
+            <Text fontSize="2xl" fontWeight="bold">{data?.detail?.name}</Text>
+            <Text fontSize="xl" color="gray.600">{data?.detail?.price.basicPrice} 원</Text>
             <Text mt={4} fontSize="md" color="gray.500">
               카톡 친구가 아니어도 선물 코드로 선물 할 수 있어요!
             </Text>
           </Box>
 
           <Box mt={6}>
             <QuantityControl>
-              <Button size="sm" onClick={() => setItemCount(itemCount - 1)}>-</Button>
+              <Button size="sm" onClick={handleDecrement}>-</Button>
               <Input
                 type="number"
                 width="60px"
                 textAlign="center"
                 value={itemCount}
                 onChange={handleChange}
                 mx={2}
+                min={1}
               />
-              <Button size="sm" onClick={() => setItemCount(itemCount + 1)}>+</Button>
+              <Button size="sm" onClick={handleIncrement}>+</Button>
             </QuantityControl>
           </Box>
 

src/types/index.ts

@@ -35,7 +35,7 @@ export type GoodsData = {
   }
 }
 
-export type ProductsInfoData = {
+export type ProductsDetailData = {
   detail: {
     id: number
     imageURL: string
@@ -47,3 +47,15 @@ export type ProductsInfoData = {
     id: number
   }
 }
+
+export type ProductsOptionData = {
+  options: {
+    productId: number;
+    productName: string;
+    productPrice: number;
+    hasOption: boolean;
+    giftOrderLimit: number;
+    names: [];
+    options: [];
+  }
+}