Skip to content

Commit 7eb27ca

Browse files
yuhoyeongyuhoyeong
authored
Yuhoyeong/frontend/coding convention (#95)
네, 방금 적용하신 React 프로젝트 파일 네이밍 컨벤션을 정리해 드립니다. 앞으로 팀원들과 협업할 때 이 기준을 따르면 프로젝트 구조가 훨씬 일관성 있게 유지될 것입니다. 🎨 변경된 프론트엔드 코딩 컨벤션 (File Naming) 목적: ESLint를 통해 파일 이름 규칙을 강제하여, 일관성 있는 프로젝트 구조를 유지함. 1. React 컴포넌트 파일 (.tsx) 규칙: PascalCase (대문자로 시작) 적용 대상: *.tsx 확장자를 가진 모든 파일 (단, *.d.tsx 제외) 예시: ✅ GlossaryModal.tsx ✅ UserProfile.tsx ❌ glossaryModal.tsx (소문자 시작 불가) ❌ user-profile.tsx (케밥 케이스 불가) 이유: React 컴포넌트는 코드 내에서 <GlossaryModal />처럼 대문자로 사용되므로, 파일명과 컴포넌트명을 일치시키는 것이 관례입니다. 2. 일반 함수 / Hooks / 유틸 파일 (.ts) 규칙: camelCase (소문자로 시작, 중간 단어 대문자) 적용 대상: *.ts 확장자를 가진 모든 파일 (단, *.d.ts, vite-env.ts 등 설정 파일 제외) 예시: ✅ useModal.ts (Hooks) ✅ apiClient.ts (Utils) ❌ UseModal.ts (Hooks는 보통 소문자 use로 시작) ❌ APIClient.ts ⚡️ 적용 방법 및 확인 검사 실행: 터미널에서 npm run lint를 입력하면 컨벤션에 맞지 않는 파일들이 에러로 표시됩니다. 자동 감지: VS Code 등 에디터에서 ESLint 플러그인을 사용 중이라면, 파일 생성 시 규칙에 어긋날 경우 즉시 빨간 줄이 그어집니다. 지금 바로 수정해야 할 파일들 (예시): src/components/.../glossaryModal.tsx ➡️ GlossaryModal.tsx src/pages/community.tsx ➡️ Community.tsx src/pages/guide.tsx ➡️ Guide.tsx
1 parent 5dc4871 commit 7eb27ca

File tree

64 files changed

+637
-267
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+637
-267
lines changed

‎frontend/eslint.config.js‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,46 @@
1-
import js from '@eslint/js'
2-
import globals from 'globals'
3-
import reactHooks from 'eslint-plugin-react-hooks'
4-
import reactRefresh from 'eslint-plugin-react-refresh'
5-
import tseslint from 'typescript-eslint'
6-
import { globalIgnores } from 'eslint/config'
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import reactHooks from "eslint-plugin-react-hooks";
4+
import reactRefresh from "eslint-plugin-react-refresh";
5+
import tseslint from "typescript-eslint";
6+
import checkFile from "eslint-plugin-check-file";
7+
import { globalIgnores } from "eslint/config";
78

89
export default tseslint.config([
9-
globalIgnores(['dist']),
10+
globalIgnores(["dist"]),
1011
{
11-
files: ['**/*.{ts,tsx}'],
12+
files: ["**/*.{ts,tsx}"],
1213
extends: [
1314
js.configs.recommended,
1415
tseslint.configs.recommended,
15-
reactHooks.configs['recommended-latest'],
16-
reactRefresh.configs.vite,
16+
reactHooks.configs["recommended-latest"],
1717
],
1818
languageOptions: {
1919
ecmaVersion: 2020,
2020
globals: globals.browser,
2121
},
22+
plugins: {
23+
"react-refresh": reactRefresh,
24+
"check-file": checkFile,
25+
},
26+
rules: {
27+
...reactHooks.configs["recommended-latest"].rules,
28+
"react-refresh/only-export-components": [
29+
"warn",
30+
{ allowConstantExport: true },
31+
],
32+
33+
// 파일 네이밍 규칙
34+
"check-file/filename-naming-convention": [
35+
"error",
36+
{
37+
"**/!(*.d).tsx": "PASCAL_CASE",
38+
"**/!(*.d|vite-env).ts": "CAMEL_CASE",
39+
},
40+
{
41+
ignoreMiddleExtensions: true,
42+
},
43+
],
44+
},
2245
},
23-
])
46+
]);

‎frontend/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
11+
<script type="module" src="/src/Main.tsx"></script>
1212
</body>
1313
</html>

‎frontend/package-lock.json‎

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@vitejs/plugin-react": "^5.0.0",
3535
"baseline-browser-mapping": "^2.8.28",
3636
"eslint": "^9.33.0",
37+
"eslint-plugin-check-file": "^3.3.1",
3738
"eslint-plugin-react-hooks": "^5.2.0",
3839
"eslint-plugin-react-refresh": "^0.4.20",
3940
"globals": "^16.3.0",

‎frontend/src/App.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@ import { BrowserRouter, Route, Routes } from "react-router";
22
import { QueryClientProvider } from "@tanstack/react-query";
33
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
44
import "./App.css";
5-
import Home from "./pages/home";
6-
import CompatibilityCheck from "./pages/compatibilityCheck";
7-
import ExpertConsultation from "./pages/expertConsultation";
8-
import Guide from "./pages/guide";
9-
import Community from "./pages/community";
10-
import MyPage from "./pages/myPage";
11-
import SignIn from "./pages/signIn";
12-
import Setting from "./pages/setting";
13-
import SecondSetting from "./pages/secondSetting";
5+
import Home from "./pages/Home";
6+
import CompatibilityCheck from "./pages/CompatibilityCheck";
7+
import ExpertConsultation from "./pages/ExpertConsultation";
8+
import Guide from "./pages/Guide";
9+
import Community from "./pages/Community";
10+
import MyPage from "./pages/MyPage";
11+
import SignIn from "./pages/SignIn";
12+
import Setting from "./pages/Setting";
13+
import SecondSetting from "./pages/SecondSetting";
1414
import RedirectPage from "./pages/oauth/kakao/RedirectPage";
15-
import ExpertVerifyLayout from "./components/layout/expertVerifyLayout";
15+
import ExpertVerifyLayout from "./components/layout/ExpertVerifyLayout";
1616
import { ProtectedRoute } from "./routes/ProtectedRoute";
1717
import RootRedirect from "./routes/RootRedirect";
1818
import {
1919
ErrorBoundary,
2020
GlobalLoader,
2121
ToastProvider,
2222
} from "./components/providers";
23-
import { queryClient } from "./api/core/query-config";
23+
import { queryClient } from "./api/core/queryConfig";
2424

2525
const Router = () => {
2626
return (

frontend/src/api/core/query-config.ts renamed to frontend/src/api/core/queryConfig.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,9 @@ export const invalidateQueries = {
117117
}
118118
},
119119
products: () => queryClient.invalidateQueries({ queryKey: queryKeys.PRODUCTS.ALL }),
120-
community: () => queryClient.invalidateQueries({ queryKey: queryKeys.COMMUNITY.ALL }),
121-
chatbot: () => queryClient.invalidateQueries({ queryKey: queryKeys.CHATBOT.ALL }),
120+
// TODO: Add COMMUNITY and CHATBOT query keys when needed
121+
// community: () => queryClient.invalidateQueries({ queryKey: queryKeys.COMMUNITY.ALL }),
122+
// chatbot: () => queryClient.invalidateQueries({ queryKey: queryKeys.CHATBOT.ALL }),
122123
};
123124

124125
// 프리페치 헬퍼

‎frontend/src/api/glossary/useGlossaryAutoComplete.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useQuery } from '@tanstack/react-query';
2-
import { queryKeys } from '../core/query-config';
2+
import { queryKeys } from '../core/queryConfig';
33
import { glossaryService } from '@/api/services/glossaryService';
44

55
/**

‎frontend/src/api/glossary/useGlossaryDetail.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { glossaryService } from '@/api/services/glossaryService';
22
import { useQuery } from '@tanstack/react-query';
3-
import { queryKeys } from '../core/query-config';
3+
import { queryKeys } from '../core/queryConfig';
44

55
/**
66
* 용어 상세 정보를 가져오는 React Query 훅

‎frontend/src/api/glossary/useGlossaryHistory.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
2-
import { queryKeys } from '../core/query-config';
2+
import { queryKeys } from '../core/queryConfig';
33
import { glossaryService } from '@/api/services/glossaryService';
44

55
/**

‎frontend/src/api/services/useDeleteUser.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useMutation } from '@tanstack/react-query';
22
import { useAuthStore } from '../../stores/useAuthStore';
33
import client from '../core';
4-
import type { CommonMutationOptions } from '../core/query-config';
4+
import type { CommonMutationOptions } from '../core/queryConfig';
55
import { API_ENDPOINTS } from '../core/types';
66

77
// 계정 삭제

0 commit comments

Comments
 (0)