Merge pull request #65 from efub-ecyce/feat/#50

Feat/#50
efub-ecyce · Dec 2, 2024 · 1c3c4eb · 1c3c4eb
2 parents ebf4631 + f178166
commit 1c3c4eb
Show file tree

Hide file tree

Showing 12 changed files with 357 additions and 102 deletions.
diff --git a/src/api/pay.ts b/src/api/pay.ts
@@ -1 +1,22 @@
-export {};
+import { client } from './client';
+
+export const postPayInfo = async (
+        imp_uid: string,
+        orderId: string,
+        payAmount: number,
+        payStatus: string,
+        payTime: string,
+    ) => {
+        try {
+        const res = await client.post(`/pay/${imp_uid}`, {
+            imp_uid: imp_uid,
+            orderId: orderId,
+            payAmount: payAmount,
+            payStatus: payStatus,
+            payTime: payTime,
+        });
+        return res.data;
+        } catch (error) {
+        throw error;
+        }
+};
diff --git a/src/api/user.ts b/src/api/user.ts
@@ -49,9 +49,10 @@ export const patchUserInfo = async (
   userInfo: UserInfo,
   imageFile: File | null,
 ) => {
-  const { nickname, phoneNumber, postalCode, address1, address2, bio } =
+  const { name, nickname, phoneNumber, postalCode, address1, address2, bio } =
     userInfo;
   const filteredInfo = {
+    name,
     nickname,
     phoneNumber,
     bio,

diff --git a/src/components/PaymentPage/DeliverInfoComponent.tsx b/src/components/PaymentPage/DeliverInfoComponent.tsx
@@ -1,24 +1,22 @@
 import * as S from './DeliverInfoComponent.style';
 import { ReactComponent as EditIcon } from '../../assets/PaymentPage/edit.svg';
-import { useNavigate } from 'react-router-dom';
 
 interface AddressProps {
     recipient: string;
     phoneNumber: string;
-    postCode: number;
+    postCode: string;
     address: string;
     addressDetail: string;
+    onEditAddress: () => void;
 }
 
-const DeliverInfoComponent = ({ recipient, phoneNumber, postCode, address, addressDetail }: AddressProps) => {
-
-    const navigate = useNavigate();
+const DeliverInfoComponent = ({ recipient, phoneNumber, postCode, address, addressDetail, onEditAddress }: AddressProps) => {
 
     return (
         <S.Wrapper>
             <S.TitleWrapper>
                 <S.Title>배송 정보</S.Title>
-                <S.Btn onClick={() => navigate('/payment/address')}><EditIcon /></S.Btn>
+                <S.Btn onClick={onEditAddress}><EditIcon /></S.Btn>
             </S.TitleWrapper>
             <S.Line></S.Line>
             <S.InfoWrapper>

diff --git a/src/components/PaymentPage/ProductComponent.tsx b/src/components/PaymentPage/ProductComponent.tsx
@@ -5,11 +5,10 @@ interface ProductProps {
     title: string;
     price: number;
     imageURL: string;
-    option1: number;
-    option2: number;
+    option: string;
 }
 
-const ProductComponent = ({seller, title, price, imageURL, option1, option2} : ProductProps) => {
+const ProductComponent = ({ seller, title, price, imageURL, option } : ProductProps) => {
     return (
         <S.Wrapper>
             <S.Title>주문 상품</S.Title>
@@ -20,13 +19,13 @@ const ProductComponent = ({seller, title, price, imageURL, option1, option2} : P
                     <S.TextWrapper>
                         <S.Title>{title}</S.Title>
                         <S.OptionWrapper>
-                            <S.Option>옵션1</S.Option>
-                            <S.Option>{option1}개</S.Option>
+                            <S.Option>{option}</S.Option>
+                            <S.Option>1개</S.Option>
                         </S.OptionWrapper>
-                        <S.OptionWrapper>
+                        {/* <S.OptionWrapper>
                             <S.Option>옵션2</S.Option>
                             <S.Option>{option2}개</S.Option>
-                        </S.OptionWrapper>
+                        </S.OptionWrapper> */}
                         <S.Title>{price.toLocaleString()}원</S.Title>
                     </S.TextWrapper>
                 </S.ContentWrapper>

diff --git a/src/components/ProductDetailPage/OrderModal.tsx b/src/components/ProductDetailPage/OrderModal.tsx
@@ -3,15 +3,24 @@ import * as S from './OrderModal.style';
 import { ReactComponent as DrawerBtn } from '../../assets/ProductDetailPage/arrow_key_down.svg';
 import { Button } from '../common/Button';
 import { ReactComponent as CloseBtn } from '../../assets/ProductDetailPage/close.svg';
+import { ProductProps } from '../../pages/Product/ProductDetailPage/ProductDetailPage';
+import { useNavigate } from 'react-router-dom';
 
 interface DrawerProps {
   modalHandler: (
     event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>,
   ) => void;
+  productInfo: ProductProps;
 }
 
-export const OrderModal = ({ modalHandler }: DrawerProps) => {
+export const OrderModal = ({ modalHandler, productInfo }: DrawerProps) => {
+
+  const navigate = useNavigate();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<{
+    optionName: string;
+    optionPrice: number;
+  } | null>(null);
 
   const handleScreenClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.currentTarget === event.target) {
@@ -23,6 +32,30 @@ export const OrderModal = ({ modalHandler }: DrawerProps) => {
     setIsDrawerOpen((prevState) => !prevState);
   };
 
+  const handleOptionSelect = (optionName: string, optionPrice: number) => {
+    setSelectedOption({ optionName, optionPrice });
+    setIsDrawerOpen(false);
+  };
+
+  const handleOptionClose = () => {
+    setSelectedOption(null);
+  };
+
+  const handlePurchase = () => {
+    if (selectedOption) {
+      const paymentData = {
+        seller: productInfo.sellerNickname,
+        title: productInfo.productName,
+        option: selectedOption.optionName,
+        price: productInfo.price + selectedOption.optionPrice,
+        deliveryCharge: productInfo.deliveryFee,
+      };
+      navigate('/payment', { state: paymentData });
+    } else {
+      alert('옵션을 선택해주세요.');
+    }
+  };
+
   return (
     <S.PageWrapper onClick={handleScreenClick}>
       <S.Container>
@@ -31,43 +64,40 @@ export const OrderModal = ({ modalHandler }: DrawerProps) => {
             <S.Option>옵션 선택</S.Option>
             <DrawerBtn />
           </S.OptionTitle>
-          {isDrawerOpen && (
-            <>
-              <S.OptionWrapper>
-                <S.Option>옵션 1</S.Option>
-                <S.OptionPrice>+800원</S.OptionPrice>
-              </S.OptionWrapper>
-              <S.OptionWrapper>
-                <S.Option>옵션 2</S.Option>
-                <S.OptionPrice>+1200원</S.OptionPrice>
-              </S.OptionWrapper>
-              <S.OptionWrapper>
-                <S.Option>옵션 3</S.Option>
-                <S.OptionPrice>+1200원</S.OptionPrice>
-              </S.OptionWrapper>
-            </>
-          )}
+          {isDrawerOpen && productInfo.options.map((option) => (
+            <S.OptionWrapper 
+              key={option.optionId}
+              onClick={() => handleOptionSelect(option.optionName, option.optionPrice)}
+            >
+              <S.Option>{option.optionName}</S.Option>
+              <S.OptionPrice>+{option.optionPrice.toLocaleString()}원</S.OptionPrice>
+            </S.OptionWrapper>
+          ))}
         </S.OptionDrawer>
-        <S.SelectedWrapper>
-          <S.SelectedOption>
-            <S.TitleWrapper>
-              <S.SelectedTitle>양말목 지구 네임택</S.SelectedTitle>
-              <CloseBtn />
-            </S.TitleWrapper>
-            <S.SelectedOptionName>옵션2: 어쩌구저쩌구</S.SelectedOptionName>
-            <S.PriceWrapper>
-              <S.SelectedTitle>4,200원</S.SelectedTitle>
-            </S.PriceWrapper>
-          </S.SelectedOption>
-          <S.FinalPriceWrapper>
-            <S.FinalPrice>결제 예상 금액</S.FinalPrice>
-            <S.FinalPrice>4,200원</S.FinalPrice>
-          </S.FinalPriceWrapper>
-        </S.SelectedWrapper>
-        <S.ButtonWrapper>
+        {selectedOption && (
+          <S.SelectedWrapper>
+            <S.SelectedOption>
+              <S.TitleWrapper>
+                <S.SelectedTitle>{productInfo.productName}</S.SelectedTitle>
+                <CloseBtn onClick={handleOptionClose}/>
+              </S.TitleWrapper>
+              <S.SelectedOptionName>{selectedOption.optionName}</S.SelectedOptionName>
+              <S.PriceWrapper>
+                <S.SelectedTitle>
+                {(productInfo.price + selectedOption.optionPrice).toLocaleString()}원
+                </S.SelectedTitle>
+              </S.PriceWrapper>
+            </S.SelectedOption>
+            <S.FinalPriceWrapper>
+              <S.FinalPrice>결제 예상 금액</S.FinalPrice>
+              <S.FinalPrice>{(productInfo.price + selectedOption.optionPrice).toLocaleString()}원</S.FinalPrice>
+            </S.FinalPriceWrapper>
+          </S.SelectedWrapper>
+        )}
+        <S.ButtonWrapper onClick={handlePurchase}>
           <Button isActive={true} text="구매하기" color="mint" />
         </S.ButtonWrapper>
       </S.Container>
     </S.PageWrapper>
   );
-};
+};
diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -1,4 +1,10 @@
 declare module '*.svg' {
     const content: string;
     export default content;
+}
+
+declare global {
+    interface Window {
+        IMP: any
+    }
 }
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
@@ -3,4 +3,10 @@ declare module "*.svg" {
     export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
     const src: string;
     export default src;
-}
+}
+
+declare global {
+    interface Window {
+        IMP: any
+    }
+}
diff --git a/src/pages/Product/EditAddressPage/EditAddressPage.tsx b/src/pages/Product/EditAddressPage/EditAddressPage.tsx
@@ -1,19 +1,23 @@
 import * as S from './EditAddressPage.style';
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Button } from '../../../components/common/Button';
 import DaumPostcode from 'react-daum-postcode';
 import Header from '../../../components/common/Header';
+import { patchUserInfo, UserInfo } from '../../../api/user';
 
 const EditAddressPage = () => {
-  const [name, setName] = useState<string>('');
-  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const { state } = useLocation();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState<string>(state?.name || '');
+  const [phoneNumber, setPhoneNumber] = useState<string>(state?.phoneNumber || '');
   const [isAllFilled, setIsAllFilled] = useState<boolean>(false);
 
   const [postcodeOpen, setPostcodeOpen] = useState<boolean>(false);
-  const [postcode, setPostcode] = useState<string>('');
-  const [address, setAddress] = useState<string>('');
-  const [detailAddress, setDetailAddress] = useState<string>('');
+  const [postcode, setPostcode] = useState<string>(state?.postcode || '');
+  const [address, setAddress] = useState<string>(state?.address || '');
+  const [detailAddress, setDetailAddress] = useState<string>(state?.detailAddress || '');
 
   const handlePostcodeComplete = (data: any) => {
     // 우편번호 & 주소 업데이트
@@ -30,8 +34,6 @@ const EditAddressPage = () => {
     setPostcodeOpen(false);
   };
 
-  const navigate = useNavigate();
-
   useEffect(() => {
     if (
       name.length > 0 &&
@@ -57,11 +59,29 @@ const EditAddressPage = () => {
   };
 
   const onClickButton = async () => {
-      if (isAllFilled) {
-        //api 코드 넣기
-        navigate('/payment');
-    };
-  }
+    if (isAllFilled) {
+      try {
+        const userInfo: UserInfo = {
+          name,
+          nickname: '',
+          phoneNumber,
+          postalCode: postcode,
+          address1: address,
+          address2: detailAddress,
+        };
+
+        await patchUserInfo(userInfo, null);
+
+        // 브라우저 히스토리로 이전 페이지로 이동
+        window.history.go(-1);
+      } catch (error) {
+        console.error('배송지 변경 실패:', error);
+        alert('배송지 변경 중 문제가 발생했습니다. 다시 시도해주세요.');
+      }
+    } else {
+      alert('모든 입력란에 올바르게 입력해주세요.');
+    }
+  };
 
   return (
     <S.Container>

diff --git a/src/pages/Product/PaymentPage/PaymentPage.style.ts b/src/pages/Product/PaymentPage/PaymentPage.style.ts
@@ -18,4 +18,8 @@ export const Container = styled.div`
 
     padding: 0 1.28125rem;
     box-sizing: border-box;
+`;
+
+export const Wrapper = styled.div`
+    width: 100%;
 `;