🟡[P2] fix(frontend): providers/Settings.tsx missing 'use client' directive despite using hooks + window/document

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-R9 — Use of window/document/localStorage without "use client" guard or SSR safety
Priority	P2 🟡
Scan Date	2026-04-16
Flagged By	@code-review

요약

• WHAT: frontend/src/providers/Settings.tsx가 useState, useEffect, document.documentElement, window.matchMedia를 사용하면서 \"use client\" 디렉티브가 없음
• WHY: 현재는 MainLayoutClient(client component)에서만 import되어 동작하지만, 향후 다른 server component에서 import 시 SSR 크래시. Next.js 15 컨벤션 위반
• WHERE: frontend/src/providers/Settings.tsx:1 (파일 첫 줄에 \"use client\" 누락)
• SEVERITY: MEDIUM — 잠재적 SSR 크래시 + 코드 컨벤션 위반

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/src/providers/Settings.tsx	1	파일 첫 줄 \"use client\" 디렉티브 누락	@code-review	High
2	frontend/src/providers/Settings.tsx	109, 138, 151	document.documentElement.classList, window.matchMedia 사용 — client-only API	@code-review	High
3	frontend/src/providers/Settings.tsx	39	typeof window === \"undefined\" 체크는 일부 함수에만 존재, 모든 hook callback에 적용 안됨	@code-review	Medium

영향 분석

영향 범위

• 향후 Settings provider를 다른 컴포넌트에서 import할 때
• Next.js 15의 더 엄격한 RSC(React Server Components) 검증

장애 시나리오

1. 개발자가 Settings provider를 server component인 새 layout에서 import
2. SSR 시점에 document is not defined 에러 → 빌드/런타임 크래시
3. 또는 React 19 strict mode에서 hooks 호출 위치 검증 실패

긴급도

• 즉각적 장애 없으나 컨벤션 위반은 디버깅 어려운 미래 버그 유발
• 명시적 디렉티브는 미래 유지보수자에게 의도 전달

제안 해결 방안

접근 방법

파일 최상단에 디렉티브 추가:

// frontend/src/providers/Settings.tsx
\"use client\";

import { ... } from \"...\";
// ... 기존 코드

추가로 전 frontend/src/providers/ 디렉토리를 grep하여 동일 누락 검사:

for f in frontend/src/providers/*.tsx frontend/src/providers/*.ts; do
  head -1 \"$f\" | grep -q '\"use client\"' || echo \"MISSING: $f\"
done

ESLint 규칙으로 강제:

// frontend/eslint.config.js
\"react/no-direct-document\": \"error\", // 또는 next.js의 client/server boundary 규칙 활용

대안

• module-level guard: if (typeof window === \"undefined\") return null 추가 → 동작은 하지만 디렉티브가 더 명확
• Server Component로 리팩터: hooks 사용으로 인해 불가능

수용 기준

• frontend/src/providers/Settings.tsx 1번 줄에 \"use client\" 추가
• frontend/src/providers/ 전체 grep으로 누락 0건 확인
• cd frontend && pnpm build 통과
• 테스트 커맨드: cd frontend && pnpm lint && pnpm tsc --noEmit

참조

• 관련 파일: frontend/src/providers/Settings.tsx
• Checklist 항목: ISS-UI-R9
• Next.js: 'use client' directive
• 관련 이슈: 없음

재현 방법

사전 조건

• dev/build 환경

단계

1. head -1 frontend/src/providers/Settings.tsx로 첫 줄 확인
2. import 검색: grep -r \"from .*providers/Settings\" frontend/src/
3. import한 모든 곳이 client component인지 확인

기대 결과

\"use client\"가 첫 줄

실제 결과

import 문부터 시작 — 디렉티브 없음

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/providers/Settings.tsx	Settings context provider	수정 대상
frontend/src/shared/components/layout/MainLayoutClient.tsx	Settings provider import 위치	현재 client tree 보장

---

Detected by oh-my-braincrew `omb:issue` scan
Category: frontend | Scan date: 2026-04-16
`omb-issue-scan category=frontend checklist=ISS-UI-R9`

[teddylee777]

🔧 omb:resolve-issue — in-progress

Started: 2026-04-16T10:41:53Z
Status: in-progress

[teddylee777]

🔧 omb:resolve-issue — in-progress

Started: 2026-04-16T10:41:53Z
Status: in-progress

[teddylee777]

✅ omb:resolve-issue — completed

Started: 2026-04-16T10:41:53Z
Completed: 2026-04-16T12:17:34Z
Status: completed
PR: #88