[test] 커스텀 훅 테스트코드 추가 by seongwon030 · Pull Request #1081 · Moadong/moadong

seongwon030 · 2026-01-21T14:31:54Z

#️⃣연관된 이슈

ex) #1073

📝작업 내용

1. Application (useAnswers)

지원서 답변 상태 관리 로직을 검증했습니다.

주요 테스트 항목:

초기값 주입 여부에 따른 초기화
onAnswerChange: 단일/다중 답변 업데이트 및 수정
getAnswersById: 특정 질문 ID에 대한 답변 조회
예외 케이스: 빈 값, 음수 ID 처리 등

2. Header (useHeaderNavigation)

헤더 내 네비게이션 동작과 이에 따른 이벤트 트래킹을 검증했습니다.

주요 테스트 항목:

각 메뉴(홈, 소개, 동아리연합회, 관리자) 클릭 시 올바른 경로 이동 확인
이동 시 적절한 Mixpanel 이벤트 전송 여부 확인
홈 버튼 클릭 시 검색어 초기화 로직 확인

3. Mixpanel (useMixpanelTrack, useTrackPageView)

데이터 분석을 위한 이벤트 트래킹 로직을 검증했습니다.

useMixpanelTrack

기본 이벤트 및 커스텀 속성 전송 확인
공통 메타데이터(timestamp, url, distinct_id) 자동 주입 확인

useTrackPageView

페이지 방문(Visited) 이벤트 전송 확인 (referrer, clubName 포함)
체류 시간(Duration) 측정 로직 확인 (언마운트, 탭 전환, 브라우저 종료 시점)
중복 트래킹 방지 및 시간 계산 정확도 검증

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

기능 제거
- 패치 노트 버튼 기능이 제거되었습니다.
테스트
- 여러 핵심 기능에 대한 포괄적인 테스트 커버리지를 추가했습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- 초기 데이터 유무에 따른 초기화 로직 테스트 - 단일 및 다중 답변 업데이트(onAnswerChange) 검증 - ID 기반 답변 조회(getAnswersById) 기능 테스트 - 단일/다중 답변 전환 등 복합 시나리오 테스트 - 빈 문자열, 0 또는 음수 ID 등 엣지 케이스 검증

- 홈, 소개, 동아리연합회, 관리자 페이지 등 각 버튼 클릭 시 올바른 경로 이동 검증 - Mixpanel 이벤트 전송 및 속성(device_type 등) 확인 - 홈 버튼 클릭 시 검색 상태(useSearchStore) 초기화 확인 - react-router-dom, useMixpanelTrack, useSearchStore 모킹 처리

- 기본 이벤트 트래킹 및 커스텀 속성 전달 검증 - distinct_id, timestamp, url 등 자동 추가 속성 확인 - 다양한 데이터 타입(배열, 객체 등) 및 엣지 케이스 처리 테스트 - mixpanel-browser 모킹 및 함수 참조 안정성 검증

- 페이지 방문(Visited) 및 체류 시간(Duration) 트래킹 로직 검증 - clubName, referrer 등 메타데이터 포함 여부 및 skip 옵션 테스트 - visibilitychange, beforeunload 등 다양한 종료 시점에서의 체류 시간 전송 확인 - 속성 변경에 따른 재트래킹 및 이벤트 리스너 cleanup 검증

vercel · 2026-01-21T14:31:59Z

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

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 21, 2026 2:31pm

coderabbitai · 2026-01-21T14:32:21Z

Warning

`.coderabbit.yaml` has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

개요

커스텀 훅들에 대한 포괄적인 테스트 스위트를 추가하고, useHeaderNavigation 훅에서 패치 노트 네비게이션 기능을 제거했습니다. 테스트 커버리지는 초기화, 상태 업데이트, 엣지 케이스, 복잡한 시나리오를 포함합니다.

변경사항

집단 / 파일(들)	변경 요약
헤더 네비게이션 훅 `frontend/src/hooks/Header/useHeaderNavigation.ts`, `frontend/src/hooks/Header/useHeaderNavigation.test.ts`	useHeaderNavigation 훅의 패치 노트 클릭 핸들러 제거 및 종합 테스트 스위트 추가. 홈 버튼, 소개/클럽유니온/어드민 네비게이션, Mixpanel 이벤트 추적, 반응형 디바이스 타입 분류(700px 기준) 검증 포함.
답변 훅 테스트 `frontend/src/hooks/Application/useAnswers.test.ts`	useAnswers 훅에 대한 298줄의 테스트 스위트 추가. 초기화, 단일/다중 값 업데이트, 검색 및 엣지 케이스(빈 문자열, id 0, 음수) 포함.
Mixpanel 추적 훅 테스트 `frontend/src/hooks/Mixpanel/useMixpanelTrack.test.ts`, `frontend/src/hooks/Mixpanel/useTrackPageView.test.ts`	Mixpanel 추적 기능에 대한 종합 테스트 스위트 추가. useMixpanelTrack: 기본 이벤트 추적, 자동 속성(distinct_id, timestamp, URL) 추가, 커스텀 속성 병합 검증. useTrackPageView: 페이지 방문 추적, 체류 시간 측정, 라우트 변경 시 재추적, 리스너 정리 및 경계값 처리 포함.

예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~12 분

추천 리뷰어

lepitaaar
oesnuj
suhyun113

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	PR이 MOA-537의 목표인 커스텀 훅 테스트 코드 추가를 충족합니다. useAnswers, useHeaderNavigation, useMixpanelTrack, useTrackPageView 등 네 개 훅에 대한 포괄적인 테스트 수트가 추가되었습니다.
Out of Scope Changes check	✅ Passed	useHeaderNavigation.ts의 패치노트 핸들러 제거는 테스트 추가 목표와 직접 관련되어 있으며, 테스트 파일의 제거된 기능을 반영하는 범위 내 변경입니다.
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.
Title check	✅ Passed	제목은 PR의 주요 목적인 '커스텀 훅 테스트코드 추가'를 명확하게 요약하며, 변경사항의 핵심을 정확히 설명합니다.

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

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/#1073-custom-hook-test-code-MOA-537

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

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

suhyun113

수고하셨어요~ 테스트 격리의 중요성을 좀 더 알게된것 같슴다

frontend/src/hooks/Header/useHeaderNavigation.test.ts

suhyun113 · 2026-02-03T07:52:59Z

frontend/src/hooks/Application/useAnswers.test.ts

+      act(() => {
+        result.current.onAnswerChange(1, '첫 번째 답변');


훅의 상태 변경에서 act를 명시적으로 사용한 이유가 있을까요?

RTL에서 act()는 컴포넌트의 상태 업데이트가 완전히 처리되고 DOM에 반영될 때까지 기다립니다. onAnswerChange는 내부적으로 useState로 상태를 변경하는데 상태 변경이 비동기적으로 처리될 수 있기 때문에 act()를 사용했습니다

frontend/src/hooks/Header/useHeaderNavigation.test.ts

seongwon030 added 5 commits January 21, 2026 23:26

refactor: 패치노트 핸들러함수제거

ca86901

seongwon030 requested review from lepitaaar, oesnuj and suhyun113 January 21, 2026 14:31

seongwon030 self-assigned this Jan 21, 2026

seongwon030 added ✅ Test test 관련(storybook, jest...) 💻 FE Frontend labels Jan 21, 2026

seongwon030 changed the title ~~[Test] 커스텀 훅 테스트코드 추가~~ [test] 커스텀 훅 테스트코드 추가 Feb 3, 2026

suhyun113 approved these changes Feb 3, 2026

View reviewed changes

seongwon030 merged commit f90caef into develop-fe Feb 3, 2026
3 checks passed

seongwon030 deleted the feature/#1073-custom-hook-test-code-MOA-537 branch February 3, 2026 15:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[test] 커스텀 훅 테스트코드 추가#1081

[test] 커스텀 훅 테스트코드 추가#1081
seongwon030 merged 5 commits intodevelop-fefrom
feature/#1073-custom-hook-test-code-MOA-537

seongwon030 commented Jan 21, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Jan 21, 2026

Uh oh!

coderabbitai bot commented Jan 21, 2026 •

edited

Loading

`.coderabbit.yaml` has a parsing error

Uh oh!

suhyun113 left a comment

Uh oh!

Uh oh!

suhyun113 Feb 3, 2026

Uh oh!

seongwon030 Feb 3, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

		act(() => {
		result.current.onAnswerChange(1, '첫 번째 답변');

Conversation

seongwon030 commented Jan 21, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣연관된 이슈

📝작업 내용

1. Application (useAnswers)

2. Header (useHeaderNavigation)

3. Mixpanel (useMixpanelTrack, useTrackPageView)

중점적으로 리뷰받고 싶은 부분(선택)

논의하고 싶은 부분(선택)

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel bot commented Jan 21, 2026

Uh oh!

coderabbitai bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

.coderabbit.yaml has a parsing error

개요

변경사항

예상 코드 리뷰 노력

관련 PR

추천 리뷰어

Uh oh!

suhyun113 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

suhyun113 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

seongwon030 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

seongwon030 commented Jan 21, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 21, 2026 •

edited

Loading

`.coderabbit.yaml` has a parsing error