프로젝트 구조 설계

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: './tsconfig.eslint.json',
+    project: path.join(__dirname, 'tsconfig.json'),
     tsconfigRootDir: __dirname,
   },
   extends: ['plugin:@typescript-eslint/recommended', 'airbnb', 'airbnb/hooks', 'prettier'],
@@ -74,5 +74,13 @@ module.exports = {
       },
     },
   },
-  ignorePatterns: ['.eslintrc.js', 'dist', 'test/**/*'],
+  ignorePatterns: [
+    '.eslintrc.js',
+    'babel.config.js',
+    'webpack.config.js',
+    'webpack.dev.config.js',
+    'server/**/*',
+    'dist',
+    'test/**/*',
+  ],
 };

.husky/_/pre-commit

@@ -1,2 +1,2 @@
 #!/usr/bin/env sh
-
+. "$(dirname "$0")/h"

front/src/apis/api.instance.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosError, AxiosInstance } from 'axios';
-import { CookieKey } from '../utils/constants';
+import { CookieKey } from '../constants/app.config';
 import { getCookie, removeCookie } from '../utils/cookie';
 
 const api: AxiosInstance = axios.create();

front/src/apis/services/freeboard.api.ts

@@ -1,5 +1,3 @@
-/* eslint-disable max-classes-per-file */
-/* eslint-disable no-undef */
 import { NewsDetail, NewsFeed } from '../../types/newFeed.type';
 
 export const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';

front/src/apis/services/user.api.ts

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import { UserState } from '../../store/slices/userSlice';
 
 // 실제 백엔드 API가 있다면 이 부분을 해당 API 호출로 변경해야 합니다.

front/src/app.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import ErrorBoundary from './components/ErrorBoundary';
-import GoogleAnalytics from './components/GoogleAnalytics';
+import ErrorBoundary from './components/providers/ErrorBoundary';
+import GoogleAnalytics from './components/providers/GoogleAnalytics';
 import AppRouter from './routes/AppRouter';
 
 const App: React.FC = () => (

front/src/components/commons/Button.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const Button = styled.button`
+  width: 100%;
+  padding: 16px;
+  border-radius: 12px;
+  border: none;
+  background: #0071e3;
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #0077ed;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    background: #d2d2d7;
+    cursor: not-allowed;
+  }
+`;
+
+export default Button;

front/src/components/commons/Form.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Form = styled.form`
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export default Form;

front/src/components/commons/Image.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Image = styled.img``;
+
+export default Image;

front/src/components/commons/Input.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Input = styled.input`
+  width: 100%;
+  height: 48px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #d2d2d7;
+  background: #fff;
+  font-size: 16px;
+`;
+
+export default Input;

front/src/components/commons/InputHelperText.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const InputHelperText = styled.p`
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: red;
+`;
+
+export default InputHelperText;

front/src/components/Shell.tsx → front/src/components/commons/Shell.tsx

@@ -1,6 +1,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ShellRow, ShellWord, ShellWrap, VirtualizerList } from '../pages/admin/admin.style';
+import { ShellRow, ShellWord, ShellWrap, VirtualizerList } from '../../pages/admin/system/admin.style';
 
 interface ShellProps {
   /** 출력할 로그 배열 */

front/src/components/commons/SubTitle.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const SubTitle = styled.h2`
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 400;
+  color: #1d1d1f;
+  font-family: 'Inter', -apple-system, sans-serif;
+`;
+
+export default SubTitle;

front/src/components/commons/Textarea.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Textarea = styled.textarea`
+  width: 100%;
+  height: 300px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #d2d2d7;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+`;
+
+export default Textarea;

front/src/components/commons/Title.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  font-size: 25px;
+  font-weight: 600;
+  font-family: 'Inter', -apple-system, sans-serif;
+  border-bottom: 1px solid #d1d2d7;
+  color: #1d1d1f;
+`;
+
+export default Title;

front/src/components/commons/index.ts

@@ -0,0 +1,10 @@
+export * from './Button';
+export * from './Form';
+export * from './Image';
+export * from './Input';
+export * from './InputHelperText';
+export * from './Shell';
+export * from './SubTitle';
+export * from './Table';
+export * from './Textarea';
+export * from './Title';

front/src/layouts/Footer.tsx → front/src/components/layouts/Footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyledFooter } from '../styles/layout.style';
+import { StyledFooter } from './layout.style';
 
 const Footer: React.FC = () => <StyledFooter>ⓒ 2025 woo. All rights reserved.</StyledFooter>;
 

front/src/layouts/Header.tsx → front/src/components/layouts/Header.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import useAuth from '../hooks/useAuth';
-import { ActionLink, HeaderActions, HeaderWrapper, LogoSection, StatusText } from '../styles/layout.style';
-import { RouteLink, WordKey } from '../utils/constants';
+import { WordKey } from '../../constants/messages';
+import useAuth from '../../hooks/useAuth';
+import { RouteLink } from '../../routes/routes';
+import { ActionLink, HeaderActions, HeaderWrapper, LogoSection, StatusText } from './layout.style';
 
 const Header: React.FC = () => {
   const { userId, logout: authLogout } = useAuth();

front/src/layouts/Nav.tsx → front/src/components/layouts/Nav.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import useAuth from '../hooks/useAuth';
-import routeConfig from '../routes';
-import { StyledNav, StyledNavItem, StyledNavItemIink, StyledNavItemWrap } from '../styles/layout.style';
-import { RouteMenuItem } from '../types/core.type';
+import useAuth from '../../hooks/useAuth';
+import routeConfig from '../../routes/route.config';
+import { RouteMenuItem } from '../../types/core.type';
+import { StyledNav, StyledNavItem, StyledNavItemIink, StyledNavItemWrap } from './layout.style';
 
 const Nav: React.FC = () => {
   const { isLoggedIn, userRole } = useAuth();