[Fix-143] FE 코드/프로젝트 컨벤션 체크 테스트 추가

[yeomin4242]

목적

FE가 현재 합의된 구조 컨벤션을 계속 유지할 수 있도록, 실제 구조를 기준으로 자동 검증을 추가했습니다.
이번 변경은 기능 리팩터보다는 api-hook-component-page 경계와 구조 규칙을 회귀 없이 지키도록 만드는 데 목적이 있습니다.

변경 요약

• FE 구조 컨벤션 테스트를 추가해 현재 구조 기준을 자동으로 검증하도록 했습니다.
• EventSource 소유 위치, router loader 미사용, axios.create 중앙화, src/ 하위 테스트 금지 규칙을 테스트로 고정했습니다.
• 현재 구조 리뷰 결과와 맞지 않는 드리프트를 방지하도록 프런트엔드 컨벤션 기준선을 코드로 명시했습니다.
• 런타임 기능 변경보다는 구조 회귀 방지에 집중했습니다.

관련 이슈

Closes #

Related: #

리뷰 포인트

• FE의 현재 실무적 분리 기준인 api -> hook/controller -> component -> page 흐름을 테스트가 과하게 제한하지 않는지 확인 부탁드립니다.
• 이번 PR은 기능 수정이 아니라 구조 컨벤션 가드 추가가 중심입니다.
• 페이지를 너무 얇게 강제하지 않고, 현재 팀 스타일에 맞는 pragmatic 기준선인지 봐주시면 좋겠습니다.

테스트 결과

• 로컬 테스트 통과

• CI 통과

• 수동 검증 완료

Draft PR 전용 체크리스트

• 현재 피드백 받고 싶은 범위를 명확히 작성했습니다.

• 머지 전 남은 작업(TODO)을 정리했습니다.

• 완료되지 않은 항목/리스크를 본문에 명시했습니다.

일반 PR 전용 체크리스트

• self-review를 완료했습니다.

• 머지 전 필수 작업이 모두 완료되었습니다.

• 필요한 문서(README/API/주석)를 업데이트했습니다.

• 브레이킹 체인지 여부를 확인했고 필요 시 명시했습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new Jest unit test file is added that validates frontend project structure and architectural conventions, including required directories, colocated test patterns, and specific code ownership rules across the source tree.

Changes

Cohort / File(s)	Summary
Web Structure Convention Test tests/unit/architecture/web-structure-convention.test.ts	Adds comprehensive test suite validating required directory structure, preventing colocated test files in src, enforcing architectural ownership (EventSource in NotificationContext, Router patterns absent, axios in lib/axios), and verifying App.tsx component composition.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A test to guard what's right and true,
Structures checked through and through,
Conventions watched with rabbit eyes,
Where code and architecture lies!
One hundred lines to keep things neat,
Making our frontend complete. 🏗️

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding tests to validate frontend code and project structure conventions, which directly matches the changeset content.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch FIX-143-Refactoring-code-for-following-project-code-convention-Version-0.1.0-MVP

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ed6c424a-3d3d-4500-8ddd-55d50f7850f9

📥 Commits

Reviewing files that changed from the base of the PR and between 0df73df and 1a5a635.

📒 Files selected for processing (1)

• tests/unit/architecture/web-structure-convention.test.ts

📜 Review details

🔇 Additional comments (2)

tests/unit/architecture/web-structure-convention.test.ts (2)

30-42: Good defensive file traversal for convention checks.

collectFiles handles missing directories safely and keeps traversal deterministic for the subsequent assertions.

---

1-4: No action needed. Vitest globals are explicitly enabled in vite.config.ts (globals: true), so describe, it, and expect work without explicit imports in this test file. The original concern about ReferenceError does not apply.

			> Likely an incorrect or invalid review comment.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Narrow the loader: detector to avoid false positives.

The \bloader\s*: pattern matches any loader property, not just React Router data-loader usage. This can fail on unrelated domain code and make the convention test brittle.

Proposed fix

   it('keeps route-level data loading off React Router loaders', () => {
     const loaderOwners = scanSourceFiles(
       (_, source) =>
         /\bcreateBrowserRouter\s*\(/.test(source)
         || /\buseLoaderData\s*\(/.test(source)
-        || /\bloader\s*:/.test(source),
+        || (
+          /\bcreate(Browser|Hash|Memory)Router\s*\(/.test(source)
+          && /\bloader\s*:\s*(async\s*)?\(/.test(source)
+        ),
     );

     expect(loaderOwners).toEqual([]);
   });

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const loaderOwners = scanSourceFiles(
	(_, source) =>
	/\bcreateBrowserRouter\s*\(/.test(source)
	|| /\buseLoaderData\s*\(/.test(source)
	|| /\bloader\s*:/.test(source),
	);
	const loaderOwners = scanSourceFiles(
	(_, source) =>
	/\bcreateBrowserRouter\s*\(/.test(source)
	|| /\buseLoaderData\s*\(/.test(source)
	|| (
	/\bcreate(Browser|Hash|Memory)Router\s*\(/.test(source)
	&& /\bloader\s*:\s*(async\s*)?\(/.test(source)
	),
	);