Skip to content

Comments

[Fix] 지원자 페이지 새로고침 에러 해결#1225

Merged
seongwon030 merged 3 commits intodevelop-fefrom
fix/#1224-application-page-error-MOA-671
Feb 21, 2026
Merged

[Fix] 지원자 페이지 새로고침 에러 해결#1225
seongwon030 merged 3 commits intodevelop-fefrom
fix/#1224-application-page-error-MOA-671

Conversation

@seongwon030
Copy link
Member

@seongwon030 seongwon030 commented Feb 21, 2026

#️⃣연관된 이슈

ex) #1224

📝작업 내용

에러 상황&원인

2026-02-22.12.24.22.mov

지원자 페이지 새로고침 시 지원자 데이터가 불러오지 않는 문제가 있었습니다.

원인은 applicationData를 Context api 기반인 adminContext에서 가져오기 때문에 새로고침 시 데이터가 null이 되는 것이었습니다.

해결

지원자 데이터를 tanstack훅인 useGetApplicants에서 직접 fetch하도록 했습니다.

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

  • 개선 사항

    • 신청자 목록 데이터 로드와 오류 처리 개선으로 상세보기 로딩이 더 안정적이고 명확해짐
    • 신청자 탐색 및 선택 동작의 안정성 향상
  • 코드 정리

    • 불필요한 임포트 및 사용되지 않는 코드 제거로 코드베이스 간결화

@seongwon030 seongwon030 self-assigned this Feb 21, 2026
@seongwon030 seongwon030 added 💻 FE Frontend 🛠Fix 기능이 의도한 대로 동작하지 않는 버그를 수정 labels Feb 21, 2026
@vercel
Copy link

vercel bot commented Feb 21, 2026

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

Project Deployment Actions Updated (UTC)
moadong Ready Ready Preview, Comment Feb 21, 2026 3:40pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 21, 2026

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

Walkthrough

ApplicantDetailPage가 applicants 데이터 소스를 useAdminClubContext에서 새로 추가된 useGetApplicants(applicationFormId) 훅으로 변경되었고, 로딩/에러 처리를 분리 및 조정했습니다. ApplicantsListTab에서는 불필요한 React 기본 및 기타 임포트를 제거했습니다.

Changes

Cohort / File(s) Summary
ApplicantDetailPage — 데이터 소스 전환
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx
useGetApplicants(applicationFormId) 도입으로 applicantsData를 새 훅에서 가져오도록 변경. useUpdateApplicant는 유지. applicants 관련 로딩/에러 플래그 분리(isApplicantsLoading, isApplicantsError) 및 early-return 조건과 navigation/selection 인덱스 계산을 새 데이터 소스로 전환.
Import 정리 — ApplicantsListTab
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.tsx
React 기본 import React 제거 및 사용하지 않는 useQueryClient, updateApplicationStatus 임포트 삭제 (런타임 동작 변경 없음).

Sequence Diagram(s)

(해당 변경은 컴포넌트 내부 데이터 소스 변경 및 간단한 로직 조정에 그치므로 시퀀스 다이어그램을 생략합니다.)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

🐞 Bug

Suggested reviewers

  • lepitaaar
  • oesnuj
  • suhyun113
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 PR의 주요 변경사항을 명확하게 반영하고 있습니다. '지원자 페이지 새로고침 에러 해결'은 새로고침 시 데이터가 로드되지 않는 문제를 해결한 핵심 내용을 정확히 설명합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/#1224-application-page-error-MOA-671

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.

Copy link
Contributor

@lepitaaar lepitaaar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

작업수고하셨습니다. 상위컴포넌트에서 지원자 응답을 fetch후 컨텍스트로 내려주고있었던건간요?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx (1)

56-56: applicationFormId ?? undefined 표현식이 중복됩니다

useParams가 이미 string | undefined를 반환하므로 applicationFormId ?? undefined는 항등식입니다. 56번째 줄과 69번째 줄 모두 해당됩니다.

♻️ 제안하는 수정 방법
-  const { data: applicantsData } = useGetApplicants(
-    applicationFormId ?? undefined,
-  );
+  const { data: applicantsData } = useGetApplicants(applicationFormId);
-  const { mutate: updateApplicant } = useUpdateApplicant(
-    applicationFormId ?? undefined,
-  );
+  const { mutate: updateApplicant } = useUpdateApplicant(applicationFormId);

Also applies to: 69-69

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`
at line 56, The expression "applicationFormId ?? undefined" is redundant because
useParams already returns string | undefined; remove the "?? undefined" and pass
applicationFormId directly wherever it's used (both occurrences in
ApplicantDetailPage — e.g., the prop/argument that currently uses
applicationFormId ?? undefined and the second occurrence further down). Ensure
any function calls or props (references to applicationFormId) accept the
existing type and update them to use applicationFormId without the
nullish-coalescing fallback.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`:
- Around line 55-57: Destructure and use the loading/error flags from
useGetApplicants and reorder the guard checks in ApplicantDetailPage so that
loading is handled before the "no data" message: update the call to
useGetApplicants(...) to also pull out isLoading and isError, then in the render
flow check applicantsIsLoading first and show the spinner, then check
applicantsIsError to show an error message, and only after those checks use
!applicantsData to render the "no data" state; apply the same pattern where
useGetApplicants is used alongside useGetApplication (formData) to ensure each
hook's loading/error state is respected independently.

---

Nitpick comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`:
- Line 56: The expression "applicationFormId ?? undefined" is redundant because
useParams already returns string | undefined; remove the "?? undefined" and pass
applicationFormId directly wherever it's used (both occurrences in
ApplicantDetailPage — e.g., the prop/argument that currently uses
applicationFormId ?? undefined and the second occurrence further down). Ensure
any function calls or props (references to applicationFormId) accept the
existing type and update them to use applicationFormId without the
nullish-coalescing fallback.

@seongwon030
Copy link
Member Author

작업수고하셨습니다. 상위컴포넌트에서 지원자 응답을 fetch후 컨텍스트로 내려주고있었던건간요?

네네 그러합니다 정확히 말하자면 상위 컴포넌트는 아니고 다른 페이지에서 fetch 합니다

@seongwon030 seongwon030 merged commit fd45e78 into develop-fe Feb 21, 2026
3 of 4 checks passed
@seongwon030 seongwon030 deleted the fix/#1224-application-page-error-MOA-671 branch February 21, 2026 15:41
@seongwon030 seongwon030 linked an issue Feb 21, 2026 that may be closed by this pull request
2 tasks
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx (1)

167-171: ⚠️ Potential issue | 🟡 Minor

answers 배열에 대한 런타임 에러 가능성

a.answers[0].valueanswers가 빈 배열인 지원자가 존재할 경우 TypeError: Cannot read properties of undefined를 발생시킵니다.

🛡️ 제안하는 수정 방법
-              {a.answers[0].value}
+              {a.answers[0]?.value ?? '(이름 없음)'}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`
around lines 167 - 171, The map over applicantsData.applicants in
ApplicantDetailPage accesses a.answers[0].value which will throw if answers is
empty; update the mapping in the component to safely access the first answer
(use optional chaining like a.answers?.[0]?.value) and provide a sensible
fallback label (e.g., 'No answer' or empty string) so the <option> text never
reads from undefined while keeping the option key/value as a.id.
🧹 Nitpick comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx (1)

54-54: clubId! 비-null 단언 사용에 대한 개선 고려

useAdminClubContext가 컨텍스트 미존재 시 예외를 던지므로 clubId는 런타임에 항상 존재하지만, clubId!는 TypeScript의 타입 검사를 우회합니다. 추후 로그인 연동으로 clubId가 동적으로 로드되는 방식으로 변경될 예정이므로(retrieved learning 참조), 이때 clubId가 비동기적으로 undefined인 순간이 생기면 useGetApplicationundefined가 전달될 수 있습니다.

applicationFormId와 동일하게 clubId 가드를 추가하는 것을 고려해보세요.

♻️ 제안하는 수정 방법
+ if (!clubId) {
+   return <div>클럽 정보를 불러올 수 없습니다.</div>;
+ }
  if (!applicationFormId) {
    return <div>지원서 정보를 불러올 수 없습니다.</div>;
  }
  const {
    data: formData,
    isLoading,
    isError,
- } = useGetApplication(clubId!, applicationFormId ?? undefined);
+ } = useGetApplication(clubId, applicationFormId ?? undefined);

Based on learnings: "AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다."

Also applies to: 69-69

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`
at line 54, 현재 ApplicantDetailPage에서 useAdminClubContext()로 가져온 clubId를 non-null
단언자로 우회하고 있는데, clubId가 비동기적으로 undefined가 될 수 있으므로 useGetApplication 호출(및 관련 로직)
전에 clubId 존재를 검사하도록 수정하세요: ApplicantDetailPage에서 useAdminClubContext와
useGetApplication 호출부를 찾아 clubId가 정의된 경우에만 useGetApplication을 호출하거나(예:
conditional hook usage 패턴으로 대체) 컴포넌트 렌더에서 clubId가 없을 땐 로딩/빈 상태를 반환하도록 추가 가드를 넣어
applicationFormId와 동일한 방식으로 안전하게 처리합니다.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`:
- Around line 167-171: The map over applicantsData.applicants in
ApplicantDetailPage accesses a.answers[0].value which will throw if answers is
empty; update the mapping in the component to safely access the first answer
(use optional chaining like a.answers?.[0]?.value) and provide a sensible
fallback label (e.g., 'No answer' or empty string) so the <option> text never
reads from undefined while keeping the option key/value as a.id.

---

Duplicate comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`:
- Around line 55-59: The destructuring of useGetApplicants into
data/isLoading/isError and the corrected guard order (loading → applicants error
→ null applicants → formData error → null formData → null applicant) has been
fixed for the first occurrence; apply the identical fix to the second occurrence
referenced (lines 104-110) by updating that useGetApplicants call to destructure
isLoading and isError into isApplicantsLoading/isApplicantsError and reorder the
conditional guards in the same sequence as in ApplicantDetailPage
(useGetApplicants, applicantsData, applicationFormId, formData, and the null
applicant checks) so both spots behave consistently.

---

Nitpick comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx`:
- Line 54: 현재 ApplicantDetailPage에서 useAdminClubContext()로 가져온 clubId를 non-null
단언자로 우회하고 있는데, clubId가 비동기적으로 undefined가 될 수 있으므로 useGetApplication 호출(및 관련 로직)
전에 clubId 존재를 검사하도록 수정하세요: ApplicantDetailPage에서 useAdminClubContext와
useGetApplication 호출부를 찾아 clubId가 정의된 경우에만 useGetApplication을 호출하거나(예:
conditional hook usage 패턴으로 대체) 컴포넌트 렌더에서 clubId가 없을 땐 로딩/빈 상태를 반환하도록 추가 가드를 넣어
applicationFormId와 동일한 방식으로 안전하게 처리합니다.

@coderabbitai coderabbitai bot mentioned this pull request Feb 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💻 FE Frontend 🛠Fix 기능이 의도한 대로 동작하지 않는 버그를 수정

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[fix] MOA-671 지원자 페이지 새로고침 시 에러를 해결한다

2 participants