diff --git a/public/svg/ic_logout.svg b/public/svg/ic_logout.svg new file mode 100644 index 0000000..e931ef5 --- /dev/null +++ b/public/svg/ic_logout.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/apis/api.ts b/src/apis/api.ts index 97c3b39..f565e62 100644 --- a/src/apis/api.ts +++ b/src/apis/api.ts @@ -30,3 +30,21 @@ export function patch(...args: Parameters) { export function del(...args: Parameters) { return instance.delete(...args); } + +export function adminPost(...args: Parameters) { + return adminInstance.post(...args); +} + +export function adminPut(...args: Parameters) { + return adminInstance.put(...args); +} + +export function adminPatch(...args: Parameters) { + return adminInstance.patch(...args); +} + +export function adminDelete( + ...args: Parameters +) { + return adminInstance.delete(...args); +} diff --git a/src/apis/domains/admin/useDeleteProduct.ts b/src/apis/domains/admin/useDeleteProduct.ts index 2ebb631..f6a107d 100644 --- a/src/apis/domains/admin/useDeleteProduct.ts +++ b/src/apis/domains/admin/useDeleteProduct.ts @@ -1,4 +1,4 @@ -import { del } from "@apis/api"; +import { adminDelete } from "@apis/api"; import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ErrorResponse, MutateResponseType } from "@types"; @@ -7,7 +7,7 @@ const deleteProduct = async ( productIdList: number[] ): Promise => { try { - const response = await del(`api/v1/product`, { + const response = await adminDelete(`api/v1/product`, { data: productIdList, }); return response.data; diff --git a/src/apis/domains/admin/usePatchDeliveryDate.ts b/src/apis/domains/admin/usePatchDeliveryDate.ts index ba6d5da..de1c9c7 100644 --- a/src/apis/domains/admin/usePatchDeliveryDate.ts +++ b/src/apis/domains/admin/usePatchDeliveryDate.ts @@ -1,11 +1,11 @@ -import { patch } from "@apis/api"; +import { adminPatch } from "@apis/api"; import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ErrorResponse, MutateResponseType } from "@types"; -const patchDeliveryDate = async (date: number): Promise => { +const patchDeliveryDate = async (date: string): Promise => { try { - const response = await patch( + const response = await adminPatch( `api/v1/delivery/${date.toString()}` ); return response.data; @@ -19,7 +19,7 @@ const patchDeliveryDate = async (date: number): Promise => { export const usePatchDeliveryDate = () => { const queryClient = useQueryClient(); return useMutation({ - mutationFn: (date: number) => patchDeliveryDate(date), + mutationFn: (date: string) => patchDeliveryDate(date), onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEY.DELIVERY_DATE] }); }, diff --git a/src/apis/domains/admin/usePatchDeliveryShipped.ts b/src/apis/domains/admin/usePatchDeliveryShipped.ts index fcdfada..2dc560d 100644 --- a/src/apis/domains/admin/usePatchDeliveryShipped.ts +++ b/src/apis/domains/admin/usePatchDeliveryShipped.ts @@ -1,4 +1,4 @@ -import { patch } from "@apis/api"; +import { adminPatch } from "@apis/api"; import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ErrorResponse, MutateResponseType } from "@types"; @@ -7,7 +7,7 @@ const patchDeliveryShipped = async ( orderNumberList: number[] ): Promise => { try { - const response = await patch( + const response = await adminPatch( `api/v1/delivery/shipped`, orderNumberList ); diff --git a/src/apis/domains/admin/usePatchProduct.ts b/src/apis/domains/admin/usePatchProduct.ts index 8e8ef8e..089e3ad 100644 --- a/src/apis/domains/admin/usePatchProduct.ts +++ b/src/apis/domains/admin/usePatchProduct.ts @@ -1,11 +1,11 @@ -import { patch } from "@apis/api"; +import { adminPatch } from "@apis/api"; import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ErrorResponse, MutateResponseType } from "@types"; const patchProduct = async (productId: number): Promise => { try { - const response = await patch( + const response = await adminPatch( `api/v1/product/${productId.toString()}` ); return response.data; diff --git a/src/apis/domains/admin/usePostAdminLogin.ts b/src/apis/domains/admin/usePostAdminLogin.ts index fe55a72..b26de7b 100644 --- a/src/apis/domains/admin/usePostAdminLogin.ts +++ b/src/apis/domains/admin/usePostAdminLogin.ts @@ -1,4 +1,4 @@ -import { post } from "@apis/api"; +import { adminPost } from "@apis/api"; import { useMutation } from "@tanstack/react-query"; import { ErrorResponse, CodeResponseType } from "@types"; import { useNavigate } from "react-router-dom"; @@ -12,7 +12,7 @@ const postAdminLogin = async ( loginData: LoginDataType ): Promise => { try { - const response = await post( + const response = await adminPost( `/api/v1/admin/authenticate`, loginData ); @@ -30,7 +30,7 @@ export const usePostAdminLogin = () => { mutationFn: (loginData: LoginDataType) => postAdminLogin(loginData), onSuccess: (data) => { if (data.code === "success") { - localStorage.setItem("accessToken", data.code); + localStorage.setItem("accessToken", data.data.token); navigate("/admin"); } }, diff --git a/src/apis/domains/admin/usePostProduct.ts b/src/apis/domains/admin/usePostProduct.ts index 3dfcb1e..9c6715c 100644 --- a/src/apis/domains/admin/usePostProduct.ts +++ b/src/apis/domains/admin/usePostProduct.ts @@ -1,4 +1,4 @@ -import { post } from "@apis/api"; +import { adminPost } from "@apis/api"; import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ErrorResponse, MutateResponseType, ProductAddType } from "@types"; @@ -7,7 +7,7 @@ const postProduct = async ( productData: ProductAddType ): Promise => { try { - const response = await post( + const response = await adminPost( `api/v1/product`, productData ); diff --git a/src/apis/domains/orderCheck/usePatchPayCancel.ts b/src/apis/domains/orderCheck/usePatchPayCancel.ts index f04e9e6..ee7e9d0 100644 --- a/src/apis/domains/orderCheck/usePatchPayCancel.ts +++ b/src/apis/domains/orderCheck/usePatchPayCancel.ts @@ -1,12 +1,13 @@ -import { patch } from "@apis/api"; -import { useMutation } from "@tanstack/react-query"; +import { adminPatch } from "@apis/api"; +import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; import { MutateResponseType } from "@types"; const patchPayCancel = async ( orderNumber: number ): Promise => { try { - const response = await patch( + const response = await adminPatch( `api/v1/order/cancel/${orderNumber}` ); return response.data; @@ -16,7 +17,13 @@ const patchPayCancel = async ( }; export const usePatchPayCancel = () => { + const queryClient = useQueryClient(); return useMutation({ mutationFn: (orderNumber: number) => patchPayCancel(orderNumber), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY.RECENT_ORDER_NUMBER], + }); + }, }); }; diff --git a/src/apis/domains/orderCheck/usePatchPayComplete.ts b/src/apis/domains/orderCheck/usePatchPayComplete.ts index 518dfd8..d2c5c2e 100644 --- a/src/apis/domains/orderCheck/usePatchPayComplete.ts +++ b/src/apis/domains/orderCheck/usePatchPayComplete.ts @@ -1,12 +1,13 @@ -import { patch } from "@apis/api"; -import { useMutation } from "@tanstack/react-query"; +import { adminPatch } from "@apis/api"; +import { QUERY_KEY } from "@apis/queryKeys/queryKeys"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; import { MutateResponseType } from "@types"; const patchPayComplete = async ( orderNumber: number ): Promise => { try { - const response = await patch( + const response = await adminPatch( `api/v1/order/pay/${orderNumber}` ); return response.data; @@ -16,8 +17,13 @@ const patchPayComplete = async ( }; export const usePatchPayComplete = () => { + const queryClient = useQueryClient(); return useMutation({ mutationFn: (orderNumber: number) => patchPayComplete(orderNumber), - onSuccess: () => {}, + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEY.RECENT_ORDER_NUMBER], + }); + }, }); }; diff --git a/src/assets/svg/IcLogout.tsx b/src/assets/svg/IcLogout.tsx new file mode 100644 index 0000000..21ffadf --- /dev/null +++ b/src/assets/svg/IcLogout.tsx @@ -0,0 +1,30 @@ +import type { SVGProps } from "react"; +const SvgIcLogout = (props: SVGProps) => ( + + + + + + + + +); +export default SvgIcLogout; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index d6e0054..5fd0b10 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -9,6 +9,7 @@ export { default as IcComplete } from "./IcComplete"; export { default as IcDelete } from "./IcDelete"; export { default as IcDownload } from "./IcDownload"; export { default as IcFix } from "./IcFix"; +export { default as IcLogout } from "./IcLogout"; export { default as IcMainCharacter } from "./IcMainCharacter"; export { default as IcMinus } from "./IcMinus"; export { default as IcPlus } from "./IcPlus"; diff --git a/src/pages/Admin/page/AdminPage/AdminPage.style.ts b/src/pages/Admin/page/AdminPage/AdminPage.style.ts index 52be626..8597cce 100644 --- a/src/pages/Admin/page/AdminPage/AdminPage.style.ts +++ b/src/pages/Admin/page/AdminPage/AdminPage.style.ts @@ -42,6 +42,23 @@ export const activeTabButtonStyle = (theme: Theme) => css` color: ${theme.color.white}; `; +export const logoutButton = (theme: Theme) => css` + width: 100%; + ${flexGenerator()}; + margin-top: auto; + margin-bottom: 2rem; + ${theme.font["subhead-m-18"]} + + cursor: pointer; + + &:hover { + color: ${theme.color.orange}; + path { + fill: ${theme.color.orange}; + } + } +`; + export const pageLayout = () => css` width: calc(100vw - 20rem); padding: 5rem 10rem; diff --git a/src/pages/Admin/page/AdminPage/AdminPage.tsx b/src/pages/Admin/page/AdminPage/AdminPage.tsx index 0408bdf..8709827 100644 --- a/src/pages/Admin/page/AdminPage/AdminPage.tsx +++ b/src/pages/Admin/page/AdminPage/AdminPage.tsx @@ -1,6 +1,7 @@ import { activeTabButtonStyle, AdminLayout, + logoutButton, pageLayout, tabButtonStyle, tabTextStyle, @@ -8,6 +9,7 @@ import { } from "./AdminPage.style"; import { useNavigate, useParams } from "react-router-dom"; import { OrderCheck, ProductCheck, DeliveryCheck } from ".."; +import { IcLogout } from "@svg"; const Admin = () => { const { tab = "order" } = useParams<{ tab: string }>(); @@ -19,6 +21,11 @@ const Admin = () => { navigate(`/admin/${event.currentTarget.name}`); }; + const handleLogoutClick = (): void => { + localStorage.removeItem("accessToken"); + navigate("/admin/login"); + }; + return (
@@ -44,6 +51,11 @@ const Admin = () => { > 배송 가능 날짜 + +
+ + 로그아웃 +
diff --git a/src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx b/src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx index fab2318..84671bd 100644 --- a/src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx +++ b/src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx @@ -13,23 +13,24 @@ import { usePatchDeliveryDate } from "@apis/domains/admin/usePatchDeliveryDate"; const DeliveryCheck = () => { const { data: currentDeliveryDate, isSuccess } = useFetchDeliveryDate(); const { mutate } = usePatchDeliveryDate(); - const [deliveryDate, setDeliveryDate] = useState(0); + const [deliveryDate, setDeliveryDate] = useState(""); const handleInputChange = (e: React.ChangeEvent) => { - const value = Number(e.target.value); - - if (value > 1) { - setDeliveryDate(value); - } + const value = e.target.value; + setDeliveryDate(value); }; const handleButtonClick = () => { - mutate(deliveryDate); + if (Number(deliveryDate) > 1) { + mutate(deliveryDate); + } else { + alert("최소 2일 이상으로 설정해주세요."); + } }; useEffect(() => { if (isSuccess && currentDeliveryDate) { - setDeliveryDate(currentDeliveryDate); + setDeliveryDate(currentDeliveryDate.toString()); } }, [currentDeliveryDate, isSuccess]); @@ -58,7 +59,7 @@ const DeliveryCheck = () => {

일

- {currentDeliveryDate !== deliveryDate && ( + {currentDeliveryDate?.toString() !== deliveryDate && ( diff --git a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts index 50a92fe..1d36685 100644 --- a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts +++ b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.style.ts @@ -25,6 +25,15 @@ export const blackSpan = (theme: Theme) => css` ${theme.font["orderCheck-36"]} `; +export const statusStyle = (statusStyle: string) => (theme: Theme) => + css` + color: ${statusStyle === "결제완료" + ? theme.color.green + : statusStyle === "결제취소" + ? theme.color.red + : theme.color.orange}; + `; + export const buttonWrapper = css` ${flexGenerator("row", "space-between", "center")}; width: 100%; diff --git a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.tsx b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.tsx index e2d5f40..ff0863e 100644 --- a/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.tsx +++ b/src/pages/orderCheck/components/OrderInfoSection/OrderInfoSection.tsx @@ -7,6 +7,7 @@ import { section3Container, section3Div, section3InfoWrapper, + statusStyle, } from "./OrderInfoSection.style"; import { useAtom } from "jotai"; import { usePatchPayComplete } from "@apis/domains/orderCheck/usePatchPayComplete"; @@ -15,6 +16,7 @@ import { usePatchPayCancel } from "@apis/domains/orderCheck/usePatchPayCancel"; const OrderInfoSection = () => { const [previousOrderNumber] = useAtom(previousOrderNumberAtom); const [orderInfo] = useAtom(orderInfoAtom); + const orderStatus = orderInfo?.orderList[0].deliveryStatus; const { mutate: mutatePayComplete } = usePatchPayComplete(); const { mutate: mutatePayCancel } = usePatchPayCancel(); @@ -32,6 +34,12 @@ const OrderInfoSection = () => { 주문번호 {previousOrderNumber}
+
+ 주문상태 + + {orderStatus} + +
이름 {orderInfo?.senderName} @@ -47,7 +55,9 @@ const OrderInfoSection = () => {
총 금액 - {orderInfo?.totalPrice}원 + + {orderInfo?.totalPrice.toLocaleString()}원 +
diff --git a/src/pages/orderCheck/components/OrderNumberSearchSection/OrderNumberSearchSection.tsx b/src/pages/orderCheck/components/OrderNumberSearchSection/OrderNumberSearchSection.tsx index dbbe213..83f645a 100644 --- a/src/pages/orderCheck/components/OrderNumberSearchSection/OrderNumberSearchSection.tsx +++ b/src/pages/orderCheck/components/OrderNumberSearchSection/OrderNumberSearchSection.tsx @@ -70,6 +70,7 @@ const OrderNumberSearchSection = ({ key={i} orderNumber={order.orderNumber} senderName={order.senderName} + deliveryStatus={order.deliveryStatus} onClick={() => handleRecentOrderClick(order.orderNumber.toString())} /> ))} diff --git a/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts b/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts index a9b8d83..5808a21 100644 --- a/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts +++ b/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.style.ts @@ -1,19 +1,29 @@ import { css, Theme } from "@emotion/react"; import { flexGenerator } from "@styles/generator"; -export const cardWrapper = (theme: Theme) => css` - ${flexGenerator("row", "space-between", "center")}; - gap: 1rem; - width: 100%; - padding: 1.5rem 1.2rem; - border-radius: 10px; - background-color: ${theme.color.lightorange}; -`; +export const cardWrapper = (deliveryStatus: string) => (theme: Theme) => + css` + ${flexGenerator("row", "space-between", "center")}; + gap: 1rem; + width: 100%; + padding: 1.5rem 1.2rem; + border-radius: 10px; + background-color: ${deliveryStatus === "결제완료" + ? theme.color.lightgreen + : deliveryStatus === "결제취소" + ? theme.color.red2 + : theme.color.lightorange}; + `; -export const numberStyle = (theme: Theme) => css` - color: ${theme.color.orange}; - ${theme.font["orderCheck-32"]} -`; +export const numberStyle = (deliveryStatus: string) => (theme: Theme) => + css` + color: ${deliveryStatus === "결제완료" + ? theme.color.green + : deliveryStatus === "결제취소" + ? theme.color.red + : theme.color.orange}; + ${theme.font["orderCheck-32"]} + `; export const nameStyle = (theme: Theme) => css` color: ${theme.color.black}; diff --git a/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.tsx b/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.tsx index 82820bd..2edcc42 100644 --- a/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.tsx +++ b/src/pages/orderCheck/components/RecentOrderCard/RecentOrderCard.tsx @@ -3,17 +3,19 @@ import { cardWrapper, nameStyle, numberStyle } from "./RecentOrderCard.style"; interface RecentOrderCardProps { orderNumber: number; senderName: string; + deliveryStatus: string; onClick: () => void; } const RecentOrderCard = ({ orderNumber, senderName, + deliveryStatus, onClick, }: RecentOrderCardProps) => { return ( -
- {orderNumber}번 +
+ {orderNumber}번 {senderName}
); diff --git a/src/pages/orderCheck/page/OrderCheckPage.tsx b/src/pages/orderCheck/page/OrderCheckPage.tsx index 2bd5d72..a2999f2 100644 --- a/src/pages/orderCheck/page/OrderCheckPage.tsx +++ b/src/pages/orderCheck/page/OrderCheckPage.tsx @@ -3,11 +3,7 @@ import { orderCheckLayout, refreshButton, } from "./OrderCheckPage.style"; -import { - // OrderTrackingSection, - OrderNumberSearchSection, - OrderInfoSection, -} from "../components"; +import { OrderNumberSearchSection, OrderInfoSection } from "../components"; import { IcRefresh } from "@svg"; import { useFetchRecentOrderNumber } from "@apis/domains/orderCheck/useFetchRecentOrderNumber"; @@ -20,7 +16,6 @@ const OrderCheckPage = () => { return (
- {/* */}
diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 068da0d..3b4d223 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -12,6 +12,7 @@ const theme = { white: "#FFFFFF", black: "#000000", red: "#ff2c2c", + red2: "#FFD0D0", lightgray1: "#DFE2E7", lightgray2: "#D9D9D9", lightgray3: "#C4C4C4", @@ -26,6 +27,7 @@ const theme = { orange: "#EC6732", lightorange: "#FFEDE7", green: "#3CA178", + lightgreen: "#D1F2E4", }, font: { "head01-b-24": css` diff --git a/src/types/commonType.ts b/src/types/commonType.ts index 58250f3..03d7bbe 100644 --- a/src/types/commonType.ts +++ b/src/types/commonType.ts @@ -35,4 +35,7 @@ export interface OrderNumberType { export interface CodeResponseType { code: string; + data: { + token: string; + }; } diff --git a/src/types/orderInfoWithOrderNumber.ts b/src/types/orderInfoWithOrderNumber.ts index 22caaee..34a9325 100644 --- a/src/types/orderInfoWithOrderNumber.ts +++ b/src/types/orderInfoWithOrderNumber.ts @@ -1,7 +1,7 @@ export interface OrderInfo { productName: string; productCount: number; - orderState: string; + deliveryStatus: string; price: number; } diff --git a/src/types/recentOrderType.ts b/src/types/recentOrderType.ts index 8acfda9..b121cd4 100644 --- a/src/types/recentOrderType.ts +++ b/src/types/recentOrderType.ts @@ -1,4 +1,5 @@ export interface RecentOrderType { orderNumber: number; senderName: string; + deliveryStatus: string; }