feat: 로그인, 회원가입 페이지 구현

- 로그인, 회원가입 유효성 검사
- 로그인, 회원가입 api 연동
- 로그인 토큰 관리

package.json

@@ -7,15 +7,16 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
+    "crypto-js": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.5",
     "react-responsive": "^10.0.0",
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-select": "^5.8.0",
     "styled-components": "^6.1.8",
-    "typescript": "^5.4.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,6 +46,7 @@
   "devDependencies": {
     "@eslint/compat": "^1.0.3",
     "@eslint/js": "^9.4.0",
+    "@types/crypto-js": "^4.2.2",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "eslint": "^8.56.0",
@@ -58,6 +60,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.4.0",
     "prettier": "^3.3.2",
+    "typescript": "^4.9.5",
     "typescript-eslint": "^7.13.0"
   }
 }

src/Utils/TokenManager.ts

@@ -0,0 +1,25 @@
+// 엑세스 토큰을 세션 스토리지에 저장
+export function setAccessToken(token: string): void {
+	sessionStorage.setItem('accessToken', token);
+}
+
+// 리프레시 토큰을 로컬 스토리지에 저장
+export function setRefreshToken(token: string): void {
+	localStorage.setItem('refreshToken', token);
+}
+
+// 엑세스 토큰을 세션 스토리지에서 가져오기
+export function getAccessToken(): string | null {
+	return sessionStorage.getItem('accessToken');
+}
+
+// 리프레시 토큰을 로컬 스토리지에서 가져오기
+export function getRefreshToken(): string | null {
+	return localStorage.getItem('refreshToken');
+}
+
+// 세션 스토리지 및 로컬 스토리지에서 토큰 삭제
+export function clearTokens(): void {
+	sessionStorage.removeItem('accessToken');
+	localStorage.removeItem('refreshToken');
+}

src/api/Auth.api.ts

@@ -0,0 +1,30 @@
+// src/api/Auth.api.ts
+import instance from './Axios';
+import {
+	getRefreshToken,
+	setAccessToken,
+	setRefreshToken,
+	clearTokens,
+} from '../Utils/TokenManager';
+
+// 리프레시 토큰을 사용하여 새로운 엑세스 토큰 발급
+export const refreshAccessToken = async (): Promise<void> => {
+	const refreshToken = getRefreshToken();
+	if (!refreshToken) {
+		throw new Error('No refresh token available');
+	}
+
+	try {
+		const response = await instance.post('/auth/refresh-token', { refreshToken });
+		const { accessToken, newRefreshToken } = response.data;
+
+		// 새 엑세스 토큰과 리프레시 토큰 저장
+		setAccessToken(accessToken);
+		if (newRefreshToken) {
+			setRefreshToken(newRefreshToken);
+		}
+	} catch (error) {
+		clearTokens();
+		throw error;
+	}
+};