리팩토링 v1.1.0

.eslintrc.cjs

@@ -1,17 +1,109 @@
 module.exports = {
 	root: true,
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:import/typescript',
+		'plugin:import/recommended',
+		'plugin:prettier/recommended',
+	],
 	parser: '@typescript-eslint/parser',
-	parserOptions: { project: ['./tsconfig.json'] },
-	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		project: ['./tsconfig.app.json', './tsconfig.node.json'],
+	},
+	plugins: ['@typescript-eslint', 'eslint-plugin-import'],
+	settings: {
+		'import/resolver': {
+			typescript: {
+				project: ['./tsconfig.app.json', './tsconfig.node.json'],
+			},
+		},
+		'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'] },
+	},
+	env: {
+		node: true,
+	},
 	rules: {
-		'@typescript-eslint/strict-boolean-expressions': [
-			2,
+		'prettier/prettier': ['error', { endOfLine: 'auto' }],
+		'import/extensions': [
+			'error',
+			'ignorePackages',
 			{
-				allowString: false,
-				allowNumber: false,
+				ts: 'never',
+				tsx: 'never',
+			},
+		],
+		'import/order': [
+			'error',
+			{
+				groups: ['builtin', 'external', 'internal', 'index', 'type', 'parent', 'sibling', 'object'],
+				alphabetize: {
+					order: 'asc',
+					caseInsensitive: true,
+				},
+				'newlines-between': 'always',
+				pathGroups: [
+					{
+						pattern: 'react*',
+						group: 'builtin',
+						position: 'before',
+					},
+					{
+						pattern: '@components/**/dto',
+						group: 'type',
+					},
+					{
+						pattern: '@styles/**',
+						group: 'internal',
+						position: 'before',
+					},
+					{
+						pattern: '@assets/**',
+						group: 'internal',
+						position: 'after',
+					},
+					{
+						pattern: '@components/Icons/**',
+						group: 'internal',
+						position: 'after',
+					},
+					{
+						pattern: '@components/**',
+						group: 'internal',
+						position: 'after',
+					},
+					{
+						pattern: '../**/dto',
+						group: 'type',
+						position: 'after',
+					},
+					{
+						pattern: './**/dto',
+						group: 'type',
+						position: 'after',
+					},
+					{
+						pattern: '../**/index',
+						group: 'parent',
+						position: 'before',
+					},
+					{
+						pattern: './**/index',
+						group: 'parent',
+						position: 'before',
+					},
+				],
+				pathGroupsExcludedImportTypes: ['react*'],
 			},
 		],
 	},
-	ignorePatterns: ['src/**/*.test.ts', 'src/frontend/generated/*'],
+	overrides: [
+		{
+			files: ['*.ts', '*.tsx'],
+			rules: {
+				'import/order': 'error',
+			},
+		},
+	],
+	ignorePatterns: ['src/**/*.test.ts', 'src/frontend/generated/*', 'src/App.tsx'],
 };

.prettierrc

@@ -1,9 +1,9 @@
 {
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120,
-  "arrowParens": "always",
-  "useTabs": true
+	"trailingComma": "all",
+	"tabWidth": 2,
+	"semi": true,
+	"singleQuote": true,
+	"printWidth": 120,
+	"arrowParens": "always",
+	"useTabs": true
 }

package.json

@@ -14,45 +14,38 @@
   "dependencies": {
     "@types/styled-components": "^5.1.34",
     "axios": "^1.7.2",
-    "body-parser": "^1.20.2",
-    "cors": "^2.8.5",
     "dayjs": "^1.11.12",
-    "express": "^4.19.2",
     "firebase": "^10.13.0",
     "heic2any": "^0.0.4",
-    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-overlay": "6.0.9",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.24.1",
-    "react-scripts": "4.0.3",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
-    "request": "^2.88.2",
     "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",
     "swiper": "^11.1.8"
   },
   "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.7.0",
+    "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "json-server": "^1.0.0-beta.1",
     "prettier": "^3.3.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1"
-  },
-  "proxy": "https://localhost:3001"
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
+  }
 }

src/App.tsx

@@ -1,31 +1,31 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
-import Home from './pages/Home';
-import Login from './pages/Login';
-import SignUp from './pages/SignUp';
-import LoginComplete from './pages/Login/components/LoginComplete';
-import TermsAgreement from './pages/TermsAgreement';
 
-import MyPage from './pages/MyPage';
-import ProfileEdit from './pages/ProfileEdit';
-import AccountSetting from './pages/AccountSetting';
-import AccountEdit from './pages/AccountEdit';
-import AccountCancel from './pages/AccountCancel';
-import Verification from './pages/verification';
+import Home from '@pages/Home';
+import Login from '@pages/Login';
+import LoginComplete from '@pages/Login/LoginComplete';
 
-import ProfileViewer from './pages/ProfileViewer';
+import SignUp from '@pages/SignUp';
+import TermsAgreement from '@pages/SignUp/TermsAgreement';
 
-import Post from './pages/Post';
-import MyPost from './pages/MyPost';
-import PostUpload from './pages/PostUpload';
-import PostImageSelect from './pages/PostImageSelect';
-import PostInstaConnect from './pages/PostInstaConnect';
-import PostInstaFeedSelect from './pages/PostInstaFeedSelect';
+import Profile from '@pages/Profile';
+import ProfileEdit from '@pages/Profile/ProfileEdit';
 
-import Chats from './pages/Chats';
-import ChatRoom from './pages/Chats/ChatRoom';
+import AccountSetting from '@pages/Account/AccountSetting';
+import AccountEdit from '@pages/Account/AccountEdit';
+import AccountCancel from '@pages/Account/AccountCancel';
+import Verification from '@pages/Account/Verification';
 
-import NotFound from './pages/NotFound';
+import Post from '@pages/Post';
+import PostUpload from '@pages/Post/PostUpload';
+import PostImageSelect from '@pages/Post/PostImageSelect';
+import PostInstaConnect from '@pages/Post/PostInstaConnect';
+import PostInstaFeedSelect from '@pages/Post/PostInstaFeedSelect';
+
+import Chats from '@pages/Chats';
+import ChatRoom from '@pages/Chats/ChatRoom';
+
+import NotFound from '@pages/NotFound';
 
 const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 	const isAuthenticated = Boolean(localStorage.getItem('new_jwt_token'));
@@ -36,21 +36,21 @@ const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 const protectedRoutes = [
 	{ path: '/', element: <Home /> },
 
-	// 사용자 프로필 및 계정 관리
-	{ path: '/mypage', element: <MyPage /> },
+	// profile
+	{ path: '/profile/:userId', element: <Profile /> },
 	{ path: '/profile/edit', element: <ProfileEdit /> },
-	{ path: '/account-setting', element: <AccountSetting /> },
-	{ path: '/account-edit', element: <AccountEdit /> },
-	{ path: '/account-cancel', element: <AccountCancel /> },
-	{ path: '/verification', element: <Verification /> },
-	{ path: '/users/:userId', element: <ProfileViewer /> },
+
+	// account
+	{ path: '/account/setting', element: <AccountSetting /> },
+	{ path: '/account/edit', element: <AccountEdit /> },
+	{ path: '/account/cancel', element: <AccountCancel /> },
+	{ path: '/account/verification', element: <Verification /> },
 
 	{ path: '/post/:postId', element: <Post /> },
-	{ path: '/my-post/:postId', element: <MyPost /> },
-	{ path: '/upload', element: <PostUpload /> },
-	{ path: '/image-select', element: <PostImageSelect /> },
-	{ path: '/insta-connect', element: <PostInstaConnect /> },
-	{ path: '/insta-feed-select', element: <PostInstaFeedSelect /> },
+	{ path: '/post/upload/photo/select', element: <PostImageSelect /> },
+	{ path: '/post/upload/instagram/connect', element: <PostInstaConnect /> },
+	{ path: '/post/upload/instagram/select', element: <PostInstaFeedSelect /> },
+	{ path: '/post/upload/content', element: <PostUpload /> },
 
 	// 메시지/채팅
 	{ path: '/chats', element: <Chats /> },
@@ -60,9 +60,10 @@ const protectedRoutes = [
 // 인증이 필요 없는 페이지 배열
 const publicRoutes = [
 	{ path: '/login', element: <Login /> },
-	{ path: '/signup', element: <SignUp /> },
 	{ path: '/login/complete', element: <LoginComplete /> },
-	{ path: '/terms-agreement', element: <TermsAgreement /> },
+
+	{ path: '/signup', element: <SignUp /> },
+	{ path: '/signup/terms-agreement', element: <TermsAgreement /> },
 ];
 
 const App: React.FC = () => {

src/apis/auth/dto.ts

@@ -1,14 +1,15 @@
-import { BaseSuccessResponse } from '../core/dto';
+import type { BaseSuccessResponse } from '@apis/core/dto';
 
 // jwt를 이용한 사용자 정보 조회 응답
 export type getUserInfoByJwtResponse = BaseSuccessResponse<getUserInfoByJwtData>;
 // jwt를 이용한 사용자 정보 조회 응답 데이터
 export interface getUserInfoByJwtData {
-	userId: number;
+	id: number;
 	name: string;
 	phoneNumber: string;
 	email: string;
 	nickname: string;
 	profilePictureUrl: string;
 	bio: string;
+	birthDate: string;
 }

src/apis/auth/index.ts

@@ -1,5 +1,5 @@
-import { getUserInfoByJwtResponse } from './dto';
-import { newRequest } from '../core';
+import { newRequest } from '@apis/core';
+import type { getUserInfoByJwtResponse } from './dto';
 
 // jwt로 사용자 정보 조회 api /auth/me
 export const getUserInfoByJwtApi = () => newRequest.get<getUserInfoByJwtResponse>('/auth/me');

src/apis/chatting/dto.ts

@@ -2,15 +2,15 @@
 // base response 형태를 따르지 않으므로 data 접미사를 사용했습니다.
 // response
 export interface ChatRoomData {
-	chatRoomId: number;
+	id: number;
 	otherUser: OtherUserDto;
 	latestMessage: LatestMessageDto;
 }
 
 export interface OtherUserDto {
 	id: number;
 	nickname: string;
-	profileUrl: string;
+	profilePictureUrl: string;
 }
 
 export interface LatestMessageDto {

src/apis/core/index.ts

@@ -5,7 +5,7 @@ import axios, {
 	AxiosResponse,
 	InternalAxiosRequestConfig,
 } from 'axios';
-import { JWT_KEY, NEW_JWT_KEY } from '../../config/constant';
+import { NEW_JWT_KEY } from '../../config/constant';
 
 // 기존 서버 응답 타입
 export type BaseResponse<T = any> = {
@@ -71,40 +71,3 @@ newRequest.interceptors.response.use(
 		return Promise.reject(error);
 	},
 );
-
-// 기존 서버 axios 인스턴스
-export const request: CustomInstance = axios.create({
-	baseURL: import.meta.env.VITE_API_URL,
-	timeout: 20000,
-	headers: {
-		accept: 'application/json',
-		Authorization: `Bearer ${localStorage.getItem(JWT_KEY)}`,
-	},
-});
-
-request.interceptors.request.use(
-	(config) => {
-		const jwt = window.localStorage.getItem(JWT_KEY);
-		config.headers.Authorization = `Bearer ${jwt}`;
-		return config;
-	},
-	(error) => {
-		return Promise.reject(error);
-	},
-);
-
-request.interceptors.response.use(
-	(response) => {
-		console.log('network log', response);
-		if (response.status === 200 || response.status === 201) {
-			return response.data;
-		} else {
-			return Promise.reject(response.data.message);
-		}
-	},
-	(error) => {
-		return Promise.reject(error.code === 'ERR_NETWORK' ? '허용되지 않은 네트워크 접근입니다.' : error);
-	},
-);
-
-export default request;