orderAdmin ui 제작

src/components/common/Select.tsx

@@ -17,7 +17,7 @@ const Select = ({ option, keys, placeholder, style: selectss }: SelectProps) =>
         </option>
       )}
       {keys.map((item, index) => (
-        <option key={item} selected={!placeholder && index === 0}>
+        <option key={item} selected={!placeholder && index === 0} value={item}>
           {option[index]}
         </option>
       ))}

src/components/market/orderAdminList/OrderAdminItem.tsx

@@ -0,0 +1,87 @@
+import { css, Theme } from '@emotion/react';
+import Link from 'next/link';
+
+type OrderAdminItemProps = {
+  id: string;
+};
+
+const OrderAdminItem = ({ id }: OrderAdminItemProps) => (
+  <li css={conatinerCss}>
+    <Link href="/market/orderAdminDetail">
+      <a>
+        <input type="checkbox" name="productChange" value={id} className="checkBox" />
+        <div className="orderBox">
+          {/* 컨텐츠 영역 */}
+          <div className="contentWrap">
+            <p className="orderNumber">주문번호 [20210213-0000001]</p>
+            <>
+              <p className="orderProduct">상품명</p>
+              <p className="orderOption">결제완료 | 배송중(1), 배송완료(3)</p>
+            </>
+          </div>
+        </div>
+      </a>
+    </Link>
+  </li>
+);
+
+const conatinerCss = (theme: Theme) => css`
+  a {
+    padding: 20px 0;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid ${theme.color.grey010};
+
+    .checkBox {
+      border: 1px solid ${theme.color.grey040};
+      margin-right: 20px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .orderBox {
+      display: flex;
+      align-items: flex-end;
+      .imageWrap {
+        width: 60px;
+        height: 60px;
+        background: ${theme.color.grey020};
+      }
+      .contentWrap {
+        margin-left: 10px;
+        flex: 1;
+        > .orderNumber {
+          ${theme.fontSize.caption2};
+          color: ${theme.color.grey040};
+        }
+        > .orderProduct {
+          ${theme.fontSize.caption1};
+          color: ${theme.color.black};
+        }
+        > .orderOption {
+          margin-top: 6px;
+          ${theme.fontSize.caption1};
+          color: ${theme.color.grey040};
+        }
+        > .buttonWrap {
+          display: flex;
+          margin-top: 10px;
+          button {
+            height: 30px;
+            min-height: 30px;
+            border-radius: 3px;
+          }
+          button:nth-child(1) {
+            width: 46px;
+          }
+          button:nth-child(2) {
+            width: 92px;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default OrderAdminItem;

src/components/market/orderAdminList/OrderAdminList.tsx

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import OrderAdminItem from './OrderAdminItem';
+
+const data = [{ id: '1' }, { id: '2' }];
+
+const OrderAdminList = () => (
+  <ul
+    css={css`
+      padding: 0 1.2em;
+    `}
+  >
+    {data.map((item) => (
+      <OrderAdminItem key={item.id} id={item.id} />
+    ))}
+  </ul>
+);
+
+export default OrderAdminList;

src/components/market/orderAdminList/index.ts

@@ -0,0 +1,3 @@
+import OrderAdminList from './OrderAdminList';
+
+export default OrderAdminList;

src/components/setting/address/AddressCardItem.tsx

@@ -5,15 +5,21 @@ type AddressCardItemProps = {
   mainAddress: string;
   detailAdress: string;
   phone: string;
+  addressId: number;
+  onDelete: (id: number) => void;
 };
 
-const AddressCardItem = ({ title, mainAddress, detailAdress, phone }: AddressCardItemProps) => (
+const AddressCardItem = ({ title, mainAddress, detailAdress, phone, addressId, onDelete }: AddressCardItemProps) => (
   <li css={containerCss}>
     <div className="addressTitle">
       <p>{title}</p>
       <div className="addressTitleBtn">
         <p>수정</p>
-        <p>삭제</p>
+        <p>
+          <span role="button" onClick={() => onDelete(addressId)} tabIndex={0}>
+            삭제
+          </span>
+        </p>
       </div>
     </div>
     <div className="addressContent">

src/components/setting/address/AddressCardList.tsx

@@ -1,34 +1,58 @@
+import { useState, useEffect } from 'react';
+
+import { useDeletAdress, useGetAdressList } from 'src/modules/auth';
 import AddressCardItem from './AddressCardItem';
 
-const data = [
-  {
-    id: 1,
-    title: '회사 1',
-    mainAddress: '서울특별시 영등포구 여의대로 14 KT여의도타워 14층 A회사',
-    detailAdress: '상세주소',
-    phone: '010-1234-1234',
-  },
-  {
-    id: 2,
-    title: '우리집',
-    mainAddress: '서울특별시 영등포구 여의대로 14 KT여의도타워 14층 A회사',
-    detailAdress: '상세주소',
-    phone: '010-3412-1234',
-  },
-];
+type ItemTypes = {
+  id: number;
+  address: string;
+  detail: string;
+  addressName: null | string;
+  phone?: string;
+};
 
-const AddressCardList = () => (
-  <ul>
-    {data.map((item) => (
-      <AddressCardItem
-        key={item.id}
-        title={item.title}
-        mainAddress={item.mainAddress}
-        detailAdress={item.detailAdress}
-        phone={item.phone}
-      />
-    ))}
-  </ul>
-);
+const AddressCardList = () => {
+  const mutaiton = useGetAdressList();
+  const delMutaion = useDeletAdress();
+  const [data, setData] = useState([]);
+  // 주소지역 가져오기
+  const getAddressList = async () => {
+    try {
+      const result = await mutaiton.mutateAsync({ id: 10 });
+      console.log(result);
+      setData(result);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  // 주소 삭제하기
+  const onDelete = async (addressId: number): Promise<void> => {
+    try {
+      await delMutaion.mutateAsync({ id: 10, addresId: addressId });
+      getAddressList();
+    } catch (error) {
+      console.error(error);
+      window.alert(error.response?.data.message);
+    }
+  };
+  useEffect(() => {
+    getAddressList();
+  }, []);
+  return (
+    <ul>
+      {data.map((item: ItemTypes) => (
+        <AddressCardItem
+          key={item.id}
+          title={item.addressName || '미구현'}
+          mainAddress={item.address}
+          detailAdress={item.detail}
+          phone={item.phone || '010-1234-5678'}
+          addressId={item.id}
+          onDelete={onDelete}
+        />
+      ))}
+    </ul>
+  );
+};
 
 export default AddressCardList;

src/interfaces/auth.ts

@@ -2,3 +2,16 @@ export type loginTypes = {
   email: string;
   password: string;
 };
+
+export type userTypes = {
+  id: number;
+};
+
+export type addressType = {
+  id: number;
+  addressName: string;
+  address: string;
+  detail: string;
+  isDefault: boolean;
+  zipCode: string;
+};

src/modules/auth.ts

@@ -1,31 +1,52 @@
 import axios from 'axios';
 
 import { useMutation, useQuery } from 'react-query';
-import { loginTypes } from 'src/interfaces/auth';
+import { addressType, loginTypes, userTypes } from 'src/interfaces/auth';
 
 const signUpKey = () => ['auth', 'signup'];
 const loginKey = () => ['auth', 'login'];
 const userKey = () => ['auth', 'user'];
+const addAddressKey = () => ['auth', 'addAddress'];
+const addressListKey = () => ['auth', 'addressList'];
+const deleteAddressKey = () => ['auth', 'deleteAddress'];
 
 export const getSignUpApi = async (data: loginTypes) => {
   axios.defaults.baseURL = `${process.env.API_URL}:8086`;
   const res = await axios.post(`users/sign-up`, data);
   return res.data;
 };
-
 export const useSignUpMutation = () => useMutation(signUpKey(), getSignUpApi);
 
 const getLoginApi = async (data: loginTypes) => {
   const res = await axios.post(`/users/login`, data);
   console.log(res);
   return res.data.data;
 };
-
 export const useLoginMutation = () => useMutation(loginKey(), getLoginApi);
 
-const getUserApi = () => {
-  // todo
-  console.log('유저 api');
+// 유저 정보 가져오기
+const getUserApi = async (data: userTypes) => {
+  const res = await axios.get(`/users/${data.id}`);
+  console.log(res);
+  return res.data.data;
 };
+export const useUserDataMutation = () => useMutation(userKey(), getUserApi);
 
-export const useUserDataQuery = () => useQuery(userKey(), getUserApi);
+// 배송지 목록
+const getAddressListApi = async (data: userTypes) => {
+  const res = await axios.get(`/users/${data.id}/address`);
+  return res.data.data;
+};
+export const useGetAdressList = () => useMutation(addressListKey(), getAddressListApi);
+// 배송지 등록
+const addAddressApi = async (data: addressType) => {
+  const res = await axios.post(`/users/${data.id}/address`, data);
+  return res.data.data;
+};
+export const useAddAdress = () => useMutation(addAddressKey(), addAddressApi);
+// 배송지 삭제
+const deleteAddressApi = async (data: { id: number; addresId: number }) => {
+  const res = await axios.delete(`/users/${data.id}/address/${data.addresId}`);
+  return res.data.data;
+};
+export const useDeletAdress = () => useMutation(deleteAddressKey(), deleteAddressApi);