[feat] 리뷰 반영 및 택배사 동적화 (#139)

Co-authored-by: Dongwoo <kanggo0@cuunit.com>
Liberty52 · Nov 8, 2023 · b0b2fe3 · b0b2fe3
1 parent 6fedb93
commit b0b2fe3
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 42 deletions.
diff --git a/src/component/product/ProductDeliveryOptionPanel.js b/src/component/product/ProductDeliveryOptionPanel.js
@@ -1,9 +1,9 @@
-import { Stack, Button, TextField, MenuItem } from '@mui/material';
+import {Stack, Button, TextField, MenuItem, FormControl, InputLabel, Select} from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { getDeliveryOption, addDeliveryOption, updateDeliveryOption } from '../../axios/Product';
+import { getDeliveryCompanies } from "../../axios/Orders";
 import {
-    COURIER_OPTIONS,
     ERROR_MESSAGE,
     SUCCESS_MESSAGE_ADD,
     SUCCESS_MESSAGE_UPDATE,
@@ -15,7 +15,78 @@ export default function ProductDeliveryOptionPanel() {
     const { productId } = useParams();
     const [initialData, setInitialData] = useState((null));
     const [deliveryPrice, setDeliveryPrice] = useState(null);
-    const [selectedCourier, setSelectedCourier] = useState(null);
+
+    const [international, setInternational] = useState(null);
+    const [domesticDeliveryData, setDomesticDeliveryData] = useState([]);
+    const [internationalDeliveryData, setInternationalDeliveryData] = useState([]);
+    const [deliveryCompanies, setDeliveryCompanies] = useState([]);
+    const [deliveryInfo, setDeliveryInfo] = useState(null);
+
+    useEffect(() => {
+        getDeliveryOption(productId)
+            .then((data) => {
+                if (data) {
+                    setInitialData(data.data);
+                    setDeliveryPrice(data.data.fee || null);
+
+                    return Promise.all([
+                        getDeliveryCompanies(false),
+                        getDeliveryCompanies(true)
+                    ]);
+                }
+            })
+            .then(([domesticRes, internationalRes]) => {
+                const newDomesticDeliveryData = domesticRes?.data.documents;
+                const newInternationalDeliveryData = internationalRes?.data.documents;
+                setDomesticDeliveryData(newDomesticDeliveryData);
+                setInternationalDeliveryData(newInternationalDeliveryData);
+            })
+            .catch((error) => {
+                console.error('Error fetching delivery options:', error);
+                Swal.fire({
+                    title: ERROR_MESSAGE + "("+error+")",
+                    icon: 'error',
+                });
+            });
+    }, [productId]);
+
+    useEffect(() => {
+        if (initialData) {
+            const domesticMatchingData =
+                domesticDeliveryData.find(data => data.courierName === initialData.courierName);
+            const internationalMatchingData =
+                internationalDeliveryData.find(data => data.courierName === initialData.courierName);
+
+            if (domesticMatchingData) {
+                setInternational(false);
+                setDeliveryCompanies(domesticDeliveryData);
+                setDeliveryInfo(domesticMatchingData);
+            } else if (internationalMatchingData) {
+                setInternational(true);
+                setDeliveryCompanies(internationalDeliveryData);
+                setDeliveryInfo(internationalMatchingData);
+            }
+        }
+    }, [initialData, domesticDeliveryData, internationalDeliveryData]);
+
+    const handleChangeInternational = (e) => {
+        if (e.target.value == false) {
+            setInternational(false);
+            setDeliveryCompanies(domesticDeliveryData);
+        } else if (e.target.value == true) {
+            setInternational(true);
+            setDeliveryCompanies(internationalDeliveryData);
+        }
+    };
+
+    const handleChangeDeliveryInfo = (e) => {
+        if (e.target.name === undefined) {
+            const prevData = e.target.value;
+            setDeliveryInfo(prevData);
+        } else {
+            setDeliveryInfo({ ...deliveryInfo, [e.target.name]: e.target.value });
+        }
+    };
 
     const handleDeliveryPriceChange = (event) => {
         const inputPrice = event.target.value;
@@ -24,16 +95,13 @@ export default function ProductDeliveryOptionPanel() {
             setDeliveryPrice(parsedPrice);
         }
     };
-    const handleCourierChange = (event) => {
-        setSelectedCourier(event.target.value);
-        console.log(selectedCourier)
-    };
+
     const handlePostDeliveryOptions = () => {
-        if (deliveryPrice === null || selectedCourier === null) {
+        if (deliveryPrice === null) {
             alert(VALUE_REQUIRED_MESSAGE);
             return;
         }
-        const data = { courierName: selectedCourier, fee: deliveryPrice };
+        const data = { courierName: deliveryInfo.courierName, fee: deliveryPrice };
         if (initialData !== null) {
             updateDeliveryOption(productId, data)
                 .then(() => {
@@ -65,47 +133,46 @@ export default function ProductDeliveryOptionPanel() {
         }
     };
 
-    useEffect(() => {
-        getDeliveryOption(productId)
-            .then((data) => {
-                if (data) {
-                    setInitialData(data.data);
-                    setSelectedCourier(data.data.courierName || null);
-                    setDeliveryPrice(data.data.fee || null);
-                    console.log(data.data, initialData, selectedCourier, deliveryPrice)
-                }
-            })
-            .catch((error) => {
-                console.error('Error fetching delivery options:', error);
-                Swal.fire({
-                    title: ERROR_MESSAGE + "("+error+")",
-                    icon: 'error',
-                });
-            });
-    }, [productId]);
-
     return (
         <>
             <Stack direction={'row'} alignItems={'center'}>
+                <FormControl sx={{ m: 1, minWidth: 120 }}>
+                    <InputLabel id='international-label' shrink={international !== null}>국내/외</InputLabel>
+                    <Select
+                        id='international-label'
+                        labelId='international-label'
+                        label='국내/외'
+                        value={international}
+                        onChange={handleChangeInternational}
+                    >
+                        <MenuItem value={false}>국내</MenuItem>
+                        <MenuItem value={true}>국제</MenuItem>
+                    </Select>
+                </FormControl>
+                <FormControl sx={{ m: 1, minWidth: 120 }}>
+                    <InputLabel id='delivery-company-label' shrink={deliveryInfo !== null}>택배사</InputLabel>
+                    <Select
+                        id='delivery-company-label'
+                        labelId='delivery-company-label'
+                        label='택배사'
+                        value={deliveryInfo}
+                        onChange={handleChangeDeliveryInfo}
+                    >
+                        {deliveryCompanies?.map((deliveryCompany) => {
+                            return (
+                                <MenuItem key={deliveryCompany.courierCode} value={deliveryCompany}>
+                                    {deliveryCompany?.courierName}
+                                </MenuItem>
+                            );
+                        })}
+                    </Select>
+                </FormControl>
                 <TextField
                     label="가격"
                     value={deliveryPrice !== null ? deliveryPrice : ''}
                     onChange={handleDeliveryPriceChange}
                     sx={{ width: '30ch', marginRight: '10px' }}
                 />
-                <TextField
-                    select
-                    label="택배사 선택"
-                    value={selectedCourier !== null ? selectedCourier : ''}
-                    onChange={handleCourierChange}
-                    sx={{ width: '30ch', marginRight: '10px' }}
-                >
-                    {COURIER_OPTIONS.map((option) => (
-                        <MenuItem key={option} value={option}>
-                            {option}
-                        </MenuItem>
-                    ))}
-                </TextField>
                 <Button
                     variant="contained"
                     color="primary"

diff --git a/src/constants/message.js b/src/constants/message.js
@@ -1,4 +1,3 @@
-export const COURIER_OPTIONS = ['CJ대한통운', '한진택배', '롯데택배', '로젠택배', '경진택배'];
 export const SUCCESS_MESSAGE_ADD = '배송 옵션이 추가되었습니다';
 export const SUCCESS_MESSAGE_UPDATE = '배송 옵션이 수정되었습니다';
 export const ERROR_MESSAGE = '에러가 발생했습니다';