[refactor] ESLint 설정 리펙토링 및 불필요한 항목 정리#437
Conversation
…' into feature/#387-setup-eslint-FE-108
- 불필요한 패키지(typescript-eslint, eslint-plugin-prettier 등) 삭제 - eslint-config-prettier 및 @typescript-eslint 관련 패키지 추가 - package.json에서 "type": "module" 제거
ESLint 설정을 배열 기반으로 재구성하여 파일 기반 설정 관리가 용이하도록 개선했습니다. 또한 eslint-plugin-prettier를 eslint-config-prettier로 대체하여 Prettier 통합 방식을 단순화했습니다.
ESLint 설정에서 사용되지 않는 `project` 옵션을 제거하여 설정 파일을 간소화했습니다. 해당 옵션은 이 프로젝트에서는 필요하지 않아 불필요한 설정을 최소화했습니다.
React 17 이상의 환경에서는 `react/react-in-jsx-scope` 규칙이 불필요하여 이를 비활성화했습니다.
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning
|
| 파일/경로 그룹 | 변경 요약 |
|---|---|
| frontend/eslint.config.mjs, frontend/package.json, frontend/tsconfig.json | ESLint 설정 파일 완전 재작성, 관련 플러그인 및 Prettier 패키지 추가, tsconfig에 eslint.config.mjs 포함 |
| frontend/src//*.tsx, frontend/src//*.ts | JSX/TSX 파일에서 불필요한 React import 제거 및 훅만 명시적 import로 변경 |
| frontend/src/hooks/queries/club/useGetCardList.ts, frontend/src/hooks/queries/club/useGetClubDetail.ts | 쿼리 훅 내부에 select 옵션 추가 및 데이터 변환 로직 반영 |
Sequence Diagram(s)
sequenceDiagram
participant Developer
participant ESLint
participant TypeScript
participant React Code
Developer->>ESLint: Run lint
ESLint->>TypeScript: Parse with @typescript-eslint/parser
ESLint->>React Code: 적용된 룰로 코드 검사 (React import 불필요)
React Code-->>ESLint: 코드 내 JSX, 훅 사용
ESLint-->>Developer: 룰 위반/경고/수정 제안
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| ESLint 설정 추가 및 룰 정리 (FE-108) | ✅ | |
| """ |
✨ Finishing Touches
- 📝 Generate Docstrings
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Explain this complex logic.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and explain its main purpose.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the ESLint configuration and removes unnecessary default React imports in various files to align with React 17+ conventions. Key changes include refactoring to a flat ESLint config based on arrays, updating Prettier integration, and cleaning up unused dependencies.
Reviewed Changes
Copilot reviewed 36 out of 37 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx | Removed the default React import in favor of named hooks. |
| frontend/src/pages/AdminPage/AdminPage.tsx | Removed unused default React import. |
| frontend/src/hooks/queries/club/useGetClubDetail.ts | Added a select transformation for logo conversion. |
| frontend/src/hooks/queries/club/useGetCardList.ts | Added a select transformation for logo conversion; note naming inconsistency. |
| Various context and component files | Removed default React imports as they are no longer required. |
| frontend/package.json | Updated ESLint and TypeScript dependencies and removed unused packages. |
| frontend/eslint.config.mjs | Refactored ESLint config using the new Flat Config array format. |
Files not reviewed (1)
- frontend/package-lock.json: Language not supported
Comments suppressed due to low confidence (1)
frontend/src/hooks/queries/club/useGetCardList.ts:4
- The conversion function name here differs from that in useGetClubDetail.ts where it is imported as 'convertGoogleDriveUrl'. Consider renaming to 'convertGoogleDriveUrl' for consistent naming across the codebase.
import convertToDriveUrl from '@/utils/convertGoogleDriveUrl';
| configPrettier, | ||
| ]; | ||
|
|
||
| /** @type {import('eslint').Linter.Config[]} */ | ||
| export default [ | ||
| {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]}, | ||
| {languageOptions: { globals: globals.browser }}, | ||
| pluginJs.configs.recommended, | ||
| ...tseslint.configs.recommended, | ||
| pluginReact.configs.flat.recommended, | ||
| ]; No newline at end of file | ||
| export default config; |
There was a problem hiding this comment.
[nitpick] Ensure that 'eslint-config-prettier' is placed appropriately in the configuration array to override any conflicting rules effectively.
| configPrettier, | |
| ]; | |
| /** @type {import('eslint').Linter.Config[]} */ | |
| export default [ | |
| {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]}, | |
| {languageOptions: { globals: globals.browser }}, | |
| pluginJs.configs.recommended, | |
| ...tseslint.configs.recommended, | |
| pluginReact.configs.flat.recommended, | |
| ]; | |
| \ No newline at end of file | |
| export default config; | |
| ]; | |
| config.push(configPrettier); | |
| export default config; | |
| export default config; |
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
eslint 설정 수고많으셨스빈다!
생각보다 신경 쓸게 많아서 시간이 좀 걸렸네요. 개발하면서 점진적으로 추가해보도록 합시다!
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/eslint.config.mjs (1)
7-52: 구성이 잘 정리되어 있습니다만, 몇 가지 고려할 사항이 있습니다.Flat Config 배열 기반 구조로의 전환이 잘 이루어졌습니다. 소스 파일 타겟팅과 무시할 파일들이 명확하게 정의되어 있습니다. React 17+와의 호환성을 위한
react/react-in-jsx-scope규칙 비활성화도 적절합니다.다음 사항을 고려해 보세요:
- React 훅 관련 규칙이 없습니다. 훅의 올바른 사용을 보장하기 위해
react-hooks/rules-of-hooks와react-hooks/exhaustive-deps규칙 추가를 고려해보세요.- 접근성(a11y) 관련 규칙이 포함되어 있지 않습니다. 웹 접근성을 향상시키기 위해
jsx-a11y플러그인 추가를 고려해보세요.- 현재 환경(browser, node 등)에 대한 명시적 설정이 없습니다.
다음과 같이 추가할 수 있습니다:
import typescript from '@typescript-eslint/eslint-plugin'; import parser from '@typescript-eslint/parser'; import react from 'eslint-plugin-react'; +import reactHooks from 'eslint-plugin-react-hooks'; +import jsxA11y from 'eslint-plugin-jsx-a11y'; import storybook from 'eslint-plugin-storybook'; import configPrettier from 'eslint-config-prettier'; const config = [ { files: ['src/**/*.{js,ts,jsx,tsx}'], ignores: [ 'dist/**', 'node_modules/**', 'coverage/**', 'public/**', 'jest.config.js', 'jest.setup.ts', 'netlify.toml', ], languageOptions: { parser, parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true, }, }, + // 환경 설정 추가 + globals: { + window: true, + document: true, + }, }, plugins: { '@typescript-eslint': typescript, react, + 'react-hooks': reactHooks, + 'jsx-a11y': jsxA11y, storybook, }, rules: { semi: ['error', 'always'], quotes: ['error', 'single'], 'no-console': 'warn', 'react/react-in-jsx-scope': 'off', + // React Hooks 규칙 추가 + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', + // 기본적인 접근성 규칙 추가 + 'jsx-a11y/alt-text': 'warn', + 'jsx-a11y/anchor-has-content': 'warn', '@typescript-eslint/no-unused-vars': [ 'warn', { argsIgnorePattern: '^_' }, ], '@typescript-eslint/explicit-function-return-type': 'off', }, settings: { react: { version: 'detect', }, }, }, configPrettier, ];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (36)
frontend/eslint.config.mjs(1 hunks)frontend/package.json(1 hunks)frontend/src/App.tsx(1 hunks)frontend/src/components/ClubLogo/ClubLogo.tsx(0 hunks)frontend/src/components/ClubStateBox/ClubStateBox.tsx(0 hunks)frontend/src/components/ClubTag/ClubTag.tsx(0 hunks)frontend/src/components/common/Button/Button.tsx(0 hunks)frontend/src/components/common/Footer/Footer.tsx(0 hunks)frontend/src/components/common/Header/Header.tsx(0 hunks)frontend/src/components/common/InputField/InputField.tsx(1 hunks)frontend/src/components/common/LazyImage/LazyImage.test.tsx(0 hunks)frontend/src/components/common/LazyImage/LazyImage.tsx(1 hunks)frontend/src/components/common/SearchBox/SearchBox.tsx(1 hunks)frontend/src/context/AdminClubContext.tsx(1 hunks)frontend/src/context/SearchContext.tsx(1 hunks)frontend/src/hooks/queries/club/useGetCardList.ts(1 hunks)frontend/src/hooks/queries/club/useGetClubDetail.ts(1 hunks)frontend/src/pages/AdminPage/AdminPage.tsx(0 hunks)frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx(1 hunks)frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/DeadlineBadge/DeadlineBadge.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/IntroduceBox/IntroduceBox.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx(1 hunks)frontend/src/pages/MainPage/MainPage.tsx(1 hunks)frontend/src/pages/MainPage/components/Banner/Banner.tsx(1 hunks)frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx(0 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx(1 hunks)frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx(1 hunks)frontend/tsconfig.json(1 hunks)
💤 Files with no reviewable changes (17)
- frontend/src/components/ClubLogo/ClubLogo.tsx
- frontend/src/components/ClubTag/ClubTag.tsx
- frontend/src/pages/ClubDetailPage/components/ClubDetailHeader/ClubDetailHeader.tsx
- frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.tsx
- frontend/src/components/common/LazyImage/LazyImage.test.tsx
- frontend/src/pages/AdminPage/AdminPage.tsx
- frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx
- frontend/src/pages/ClubDetailPage/components/IntroduceBox/IntroduceBox.tsx
- frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx
- frontend/src/components/common/Button/Button.tsx
- frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.tsx
- frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx
- frontend/src/components/common/Footer/Footer.tsx
- frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx
- frontend/src/components/ClubStateBox/ClubStateBox.tsx
- frontend/src/pages/ClubDetailPage/components/DeadlineBadge/DeadlineBadge.tsx
- frontend/src/components/common/Header/Header.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
frontend/src/hooks/queries/club/useGetClubDetail.ts (2)
frontend/src/types/club.ts (1)
ClubDetail(12-21)frontend/src/apis/getClubDetail.ts (1)
getClubDetail(4-17)
frontend/src/hooks/queries/club/useGetCardList.ts (2)
frontend/src/types/club.ts (1)
Club(1-10)frontend/src/apis/getClubList.ts (1)
getClubList(3-27)
🔇 Additional comments (26)
frontend/src/context/SearchContext.tsx (1)
1-1: React 기본 import 제거 및 새로운 JSX 변환 지원
React 디폴트 import 대신 named imports만 사용하여 코드가 간결해졌습니다. React 17+의 새로운 JSX 변환 환경에서 올바르게 작동합니다.frontend/src/pages/MainPage/MainPage.tsx (1)
1-1: React 기본 import 제거 및 빌드 오류 방지
JSX 사용을 위한 React 기본 import가 더 이상 필요하지 않으므로 named imports만 남긴 변경이 적절합니다. 빌드 및 타입스크립트 설정과도 호환됩니다.frontend/src/components/common/LazyImage/LazyImage.tsx (1)
1-1: React 기본 import 제거 및 의존성 경량화
불필요한 React 디폴트 import를 제거하여 번들 크기를 줄이고, React 훅만 명시적으로 가져오도록 개선되었습니다.frontend/src/App.tsx (1)
1-1: React 기본 import 제거 및 코드 일관성 향상
Suspense 등 React 내보내기만 사용하도록 변경되어 전체 코드베이스의 import 스타일이 일관됩니다.frontend/src/components/common/SearchBox/SearchBox.tsx (1)
1-1: React 기본 import 제거 및 최신 JSX 규약 준수
useRef, useState 등 필요한 훅만 import하도록 변경되어 불필요한 의존성이 제거되었습니다.frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx (1)
1-1: JSX 자동 런타임에 맞춘 React 기본 임포트 제거 적합
React 17+의 자동 JSX 변환(runtime) 환경에서는import React없이도 JSX를 사용할 수 있습니다. ESLint에서react/react-in-jsx-scope룰을 비활성화한 것을 확인했으며, 이 변경은 불필요한 의존성을 줄여 코드베이스를 경량화합니다.frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx (1)
1-1: 필요한 훅만 임포트하여 React 기본 임포트 제거
useState만 사용되는 컴포넌트에서 기본React네임스페이스를 제거한 것은 의존성을 줄이고 가독성을 높이는 좋은 개선입니다. 자동 JSX 변환을 사용하는 프로젝트 설정과도 일치합니다.frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx (1)
1-1: React 기본 임포트 제거로 코드 간소화
useState,useEffect훅만 필요하므로 기본import React를 제거한 것은 적절합니다. 빌드 환경이 자동 JSX 런타임을 지원함을 확인했습니다.frontend/src/context/AdminClubContext.tsx (1)
1-1: React 기본 임포트 제거 적합
createContext,useContext,useState만 사용되고, JSX나React네임스페이스 참조가 없으므로 기본 임포트를 제거해도 안전합니다.frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (1)
1-1: JSX 자동 런타임 활용을 위한 React 기본 임포트 제거
프로젝트가 React 17+ 자동 JSX 변환을 사용하므로 기본React네임스페이스 임포트를 제거한 것은 올바른 변경입니다.frontend/src/pages/MainPage/components/Banner/Banner.tsx (1)
1-1: React 17+ JSX Transform 적용 확인React 17부터 도입된 새로운 JSX Transform으로 인해 더 이상 JSX 파일에서 React를 명시적으로 import할 필요가 없게 되었습니다. 이 변경은 코드를 더 간결하게 만들고 불필요한 import를 제거하는 좋은 접근입니다.
frontend/src/components/common/InputField/InputField.tsx (1)
1-1: React 기본 import 제거 확인React 17+ 환경에서는 JSX를 사용하기 위해 React를 명시적으로 import할 필요가 없습니다. 필요한 hook만 import하는 방식으로 변경한 것은 코드 간결성 측면에서 적절합니다.
frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx (1)
1-1: React import 간소화 적용React 17 이상에서는 새로운 JSX Transform을 통해 React 명시적 import 없이도 JSX 구문을 사용할 수 있습니다. 이 변경은 PR 목표에 부합하며 코드베이스 전반에 일관성을 유지합니다.
frontend/tsconfig.json (1)
20-20: ESLint 설정 파일 TypeScript 컴파일 컨텍스트에 포함
eslint.config.mjs파일을 TypeScript 컴파일 컨텍스트에 포함시킨 것은 좋은 변경입니다. 이를 통해 ESLint 설정 파일에 대한 타입 체크와 모듈 해석이 가능해집니다. 특히 ESLint Flat Config를 사용하는 새로운 방식에 맞추어 적절한 설정이라고 판단됩니다.frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)
1-1: React 기본 import 제거 - 코드 현대화 승인React 17+ 버전부터는 JSX를 사용할 때 명시적으로 React를 import할 필요가 없어졌습니다. 이 변경은 현대적인 React 개발 패턴을 따르고 있으며, 코드를 더 간결하게 만듭니다.
frontend/package.json (2)
62-63: TypeScript ESLint 패키지 추가 - 적절한 의존성 업데이트
@typescript-eslint/eslint-plugin과@typescript-eslint/parser를 추가한 것은 PR의 ESLint 설정 리팩토링 목표에 부합합니다. 이는 타입스크립트 코드에 대한 더 나은 린팅을 제공하며, 최신 ESLint 플랫 구성(Flat Config)과 함께 사용하기에 적합합니다.
71-71: eslint-config-prettier 추가 - 설정 충돌 방지
eslint-config-prettier를 추가한 것은 ESLint와 Prettier 간의 충돌을 방지하기 위한 좋은 접근 방식입니다. 이는 PR 목표에 언급된 대로eslint-plugin-prettier에서eslint-config-prettier로 전환하는 전략에 부합합니다.frontend/src/hooks/queries/club/useGetClubDetail.ts (2)
4-4: Google Drive URL 변환 유틸리티 추가 - 적절한 import
convertGoogleDriveUrl유틸리티 함수를 가져와서 Google Drive 이미지 URL을 적절히 처리할 수 있게 되었습니다.
11-18: 쿼리 결과 변환 로직 추가 - 데이터 처리 개선쿼리 결과에
select함수를 사용하여 Google Drive URL을 변환하는 로직을 추가한 것은 좋은 패턴입니다. 이 방식은 컴포넌트가 데이터를 받기 전에 필요한 변환을 모두 처리하여 코드의 일관성과 재사용성을 향상시킵니다.특히 다음 사항이 잘 처리되었습니다:
- logo가 없는 경우 undefined로 처리
- feeds가 배열이 아닌 경우 빈 배열로 처리하는 defensive 코딩
frontend/src/hooks/queries/club/useGetCardList.ts (3)
3-4: 타입 및 유틸리티 추가 - 코드 품질 향상
Club타입과convertToDriveUrl유틸리티 함수를 import한 것은 코드의 타입 안전성과 URL 처리 일관성을 개선합니다.
12-12: 명시적 타입 지정 - 타입 안전성 향상
useQuery에 명시적인 제네릭 타입<Club[], unknown, Club[]>을 지정한 것은 타입 안전성을 향상시키는 좋은 방법입니다. 이는 코드 작성 시 오류를 줄이고 자동 완성을 개선합니다.
16-20: 데이터 변환 로직 추가 - 일관된 이미지 URL 처리
select함수를 사용하여 클럽 로고 URL을 변환하는 로직을 추가한 것은useGetClubDetail훅과 일관된 접근 방식을 유지하며, 컴포넌트에 데이터가 전달되기 전에 필요한 모든 변환을 처리하는 좋은 패턴입니다.이 변경으로 인해 클럽 카드 목록의 이미지가 일관되게 표시될 것입니다.
frontend/eslint.config.mjs (4)
1-5: 적절한 모듈 임포트 구조입니다.필요한 ESLint 플러그인과 파서를 명확하게 임포트하고 있으며,
eslint-plugin-prettier대신eslint-config-prettier를 사용하는 접근 방식으로 변경한 것이 좋습니다. 이는 PR 목표에 맞게 Prettier와의 규칙 충돌을 방지하고 책임을 명확히 구분하는 접근법입니다.
34-44: 규칙 설정이 적절하게 구성되어 있습니다.타입 기반 규칙과
parserOptions.project설정을 제거한 것은 Webpack 빌드 프로세스에서 타입 체크를 별도로 처리한다는 목표와 일치합니다. 이렇게 하면 ESLint가 구문 및 스타일 피드백에 집중하여 더 빠른 성능을 제공할 수 있습니다.특히 다음 설정이 적절합니다:
- 사용하지 않는 변수에 대한 경고(
@typescript-eslint/no-unused-vars)- 언더스코어로 시작하는 인자 무시 패턴
- 명시적 함수 반환 타입 요구 사항 비활성화
제안:
- 추가로 import 관련 규칙을 고려해 볼 수 있습니다 (예:
import/no-unresolved,import/order).
10-18: ignores 설정이 포괄적입니다.빌드 결과물, 노드 모듈, 테스트 커버리지 보고서 등 불필요한 검사 대상을 적절히 제외하고 있습니다. 이는 ESLint 실행 성능을 향상시키는 데 도움이 됩니다.
추가로 고려할 수 있는 사항:
.storybook/**디렉토리도 제외 대상에 추가하는 것을 고려해 볼 수 있습니다 (스토리북 구성 파일이 별도로 있는 경우).**/*.test.{js,ts,jsx,tsx}파일에 대해 별도의 규칙 세트를 적용하는 것을 고려해 볼 수 있습니다 (테스트 파일에 대한 특별한 ESLint 규칙이 필요한 경우).
51-52: 구성 내보내기 방식이 적절합니다.배열 구성을 명명된 상수로 정의하고 기본 내보내기로 설정한 것은 코드 가독성과 유지보수성을 높이는 좋은 접근법입니다. 특히
configPrettier를 구성 배열의 마지막 항목으로 추가하여 Prettier와의 규칙 충돌을 방지하는 방식이 올바르게 구현되었습니다.Also applies to: 54-54
Codecov ReportAttention: Patch coverage is 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx (1)
1-1: PhotoList 컴포넌트 테스트 커버리지 부족
Static Analysis(Check: codecov/patch)에 따라 추가된 라인이 테스트되지 않아 커버리지가 감소할 수 있습니다. 주요 렌더링 및 모달 동작에 대한 스냅샷 또는 React Testing Library 기반의 테스트를 추가하는 것을 고려해주세요.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx#L1
Added line #L1 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (16)
frontend/package.json(1 hunks)frontend/src/App.tsx(1 hunks)frontend/src/components/ClubLogo/ClubLogo.tsx(0 hunks)frontend/src/components/ClubStateBox/ClubStateBox.tsx(0 hunks)frontend/src/components/common/Button/Button.tsx(0 hunks)frontend/src/components/common/Header/Header.tsx(0 hunks)frontend/src/components/common/InputField/InputField.tsx(1 hunks)frontend/src/components/common/SearchBox/SearchBox.tsx(1 hunks)frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx(1 hunks)frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx(0 hunks)frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx(1 hunks)frontend/src/pages/MainPage/components/Banner/Banner.tsx(1 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx(1 hunks)frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx(1 hunks)
💤 Files with no reviewable changes (6)
- frontend/src/components/common/Button/Button.tsx
- frontend/src/components/common/Header/Header.tsx
- frontend/src/components/ClubLogo/ClubLogo.tsx
- frontend/src/components/ClubStateBox/ClubStateBox.tsx
- frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx
- frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/package.json
🧰 Additional context used
🪛 GitHub Check: codecov/patch
frontend/src/App.tsx
[warning] 1-1: frontend/src/App.tsx#L1
Added line #L1 was not covered by tests
frontend/src/components/common/InputField/InputField.tsx
[warning] 1-1: frontend/src/components/common/InputField/InputField.tsx#L1
Added line #L1 was not covered by tests
frontend/src/components/common/SearchBox/SearchBox.tsx
[warning] 1-1: frontend/src/components/common/SearchBox/SearchBox.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx
[warning] 1-1: frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
[warning] 1-1: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx
[warning] 1-1: frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/MainPage/components/Banner/Banner.tsx
[warning] 1-1: frontend/src/pages/MainPage/components/Banner/Banner.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx
[warning] 1-1: frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx
[warning] 1-1: frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx#L1
Added line #L1 was not covered by tests
🔇 Additional comments (8)
frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx (1)
1-1: React 17+ 환경에 맞게 import 문이 개선되었습니다.React 17부터는 새로운 JSX Transform이 도입되어 컴포넌트에서 React를 명시적으로 import하지 않아도 됩니다. 불필요한 default import를 제거하고 필요한 useState만 import하도록 수정한 것은 좋은 접근입니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx#L1
Added line #L1 was not covered by testsfrontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (1)
1-1: React 17+ 표준에 맞게 import 문이 정리되었습니다.React 17부터는 JSX 사용 시 React를 명시적으로 import하지 않아도 되므로, 불필요한 default import를 제거하고 useState만 import하도록 변경한 것은 적절합니다. 이러한 변경은 ESLint 설정 변경의 일환으로 진행된 것으로 보이며, 코드를 더 간결하게 만들어 줍니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx#L1
Added line #L1 was not covered by testsfrontend/src/App.tsx (1)
1-1: React 17+ 환경에 맞는 import 문 수정 👍React 17 이상에서는 JSX를 사용할 때 더 이상 명시적으로 React를 import할 필요가 없습니다. 이 변경은 최신 React 환경에 맞게 불필요한 import를 제거하여 코드를 간결하게 만듭니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/App.tsx#L1
Added line #L1 was not covered by testsfrontend/src/components/common/SearchBox/SearchBox.tsx (1)
1-1: React 명시적 import 제거 적절히 수행됨React 17 이상에서는 JSX를 사용할 때 더 이상 기본 React import가 필요하지 않습니다. 이처럼 필요한 훅(useRef, useState)만 명시적으로 import하는 패턴은 코드 가독성을 향상시키고 번들 크기를 최적화하는 데 도움이 됩니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/components/common/SearchBox/SearchBox.tsx#L1
Added line #L1 was not covered by testsfrontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx (1)
1-1: React import 문 개선 완료React 17+ 버전에서는 기본 React import가 필요하지 않으므로, 사용하는 훅(useState, useEffect)만 가져오도록 변경한 것이 적절합니다. 이러한 변경은 코드베이스 전체의 일관성을 유지하고 불필요한 import를 제거하는 데 도움이 됩니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.tsx#L1
Added line #L1 was not covered by testsfrontend/src/components/common/InputField/InputField.tsx (1)
1-1: React import 최적화 완료React 17 이상에서는 JSX 변환이 개선되어 React를 명시적으로 import할 필요가 없어졌습니다. useState와 같이 실제로 사용되는 항목만 import하도록 수정한 것은 코드 가독성과 유지보수성을 향상시키는 좋은 접근법입니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/components/common/InputField/InputField.tsx#L1
Added line #L1 was not covered by testsfrontend/src/pages/MainPage/components/Banner/Banner.tsx (1)
1-1: React 17+ JSX 변환과 일치하도록 불필요한 React 기본 임포트가 제거되었습니다.React 17부터는 JSX를 사용할 때 React를 명시적으로 가져올 필요가 없어졌습니다. 이 변경사항은 ESLint 설정 리팩토링 PR 목표와 일치하며, 코드 정리 및 최신 React 패턴을 따르고 있습니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/MainPage/components/Banner/Banner.tsx#L1
Added line #L1 was not covered by testsfrontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)
1-1: React 17+ JSX 변환과 일치하도록 불필요한 React 기본 임포트가 제거되었습니다.React 17부터는 JSX를 사용할 때 더 이상 React를 명시적으로 가져올 필요가 없습니다. 이 변경사항은 PR의 ESLint 설정 리팩토링 목표와 일치하며 코드 간결성을 향상시킵니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx#L1
Added line #L1 was not covered by tests
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx
Outdated
Show resolved
Hide resolved
…' into feature/#387-setup-eslint-FE-108
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx (1)
1-95: PhotoList 컴포넌트 테스트 커버리지 보강 권장
현재 이 컴포넌트에 대한 유닛 또는 통합 테스트가 없어 코드 커버리지가 낮게 나타납니다.
- 이미지 렌더링 및 오류 처리
- 화살표 버튼 클릭 시 인덱스 변경 및
translateX업데이트- 썸네일 클릭 시 모달 오픈/클로즈 동작
등 핵심 동작을 검증하는 테스트를 추가하면 유지보수성을 높일 수 있습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx#L1
Added line #L1 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx
[warning] 1-1: frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx#L1
Added line #L1 was not covered by tests
🔇 Additional comments (1)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx (1)
1-1: React default import 제거: 적절합니다
JSX transform이 활성화된 React 17+ 환경에서는 defaultReactimport 없이도 JSX 구문을 사용할 수 있으므로,import { useState, useRef, useMemo, useCallback } from 'react';로 변경한 것은 올바른 판단입니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 1-1: frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx#L1
Added line #L1 was not covered by tests
2 participants
#️⃣연관된 이슈
📝작업 내용
eslint-plugin-prettier→eslint-config-prettier로 변경→ 포맷 관련 규칙 충돌 방지 및 명확한 역할 분리
react/react-in-jsx-scope룰 제거parserOptions.project설정 제거→ 타입 검사는 Webpack에서 별도로 수행하므로 ESLint에서는 생략
typescript-eslint,eslint-plugin-prettier등 제거)tsconfig.json에eslint.config.mjs포함 설정 추가중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
ts-loader와fork-ts-checker-webpack-plugin을 통해 Webpack 단계에서 수행 중입니다.Summary by CodeRabbit
Chores
Refactor