[Fix/#53] 각종 QA (#61)

* fix: 테이블 너비 수정

* feat: 관리자 로그인 추가

* feat: 태블릿 뷰 새로고침, 최근 번호 바로검색 구현 중

* fix: 최근 주문 10개 섹션과 주문 조회 섹션 합친 후 수정

---------

Co-authored-by: Yoo TaeSeung <remicon99@gmail.com>

src/App.tsx

@@ -4,21 +4,29 @@ import {
   homeRoutes,
   orderInfoRoutes,
   adminRoutes,
+  authRoutes,
   orderCheckRoutes,
 } from "@routes";
 import GlobalStyle from "@styles/global";
 import theme from "@styles/theme";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import PrivateRoute from "./routes/PrivateRoute/PrivateRoute";
 
 const allRoutes = [
   ...homeRoutes,
   ...orderInfoRoutes,
   ...experienceOrderInfoRoutes,
-  ...adminRoutes,
+  ...authRoutes,
   ...orderCheckRoutes,
 ];
-const router = createBrowserRouter([...allRoutes]);
+
+const protectedRoutes = adminRoutes.map((route) => ({
+  ...route,
+  element: <PrivateRoute element={route.element} />,
+}));
+
+const router = createBrowserRouter([...allRoutes, ...protectedRoutes]);
 
 function App() {
   const queryClient = new QueryClient();

src/apis/api.ts

@@ -4,6 +4,13 @@ export const instance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_URL,
 });
 
+export const adminInstance = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
+  headers: {
+    Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+  },
+});
+
 export function get<T>(...args: Parameters<typeof instance.get>) {
   return instance.get<T>(...args);
 }

src/apis/domains/admin/usePostAdminLogin.ts

@@ -0,0 +1,38 @@
+import { post } from "@apis/api";
+import { useMutation } from "@tanstack/react-query";
+import { ErrorResponse, CodeResponseType } from "@types";
+import { useNavigate } from "react-router-dom";
+
+interface LoginDataType {
+  username: string;
+  password: string;
+}
+
+const postAdminLogin = async (
+  loginData: LoginDataType
+): Promise<CodeResponseType> => {
+  try {
+    const response = await post<CodeResponseType>(
+      `/api/v1/admin/authenticate`,
+      loginData
+    );
+    return response.data;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    const errorData = errorResponse.response.data;
+    throw errorData;
+  }
+};
+
+export const usePostAdminLogin = () => {
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (loginData: LoginDataType) => postAdminLogin(loginData),
+    onSuccess: (data) => {
+      if (data.code === "success") {
+        localStorage.setItem("accessToken", data.code);
+        navigate("/admin");
+      }
+    },
+  });
+};

src/constants/routePath.ts

@@ -22,6 +22,10 @@ const adminPages = {
   ADMIN_TAB: "/admin/:tab",
 };
 
+const authPages = {
+  ADMIN_LOGIN: "/admin/login",
+};
+
 const orderCheckPages = {
   ORDER_CHECK: "/order-check",
 };
@@ -32,5 +36,6 @@ export default {
   ...orderInfoPages,
   ...experienceProductOrderInfoPages,
   ...adminPages,
+  ...authPages,
   ...orderCheckPages,
 };

src/pages/Admin/components/OrderTable/OrderTable.style.ts

@@ -64,14 +64,10 @@ export const tableStyle = (theme: Theme) => css`
   }
 
   /* 상품명 */
-  /* th:nth-of-type(4),
+  th:nth-of-type(4),
   td:nth-of-type(4) {
-  } */
-
-  /* 주소 */
-  /* th:nth-of-type(9),
-  td:nth-of-type(9) {
-  } */
+    min-width: 20rem;
+  }
 `;
 
 export const checkboxStyle = css`

src/pages/Admin/components/OrderTable/OrderTable.tsx

@@ -159,7 +159,11 @@ const OrderTable = ({ orders }: OrderTableProps) => {
                 </td>
                 <td>{order.orderReceivedDate}</td>
                 <td>{order.orderNumber}</td>
-                <td>{...order.productList}</td>
+                <td>
+                  {order.productList.map((product) => {
+                    return <div>{product}</div>;
+                  })}
+                </td>
                 <td>{order.senderName}</td>
                 <td>{order.senderPhone}</td>
                 <td>{order.recipientName}</td>

src/pages/Admin/page/AdminLogin/AdminLogin.style.ts

@@ -0,0 +1,27 @@
+import { Theme } from "@emotion/react";
+import { css } from "@emotion/react";
+import { flexGenerator } from "@styles/generator";
+
+export const loginLayout = css`
+  width: 100%;
+  height: 100dvh;
+  ${flexGenerator()};
+  padding: 0 3rem;
+`;
+
+export const formStyle = css`
+  width: 100%;
+  ${flexGenerator("column", "flex-start", "flex-start")}
+`;
+
+export const inputWrapper = css`
+  width: 100%;
+  ${flexGenerator("column", "flex-start", "flex-start")}
+  gap: 0.8rem;
+
+  margin-bottom: 2rem;
+`;
+
+export const labelStyle = (theme: Theme) => css`
+  ${theme.font["head06-b-16"]};
+`;

src/pages/Admin/page/AdminLogin/AdminLogin.tsx

@@ -0,0 +1,63 @@
+import { Button, Input } from "@components";
+import { useState } from "react";
+import {
+  formStyle,
+  inputWrapper,
+  labelStyle,
+  loginLayout,
+} from "./AdminLogin.style";
+import { usePostAdminLogin } from "@apis/domains/admin/usePostAdminLogin";
+
+const AdminLogin = () => {
+  const [adminUsername, setAdminUsername] = useState("");
+  const [adminPw, setAdminPw] = useState("");
+
+  const { mutate } = usePostAdminLogin();
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAdminUsername(e.target.value);
+  };
+
+  const handlePwChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAdminPw(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    mutate({ username: adminUsername, password: adminPw });
+  };
+
+  return (
+    <main css={loginLayout}>
+      <form css={formStyle} onSubmit={handleSubmit}>
+        <div css={inputWrapper}>
+          <label htmlFor="adminUsername" css={labelStyle}>
+            아이디
+          </label>
+          <Input
+            type="text"
+            id="adminUsername"
+            value={adminUsername}
+            onChange={handleUsernameChange}
+          />
+        </div>
+        <div css={inputWrapper}>
+          <label htmlFor="adminPw" css={labelStyle}>
+            비밀번호
+          </label>
+          <Input
+            type="password"
+            id="adminPw"
+            value={adminPw}
+            onChange={handlePwChange}
+          />
+        </div>
+        <Button type="button" variant="fill">
+          로그인
+        </Button>
+      </form>
+    </main>
+  );
+};
+
+export default AdminLogin;

src/pages/Admin/page/AdminPage/AdminPage.tsx

@@ -7,7 +7,7 @@ import {
   tapLayoutStyle,
 } from "./AdminPage.style";
 import { useNavigate, useParams } from "react-router-dom";
-import { OrderCheck, ProductCheck, DeliveryCheck } from "./";
+import { OrderCheck, ProductCheck, DeliveryCheck } from "..";
 
 const Admin = () => {
   const { tab = "order" } = useParams<{ tab: string }>();

src/pages/Admin/page/index.ts

@@ -0,0 +1,6 @@
+import OrderCheck from "./AdminPage/OrderCheck/OrderCheck";
+import ProductCheck from "./AdminPage/ProductCheck/ProductCheck";
+import DeliveryCheck from "./AdminPage/DeliveryCheck/DeliveryCheck";
+import AdminLogin from "./AdminLogin/AdminLogin";
+
+export { OrderCheck, ProductCheck, DeliveryCheck, AdminLogin };

src/pages/orderCheck/components/OrderNumberSearchSection/OrderNumberSearchSection.style.ts

@@ -1,6 +1,18 @@
 import { css, Theme } from "@emotion/react";
 import { flexGenerator } from "@styles/generator";
 
+export const section1Container = (theme: Theme) => css`
+  ${flexGenerator("column", "start", "start")};
+  padding: 2rem;
+  width: 27rem;
+  height: 100%;
+  gap: 1.5rem;
+  border: 1px solid ${theme.color.lightgray3};
+  background-color: ${theme.color.white};
+  border-radius: 10px;
+  overflow: scroll;
+`;
+
 export const section2Container = css`
   ${flexGenerator("column")};
   width: 45rem;

src/pages/orderCheck/components/OrderNumberSearchSection/OrderNumberSearchSection.tsx

@@ -3,6 +3,7 @@ import {
   dialButtonWrapper,
   orderNumberSpan,
   orderNumberStyle,
+  section1Container,
   section2Container,
 } from "./OrderNumberSearchSection.style";
 import { useFetchOrderInfoWithOrderNumber } from "@apis/domains/orderCheck/useFetchOrderInfoWithOrderNumber";
@@ -12,12 +13,30 @@ import {
   orderNumberAtom,
   previousOrderNumberAtom,
 } from "@stores";
+import { RecentOrderType } from "@types";
+import RecentOrderCard from "../RecentOrderCard/RecentOrderCard";
+import { useEffect, useState } from "react";
 
-const OrderNumberSearchSection = () => {
+interface OrderTrackingSectionProps {
+  recentOrderList: RecentOrderType[] | null | undefined;
+}
+
+const OrderNumberSearchSection = ({
+  recentOrderList,
+}: OrderTrackingSectionProps) => {
   const [orderNumber, setOrderNumber] = useAtom(orderNumberAtom);
   const [, setOrderInfo] = useAtom(orderInfoAtom);
   const [, setPreviousOrderNumber] = useAtom(previousOrderNumberAtom);
+  const [triggerSearch, setTriggerSearch] = useState(false);
   const { refetch } = useFetchOrderInfoWithOrderNumber(Number(orderNumber));
+
+  useEffect(() => {
+    if (triggerSearch) {
+      handleSearch();
+      setTriggerSearch(false);
+    }
+  }, [orderNumber, triggerSearch]);
+
   const handleButtonClick = (value: string) => {
     if (orderNumber.length < 4) {
       setOrderNumber((prev) => prev + value);
@@ -37,29 +56,47 @@ const OrderNumberSearchSection = () => {
     setPreviousOrderNumber(orderNumber);
     setOrderNumber("");
   };
+
+  const handleRecentOrderClick = (orderNumber: string) => {
+    setOrderNumber(orderNumber);
+    setTriggerSearch(true);
+  };
+
   return (
-    <section css={section2Container}>
-      <div css={orderNumberStyle}>
-        <span css={orderNumberSpan}>{orderNumber}</span>
-      </div>
-      <div css={dialButtonWrapper}>
-        {["1", "2", "3", "4", "5", "6", "7", "8", "9", "<-", "0", "조회"].map(
-          (item, i) => (
-            <DialButton
-              key={i}
-              onClick={() => {
-                if (item === "<-") handleDelete();
-                else if (item === "조회") handleSearch();
-                else handleButtonClick(item);
-              }}
-              index={i}
-            >
-              {item}
-            </DialButton>
-          )
-        )}
-      </div>
-    </section>
+    <>
+      <section css={section1Container}>
+        {recentOrderList?.map((order, i) => (
+          <RecentOrderCard
+            key={i}
+            orderNumber={order.orderNumber}
+            senderName={order.senderName}
+            onClick={() => handleRecentOrderClick(order.orderNumber.toString())}
+          />
+        ))}
+      </section>
+      <section css={section2Container}>
+        <div css={orderNumberStyle}>
+          <span css={orderNumberSpan}>{orderNumber}</span>
+        </div>
+        <div css={dialButtonWrapper}>
+          {["1", "2", "3", "4", "5", "6", "7", "8", "9", "<-", "0", "조회"].map(
+            (item, i) => (
+              <DialButton
+                key={i}
+                onClick={() => {
+                  if (item === "<-") handleDelete();
+                  else if (item === "조회") handleSearch();
+                  else handleButtonClick(item);
+                }}
+                index={i}
+              >
+                {item}
+              </DialButton>
+            )
+          )}
+        </div>
+      </section>
+    </>
   );
 };