feat: common 폴더 최신화

packages/common/components/package.json

@@ -40,11 +40,13 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@tanstack/react-query": "^5.67.1",
     "@tanstack/react-table": "^8.21.2",
+    "@types/js-cookie": "^3.0.6",
     "axios": "^1.8.1",
     "chart.js": "^4.4.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "react-chartjs-2": "^5.3.0",
     "react-day-picker": "^8.10.1",

packages/common/components/src/api/client.ts

@@ -1,7 +1,7 @@
 import { Client } from "@common/network";
-import { SERVER_API_URL, SITE_ID } from "../config";
+import { BASE_URL, SITE_ID } from "../config";
 
 export const client = Client.getInstance({
-  baseURL: SERVER_API_URL as string,
-  siteId: SITE_ID as string,
+  baseURL: BASE_URL,
+  siteId: SITE_ID,
 });

packages/common/components/src/api/user.ts

@@ -1,15 +1,45 @@
-import { useMutation } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "../config";
 import { client } from "./client";
 
-export interface UserInfo {
+export interface IUser {
+  regDt: string;
+  mdfcnDt: string;
+  rgtr: string;
+  mdfr: string;
+  userUnqId: string;
+  userId: string;
   userName: string;
+  email: string;
+  encryptedPassword: string;
+  refreshToken: string;
+  userStateCode: string;
   lastLoginDate: string;
+  loginFailCount: number;
+  pswdHnt: string;
+  pswdAns: string;
+  mphn: string;
+  telno: string;
+  zip: string;
+  addr: string;
+  daddr: string;
+  laeSeCd: string;
+  ogdpSeCd: string;
+  aprvYn: string;
+  autzrId: string;
+  expryYmd: string;
+  lastPswdChgDt: string;
+  googleId: string;
+  kakaoId: string;
+  naverId: string;
+  isSocialUser: boolean;
+  hasPassword: boolean;
 }
 
-export const useUsersMutation = () => {
-  return useMutation({
-    mutationFn: ({ userUniqId }: { userUniqId: string }) =>
-      client.put<UserInfo>(`${ENDPOINT.USER_SERVICE.USERS}/${userUniqId}`),
+export const useUsersQuery = ({ userUniqId }: { userUniqId: string }) => {
+  return useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.USERS],
+    queryFn: () =>
+      client.get<IUser>(`${ENDPOINT.USER_SERVICE.USERS}/${userUniqId}`),
   });
 };

packages/common/components/src/config/api.ts

@@ -1,3 +1,7 @@
+import { PROXY_HOST } from "./env";
+
+export const BASE_URL = `${PROXY_HOST}/server`;
+
 export const ENDPOINT = {
   USER_SERVICE: {
     USERS: "/user-service/api/v1/users",

packages/common/components/src/config/env.ts

@@ -1,2 +1,12 @@
-export const SERVER_API_URL = process.env.SERVER_API_URL;
-export const SITE_ID = process.env.SITE_ID;
+export const PORT = import.meta.env.VITE_PORT || "3000";
+export const PROXY_HOST =
+  import.meta.env.VITE_PROXY_HOST || `http://localhost:${PORT}`;
+
+export const SERVER_API_URL = import.meta.env.VITE_SERVER_API_URL;
+export const SITE_ID = import.meta.env.VITE_SITE_ID || "CS";
+
+export const CLAIM_NAME = import.meta.env.VITE_CLAIM_NAME || "Authorization";
+export const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN =
+  import.meta.env.VITE_REFRESH_TOKEN || "refresh-token";
+export const AUTH_USER_ID = import.meta.env.VITE_AUTH_USER_ID || "token-id";

packages/common/components/src/lib/cookie.ts

@@ -0,0 +1,48 @@
+import Cookies from "js-cookie";
+
+export function getCookie(name: string): string | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  return Cookies.get(name);
+}
+
+export function setCookie(
+  name: string,
+  value: string,
+  options: Cookies.CookieAttributes,
+): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.set(name, value, options);
+}
+
+export function removeCookie(
+  name: string,
+  options: Cookies.CookieAttributes,
+): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.remove(name, options);
+}
+
+export function getToken(key: string): string | undefined {
+  return getCookie(key);
+}
+
+export function setToken(
+  key: string,
+  token: string,
+  options: Cookies.CookieAttributes,
+): void {
+  setCookie(key, token, {
+    ...options,
+    path: "/",
+  });
+}
+
+export function removeToken(key: string): void {
+  removeCookie(key, { path: "/" });
+}

packages/common/components/src/lib/index.ts

@@ -1 +1,2 @@
 export * from "./utils";
+export * from "./cookie";

packages/common/components/src/ui/header/index.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { images } from "@common/assets";
-import { useUsersMutation, type UserInfo } from "../../api";
+import { useUsersQuery } from "../../api";
+import { AUTH_USER_ID } from "../../config";
+import { getToken } from "../../lib";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -12,25 +13,10 @@ import {
 import { Button } from "../button";
 
 export function Header() {
-  const { mutate } = useUsersMutation();
-  const [userInfo, setUserInfo] = useState<UserInfo>({
-    userName: "",
-    lastLoginDate: "",
+  const { data: userInfo } = useUsersQuery({
+    userUniqId: getToken(AUTH_USER_ID) ?? "",
   });
 
-  useEffect(() => {
-    mutate(
-      {
-        userUniqId: "65a00f65-8460-49af-98ec-042977e56f4b",
-      },
-      {
-        onSuccess: (data) => {
-          setUserInfo(data.data);
-        },
-      },
-    );
-  }, []);
-
   return (
     <header className="sticky top-0 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border">
       <div className="flex items-center">
@@ -46,7 +32,7 @@ export function Header() {
         <DropdownMenuTrigger asChild>
           <Button className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label">
             <i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
-            {userInfo.userName}
+            {userInfo?.data.userName}
             <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
           </Button>
         </DropdownMenuTrigger>
@@ -54,7 +40,7 @@ export function Header() {
           <DropdownMenuItem>프로필 설정</DropdownMenuItem>
           <div className="flex flex-col items-start gap-0 px-4 py-3">
             <p className="text-base text-label">최종접속일</p>
-            <p>{userInfo.lastLoginDate}</p>
+            <p>{userInfo?.data.lastLoginDate}</p>
           </div>
           <div className="flex flex-col items-start gap-0 px-4 py-3">
             <p className="text-base text-label">접속 IP</p>