diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..0fc2dbc
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,14 @@
+{
+ "env": {
+ "browser": true,
+ "es2021": true
+ },
+ "extends": ["plugin:react/recommended", "airbnb"],
+ "overrides": [],
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "plugins": ["react"],
+ "rules": {}
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..74ed022
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,15 @@
+{
+ "printWidth": 80,
+ "tabWidth": 2,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": true,
+ "quoteProps": "as-needed",
+ "jsxSingleQuote": true,
+ "trailingComma": "es5",
+ "bracketSpacing": true,
+ "bracketSameLine": false,
+ "arrowParens": "always",
+ "proseWrap": "preserve",
+ "endOfLine": "auto"
+}
diff --git a/README.md b/README.md
index 4cef660..ee7cfb6 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,62 @@
# 42gg 프론트엔드 온보딩 2단계
-## 공통 조건
-
-- 온보딩 프로젝트는 개인 계정으로 fork하여 진행하고 PR로 제출합니다.
-- git / github / code 컨벤션은 42gg notion에 있는 자료를 적극 반영합니다.
-- 기본 기능 외 추가 기능, 디자인 구현은 자유입니다.
-- 최종 제출품에는 README 작성이 되있어야 합니다.([예시](https://github.com/42organization/42gg.client/blob/main/README.md))
-
-## EX01. login / logout 구현하기
-
-- (필수) React.js, Recoil, SCSS
-- (필수) eslint, prettier 설정
-- (필수) 함수 컴포넌트로 제작
-- (선택) CRA, Webpack, Vite
-- (선택) msw, react-query / SWR
-- (선택) Figma, MUI, Ant Design, Tailwind CSS
-- (선택) 계정 유효성 검사
-
-## EX02. 유저 권한별 routing page
-
-- (중요) EX01 결과물에 이어서 작업합니다.
-- (필수) normal, manager, admin 3개의 권한을 가진 유저별 정보 제공
-- (필수) 권한별 routing page 구현
-- (필수) 상단 navbar, sidebar 제작
-- (선택) React-Router-Dom v6, Context API
-- (선택) 로그인 유지
-- (선택) custom hook
-
-## 참고
-
-- 유저 정보는 json-server or js 파일 내 객체를 이용하여 관리합니다.
-- 로그인/로그아웃 구현하기 위해 필요한 기능과 화면 구성들을 생각(그려보고)해보고, 구현해보세요.
-- 궁금한 사항은 issue에 등록해주세요.
+## 실행 방법
+
+```
+yarn install
+yarn dev
+```
+
+## 구현된 기능
+
+### 유저 정보
+
+유저 정보는 js 파일 내 객체로 관리합니다. (`src/commons/userList.js`)
+
+```
+username: 'red',
+password: 'qwe123!@#',
+role: Admin
+---
+username: 'blue',
+password: 'qwe123!@#',
+role: Manager
+---
+username: 'green',
+password: 'qwe123!@#',
+role: Normal
+```
+
+### 로그인, 로그아웃
+
+[msw](https://mswjs.io/)를 이용한 mock api를 사용했습니다.
+
+- 로그인: `POST /login`
+- 로그아웃: `POST /logout`
+- 유저 정보: `GET /user`
+
+### 유저 권한별 routing page
+
+권한은 각각 Public, Normal, Manager, Admin으로 구분합니다.
+
+- Public: 로그인하지 않은 유저도 접근 가능한 페이지 (Login 페이지)
+- Normal: 로그인한 유저만 접근 가능한 페이지 (Normal 페이지)
+- Manager: Manager, Admin 권한을 가진 유저만 접근 가능한 페이지 (Manager 페이지)
+- Admin: Admin 권한을 가진 유저만 접근 가능한 페이지 (Admin 페이지)
+
+사이드 네비게이션바에는 현재 로그인한 유저가 접근할 수 있는 페이지만 나타납니다.
+
+## 폴더 구조
+
+```
+.
+├── public
+└── src
+ ├── commons : 공통 데이터 객체들
+ ├── components : 컴포넌트
+ ├── mocks : msw 관련 파일
+ ├── pages : 페이지 컴포넌트
+ ├── styles : scss 파일
+ ├── types : 타입 정의
+ └── utils : hook, atom 등 유틸함수들
+```
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..79c4701
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite + React
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7329c72
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "42gg-onboarding-fe-02",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-hot-toast": "^2.4.0",
+ "react-icons": "^4.8.0",
+ "react-router-dom": "^6.10.0",
+ "recoil": "^0.7.7",
+ "sass": "^1.61.0",
+ "uuid": "^9.0.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
+ "@vitejs/plugin-react": "^3.1.0",
+ "eslint": "^8.37.0",
+ "msw": "^1.2.1",
+ "vite": "^4.2.0"
+ }
+}
diff --git a/public/PoorStory-Regular.ttf b/public/PoorStory-Regular.ttf
new file mode 100644
index 0000000..3786031
Binary files /dev/null and b/public/PoorStory-Regular.ttf differ
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
new file mode 100644
index 0000000..87e0f31
--- /dev/null
+++ b/public/mockServiceWorker.js
@@ -0,0 +1,303 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (1.2.1).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+ self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+ event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+ const clientId = event.source.id
+
+ if (!clientId || !self.clients) {
+ return
+ }
+
+ const client = await self.clients.get(clientId)
+
+ if (!client) {
+ return
+ }
+
+ const allClients = await self.clients.matchAll({
+ type: 'window',
+ })
+
+ switch (event.data) {
+ case 'KEEPALIVE_REQUEST': {
+ sendToClient(client, {
+ type: 'KEEPALIVE_RESPONSE',
+ })
+ break
+ }
+
+ case 'INTEGRITY_CHECK_REQUEST': {
+ sendToClient(client, {
+ type: 'INTEGRITY_CHECK_RESPONSE',
+ payload: INTEGRITY_CHECKSUM,
+ })
+ break
+ }
+
+ case 'MOCK_ACTIVATE': {
+ activeClientIds.add(clientId)
+
+ sendToClient(client, {
+ type: 'MOCKING_ENABLED',
+ payload: true,
+ })
+ break
+ }
+
+ case 'MOCK_DEACTIVATE': {
+ activeClientIds.delete(clientId)
+ break
+ }
+
+ case 'CLIENT_CLOSED': {
+ activeClientIds.delete(clientId)
+
+ const remainingClients = allClients.filter((client) => {
+ return client.id !== clientId
+ })
+
+ // Unregister itself when there are no more clients
+ if (remainingClients.length === 0) {
+ self.registration.unregister()
+ }
+
+ break
+ }
+ }
+})
+
+self.addEventListener('fetch', function (event) {
+ const { request } = event
+ const accept = request.headers.get('accept') || ''
+
+ // Bypass server-sent events.
+ if (accept.includes('text/event-stream')) {
+ return
+ }
+
+ // Bypass navigation requests.
+ if (request.mode === 'navigate') {
+ return
+ }
+
+ // Opening the DevTools triggers the "only-if-cached" request
+ // that cannot be handled by the worker. Bypass such requests.
+ if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+ return
+ }
+
+ // Bypass all requests when there are no active clients.
+ // Prevents the self-unregistered worked from handling requests
+ // after it's been deleted (still remains active until the next reload).
+ if (activeClientIds.size === 0) {
+ return
+ }
+
+ // Generate unique request ID.
+ const requestId = Math.random().toString(16).slice(2)
+
+ event.respondWith(
+ handleRequest(event, requestId).catch((error) => {
+ if (error.name === 'NetworkError') {
+ console.warn(
+ '[MSW] Successfully emulated a network error for the "%s %s" request.',
+ request.method,
+ request.url,
+ )
+ return
+ }
+
+ // At this point, any exception indicates an issue with the original request/response.
+ console.error(
+ `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+ request.method,
+ request.url,
+ `${error.name}: ${error.message}`,
+ )
+ }),
+ )
+})
+
+async function handleRequest(event, requestId) {
+ const client = await resolveMainClient(event)
+ const response = await getResponse(event, client, requestId)
+
+ // Send back the response clone for the "response:*" life-cycle events.
+ // Ensure MSW is active and ready to handle the message, otherwise
+ // this message will pend indefinitely.
+ if (client && activeClientIds.has(client.id)) {
+ ;(async function () {
+ const clonedResponse = response.clone()
+ sendToClient(client, {
+ type: 'RESPONSE',
+ payload: {
+ requestId,
+ type: clonedResponse.type,
+ ok: clonedResponse.ok,
+ status: clonedResponse.status,
+ statusText: clonedResponse.statusText,
+ body:
+ clonedResponse.body === null ? null : await clonedResponse.text(),
+ headers: Object.fromEntries(clonedResponse.headers.entries()),
+ redirected: clonedResponse.redirected,
+ },
+ })
+ })()
+ }
+
+ return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+ const client = await self.clients.get(event.clientId)
+
+ if (client?.frameType === 'top-level') {
+ return client
+ }
+
+ const allClients = await self.clients.matchAll({
+ type: 'window',
+ })
+
+ return allClients
+ .filter((client) => {
+ // Get only those clients that are currently visible.
+ return client.visibilityState === 'visible'
+ })
+ .find((client) => {
+ // Find the client ID that's recorded in the
+ // set of clients that have registered the worker.
+ return activeClientIds.has(client.id)
+ })
+}
+
+async function getResponse(event, client, requestId) {
+ const { request } = event
+ const clonedRequest = request.clone()
+
+ function passthrough() {
+ // Clone the request because it might've been already used
+ // (i.e. its body has been read and sent to the client).
+ const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+ // Remove MSW-specific request headers so the bypassed requests
+ // comply with the server's CORS preflight check.
+ // Operate with the headers as an object because request "Headers"
+ // are immutable.
+ delete headers['x-msw-bypass']
+
+ return fetch(clonedRequest, { headers })
+ }
+
+ // Bypass mocking when the client is not active.
+ if (!client) {
+ return passthrough()
+ }
+
+ // Bypass initial page load requests (i.e. static assets).
+ // The absence of the immediate/parent client in the map of the active clients
+ // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+ // and is not ready to handle requests.
+ if (!activeClientIds.has(client.id)) {
+ return passthrough()
+ }
+
+ // Bypass requests with the explicit bypass header.
+ // Such requests can be issued by "ctx.fetch()".
+ if (request.headers.get('x-msw-bypass') === 'true') {
+ return passthrough()
+ }
+
+ // Notify the client that a request has been intercepted.
+ const clientMessage = await sendToClient(client, {
+ type: 'REQUEST',
+ payload: {
+ id: requestId,
+ url: request.url,
+ method: request.method,
+ headers: Object.fromEntries(request.headers.entries()),
+ cache: request.cache,
+ mode: request.mode,
+ credentials: request.credentials,
+ destination: request.destination,
+ integrity: request.integrity,
+ redirect: request.redirect,
+ referrer: request.referrer,
+ referrerPolicy: request.referrerPolicy,
+ body: await request.text(),
+ bodyUsed: request.bodyUsed,
+ keepalive: request.keepalive,
+ },
+ })
+
+ switch (clientMessage.type) {
+ case 'MOCK_RESPONSE': {
+ return respondWithMock(clientMessage.data)
+ }
+
+ case 'MOCK_NOT_FOUND': {
+ return passthrough()
+ }
+
+ case 'NETWORK_ERROR': {
+ const { name, message } = clientMessage.data
+ const networkError = new Error(message)
+ networkError.name = name
+
+ // Rejecting a "respondWith" promise emulates a network error.
+ throw networkError
+ }
+ }
+
+ return passthrough()
+}
+
+function sendToClient(client, message) {
+ return new Promise((resolve, reject) => {
+ const channel = new MessageChannel()
+
+ channel.port1.onmessage = (event) => {
+ if (event.data && event.data.error) {
+ return reject(event.data.error)
+ }
+
+ resolve(event.data)
+ }
+
+ client.postMessage(message, [channel.port2])
+ })
+}
+
+function sleep(timeMs) {
+ return new Promise((resolve) => {
+ setTimeout(resolve, timeMs)
+ })
+}
+
+async function respondWithMock(response) {
+ await sleep(response.delay)
+ return new Response(response.body, response)
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..9489890
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,21 @@
+import { RecoilRoot } from 'recoil';
+import { Router } from './Router';
+import { worker } from './mocks/browser';
+import { Toaster } from 'react-hot-toast';
+
+if (process.env.NODE_ENV === 'development') {
+ worker.start({
+ onUnhandledRequest: 'bypass',
+ });
+}
+
+function App() {
+ return (
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/Router.jsx b/src/Router.jsx
new file mode 100644
index 0000000..c6a08fc
--- /dev/null
+++ b/src/Router.jsx
@@ -0,0 +1,27 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { routes } from './commons';
+import { roleType } from './types';
+import { RouteWithAuth } from './components/RouteWithAuth';
+import { DefaultLayout, PublicLayout } from './components/layouts';
+
+export function Router() {
+ return (
+
+
+ {routes.map(({ path, name, element, auth }) =>
+ auth === roleType.PUBLIC ? (
+ }>
+
+
+ ) : (
+ }>
+ }>
+
+
+
+ )
+ )}
+
+
+ );
+}
diff --git a/src/commons/index.js b/src/commons/index.js
new file mode 100644
index 0000000..6e524dc
--- /dev/null
+++ b/src/commons/index.js
@@ -0,0 +1,2 @@
+export { routes } from './routes';
+export { userList } from './userList';
diff --git a/src/commons/routes.jsx b/src/commons/routes.jsx
new file mode 100644
index 0000000..e0d6f7c
--- /dev/null
+++ b/src/commons/routes.jsx
@@ -0,0 +1,47 @@
+import { Home, Login, PageA, PageB, Manager, Admin, NotFound } from '../pages';
+import { roleType } from '../types';
+
+export const routes = [
+ {
+ path: '/',
+ name: 'Home',
+ element: ,
+ auth: roleType.NORMAL,
+ },
+ {
+ path: '/login',
+ name: 'Login',
+ element: ,
+ auth: roleType.PUBLIC,
+ },
+ {
+ path: '/page-a',
+ name: 'PageA',
+ element: ,
+ auth: roleType.NORMAL,
+ },
+ {
+ path: '/page-b',
+ name: 'PageB',
+ element: ,
+ auth: roleType.NORMAL,
+ },
+ {
+ path: '/manager',
+ name: 'Manager',
+ element: ,
+ auth: roleType.MANAGER,
+ },
+ {
+ path: '/admin',
+ name: 'Admin',
+ element: ,
+ auth: roleType.ADMIN,
+ },
+ {
+ path: '*',
+ name: 'NotFound',
+ element: ,
+ auth: roleType.PUBLIC,
+ },
+];
diff --git a/src/commons/sidebarContent.js b/src/commons/sidebarContent.js
new file mode 100644
index 0000000..c7dd5cc
--- /dev/null
+++ b/src/commons/sidebarContent.js
@@ -0,0 +1,5 @@
+import { routes } from './routes';
+
+export const sidebarContent = routes.filter(
+ (route) => route.name !== 'NotFound' && route.name !== 'Login'
+);
diff --git a/src/commons/userList.js b/src/commons/userList.js
new file mode 100644
index 0000000..a132534
--- /dev/null
+++ b/src/commons/userList.js
@@ -0,0 +1,22 @@
+import { roleType } from '../types';
+
+export const userList = [
+ {
+ username: 'red',
+ password: 'qwe123!@#',
+ token: 'red-9adc3d60-d76f-11ed-a62d-8167b0cf56fc',
+ role: roleType.ADMIN,
+ },
+ {
+ username: 'blue',
+ password: 'qwe123!@#',
+ token: 'blue-a903be90-d76f-11ed-a62d-8167b0cf56fc',
+ role: roleType.MANAGER,
+ },
+ {
+ username: 'green',
+ password: 'qwe123!@#',
+ token: 'green-b41f8660-d76f-11ed-a62d-8167b0cf56fc',
+ role: roleType.NORMAL,
+ },
+];
diff --git a/src/components/RouteWithAuth.jsx b/src/components/RouteWithAuth.jsx
new file mode 100644
index 0000000..b22ab05
--- /dev/null
+++ b/src/components/RouteWithAuth.jsx
@@ -0,0 +1,28 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { toast } from 'react-hot-toast';
+import { useUser } from '../utils/useUser';
+import { useEffect } from 'react';
+
+export function RouteWithAuth({ auth }) {
+ const { user, loading, error } = useUser();
+
+ useEffect(() => {
+ if (error) {
+ toast('로그인이 필요한 페이지입니다.', { type: 'error' });
+ }
+ if (user && user.role < auth) {
+ toast('권한이 없는 페이지입니다.', { type: 'error' });
+ }
+ }, [error, user]);
+
+ if (error) {
+ return ;
+ }
+ if (loading) {
+ return <>;
+ }
+ if (user.role < auth) {
+ return ;
+ }
+ return ;
+}
diff --git a/src/components/layouts/DefaultLayout.jsx b/src/components/layouts/DefaultLayout.jsx
new file mode 100644
index 0000000..a0703a5
--- /dev/null
+++ b/src/components/layouts/DefaultLayout.jsx
@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from './Header';
+import { Sidebar } from './Sidebar';
+import styles from '../../styles/layout.module.scss';
+
+export function DefaultLayout() {
+ return (
+
+ );
+}
diff --git a/src/components/layouts/Header.jsx b/src/components/layouts/Header.jsx
new file mode 100644
index 0000000..4d42bbe
--- /dev/null
+++ b/src/components/layouts/Header.jsx
@@ -0,0 +1,23 @@
+import styles from '../../styles/header.module.scss';
+import { useRoute } from '../../utils/useRoute';
+import { logout } from '../../utils/login';
+import { useUser } from '../../utils/useUser';
+export function Header() {
+ const { router } = useRoute();
+ const { resetUser } = useUser();
+
+ function handleLogout() {
+ logout();
+ resetUser();
+ router('/login');
+ }
+
+ return (
+
+ Routing Practice
+
+
+ );
+}
diff --git a/src/components/layouts/PublicLayout.jsx b/src/components/layouts/PublicLayout.jsx
new file mode 100644
index 0000000..a4688b4
--- /dev/null
+++ b/src/components/layouts/PublicLayout.jsx
@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom';
+import styles from '../../styles/layout.module.scss';
+
+export function PublicLayout() {
+ return (
+
+ );
+}
diff --git a/src/components/layouts/SideBar.jsx b/src/components/layouts/SideBar.jsx
new file mode 100644
index 0000000..6eb268d
--- /dev/null
+++ b/src/components/layouts/SideBar.jsx
@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom';
+import { sidebarContent } from '../../commons/sidebarContent';
+import { useRoute } from '../../utils/useRoute';
+import { useUser } from '../../utils/useUser';
+import styles from '../../styles/sidebar.module.scss';
+
+export function Sidebar() {
+ const { user } = useUser();
+ const { currentPath } = useRoute();
+ if (!user) {
+ return <>;
+ }
+ return (
+
+ );
+}
diff --git a/src/components/layouts/index.js b/src/components/layouts/index.js
new file mode 100644
index 0000000..c1b51cf
--- /dev/null
+++ b/src/components/layouts/index.js
@@ -0,0 +1,2 @@
+export { DefaultLayout } from './DefaultLayout';
+export { PublicLayout } from './PublicLayout';
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..89e4865
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/index.scss';
+
+ReactDOM.createRoot(document.getElementById('root')).render();
diff --git a/src/mocks/browser.js b/src/mocks/browser.js
new file mode 100644
index 0000000..ec92cf0
--- /dev/null
+++ b/src/mocks/browser.js
@@ -0,0 +1,5 @@
+import { setupWorker } from 'msw';
+import { handlers } from './handlers';
+
+// This configures a Service Worker with the given request handlers.
+export const worker = setupWorker(...handlers);
diff --git a/src/mocks/handlers.js b/src/mocks/handlers.js
new file mode 100644
index 0000000..d1d6574
--- /dev/null
+++ b/src/mocks/handlers.js
@@ -0,0 +1,54 @@
+import { rest } from 'msw';
+import { store as cookieStore } from '@mswjs/cookies';
+import { userList } from '../commons';
+
+const AUTHTOKENKEY = 'auth-token';
+
+export const handlers = [
+ rest.post('/login', async (req, res, ctx) => {
+ const { username, password } = await req.json(); // 요청 body의 username과 password
+ const user = userList.find((user) => user.username === username); // userList에서 username에 해당하는 user를 가져옴
+ if (!user) {
+ return res(
+ ctx.status(401),
+ ctx.json({ msg: '존재하지 않는 사용자입니다.' })
+ );
+ }
+ if (user.password !== password) {
+ return res(ctx.status(401), ctx.json({ msg: '잘못된 비밀번호입니다.' }));
+ }
+ return res(
+ ctx.status(200),
+ ctx.cookie(AUTHTOKENKEY, user.token),
+ ctx.json({ msg: '로그인 성공.' })
+ );
+ }),
+
+ rest.post('/logout', (req, res, ctx) => {
+ const token = req.cookies[AUTHTOKENKEY]; // 요청 헤더의 auth-token
+ const user = userList.find((user) => user.token === token); // userList에서 토큰에 해당하는 user를 가져옴
+ clearCookie();
+ if (!user) {
+ return res(ctx.status(401));
+ }
+ return res(ctx.status(200));
+ }),
+
+ rest.get('/user', (req, res, ctx) => {
+ const token = req.cookies[AUTHTOKENKEY]; // 요청 헤더의 auth-token
+ const user = userList.find((user) => user.token === token); // userList에서 토큰에 해당하는 user를 가져옴
+ if (!user) {
+ return res(ctx.status(401));
+ }
+ return res(
+ ctx.status(200),
+ ctx.json({ username: user.username, role: user.role })
+ );
+ }),
+];
+
+function clearCookie() {
+ document.cookie =
+ AUTHTOKENKEY + '=; path=/; expires=' + new Date().toGMTString() + ';';
+ cookieStore.clear(); // TODO: 특정 쿠키만 만료시키는 법?
+}
diff --git a/src/pages/Admin.jsx b/src/pages/Admin.jsx
new file mode 100644
index 0000000..f01125a
--- /dev/null
+++ b/src/pages/Admin.jsx
@@ -0,0 +1,9 @@
+export function Admin() {
+ return (
+
+
This is
+
Admin
+
page
+
+
This is
+
Home
+
page
+
+
This is
+
Manager
+
page
+
+
404
+
Page not found
+
+
+
This is
+
Normal A
+
page
+
+
This is
+
Normal B
+
page
+