Merge pull request 'iipbs_cs' (#10) from iipbs_cs into main

Reviewed-on: #10

apps/cs/src/entities/auth/ui/auth-wrapper.tsx

@@ -1,44 +1,47 @@
 "use client";
 
+import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
 import { client } from "@/shared/api";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { getCookie, useUserStore } from "@/shared/lib";
 import type { IUserInfo } from "@/shared/store";
+import { getCookie, useUserStore } from "@/shared/lib";
+import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
 import { LoginApi } from "../api/login-service";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
-  const { setUserInfo } = useUserStore((state) => state);
+  const { userInfo, setUserInfo } = useUserStore((state) => state);
 
-  useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS],
-    queryFn: async () => {
+  async function authCheck() {
+    const userId = getCookie(AUTH_USER_ID);
+    if (!userId) {
+      throw new Error("Missing required authentication tokens");
+    }
+
+    const response = await client.get<IUserInfo>(
+      `${ENDPOINT.USER_SERVICE.USERS}/${userId}`,
+    );
+    if (!userInfo) setUserInfo(response.data);
+  }
+
+  useEffect(() => {
+    (async () => {
       try {
-        const userId = getCookie(AUTH_USER_ID);
-
-        if (!userId) {
-          throw new Error("Missing required authentication tokens");
-        }
-
-        const response = await client.get<IUserInfo>(
-          `${ENDPOINT.USER_SERVICE.USERS}/${userId}`,
-        );
-        setUserInfo(response.data);
-        return response;
+        await authCheck();
       } catch (error) {
         console.error(error);
+
         try {
           await LoginApi.silentRefresh();
+          await authCheck();
         } catch (refreshError) {
           console.error("Token refresh failed:", refreshError);
           setUserInfo(null);
           router.push("/auth/login");
         }
       }
-    },
-  });
+    })();
+  }, []);
 
   return <>{children}</>;
 };

apps/cs/src/pages/auth/login/ui/login-page.tsx

@@ -4,8 +4,10 @@ import Image from "next/image";
 import { images } from "@common/assets";
 import { LoginApi } from "@/entities/auth";
 import "./login.css";
+import { useRouter } from "next/navigation";
 
 function LoginPage() {
+  const router = useRouter();
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -13,7 +15,8 @@ function LoginPage() {
     const userId = formData.get("id") as string;
     const password = formData.get("password") as string;
 
-    LoginApi.login({ userId, password });
+    await LoginApi.login({ userId, password });
+    router.push("/site");
   };
 
   return (

apps/cs/src/pages/site/ui/site-page.tsx

@@ -53,9 +53,9 @@ function SitePage() {
   return (
     <SitePageLayout>
       <div className="card card-border !mt-6">
-        <div className="card card-border !border-[#dbe2e6] !bg-[#eef7ff]">
+        <div className="card card-border">
           <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-            <label htmlFor="" className="mr-2 text-[#657481]">
+            <label htmlFor="" className="mr-2 text-label">
               사이트명
             </label>
             <Input
@@ -72,7 +72,7 @@ function SitePage() {
         </div>
         <div className="card card-border">
           <div className="card-header">
-            <h3 className="text-2xl font-medium text-[#666]">사이트 목록</h3>
+            <h3 className="text-2xl font-medium text-label">사이트 목록</h3>
             <Button onClick={() => router.push("/site/register")}>등록</Button>
           </div>
           <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">