Feat/address #50

src/apis/axiosInstance.ts

@@ -2,6 +2,9 @@ import axios from 'axios';
 
 const axiosInstance = axios.create({
   baseURL: `${import.meta.env.VITE_API_BASE_URL}`,
+  headers: {
+    Authorization: `Bearer ${import.meta.env.VITE_API_ACCESS_TOKEN}`
+  },
   withCredentials: true,
 });
 

src/context/AuthProvider.tsx

@@ -8,12 +8,16 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   // 로그인 함수
   const login = async () => {
     try {
-      const { data } = await axiosInstance.get('/api/member/user-info', {});
+      const { data } = await axiosInstance.get('/api/member/user-info', {
+        withCredentials: true,
+      });
       if (data.isSuccess) {
         setIsAuthenticated(true);
       } else {
         setIsAuthenticated(false);
       }
+      console.log(data);
+      console.log(data.isSuccess);
     } catch (error) {
       console.error('로그인 체크 실패:', error);
       setIsAuthenticated(false);

src/pages/address/addressSetPage.tsx

@@ -1,18 +1,60 @@
 import styled from "styled-components";
 import BigTitle from "../../components/BigTitle";
 import Address from "./components/Address";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useModalContext } from "../../components/Modal/context/ModalContext";
 import AddAddress from "./components/modal/AddAddress";
 import media from "../../styles/media";
+import axiosInstance from "../../apis/axiosInstance";
+
+export type TAddress = {
+  addressId: number,
+  addressName: string,
+  recipientName: string,
+  addressDetail: string,
+  phoneNumber: string,
+  isDefault: boolean
+};
 
 const AddressSetPage = () => {
   const [isSelect, setIsSelect] = useState(false);
   const { openModal } = useModalContext();
+  const [addressList, setAddressList] = useState<TAddress[]|undefined>([]);
+  const [addressId, setAddressId] = useState<number|null>(null);
 
   const handleModal = () => {
-    openModal(({ onClose }) => <AddAddress onClose={onClose} />);
-  }
+    openModal(({ onClose }) => 
+    <AddAddress onClose={onClose}
+    fetchAddresses={fetchAddresses}
+    />);
+  };
+
+  const fetchAddresses = async () => {
+    const {data} = await axiosInstance.get(
+      '/api/member/mypage/setting/addresses'
+    );
+    setAddressList(data.result.addressList);
+    console.log(data.result.addressList);
+  };
+
+  const handleDelete = () => {
+    const deleteAddress = async () => {
+      const { data } = await axiosInstance.delete(
+        '/api/member/mypage/setting/addresses', {
+          data: { addressId }
+        });
+      await fetchAddresses();
+    };
+    if (addressId!==-1) {
+      deleteAddress();
+      setAddressId(null);
+      setIsSelect(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAddresses();
+  }, []);
 
   return (
     <Wrapper>
@@ -22,6 +64,7 @@ const AddressSetPage = () => {
         ? <>
         <SelectBtn
         $right={'128px'}
+        onClick={handleDelete}
         >배송지 삭제</SelectBtn>
         <SelectBtn
         $background={'rgba(201, 8, 255, 0.20)'}
@@ -33,7 +76,14 @@ const AddressSetPage = () => {
         }
       </BigTitle>
       <AddressList>
-        <Address isSelect={isSelect} />
+        {addressList?.map(v =>
+          <Address key={v.addressId}
+          isSelect={isSelect} address={v}
+          addressId={addressId}
+          setAddressId={setAddressId}
+          fetchAddresses={fetchAddresses}
+          />
+        )}
       </AddressList>
       <Button onClick={handleModal}>새 배송지 추가하기</Button>
     </Wrapper>

src/pages/address/components/Address.tsx

@@ -1,29 +1,51 @@
 /// <reference types="vite-plugin-svgr/client" />
-import { useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { ReactComponent as checkbox } from "../../../assets/imgCheckbox.svg";
 import media from "../../../styles/media";
+import { TAddress } from "../addressSetPage";
+import axiosInstance from "../../../apis/axiosInstance";
 
-const Address = ({isSelect}:{isSelect:boolean}) => {
-  // 임의의 default state: 후에 데이터 연결하면 삭제할 state
-  const [isDefault, setIsDefault] = useState(false);
-  const [isClicked, setIsClicked] = useState(false);
+type TAddressProps = {
+  isSelect: boolean,
+  address: TAddress,
+  addressId: number|null,
+  setAddressId: React.Dispatch<React.SetStateAction<number|null>>,
+  fetchAddresses: () => Promise<void>,
+}
+
+const Address = ({isSelect, address, addressId,
+  setAddressId, fetchAddresses}:TAddressProps) => {
+  // const [defaultId, setDefaultId] = useState<number|null>(null);
+
+  const defaultAddress = async () => {
+    const { data } = await axiosInstance.post(
+      '/api/member/mypage/setting/addresses',
+      { addressId: address.addressId }
+    );
+    await fetchAddresses();
+    console.log("Success POST: Change Default Address!");
+  };
+
+  const handleCheckbox = () => {
+    setAddressId(address.addressId);
+  }
   return (
     <>
     <List>
       {isSelect ?
       <Checkbox
-      onClick={()=>setIsClicked(!isClicked)}
-      fill={isClicked ? "#C908FF" : "none"}
+      onClick={handleCheckbox}
+      fill={addressId===address.addressId ? "#C908FF" : "none"}
       />
     : <ListIcon />}
-      <TitleSpan>우리집</TitleSpan>
-      <AddressSpan>서울특별시 마포구 와우산로 94 홍익대학교 제2기숙사</AddressSpan>
+      <TitleSpan>{address.addressName}</TitleSpan>
+      <AddressSpan>{address.addressDetail}</AddressSpan>
       <SetBtn
-      $default={isDefault}
-      onClick={()=>setIsDefault(!isDefault)}
+      $default={address.isDefault}
+      onClick={defaultAddress}
       >{
-        isDefault
+        address.isDefault
         ? '기본 배송지로 설정됨'
         : '기본 배송지로 설정하기'
       }</SetBtn>
@@ -39,7 +61,7 @@ const List = styled.li`
   align-items: center;
   // justify-content: space-between;
   column-gap: 74px;
-  width: 925px;
+  width: 940px;
   box-sizing: border-box;
   ${media.medium`
     width: 631px;

src/pages/address/components/InputAddress.tsx

@@ -6,16 +6,20 @@ type TInputAddress = {
   listColor:string,
   title:string,
   inputType?: 'tel',
+  value:string,
+  setValue:React.Dispatch<React.SetStateAction<string>>,
 }
 
-const InputAddress = ({listColor, title, inputType}:TInputAddress) => {
+const InputAddress = ({listColor, title, inputType, value, setValue}:TInputAddress) => {
   return (
     <Container>
       <IcList fill={listColor} width={7} height={7} />
       <TitleBox>
         {title}
       </TitleBox>
-      <Input type={inputType||"text"} />
+      <Input type={inputType||"text"} value={value} 
+      onChange={(e:React.ChangeEvent<HTMLInputElement>)=>
+      setValue(e.target.value)} />
     </Container>
   );
 };

src/pages/address/components/modal/AddAddress.tsx

@@ -6,11 +6,21 @@ import InputAddress from "../InputAddress";
 import { ReactComponent as IcList } from "../../../../assets/icList.svg";
 import { ReactComponent as closeModal } from  "../../../../assets/icCloseAddressModal.svg";
 import { Address, useDaumPostcodePopup } from "react-daum-postcode";
+import axiosInstance from "../../../../apis/axiosInstance";
 
-const AddAddress = ({ onClose }:PropsWithChildren<{ onClose: () => void }>) => {
+const AddAddress = ({ onClose, fetchAddresses }:PropsWithChildren<{ 
+  onClose: () => void,
+  fetchAddresses: () => Promise<void>
+}>) => {
   const open = useDaumPostcodePopup();
   const { clearModals } = useModalContext();
   const [apiAddress, setApiAddress] = useState<string>('');
+  const [addressName, setAddressName] = useState<string>('');
+  const [recipientName, setRecipientName] = useState<string>('');
+  const [addressDetail, setAddressDetail] = useState<string>('');
+  const [telephone, setTelephone] = useState<string>('');
+  const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const [message, setMessage] = useState<string>('');
 
   const handleComplete = (data:Address) => {
     let fullAddress = data.address; // 기본주소
@@ -43,6 +53,26 @@ const AddAddress = ({ onClose }:PropsWithChildren<{ onClose: () => void }>) => {
     clearModals();
   };
 
+  const handleAddAddress = () => {
+    const postAddress = async () => {
+      const { data } = await axiosInstance.post(
+        '/api/member/mypage/setting/addresses/add',
+        {
+          addressName,
+          recipientName,
+          addressDetail: apiAddress+' '+addressDetail,
+          phoneNumber,
+          message,
+          isDefault: false,
+        }
+      );
+      await fetchAddresses();
+      console.log('Success POST');
+    };
+    postAddress();
+    onCloseModal();
+  }
+
   return ReactDOM.createPortal(
     <ModalOverlay>
       <ModalContent>
@@ -52,8 +82,10 @@ const AddAddress = ({ onClose }:PropsWithChildren<{ onClose: () => void }>) => {
           <LineDiv />
         </TopContainer>
         <ContentsContainer>
-          <InputAddress listColor="#C908FF" title="배송지명" />
-          <InputAddress listColor="#C908FF" title="받는 사람" />
+          <InputAddress listColor="#C908FF" title="배송지명"
+          value={addressName} setValue={setAddressName} />
+          <InputAddress listColor="#C908FF" title="받는 사람"
+          value={recipientName} setValue={setRecipientName} />
           <AddressBox>
             <FlexContainer>
               <IcList fill="#C908FF" width={7} height={7} />
@@ -62,14 +94,19 @@ const AddAddress = ({ onClose }:PropsWithChildren<{ onClose: () => void }>) => {
             <FindAddressBox>
               <FindAddress onClick={handlePostcode} readOnly
               value={apiAddress}/>
-              <FindAddress />
+              <FindAddress value={addressDetail}
+              onChange={(e:React.ChangeEvent<HTMLInputElement>)=>
+              setAddressDetail(e.target.value)}/>
             </FindAddressBox>
           </AddressBox>
-          <InputAddress listColor="#C908FF" title="연락처" inputType="tel" />
-          <InputAddress listColor="#E4E4E4" title="휴대폰" inputType="tel" />
-          <InputAddress listColor="#E4E4E4" title="주문 메시지" />
+          <InputAddress listColor="#C908FF" title="연락처" inputType="tel"
+          value={telephone} setValue={setTelephone} />
+          <InputAddress listColor="#E4E4E4" title="휴대폰" inputType="tel"
+          value={phoneNumber} setValue={setPhoneNumber}/>
+          <InputAddress listColor="#E4E4E4" title="주문 메시지"
+          value={message} setValue={setMessage} />
         </ContentsContainer>
-        <AddBtn>추가하기</AddBtn>
+        <AddBtn onClick={handleAddAddress}>추가하기</AddBtn>
       </ModalContent>
     </ModalOverlay>,
     document.getElementById('modal-root') as HTMLElement,