[충남대학교 FE] 김진서 0단계 프로젝트 세팅.

.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 
 .env
 .env.production
+

frontend/.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?

frontend/README.md

@@ -0,0 +1,15 @@
+## 프로젝트 컴포넌트 분류 철학
+
+1. Page는 Section으로 이루어져있다.
+2. Section은 Component로 이루어져있다.
+3. 각 Component는 Header, Action, Field, Table, Cards로 구성한다.
+4. 각 Component 중 Cards형태는 재사용성을 위해서 따로 Cards로 분류해놓는다.
+5. 각 Page에서 사용할 수 있는 공통적으로 사용가능한(추상화된) 컴포넌트는 common에 분류한다.
+
+## 왜 이런식으로 분류했는가?
+
+재사용성을 극대화하고 차후 유지보수를 하기위해서 한눈에 알아보는 구조가 필요했다. 전체적인 로직에 대한 이해도가 필요하긴하지만 유지보수성이 극대화될것이라고 예상한다. (각 컴포넌트별로 하나의 기능만을 분류)
+
+## 예상되는 문제점
+
+Cards하나만 return하는 Section으로 인해 Props Drilling이 발생할것이라고 예상된다.

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])