[OD-138] 전체 폴더구조 변경 & import문 적용

.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

@@ -37,8 +37,10 @@
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.17.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": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.7",

src/App.tsx

@@ -1,28 +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/LoginComplete';
-import TermsAgreement from './pages/TermsAgreement';
-
-import Profile from './pages/Profile';
-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 Post from './pages/Post';
-import PostUpload from './pages/PostUpload';
-import PostImageSelect from './pages/PostImageSelect';
-import PostInstaConnect from './pages/PostInstaConnect';
-import PostInstaFeedSelect from './pages/PostInstaFeedSelect';
-
-import Chats from './pages/Chats';
-import ChatRoom from './pages/Chats/ChatRoom';
-
-import NotFound from './pages/NotFound';
+
+import Home from '@pages/Home';
+import Login from '@pages/Login';
+import LoginComplete from '@pages/Login/LoginComplete';
+
+import SignUp from '@pages/SignUp';
+import TermsAgreement from '@pages/SignUp/TermsAgreement';
+
+import Profile from '@pages/Profile';
+import ProfileEdit from '@pages/Profile/ProfileEdit';
+
+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 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'));
@@ -33,19 +36,21 @@ const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 const protectedRoutes = [
 	{ path: '/', element: <Home /> },
 
-	// 사용자 프로필 및 계정 관리
+	// 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 /> },
+
+	// 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: '/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 /> },

src/apis/util/handleError.ts

@@ -1,4 +1,5 @@
 import { AxiosError } from 'axios';
+
 import { ApiDomain, errorMessages } from './errorMessage';
 
 export const handleError = (error: unknown, domain: ApiDomain = 'default') => {

src/components/BottomButton/dto.ts

@@ -1,5 +1,5 @@
 export interface BottomButtonProps {
-	content: String;
+	content: string;
 	onClick: () => void;
 	disabled?: boolean;
 }

src/components/BottomButton/index.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
+import { StyledText } from '@components/Text/StyledText';
+
+import type { BottomButtonProps } from './dto';
+
 import { ButtonWrapper, Button } from './styles';
-import { StyledText } from '../Text/StyledText';
-import { BottomButtonProps } from './dto';
 
 const BottomButton: React.FC<BottomButtonProps> = ({ content, onClick, disabled = false }) => {
 	return (
-		<>
-			<ButtonWrapper>
-				<Button onClick={onClick} disabled={disabled}>
-					<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 2 }}>{content}</StyledText>
-				</Button>
-			</ButtonWrapper>
-		</>
+		<ButtonWrapper>
+			<Button onClick={onClick} disabled={disabled}>
+				<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 2 }}>{content}</StyledText>
+			</Button>
+		</ButtonWrapper>
 	);
 };
 

src/components/BottomButton/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const ButtonWrapper = styled.div`
 	display: flex;
@@ -15,8 +15,9 @@ export const ButtonWrapper = styled.div`
 `;
 
 export const Button = styled.button<{ disabled: boolean }>`
-	background: ${({ disabled, theme }) => //theme에 없어서 그냥 뒀음
-		disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient};
+	background: ${(
+		{ disabled, theme }, //theme에 없어서 그냥 뒀음
+	) => (disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient)};
 	border-radius: 0.625rem;
 	font-size: 1rem;
 	width: calc(100% - 2.5rem);

src/components/BottomSheetMenu/index.tsx → src/components/BottomSheet/BottomSheetMenu/index.tsx

@@ -1,10 +1,14 @@
+import { memo } from 'react';
+
+import theme from '@styles/theme';
+
 import { StyledText } from '@components/Text/StyledText';
-import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles';
+
 import type { BottomSheetMenuProps, SheetItemDto } from './dto';
-import React from 'react';
-import theme from '@styles/theme';
 
-const BottomSheetMenu: React.FC<BottomSheetMenuProps> = React.memo(({ items }) => {
+import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles';
+
+const BottomSheetMenu: React.FC<BottomSheetMenuProps> = memo(({ items }) => {
 	return (
 		<BottomSheetMenuLayout>
 			{items.map((item: SheetItemDto, index) => (

src/components/BottomSheetMenu/styles.tsx → src/components/BottomSheet/BottomSheetMenu/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const BottomSheetMenuLayout = styled.ul`
 	margin-bottom: 0.62rem;

src/components/CommentBottomSheet/Comment/index.tsx → src/components/BottomSheet/CommentBottomSheet/Comment/index.tsx

@@ -1,9 +1,13 @@
-import { StyledText } from '@components/Text/StyledText';
-import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles';
+import { useEffect, useRef, useState } from 'react';
+
 import send from '@assets/default/send-comment.svg';
-import React, { useEffect, useRef, useState } from 'react';
+
+import { StyledText } from '@components/Text/StyledText';
+
 import type { CommentProps } from './dto';
 
+import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles';
+
 const Comment: React.FC<CommentProps> = ({ content, sendComment, isModal = false }) => {
 	const [comment, setComment] = useState('');
 	const textareaRef = useRef<HTMLTextAreaElement>(null);

src/components/CommentBottomSheet/Comment/styles.tsx → src/components/BottomSheet/CommentBottomSheet/Comment/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const CommentLayout = styled.div<{ $isModal: boolean }>`
 	margin: 1.38rem auto 1.25rem auto;

src/components/CommentBottomSheet/index.tsx → src/components/BottomSheet/CommentBottomSheet/index.tsx

@@ -1,12 +1,17 @@
-import { StyledText } from '@components/Text/StyledText';
 import theme from '@styles/theme';
 
-import BottomSheet from '@components/BottomSheet';
-import Comment from './Comment/index';
-import type { BottomSheetProps } from '@components/BottomSheet/dto';
-import type { CommentBottomSheetProps } from './dto';
 import closeIcon from '@assets/default/modal-close-white.svg';
 
+import { StyledText } from '@components/Text/StyledText';
+
+import type { BottomSheetProps } from '../dto';
+
+import type { CommentBottomSheetProps } from './dto';
+
+import BottomSheet from '../index';
+
+import Comment from './Comment/index';
+
 import {
 	CommentBottomSheetLayout,
 	CommentModalBox,

src/components/CommentBottomSheet/styles.tsx → src/components/BottomSheet/CommentBottomSheet/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const CommentBottomSheetLayout = styled.div`
 	${({ theme }) => theme.visibleOnMobileTablet};

src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/index.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect, memo } from 'react';
+
 import BottomButton from '@components/BottomButton';
-import BottomSheetMenu from '@components/BottomSheetMenu';
-import { SheetItemDto } from '@components/BottomSheetMenu/dto';
+
 import type { ReportBottomSheetMenuProps } from './dto';
+
+import { SheetItemDto } from '../../BottomSheetMenu/dto';
+import BottomSheetMenu from '../../BottomSheetMenu/index';
+
 import { InputLayout, ReportBottomSheetMenuWrappar } from './styles';
 
-const ReportBottomSheetMenu: React.FC<ReportBottomSheetMenuProps> = React.memo(
+const ReportBottomSheetMenu: React.FC<ReportBottomSheetMenuProps> = memo(
 	({ onCloseReportSheet, onOpenStatusModal, sendReport, isUserReport }) => {
 		const [isVisibleTextarea, setIsTextareaVisible] = useState(false);
 		const [inputValue, setInputValue] = useState('');

src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const ReportBottomSheetMenuWrappar = styled.div`
 	display: flex;