[Setting/#124] Husky 및 lint-staged 기반 pre-commit 자동 검사 환경 설정

[jjjsun]

🔢 관련 이슈 링크

• Closes ⚙️ [Setting] Husky, Git Hooks 설정 #124

📌 변경사항PR

• ✨Feature: 새로운 기능 추가
• 🐞Bugfix: 버그/오류 수정
• 📃Docs: 문서 수정(README 등)
• 🔨Refactor: 코드 리팩토링 (기능 변경 없음)
• 🧪Test: 테스트 코드 추가/수정
• 🎨UI/UX: 디자인 및 사용성 수정
• ⚙️Setting: 기본 세팅 작업

💻 작업내용

• Husky 설치, Git Hooks 연결
• prepare 스크립트 추가
• .husky/pre-commit hook 추가
• lint-staged 설정 추가
• staged된 ts/tsx/js/jsx 파일에 대해 eslint --fix, prettier --write 실행되도록 설정
• staged된 json/md/css 파일에 대해 prettier --write 실행되도록 설정

🪧 미완성 작업

N/A

🤔 논의 사항 및 참고 사항

현재는 warning이 많아서 warning 차단은 설정안해놓았습니다.
추후에 개발 재설계 완료한 후에 새로운 기능 개발 진행 전에 warning 차단 설정 넣으면 좋을것같습니다.

현재 Husky에 대한 개념을 공부중인데, 간단히 설명하면

• Husky : 언제 실행할지 (Git hook 연결)
• lint-staged: 어떤 파일에만 실행할지 (staged 파일 대상)
• Prettier/ESLint: 무슨 작업을 할지 (포맷/코드 규칙 검사 및 자동 수정)
  이렇게 나뉜다고 보면 됩니다.

Husky는 검사 자체를 하는 도구가 아닌, 커밋 전에 특정 명령을 자동으로 실행할수 있도록 연결해주는 도구입니다.
현재는 커밋 직전 단계(pre-commit단계) 에서 lint-staged를 실행하도록 설정되어있으며, 현재 작업물중에서 추가되거나 변경된 파일에 대해서만 eslint --fix와 prettier --write 작업이 수행되도록 설정했습니다.
여기서,

• eslint --fix : ESLint 가 단순 경고표시만 하는것 뿐만아니, 자동 수정 가능한 간단한 규칙에 대해서는 코드를 직접 수정해주는 기능 제공해줍니다.
• prettier --write : prettier가 코드 포맷 정리 도구이고, --write는 파일을 실제로 포맷을 적용해서 고쳐쓰는 옵션입니다.

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌은 없는지
• 불필요한 console.log 제거했는지

Summary by CodeRabbit

• 버그 수정
  • 모달 창의 타이머 처리 강화로 타임아웃 관련 안정성 향상
  • 프로필 정보 저장 후 원본 이미지 상태 초기화 및 편집 모드 자동 종료로 편집 흐름 개선

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
eatsfine	Ready	Preview, Comment	Apr 3, 2026 5:15am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e753c353-81c5-482d-a96b-44664642556d

📥 Commits

Reviewing files that changed from the base of the PR and between 9f7e6c6 and ce904a9.

📒 Files selected for processing (1)

• src/pages/myPage/MyInfoPage.tsx

---

📝 Walkthrough

Walkthrough

모달 훅의 타이머 정리와 렌더 플래그 설정 로직이 null-안전하게 강화되고 eslint 예외 주석이 추가되었습니다. 마이페이지 저장 핸들러는 저장 성공 시 이미지 파일 상태를 초기화하고 편집 모드를 종료하도록 변경되었습니다.

Changes

Cohort / File(s)	Summary
모달 프레전스 훅 src/hooks/common/useModalPresence.ts	타이머 존재 검사에서 truthy 체크를 timeRef.current !== null로 명시적 null 체크로 변경. 클린업에서 clearTimeout 후 timeRef.current = null로 무효화 추가. setRendered(true) 직전 eslint-disable 주석 삽입.
마이페이지 저장 핸들러 src/pages/myPage/MyInfoPage.tsx	patchMemberInfo 성공 처리에서 originalImageFile을 draftImageFile로 덮어쓰지 않고, 대신 originalImageFile을 비우고(edit 모드 종료) 쿼리 무효화(invalidate(["memberInfo"]))를 수행하도록 변경.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

추가 검토 의견 (근거 + 대안/예시)

• useModalPresence.ts — 타이머 null 체크 및 무효화

  • 근거: 브라우저에서 타이머 ID가 0일 수 있어 truthy 체크는 실패할 수 있음. 또한 clearTimeout 후 참조를 null로 만들면 중복 클리어나 레이스 조건을 줄임.
  • 권장 대안/확인 포인트:

    if (timeRef.current !== null) {
      clearTimeout(timeRef.current);
      timeRef.current = null;
    }

  • 점검: SSR/테스트 환경에서 setTimeout/clearTimeout 동작(예: fake timers 사용)과 호환되는지 확인하세요.

• useModalPresence.ts — eslint-disable 사용 관련 문서화

  • 근거: effect 내부에서 setState를 호출하는 것은 의도적일 수 있으나, 향후 유지보수를 위해 이유를 설명하는 주석이 필요합니다.
  • 권장 예시:

    // 이 효과는 초기 오픈 시 렌더 플래그를 동기적으로 설정하기 위해 한 번만 setState를 호출합니다.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setRendered(true);

• MyInfoPage.tsx — 저장 후 상태 일관성 확인

  • 근거: PR은 서버 쿼리 무효화로 최신 데이터를 가져오게 설계된 것으로 보입니다. 그러나 로컬에서 originalImageFile을 비우는 처리가 UI/폼 상태에 어떤 영향을 주는지 검증 필요합니다(예: 이미지 프리뷰, 업로드 버튼 활성화).
  • 권장 점검: 저장 완료 직후 UI가 서버 응답을 반영하는지(쿼리 재페치/캐시 업데이트) 확인하세요. 필요하면 서버 응답을 받아 로컬 상태를 명시적으로 갱신하는 것도 고려하세요.

    onSuccess: (res) => {
      queryClient.invalidateQueries(["memberInfo"]);
      setOriginalImageFile(null);
      setIsEditing(false);
      // 또는: queryClient.setQueryData(["memberInfo"], res.data);
    }

• MyInfoPage.tsx — 편집 중 동시성(백그라운드 변경) 정책 검토

  • 근거: 드래프트 동기화를 줄이면, 다른 탭/작업에서 데이터가 바뀌었을 때 편집 중인 사용자는 오래된 값을 보게 될 수 있음.
  • 권장 대안: 편집 시작 시점에 드래프트를 고정하되, 백그라운드 변경이 감지되면 사용자에게 알림을 주거나 병합/새로고침 옵션을 제공하세요.

Poem

타이머는 깔끔히 사라지고, 플래그는 단단히 박혔네,
한 줄의 eslint가 말하길, "의도였노라" ✨
저장 후 이미지 내려놓고, 편집 모드 살포시 문을 닫네 🗂️

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	raw_summary에 명시된 useModalPresence.ts와 MyInfoPage.tsx 변경사항이 이슈 #124의 범위(Husky/lint-staged 설정)와 관련이 없어 보입니다.	raw_summary에 포함된 Husky/lint-staged 설정과 무관한 훅과 페이지 파일의 변경사항을 확인하고 설명하거나 제거해야 합니다.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 Husky 및 lint-staged 기반 pre-commit 자동 검사 환경 설정과 명확하게 관련되어 있습니다.
Description check	✅ Passed	PR 설명이 템플릿의 주요 섹션을 포함하고 있으며, 작업 내용과 체크리스트가 상세하게 기술되어 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 연결 이슈 #124의 요구사항(Husky 설치, Git Hooks 연결, pre-commit 훅 설정, lint-staged 설정)을 충족합니다.

_{✏️ 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 setting/#124

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/hooks/common/useModalPresence.ts`:
- Around line 31-33: In useModalPresence (useModalPresence.ts), standardize
timeout-ref checks to use explicit !== null rather than truthy checks: change
any occurrences that test timeRef.current truthiness to timeRef.current !== null
(including the effect start) and in the cleanup after calling
window.clearTimeout(timeRef.current) set timeRef.current = null to ensure the
ref is consistently reset and future checks behave predictably.

In `@src/pages/myPage/MyInfoPage.tsx`:
- Around line 38-45: The derived "original" form (created by useMemo) can show
stale server values if you call setIsEditing(false) before the data refetch
completes; change the save flow so you await/refetch the latest server data
before turning off edit mode (i.e., call refetch() and wait for its resolution
or use the mutation response, then call setIsEditing(false)), or alternatively
update the local source used by original with the optimistic response; update
places that setIsEditing(false) (e.g., save handlers referenced around lines
shown) to only run after refetch/response to prevent briefly showing previous
values.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e246a195-c3d2-4a91-8de5-2b95e7176a1e

📥 Commits

Reviewing files that changed from the base of the PR and between b314f3b and e8f53f4.

⛔ Files ignored due to path filters (3)

• .husky/pre-commit is excluded by none and included by none
• package.json is excluded by none and included by none
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml and included by none

📒 Files selected for processing (2)

• src/hooks/common/useModalPresence.ts
• src/pages/myPage/MyInfoPage.tsx

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/myPage/MyInfoPage.tsx`:
- Around line 65-68: The onSuccess handler currently calls
setOriginalImageFile(draftImageFile) which causes the UI to prefer the local
blob over the refetched server image; instead remove that call and rely on
qc.invalidateQueries({ queryKey: ["memberInfo"] }) + the refetched
data.profileImage as the source of truth for read mode. Concretely: in the
onSuccess block (referencing setOriginalImageFile, draftImageFile,
qc.invalidateQueries, setIsEditing) stop mutating originalImageFile, or
eliminate originalImageFile state entirely and render read mode from
data.profileImage while reserving draftImageFile only for edit previews; keep
awaiting invalidateQueries and then call setIsEditing(false).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5a2a036a-5940-4bcb-869b-801f91b31964

📥 Commits

Reviewing files that changed from the base of the PR and between e8f53f4 and 9f7e6c6.

📒 Files selected for processing (2)

• src/hooks/common/useModalPresence.ts
• src/pages/myPage/MyInfoPage.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/hooks/common/useModalPresence.ts

[dew102938]

유용한 기능이네요! 동작 방식까지 정리해주셔서 이해하는 데 도움이 됐습니다 수고하셨습니다!