API 키 관리 기능 추가 및 코드 리팩토링

src/components/template/IconComponnt.tsx

@@ -0,0 +1,8 @@
+import * as LucideIcons from 'lucide-react';
+
+const IconComponnt = ({ icon }: { icon: keyof typeof LucideIcons }) => {
+  const LucideIcon = LucideIcons[icon] as LucideIcons.LucideIcon;
+  return <LucideIcon />;
+};
+
+export default IconComponnt;

src/components/template/Key/Info.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+
+const ApiKeyInfo = () => {
+  return (
+    <div className='mb-8'>
+      <p className='text-center text-light-40 text-sm mb-4'>
+        한 계정당 키는 한개만 발급가능합니다
+      </p>
+      <p className='text-center text-light-40 text-sm mb-4'>
+        갱신하면 새로운 키가 발급되어 기존의 키는 사용할 수 없습니다
+      </p>
+      <Link
+        to={'https://github.com/FC-InnerCircle-ICD2/fintech-FE-SDK'}
+        target='_blank'
+        className='block text-center text-primary hover:underline'
+      >
+        API 사용방법
+      </Link>
+    </div>
+  );
+};
+
+export default ApiKeyInfo;

src/components/template/Key/Issued.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@components/ui/button';
+import Info from './Info';
+import Separator from './Separator';
+import { createToastSuccess } from '@lib/toast';
+import { useKeys } from '@hooks/api/useKeys';
+import { useAuthStore } from '@store/authStore';
+import { useState } from 'react';
+
+const Issued = ({ issuedApiKey }: { issuedApiKey: string }) => {
+  const [apiKey, setApiKey] = useState<string>(issuedApiKey);
+  const { mutate: renewKey } = useKeys();
+  const { auth } = useAuthStore();
+
+  const handleCopy = () => {
+    const apiKey = document.getElementById('api-key')!.textContent!;
+    navigator.clipboard.writeText(apiKey).then(() => {
+      createToastSuccess('', 'API 키를 복사하였습니다.');
+    });
+  };
+
+  const handleRenew = () => {
+    renewKey(
+      { id: auth!.id },
+      {
+        onSuccess: ({ data }) => {
+          setApiKey(data.apiKey);
+          createToastSuccess('', 'API 키가 성공적으로 갱신되었습니다.');
+        },
+      },
+    );
+  };
+
+  return (
+    <div className='bg-white rounded-3xl shadow-lg p-24 flex flex-col items-center'>
+      <h1
+        className='text-2xl font-bold text-primary text-center mb-4'
+        id='api-key'
+      >
+        {apiKey}
+      </h1>
+
+      <p
+        className='mb-4 text-xs text-primary cursor-pointer hover:underline'
+        onClick={handleCopy}
+      >
+        복사하기
+      </p>
+
+      <Separator />
+
+      <Info />
+
+      <Separator />
+
+      <Button size={'rounded'} onClick={handleRenew}>
+        갱신하기
+      </Button>
+    </div>
+  );
+};
+
+export default Issued;

src/components/template/Key/NotIssued.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@components/ui/button';
+import Info from './Info';
+import { useAuthStore } from '@store/authStore';
+import { useKeys } from '@hooks/api/useKeys';
+import { createToastSuccess } from '@lib/toast';
+
+const NotIssued = ({
+  onIssueSuccess,
+}: {
+  onIssueSuccess: (value: string) => void;
+}) => {
+  const { auth } = useAuthStore();
+  const { mutate: renewKey } = useKeys();
+
+  const handleIssue = () => {
+    renewKey(
+      { id: auth!.id },
+      {
+        onSuccess: ({ data }) => {
+          createToastSuccess('', 'API 키가 성공적으로 발급되었습니다.');
+          onIssueSuccess(data.apiKey);
+        },
+      },
+    );
+  };
+
+  return (
+    <div className='bg-white rounded-3xl shadow-lg p-24 flex flex-col items-center'>
+      <h1 className='text-2xl font-bold text-primary text-center mb-10'>
+        키 발급하기
+      </h1>
+
+      <Info />
+
+      <Button size={'rounded'} onClick={handleIssue}>
+        발급하기
+      </Button>
+    </div>
+  );
+};
+
+export default NotIssued;

src/components/template/Key/Separator.tsx

@@ -0,0 +1,7 @@
+const Separator = () => {
+  return (
+    <div role='separator' className='w-full h-[1px] bg-light-border mb-8' />
+  );
+};
+
+export default Separator;

src/components/template/SideBar/SideBarItem.tsx

@@ -1,10 +1,8 @@
-import * as LucideIcons from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import type { SideBarItemProps } from '@type/sidebar';
-
+import IconComponnt from '@components/template/IconComponnt';
 const SideBarItem = ({ icon, name, link, isActive }: SideBarItemProps) => {
   const navigate = useNavigate();
-  const IconComponent = LucideIcons[icon] as LucideIcons.LucideIcon;
 
   return (
     <li
@@ -13,7 +11,7 @@ const SideBarItem = ({ icon, name, link, isActive }: SideBarItemProps) => {
       }`}
       onClick={() => navigate(link)}
     >
-      <IconComponent />
+      <IconComponnt icon={icon} />
       <p>{name}</p>
     </li>
   );

src/components/template/SideBar/index.tsx

@@ -1,18 +1,20 @@
 import { sideBarItems } from '@constants/sidebar.ts';
 import SideBarItem from './SideBarItem.tsx';
 import { useLocation } from 'react-router-dom';
-
+import { useAuthStore } from '@store/authStore';
+import IconComponnt from '../IconComponnt.tsx';
 const SideBar = () => {
   const { pathname } = useLocation();
+  const { auth, logout } = useAuthStore();
 
   return (
     <aside className='w-60 h-screen bg-[#f1f1f1] p-12'>
       <figure className='flex flex-col items-center gap-2'>
         <img src='/logo.png' className='w-8' />
-        <h4 className='font-bold text-xl truncate'>Admin</h4>
+        <h4 className='font-bold text-xl truncate'>{auth?.name}</h4>
       </figure>
 
-      <nav>
+      <nav className='flex flex-col h-[calc(100%-100px)]'>
         <ul>
           {sideBarItems.map((item) => (
             <SideBarItem
@@ -24,6 +26,15 @@ const SideBar = () => {
             />
           ))}
         </ul>
+        <ul className='mt-auto px-4'>
+          <li
+            className='cursor-pointer text-center flex gap-2'
+            onClick={() => logout()}
+          >
+            <IconComponnt icon='LogOut' />
+            <p>로그아웃</p>
+          </li>
+        </ul>
       </nav>
     </aside>
   );

src/components/template/auth/ProtectedRoute.tsx

@@ -0,0 +1,17 @@
+import { useAuthStore } from '@store/authStore';
+import { Navigate, useLocation } from 'react-router-dom';
+import { ROUTES } from '@constants/routes';
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const { auth } = useAuthStore();
+  const location = useLocation();
+
+  if (!auth) {
+    return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+};

src/constants/apiEndpoints.ts

@@ -13,5 +13,8 @@ export const API_ENDPOINTS = {
     PAYMENTS: getPaymentsEndpoint,
     TRANSACTIONS: getTransactionEndpoint,
   },
-  KEY: `${BASE_URL}/key`,
+  MANAGEMENT: {
+    KEYS: `${BASE_URL}/keys`,
+    ID: (id: string) => `${BASE_URL}/keys/${id}`,
+  },
 } as const;

src/constants/routes.ts

@@ -0,0 +1,7 @@
+export const ROUTES = {
+  MAIN: '/',
+  LOGIN: '/login',
+  SIGNUP: '/signup',
+  TRANSACTIONS: '/transactions',
+  KEY_MANAGEMENT: '/key-management',
+};

src/constants/sidebar.ts

@@ -1,4 +1,5 @@
 import * as LucideIcons from 'lucide-react';
+import { ROUTES } from '@constants/routes';
 
 export const sideBarItems: {
   name: string;
@@ -8,11 +9,11 @@ export const sideBarItems: {
   {
     name: '거래내역',
     icon: 'FileText',
-    link: '/transactions',
+    link: ROUTES.TRANSACTIONS,
   },
   {
     name: '키 관리',
     icon: 'KeyRound',
-    link: '/api-keys',
+    link: ROUTES.KEY_MANAGEMENT,
   },
 ];

src/hooks/useAuth.ts → src/hooks/api/useAuth.ts

@@ -3,20 +3,25 @@ import { apiClient } from '@lib/api/apiClient';
 import { API_ENDPOINTS } from '@constants/apiEndpoints';
 import type { LoginReq, LoginRes, SignupReq } from '@type/auth';
 import { createToastSuccess, createToastError } from '@lib/toast';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuthStore } from '@store/authStore';
+import { ROUTES } from '@constants/routes';
 
 export const useLogin = () => {
   const navigate = useNavigate();
   const setAuth = useAuthStore((state) => state.setAuth);
+  const location = useLocation();
 
   return useMutation({
     mutationFn: (data: LoginReq) =>
       apiClient.post<LoginReq, LoginRes>(API_ENDPOINTS.LOGIN, data),
     onSuccess: (response: LoginRes) => {
+      sessionStorage.setItem('auth', JSON.stringify(response.data));
       setAuth(response.data);
-      createToastSuccess('로그인 성공', '메인 페이지로 이동합니다');
-      navigate('/');
+      createToastSuccess('', '로그인되었습니다');
+
+      const from = location.state?.from?.pathname || '/';
+      navigate(from);
     },
     onError: createToastError('로그인 실패'),
   });
@@ -29,7 +34,7 @@ export const useSignup = () => {
     mutationFn: (data: SignupReq) => apiClient.post(API_ENDPOINTS.SIGNUP, data),
     onSuccess: () => {
       createToastSuccess('회원가입 성공', '로그인 페이지로 이동합니다');
-      navigate('/login');
+      navigate(ROUTES.LOGIN);
     },
     onError: createToastError('회원가입 실패'),
   });

src/hooks/api/useKeys.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { apiClient } from '@lib/api/apiClient';
+import { API_ENDPOINTS } from '@constants/apiEndpoints';
+import type { KeyReq, KeyRes } from '@type/key';
+
+export const useKeys = () => {
+  return useMutation({
+    mutationFn: (data: KeyReq) =>
+      apiClient.post<KeyReq, KeyRes>(API_ENDPOINTS.MANAGEMENT.KEYS, data),
+  });
+};
+
+export const useKeysId = (id: string) => {
+  return useQuery({
+    queryKey: ['get-key'],
+    queryFn: () => apiClient.get<KeyRes>(API_ENDPOINTS.MANAGEMENT.ID(id)),
+  });
+};