FSD 표준화 및 테스팅 환경 구축 제안

[jeongbaebang]

1. ESLint 기반 FSD 규칙 재구성

배경: 현재 FSD 폴더 구조 사용은 하고 있지만, 레이어 간 의존성 규칙이 제대로 강제되지 않음 → 구조적 일관성이 약해짐

개선안: eslint-plugin-fsd-lint나 @feature-sliced/eslint-config 등을 활용해 FSD 규칙을 다시 정의하고, 위반 시 lint 에러로 바로 확인 가능하도록 구성

기대효과: 팀 내에서 자연스럽게 FSD 원칙이 지켜지고, 코드 리뷰 시 구조 관련 피드백 부담 감소

2. 세그먼트 가이드 (api, config, lib 등) 문서화

배경: 폴더 네이밍과 역할이 모호하다고 생각이 됩니다.

개선안: api, config, lib, ui, model 등 공통 세그먼트의 사용 목적과 예시를 문서화하여 협업자가 쉽게 기여할수있도록 하면 좋을 것 같습니다.

기대효과: 팀원 누구나 문서화된 폴더 구조만 보고도 코드의 역할과 위치를 빠르게 파악 가능

3. Public API 정리

배경: 현재는 feature나 entities 내부 구현 파일을 직접 import하는 경우가 많은것같습니다.

개선안: 각 레이어별로 index.ts를 public API로 구성해, 외부에서는 오직 public API만 가져다 쓰도록 규칙화하면 어떨지 제안드립니다.

기대효과: 참조 구조가 단순해지고 리팩토링 시 영향 범위를 줄일 수 있음

4. 레이어 구분 및 세분화 가이드 문서화

배경: pages와 entities의 구분이 애매하거나, 어디에 둬야 할지 애매한 코드가 발생하는 경우 있음

개선안: 각 레이어(entities, features, widgets, pages, shared)의 의도와 기준을 명확히 정의하고, 애매한 케이스에 대한 가이드등 문서화가 필요해보입니다.

기대효과: 코드 배치 기준이 명확해져 신규 코드 작성 시 혼동 최소화

5. Tailwind 3 → 4 버전대로 업데이트 및 다크모드 대응

배경: 최신 tailwind로 적용및 추후에 있을 다크모드도 대비하여 디자인 시스템을 개선하면 좋을것같습니다.

개선안: Tailwind CSS v4.0의 새로운 고성능 엔진(5배 빠른 빌드, 100배 빠른 증분 빌드)과 간소화된 설치 과정(단일 CSS 라인 import)을 활용하고, CSS 변수 기반의 다크모드 시스템 구현 가능

6. 테스트 코드 도입

배경: 자주사용하는 저수준 단위의 컴포넌트와 유틸함수부터 점진적으로 테스트 케이스를 도입하여 리팩토링시 회귀오류를 줄이고자 도입했으면 좋겠습니다.
E2E 테스트로 사용자 단위에서 테스트 자동화가 일어났으면 좋겠습니다.

개선안:

• 단위/통합 테스트: Jest + React Testing Library를 활용한 자주 사용되는 저수준 컴포넌트 및 유틸 함수 테스트부터 점진적으로 작성
• E2E 테스트: Playwright를 활용한 실제 사용자 시나리오 기반 종단간 테스트 자동화

점진적 도입 전략:

1. 핵심 유틸 함수 단위 테스트
2. 공통 컴포넌트 통합 테스트
3. 주요 사용자 플로우 E2E 테스트
4. CI/CD 파이프라인 통합