Feat: 어드민페이지 로그인 기능 구현

src/app/_api/adminTopics/editAdminTopic.ts

@@ -1,9 +1,9 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 
 import { editAdminTopicType } from '@/lib/types/requestedTopicType';
 
 const editAdminTopic = async ({ topicId, isExposed, categoryCode, title }: editAdminTopicType) => {
-  await axiosInstance.put(`/admin/topics/${topicId}`, {
+  await axiosInstanceForAdmin.put(`/admin/topics/${topicId}`, {
     isExposed,
     categoryCode,
     title,

src/app/_api/adminTopics/getAdminTopics.ts

@@ -1,4 +1,4 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 
 interface GetTopicsType {
   cursorId?: number | null;
@@ -13,7 +13,7 @@ const getAdminTopics = async ({ cursorId }: GetTopicsType) => {
     params.append('cursorId', cursorId.toString());
   }
 
-  const response = await axiosInstance.get(`/admin/topics?${params.toString()}`);
+  const response = await axiosInstanceForAdmin.get(`/admin/topics?${params.toString()}`);
 
   return response.data;
 };

src/app/_api/notice/createNotice.ts

@@ -1,12 +1,12 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 import { NoticeCreateType } from '@/lib/types/noticeType';
 
 interface ResponseType {
   id: number;
 }
 
 const createNotice = async (data: NoticeCreateType) => {
-  const response = await axiosInstance.post<ResponseType>('/admin/notices', data);
+  const response = await axiosInstanceForAdmin.post<ResponseType>('/admin/notices', data);
 
   return response.data;
 };

src/app/_api/notice/deleteNotice.ts

@@ -1,7 +1,7 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 
 const deleteNotice = async (noticeId: number) => {
-  await axiosInstance.delete(`/admin/notices/${noticeId}`);
+  await axiosInstanceForAdmin.delete(`/admin/notices/${noticeId}`);
 };
 
 export default deleteNotice;

src/app/_api/notice/getAdminNotices.ts

@@ -1,8 +1,8 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 import { AdminNoticeType } from '@/lib/types/noticeType';
 
 const getAdminNotices = async () => {
-  const result = await axiosInstance.get<AdminNoticeType[]>('/admin/notices');
+  const result = await axiosInstanceForAdmin.get<AdminNoticeType[]>('/admin/notices');
 
   return result.data;
 };

src/app/_api/notice/sendNoticeAlarm.ts

@@ -1,7 +1,7 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 
 const sendNoticeAlarm = async (noticeId: number) => {
-  await axiosInstance.post(`/admin/notices/${noticeId}/alarm`);
+  await axiosInstanceForAdmin.post(`/admin/notices/${noticeId}/alarm`);
 };
 
 export default sendNoticeAlarm;

src/app/_api/notice/updateNotice.ts

@@ -1,4 +1,4 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 import { NoticeCreateType } from '@/lib/types/noticeType';
 
 interface UpdateNoticeRequestType {
@@ -7,7 +7,7 @@ interface UpdateNoticeRequestType {
 }
 
 const updateNotice = async ({ noticeData, noticeId }: UpdateNoticeRequestType) => {
-  await axiosInstance.put<ResponseType>(`/admin/notices/${noticeId}`, noticeData);
+  await axiosInstanceForAdmin.put<ResponseType>(`/admin/notices/${noticeId}`, noticeData);
 };
 
 export default updateNotice;

src/app/_api/notice/updateNoticePublic.ts

@@ -1,7 +1,7 @@
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 
 const updateNoticePublic = async (noticeId: number) => {
-  await axiosInstance.patch(`/admin/notices/${noticeId}`);
+  await axiosInstanceForAdmin.patch(`/admin/notices/${noticeId}`);
 };
 
 export default updateNoticePublic;

src/app/_api/notice/uploadNoticeImages.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import axiosInstance from '@/lib/axios/axiosInstance';
+import axiosInstanceForAdmin from '@/lib/axios/axiosInstanceForAdmin';
 
 interface UploadImageType {
   order: number;
@@ -19,7 +19,7 @@ interface PresignedResponseType {
 
 const uploadNoticeImages = async ({ noticeId, imageFileData, imageExtensionData }: UploadNoticeImagesProps) => {
   // 1. Presigned url 발급 요청
-  const presignedResponse = await axiosInstance.post<PresignedResponseType[]>(
+  const presignedResponse = await axiosInstanceForAdmin.post<PresignedResponseType[]>(
     `/admin/notices/${noticeId}/presigned-url`,
     imageExtensionData
   );
@@ -34,7 +34,7 @@ const uploadNoticeImages = async ({ noticeId, imageFileData, imageExtensionData
   });
 
   // 3. 이미지 업로드 완료 서버에 알림
-  await axiosInstance.post(`/admin/notices/${noticeId}/upload-complete`, imageExtensionData);
+  await axiosInstanceForAdmin.post(`/admin/notices/${noticeId}/upload-complete`, imageExtensionData);
 };
 
 export default uploadNoticeImages;

src/app/admin/layout.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { Header } from '@/styles/font.css';
+import { Header, Body } from '@/styles/font.css';
 import { vars } from '@/styles/theme.css';
 
 export const container = style({
@@ -28,3 +28,24 @@ export const title = style([
 export const main = style({
   flexGrow: 1,
 });
+
+export const page = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '100vh',
+});
+
+export const logout = style([
+  Body,
+  {
+    padding: '1rem 2rem',
+    backgroundColor: vars.color.bluegray6,
+    borderRadius: '0.8rem',
+    opacity: 0.6,
+
+    ':hover': {
+      opacity: 1,
+    },
+  },
+]);

src/app/admin/layout.tsx

@@ -1,30 +1,53 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
 
 import * as styles from './layout.css';
+
 import NavLinks from './_components/NavLinks';
+import { removeCookie } from '@/lib/utils/cookie';
 
 interface AdminNoticeLayoutProps {
   children: ReactNode;
 }
 
+const HIDE_PATH = ['/admin', '/admin/login'];
+
 export default function AdminNoticeLayout({ children }: AdminNoticeLayoutProps) {
+  const path = usePathname();
+  const isHideNav = path && HIDE_PATH.includes(path);
+
+  const handleClickLogout = () => {
+    removeCookie('admin-accessToken');
+    removeCookie('admin-refreshToken');
+
+    location.href = '/admin';
+  };
+
   return (
     <section className={styles.container}>
-      <div className={styles.nav}>
-        <h1 className={styles.title}>🤍 리스티웨이브 관리</h1>
-        <NavLinks
-          links={[
-            {
-              label: '요청 주제',
-              path: '/admin/topics',
-            },
-            {
-              label: '게시물',
-              path: '/admin/notice',
-            },
-          ]}
-        />
-      </div>
+      {!isHideNav && (
+        <div className={styles.nav}>
+          <h1 className={styles.title}>🤍 리스티웨이브 관리</h1>
+          <NavLinks
+            links={[
+              {
+                label: '요청 주제',
+                path: '/admin/topics',
+              },
+              {
+                label: '게시물',
+                path: '/admin/notice',
+              },
+            ]}
+          />
+          <button onClick={handleClickLogout} className={styles.logout}>
+            로그아웃
+          </button>
+        </div>
+      )}
+
       <main className={styles.main}>{children}</main>
     </section>
   );

src/app/admin/login/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+
+import * as styles from './pgae.css';
+
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { setCookie } from '@/lib/utils/cookie';
+
+interface FormValuesType {
+  account: string;
+  password: string;
+}
+
+export default function AdminLogin() {
+  const router = useRouter();
+  const { register, handleSubmit } = useForm<FormValuesType>({
+    defaultValues: {
+      account: '',
+      password: '',
+    },
+  });
+
+  const onSubmit = async (values: FormValuesType) => {
+    try {
+      const { data } = await axiosInstance.post('/admin/login', values);
+
+      const adminAccessToken = data.accessToken;
+      const adminRefreshToken = data.refreshToken;
+
+      setCookie('admin-accessToken', adminAccessToken, 'AT');
+      setCookie('admin-refreshToken', adminRefreshToken, 'ADMIN');
+
+      router.push('/admin/topics');
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <div className={styles.page}>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.field}>
+          <label htmlFor="account" className={styles.label}>
+            🐳 아이디
+          </label>
+          <input id="account" required {...register('account')} className={styles.input} />
+        </div>
+        <div className={styles.field}>
+          <label htmlFor="password" className={styles.label}>
+            🍀 비밀번호
+          </label>
+          <input type="password" id="password" required {...register('password')} className={styles.input} />
+        </div>
+        <button type="submit" className={styles.button}>
+          로그인
+        </button>
+      </form>
+    </div>
+  );
+}

src/app/admin/login/pgae.css.ts

@@ -0,0 +1,67 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles/theme.css';
+import { BodyRegular } from '@/styles/font.css';
+
+export const page = style({
+  width: '100%',
+  minHeight: '100vh',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const form = style({
+  padding: '2rem',
+
+  width: '100%',
+  maxWidth: '640px',
+
+  display: 'flex',
+  gap: '2.5rem',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const field = style({
+  width: '100%',
+
+  display: 'flex',
+  gap: '1rem',
+  flexDirection: 'column',
+});
+
+export const label = style({
+  fontSize: '2rem',
+  fontWeight: 500,
+});
+
+export const input = style([
+  BodyRegular,
+  {
+    padding: '1.2rem 2.4rem',
+    borderRadius: '0.8rem',
+    border: `1px solid ${vars.color.lightblue}`,
+
+    selectors: {
+      '&:focus': {
+        border: `1px solid ${vars.color.blue}`,
+      },
+    },
+  },
+]);
+
+export const button = style({
+  width: '100%',
+  padding: '1.5rem',
+  marginTop: '3rem',
+
+  fontSize: '2rem',
+  fontWeight: 500,
+
+  borderRadius: '0.8rem',
+  backgroundColor: vars.color.blue,
+  color: vars.color.white,
+});

src/app/admin/page.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link';
+
+import * as styles from './layout.css';
+import Image from 'next/image';
+
+export default function AdminPage() {
+  return (
+    <div className={styles.page}>
+      <Link href={`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/admin`}>
+        <Image alt="관리자페이지 로고" src="/icons/ver3/logo_ver3.0.png" width={200} height={170} />
+      </Link>
+    </div>
+  );
+}