경북대 FE_이정민 4주차 과제 Step 2

README.md

@@ -1 +1,5 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+### 3단계 기능 구현 목록
+- [x] 기존에 만든 form / input을 react-hook-form으로 변경
+- [x] validate 또한 react-hook-form 기능을 적극적으로 활용 (이 과정에서 zod를 사용해도 좋음)

package.json

@@ -22,12 +22,15 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.24.1",
     "axios": "^1.6.7",
+    "framer-motion": "^11.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.1",
     "react-intersection-observer": "^9.8.1",
     "react-router-dom": "^6.22.1"
   },

src/App.tsx

@@ -1,3 +1,4 @@
+import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 
 import { queryClient } from './api/instance';
@@ -6,11 +7,13 @@ import { Routes } from './routes';
 
 const App = () => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <Routes />
-      </AuthProvider>
-    </QueryClientProvider>
+    <ChakraProvider>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <Routes />
+        </AuthProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
   );
 };
 

src/api/hooks/useGetProductDetail.ts

@@ -0,0 +1,27 @@
+import { useEffect,useState } from "react";
+
+import { useFetchData } from "@/hooks/useFetchData";
+import type { ProductDetailResponseData } from "@/types";
+
+const getProductDetailPath = ({ productId }: { productId: number }) =>
+  `v1/products/${productId}/detail`;
+
+export const useGetProductDetail = () => {
+  const [notFound, setNotFound] = useState(false);
+  const { data, loading, error } = useFetchData<ProductDetailResponseData>(
+    (productId) => getProductDetailPath({ productId })
+  );
+
+  useEffect(() => {
+    if (!loading && !data) {
+      setNotFound(true);
+    }
+  }, [loading, data]);
+
+  return {
+    productDetail: data?.detail || null,
+    loading,
+    error,
+    notFound
+  };
+};

src/api/hooks/useGetProductOption.ts

@@ -0,0 +1,17 @@
+import { useFetchData } from "@/hooks/useFetchData";
+import type { ProductOptionData } from "@/types";
+
+const getProductOptionPath = ({ productId }: { productId: number }) =>
+  `/v1/products/${productId}/options`;
+
+export const useGetProductOptions = () => {
+  const { data, loading, error } = useFetchData<ProductOptionData>(
+    (productId) => getProductOptionPath({ productId })
+  );
+
+  return {
+    productOption: data || null,
+    loading,
+    error
+  };
+};

src/api/hooks/useProductId.ts

@@ -0,0 +1,7 @@
+import { useLocation } from "react-router-dom";
+
+export const useProductId = () => {
+  const location = useLocation();
+  const productId = location.pathname.split('/')[2];
+  return Number(productId);
+};

src/api/instance/index.ts

@@ -17,7 +17,7 @@ const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
 };
 
 export const fetchInstance = initInstance({
-  baseURL: 'https://kakao-tech-campus-mock-server.vercel.app/api',
+  baseURL: 'https://react-gift-mock-api-userjmmm.vercel.app/api',
 });
 
 export const queryClient = new QueryClient({

src/components/features/Theme/ThemeGoodsSection/index.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 
 import { useGetThemesProducts } from '@/api/hooks/useGetThemesProducts';
 import { DefaultGoodsItems } from '@/components/common/GoodsItem/Default';
@@ -41,13 +42,15 @@ export const ThemeGoodsSection = ({ themeKey }: Props) => {
           gap={16}
         >
           {flattenGoodsList.map(({ id, imageURL, name, price, brandInfo }) => (
-            <DefaultGoodsItems
-              key={id}
-              imageSrc={imageURL}
-              title={name}
-              amount={price.sellingPrice}
-              subtitle={brandInfo.name}
-            />
+            <Link key={id} to={`/products/${id}`} >
+              <DefaultGoodsItems
+                key={id}
+                imageSrc={imageURL}
+                title={name}
+                amount={price.sellingPrice}
+                subtitle={brandInfo.name}
+              />
+            </Link>
           ))}
         </Grid>
         {hasNextPage && (

src/hooks/useFetchData.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef,useState } from "react";
+
+import { useProductId } from "../api/hooks/useProductId";
+import { fetchInstance } from "../api/instance";
+
+export const fetchData = async <T>(path: string): Promise<T> => {
+  const response = await fetchInstance.get<T>(path);
+  return response.data;
+};
+
+export const useFetchData = <T>(getPath: (productId: number) => string) => {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const productId = useProductId();
+  const hasFetched = useRef(false);
+
+  useEffect(() => {
+    const fetchDataAsync = async () => {
+      try {
+        const fetchedData = await fetchData<T>(getPath(productId));
+        setData(fetchedData);
+      } catch (err) {
+        setError("Failed to fetch data.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (!hasFetched.current) {
+      fetchDataAsync();
+      hasFetched.current = true;
+    }
+  }, [productId, getPath]);
+
+  return { data, loading, error };
+};

src/pages/Order/index.tsx

@@ -0,0 +1,155 @@
+import { Box, Button, Checkbox, Flex, Image, Input, Select,Text, Textarea, VStack } from "@chakra-ui/react";
+import { Controller, useForm } from "react-hook-form";
+import { Navigate,useLocation } from "react-router-dom";
+
+type FormValues = {
+  message: string;
+  cashReceipt: boolean;
+  cashReceiptType: string;
+  cashReceiptNumber: string;
+};
+
+export const OrderPage = () => {
+  const location = useLocation();
+  const { productDetail, productQuantity } = location.state || {};
+
+  const { control, handleSubmit, setValue, watch, formState: { errors } } = useForm<FormValues>({
+    defaultValues: {
+      message: "",
+      cashReceipt: false,
+      cashReceiptType: "PERSONAL",
+      cashReceiptNumber: ""
+    }
+  });
+
+  const watchCashReceipt = watch("cashReceipt");
+  const totalPrice = productDetail.price.sellingPrice * productQuantity;
+
+  const onSubmit = (data: FormValues) => {
+    if (data.message.trim() === "") {
+      alert("선물 메시지를 입력해주세요.");
+      return;
+    }
+
+    if (data.cashReceipt) {
+      if (data.cashReceiptNumber.trim() === "") {
+        alert("현금영수증 번호를 입력해주세요.");
+        return;
+      }
+
+      if (isNaN(Number(data.cashReceiptNumber))) {
+        alert("현금영수증 번호는 숫자만 입력해주세요.");
+        return;
+      }
+    }
+
+    alert("주문이 완료되었습니다.");
+  };
+
+  if (!productDetail || !productQuantity) {
+    return <Navigate to="/" />;
+  }
+
+  return (
+    <Box p={8}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Text fontSize="2xl" fontWeight="bold" mb={4}>나에게 주는 선물</Text>
+        <Flex direction="column" gap={4}>
+        <Box flex="1" p={4} borderWidth="1px" borderRadius="md">
+            <Text fontSize="lg" fontWeight="bold">선물 메시지</Text>
+            <Controller
+              name="message"
+              control={control}
+              rules={{
+                required: "선물 메시지를 입력해주세요.",
+                maxLength: {
+                  value: 100,
+                  message: "선물 메시지는 100자 이내로 입력해주세요."
+                }
+              }}
+              render={({ field }) => (
+                <Textarea
+                  {...field}
+                  placeholder="선물과 함께 보낼 메시지를 적어보세요"
+                  size="lg"
+                />
+              )}
+            />
+            {errors.message && <Text color="red.500">{errors.message.message}</Text>}
+          </Box>
+
+          <Box flex="1" p={4} borderWidth="1px" borderRadius="md">
+            <Text fontSize="lg" fontWeight="bold">선물 내역</Text>
+            <Flex direction="row" align="center">
+              <Image src={productDetail.imageURL} alt={productDetail.name} boxSize="100px" />
+              <Box ml={4}>
+                <Text>{productDetail.name}</Text>
+                <Text>{productDetail.price.sellingPrice}원 x {productQuantity}개</Text>
+              </Box>
+            </Flex>
+          </Box>
+
+          <Box flex="1" p={4} borderWidth="1px" borderRadius="md">
+            <Text fontSize="lg" fontWeight="bold" mb={4}>결제 정보</Text>
+            <VStack align="flex-start" spacing={4}>
+            <Controller
+                name="cashReceipt"
+                control={control}
+                render={({ field }) => (
+                  <Checkbox
+                    isChecked={field.value}
+                    onChange={(e) => {
+                      setValue("cashReceipt", e.target.checked);
+                      if (!e.target.checked) {
+                        setValue("cashReceiptNumber", "");
+                      }
+                    }}
+                  >
+                    현금영수증 신청
+                  </Checkbox>
+                )}
+              />
+              {watchCashReceipt && (
+                <>
+                  <Text>현금영수증 타입</Text>
+                  <Controller
+                    name="cashReceiptType"
+                    control={control}
+                    render={({ field }) => (
+                      <Select {...field}>
+                        <option value="PERSONAL">개인소득공제</option>
+                        <option value="BUSINESS">사업자지출증빙</option>
+                      </Select>
+                    )}
+                  />
+                  <Text>현금영수증 번호</Text>
+                  <Controller
+                    name="cashReceiptNumber"
+                    control={control}
+                    rules={{
+                      required: watchCashReceipt && "현금영수증 번호를 입력해주세요.",
+                      validate: value => !watchCashReceipt || !isNaN(Number(value)) || "현금영수증 번호는 숫자만 입력해주세요."
+                    }}
+                    render={({ field }) => (
+                      <Input
+                        {...field}
+                        type="text"
+                        placeholder="(-없이) 숫자만 입력해주세요"
+                      />
+                    )}
+                  />
+                  {errors.cashReceiptNumber && <Text color="red.500">{errors.cashReceiptNumber.message}</Text>}
+                </>
+              )}
+              <Text fontSize="lg" fontWeight="bold">최종 결제금액</Text>
+              <Text fontSize="2xl" fontWeight="bold">{totalPrice}원</Text>
+              <Button type="submit" colorScheme="yellow" size="lg">
+                {totalPrice}원 결제하기
+              </Button>
+            </VStack>
+          </Box>
+        </Flex>
+      </form>
+    </Box>
+  );
+};