diff --git a/src/components/common/Select.tsx b/src/components/common/Select.tsx index 1484976..1991bb5 100644 --- a/src/components/common/Select.tsx +++ b/src/components/common/Select.tsx @@ -17,7 +17,7 @@ const Select = ({ option, keys, placeholder, style: selectss }: SelectProps) => )} {keys.map((item, index) => ( - ))} diff --git a/src/components/market/orderAdminList/OrderAdminItem.tsx b/src/components/market/orderAdminList/OrderAdminItem.tsx new file mode 100644 index 0000000..224e9dc --- /dev/null +++ b/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) => ( +
  • + + + +
    + {/* 컨텐츠 영역 */} +
    +

    주문번호 [20210213-0000001]

    + <> +

    상품명

    +

    결제완료 | 배송중(1), 배송완료(3)

    + +
    +
    +     + +
    • +); + +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; diff --git a/src/components/market/orderAdminList/OrderAdminList.tsx b/src/components/market/orderAdminList/OrderAdminList.tsx new file mode 100644 index 0000000..2ab5a3f --- /dev/null +++ b/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 = () => ( + +); + +export default OrderAdminList; diff --git a/src/components/market/orderAdminList/index.ts b/src/components/market/orderAdminList/index.ts new file mode 100644 index 0000000..449444f --- /dev/null +++ b/src/components/market/orderAdminList/index.ts @@ -0,0 +1,3 @@ +import OrderAdminList from './OrderAdminList'; + +export default OrderAdminList; diff --git a/src/components/setting/address/AddressCardItem.tsx b/src/components/setting/address/AddressCardItem.tsx index b77f21f..f8c0214 100644 --- a/src/components/setting/address/AddressCardItem.tsx +++ b/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) => (

  • {title}

    수정

    -

    삭제

    +

    + onDelete(addressId)} tabIndex={0}> + 삭제 + +

    diff --git a/src/components/setting/address/AddressCardList.tsx b/src/components/setting/address/AddressCardList.tsx index 0a0d161..7206f18 100644 --- a/src/components/setting/address/AddressCardList.tsx +++ b/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 = () => ( - -); +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 => { + try { + await delMutaion.mutateAsync({ id: 10, addresId: addressId }); + getAddressList(); + } catch (error) { + console.error(error); + window.alert(error.response?.data.message); + } + }; + useEffect(() => { + getAddressList(); + }, []); + return ( +
      + {data.map((item: ItemTypes) => ( + + ))} +
    + ); +}; export default AddressCardList; diff --git a/src/interfaces/auth.ts b/src/interfaces/auth.ts index bdbddd7..a4999a7 100644 --- a/src/interfaces/auth.ts +++ b/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; +}; diff --git a/src/modules/auth.ts b/src/modules/auth.ts index 92763fb..5889ef6 100644 --- a/src/modules/auth.ts +++ b/src/modules/auth.ts @@ -1,18 +1,20 @@ 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) => { @@ -20,12 +22,31 @@ const getLoginApi = async (data: loginTypes) => { 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); diff --git a/src/pages/market/orderAdmin.tsx b/src/pages/market/orderAdmin.tsx new file mode 100644 index 0000000..aaf19c9 --- /dev/null +++ b/src/pages/market/orderAdmin.tsx @@ -0,0 +1,93 @@ +import { css, Theme } from '@emotion/react'; +import TopBar from 'src/components/common/layout/TopBar'; +import Select from 'src/components/common/Select'; +import Button from 'src/components/common/Button'; +import OrderAdminList from 'src/components/market/orderAdminList'; + +const OrederAdmin = () => ( +
    + +
    +
    + +
    + +
    +
    + - -
    -
    - +
    +
    + + +
    +
    + +
    +
    - + + +
    +
    +
    - - -
    -
    - -
    - {/* 완료 버튼 */} - + {/* 완료 버튼 */} + +
    ); }; diff --git a/src/pages/setting/addressAdmin.tsx b/src/pages/setting/addressAdmin.tsx index ae5d668..2457649 100644 --- a/src/pages/setting/addressAdmin.tsx +++ b/src/pages/setting/addressAdmin.tsx @@ -10,6 +10,7 @@ const AddressAdmin = () => { const onMoveAddressAdd = () => { router.push('/setting/addressAdd'); }; + return ( <> diff --git a/src/pages/setting/changeInfo.tsx b/src/pages/setting/changeInfo.tsx index 45821ac..15ffc64 100644 --- a/src/pages/setting/changeInfo.tsx +++ b/src/pages/setting/changeInfo.tsx @@ -1,9 +1,12 @@ import { css, Theme } from '@emotion/react'; import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; + import { useForm, DeepMap, FieldError } from 'react-hook-form'; import Button from 'src/components/common/Button'; import Input from 'src/components/common/Input'; import TopBar from 'src/components/common/layout/TopBar'; +import { useUserDataMutation } from 'src/modules/auth'; type FormData = { email?: string; @@ -21,6 +24,17 @@ const ChangeInfo = () => { formState: { errors }, } = useForm({ mode: 'onChange' }); const router = useRouter(); + const mutation = useUserDataMutation(); + const [info, setInfo] = useState({ email: '', authKey: '' }); + + const getUserData = async () => { + try { + const result = await mutation.mutateAsync({ id: 10 }); + setInfo(result); + } catch (error) { + console.error(error); + } + }; const onValid = (name: keyof DeepMap) => { if (errors[name]) { @@ -33,6 +47,15 @@ const ChangeInfo = () => { router.push('/setting/changePw'); }; + useEffect(() => { + setValue('nickname', info.authKey); + setValue('email', info.email); + setValue('phone', info.email); + }, [info]); + useEffect(() => { + getUserData(); + }, []); + return ( <> @@ -44,7 +67,7 @@ const ChangeInfo = () => { setValue={setValue} register={register} style={inputCss()} - placeholder="info@marketuniverse.co.kr" + placeholder={info.email} /> {/* 닉네임 */}
    diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx index 9059ed2..86f0dd1 100644 --- a/src/pages/setting/index.tsx +++ b/src/pages/setting/index.tsx @@ -1,11 +1,14 @@ import { css } from '@emotion/react'; import TopBar from 'src/components/common/layout/TopBar'; import SideBarItem from 'src/components/common/layout/SideBarItem'; -import { useCallback } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useRouter } from 'next/router'; +import { useUserDataMutation } from 'src/modules/auth'; const SettingIndex = () => { const router = useRouter(); + const mutation = useUserDataMutation(); + const [info, setInfo] = useState({ authKey: '', email: '' }); // 회원정보 이동 const onChangeInfo = useCallback(() => { router.push('/setting/changeInfo'); @@ -14,6 +17,21 @@ const SettingIndex = () => { const onAddressAdmin = useCallback(() => { router.push('/setting/addressAdmin'); }, [router]); + + const getUserData = async () => { + try { + const result = await mutation.mutateAsync({ id: 10 }); + console.log(result); + // setInfo({ authKey: result.authKey, email: result.email }); + } catch (error) { + console.error(error); + } + }; + + useEffect(() => { + getUserData(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return (
    {/* 헤더 */} @@ -48,7 +66,7 @@ const SettingIndex = () => { ` } > - 부여번호 + {info.authKey}

    @@ -57,7 +75,7 @@ const SettingIndex = () => { ` } > - info@marketuniverse.co.kr + {info.email}