[refactor] 에러 처리 유틸 및 utils 구조 정리

[ff1451]

✨ 요약

- API 에러 타입/분류/메시지 해석 로직을 공통 유틸로 정리했습니다.
- 공통 API 에러 토스트 훅을 추가하고 관리자 페이지의 mutation 실패 처리에 적용했습니다.
- utils/ts, utils/hooks 내부를 error, datetime, image 등 역할별 하위 폴더로 재구성했습니다.

😎 해결한 이슈

• close [refactor] 에러 처리 유틸 및 utils 구조 정리 #245

Summary by CodeRabbit

릴리스 노트

• 버그 수정

  • 오류 발생 시 일관된 사용자 메시지 표시 및 토스트 처리 개선
  • 네트워크/타임아웃 오류만 재시도하도록 안정성 향상

• 신규 기능

  • API 오류를 중앙에서 포맷해 보여주는 전역 토스트 훅 추가

• 리팩토링

  • 오류 변환/표시 로직 중앙화로 가입, 이미지 업로드, 모집·관리 등 UI 오류 표현 통일

[coderabbitai]

Walkthrough

에러 처리 유틸과 utils 구조를 재정리하고 에러 처리 흐름을 중앙화했습니다. @/utils/ts/error/로 API 에러 타입·판별 함수(isAuthError, isServerError, isNetworkError, isTimeoutError, isCanceledError)와 메시지 포매터(getApiErrorMessages, getApiErrorMessage)를 이동·추가했고, 서버 에러 리다이렉션 경로 및 관련 임포트들이 갱신되었습니다. 또한 useApiErrorToast 훅을 추가해 여러 Manager 페이지와 컴포넌트들의 에러 토스트/메시지 표시를 일관되게 변경했으며, 일부 유틸 모듈(import) 경로를 역할별 폴더(datetime, image 등)로 옮겼습니다.

Possibly related PRs

• [feat] 404 50x 에러페이지 구현 #155: src/apis/* 및 에러 리다이렉트/처리 경로를 함께 변경하는 코드 경로를 공유합니다.
• [refactor] 관리자 페이지 리디자인 반영 #187: Manager 영역 여러 페이지의 에러/토스트 처리 변경과 직접적으로 겹치는 파일·핸들러들이 있습니다.
• [refactor] 관리자 페이지 및 마이페이지 UI 수정 및 리팩토링 #117: 토스트 인프라(ToastProvider/useToastContext) 및 에러 토스트 사용 패턴 변경과 연관되어 있습니다.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 전체 작업을 명확하게 요약하고 있으며, 에러 처리 유틸 정리 및 utils 구조 재편성이라는 핵심 변경사항을 잘 나타냅니다.
Linked Issues check	✅ Passed	PR의 모든 코드 변경사항이 linked issue #245의 요구사항을 충족합니다: API 에러 타입/분류/메시지 유틸 정리, 공통 에러 토스트 훅 추가, utils 폴더 구조 재정리가 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 에러 처리 유틸 정리 및 utils 구조 재편성의 범위 내에 있으며, 불필요한 기능 추가나 로직 변경은 없습니다.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 245-refactor-에러-처리-유틸-및-utils-구조-정리

---

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: 3

Caution

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

⚠️ Outside diff range comments (2)

src/pages/Manager/ManagedRecruitmentForm/index.tsx (1)

76-77: ⚠️ Potential issue | 🟡 Minor

patchSettings 에러 핸들링 누락

토글 변경 시 patchSettings 실패에 대한 에러 처리가 없습니다. ManagedAccount의 handleFeeEnabledChange에서도 동일하게 누락되어 있어 의도적일 수 있으나, 사용자에게 실패 피드백이 없습니다.

🛠️ 에러 핸들링 추가 제안

+ const showApiErrorToast = useApiErrorToast();
+
  const handleApplicationEnabledChange = (enabled: boolean) => {
    if (isApplicationToggleDisabled) {
      return;
    }

-   patchSettings({ isApplicationEnabled: enabled });
+   patchSettings(
+     { isApplicationEnabled: enabled },
+     { onError: (error) => showApiErrorToast(error, '설정 변경에 실패했습니다.') }
+   );
  };

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedRecruitmentForm/index.tsx` around lines 76 - 77, The
patchSettings call in ManagedRecruitmentForm (and similarly
ManagedAccount.handleFeeEnabledChange) lacks error handling on toggle; wrap the
async patchSettings call in try/catch (or handle the returned Promise) and on
failure show user-facing feedback (toast/modal or set an error state) and
optionally revert the UI toggle; reference the patchSettings invocation in
ManagedRecruitmentForm and ManagedAccount.handleFeeEnabledChange to add try {
await patchSettings(...); } catch (err) { show error to user and revert toggle }
so failures are surfaced to users.

src/pages/Manager/ManagedAccount/index.tsx (1)

97-99: ⚠️ Potential issue | 🟡 Minor

handleFeeEnabledChange도 에러 핸들링 없음

ManagedRecruitmentForm과 동일하게 토글 변경 시 에러 처리가 누락되어 있습니다. 일관성을 위해 함께 개선하는 것을 권장합니다.

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedAccount/index.tsx` around lines 97 - 99,
handleFeeEnabledChange currently calls patchSettings({ isFeeEnabled: enabled })
with no error handling; update it to mirror ManagedRecruitmentForm by awaiting
the async patchSettings call (if it returns a promise) and wrapping it in
try/catch, showing a user-facing error (e.g., toast/notification or
processLogger) on failure and restoring any optimistic UI change if necessary;
reference the handleFeeEnabledChange function and the patchSettings call so you
can add the await/try-catch and error reporting/rollback logic consistently with
ManagedRecruitmentForm.

🧹 Nitpick comments (1)

src/utils/ts/error/apiErrorMessage.ts (1)

6-6: filter(Boolean) 제거 고려

FieldError.message는 apiError.ts의 런타임 검증(Line 62)에서 string 타입이 보장됩니다. 빈 문자열 필터링 의도라면 .filter((m) => m) 또는 .filter((m) => m.trim())이 더 명시적입니다.

🤖 Prompt for AI Agents

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

In `@src/utils/ts/error/apiErrorMessage.ts` at line 6, Replace the ambiguous
.filter(Boolean) used after error.apiError.fieldErrors.map(({ message }) =>
message) with an explicit predicate: either .filter((m) => m) to remove falsy
values (if you just want to guard against undefined/null) or .filter((m) =>
m.trim()) to also strip out empty/whitespace-only strings; this change should be
applied where Array.from(new Set(...)) is built from error.apiError.fieldErrors
so it clearly reflects the intended filtering of FieldError.message (see runtime
guarantee in apiError.ts).

🤖 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/Manager/ManagedMemberList/index.tsx`:
- Around line 398-399: The useApiErrorToast hook currently detects 5xx server
errors but does not redirect to the server error page; inside useApiErrorToast
(where isServerError(error) is checked), add a call to
redirectToServerErrorPage() when isServerError(error) is true before returning
so the hook both handles and redirects on server errors; update the branch that
checks isAuthError/isServerError/isCanceledError (in useApiErrorToast) to call
redirectToServerErrorPage() for server errors to ensure all callers (e.g., the
onError handlers referencing showApiErrorToast) follow the guideline.

In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx`:
- Around line 556-559: The error fallback message incorrectly always says "모집 공고
수정에 실패했습니다." even in the create flow; update the call site that renders
getApiErrorMessage(error, '모집 공고 수정에 실패했습니다.') to choose the fallback string
based on whether existingRecruitment exists (use existingRecruitment ? '모집 공고
수정에 실패했습니다.' : '모집 공고 등록에 실패했습니다.'); adjust the JSX around error rendering that
references error, existingRecruitment, and getApiErrorMessage so the correct
localized message is passed for create vs edit flows.
- Around line 289-292: The UI toggles recruitment state before persisting; if
patchSettings({ isRecruitmentEnabled: nextRecruitmentEnabled }) fails, rollback
the local toggle in the catch block so UI matches server: after calling
showApiErrorToast(error, '모집 공고 활성화 설정에 실패했습니다.'), reset the local state back to
its previous value (e.g., call the state setter used for the recruitment toggle
with the inverse of nextRecruitmentEnabled or with a saved previous value).
Ensure this uses the same state setter that the toggle originally updated so the
switch reflects the real state when patchSettings fails.

---

Outside diff comments:
In `@src/pages/Manager/ManagedAccount/index.tsx`:
- Around line 97-99: handleFeeEnabledChange currently calls patchSettings({
isFeeEnabled: enabled }) with no error handling; update it to mirror
ManagedRecruitmentForm by awaiting the async patchSettings call (if it returns a
promise) and wrapping it in try/catch, showing a user-facing error (e.g.,
toast/notification or processLogger) on failure and restoring any optimistic UI
change if necessary; reference the handleFeeEnabledChange function and the
patchSettings call so you can add the await/try-catch and error
reporting/rollback logic consistently with ManagedRecruitmentForm.

In `@src/pages/Manager/ManagedRecruitmentForm/index.tsx`:
- Around line 76-77: The patchSettings call in ManagedRecruitmentForm (and
similarly ManagedAccount.handleFeeEnabledChange) lacks error handling on toggle;
wrap the async patchSettings call in try/catch (or handle the returned Promise)
and on failure show user-facing feedback (toast/modal or set an error state) and
optionally revert the UI toggle; reference the patchSettings invocation in
ManagedRecruitmentForm and ManagedAccount.handleFeeEnabledChange to add try {
await patchSettings(...); } catch (err) { show error to user and revert toggle }
so failures are surfaced to users.

---

Nitpick comments:
In `@src/utils/ts/error/apiErrorMessage.ts`:
- Line 6: Replace the ambiguous .filter(Boolean) used after
error.apiError.fieldErrors.map(({ message }) => message) with an explicit
predicate: either .filter((m) => m) to remove falsy values (if you just want to
guard against undefined/null) or .filter((m) => m.trim()) to also strip out
empty/whitespace-only strings; this change should be applied where
Array.from(new Set(...)) is built from error.apiError.fieldErrors so it clearly
reflects the intended filtering of FieldError.message (see runtime guarantee in
apiError.ts).

🪄 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: b36119c4-20e4-45c0-b2ed-ec610dcf056a

📥 Commits

Reviewing files that changed from the base of the PR and between f9dfaed and 3aef073.

📒 Files selected for processing (31)

• src/apis/auth/index.ts
• src/apis/client.ts
• src/apis/club/managedQueries.ts
• src/apis/studyTime/hooks.ts
• src/components/notification/hooks/useInboxNotificationStream.ts
• src/main.tsx
• src/pages/Auth/SignUp/ConfirmStep.tsx
• src/pages/Club/Application/clubFeePage.tsx
• src/pages/Manager/ManagedAccount/index.tsx
• src/pages/Manager/ManagedApplicationDetail/index.tsx
• src/pages/Manager/ManagedApplicationList/index.tsx
• src/pages/Manager/ManagedClubProfile/index.tsx
• src/pages/Manager/ManagedMemberList/index.tsx
• src/pages/Manager/ManagedRecruitmentForm/index.tsx
• src/pages/Manager/ManagedRecruitmentWrite/index.tsx
• src/pages/Manager/components/ApplicationDetailContent.tsx
• src/pages/Manager/components/DatePicker/index.tsx
• src/pages/Schedule/components/CalendarWeekRow.tsx
• src/pages/Schedule/components/ScheduleDetail.tsx
• src/pages/Timer/components/RankingItem.tsx
• src/pages/Timer/components/TimerButton.tsx
• src/utils/hooks/error/useApiErrorToast.ts
• src/utils/hooks/image/useUploadImage.ts
• src/utils/ts/datetime/calendar.ts
• src/utils/ts/datetime/date.ts
• src/utils/ts/datetime/time.ts
• src/utils/ts/error/apiError.ts
• src/utils/ts/error/apiErrorMessage.ts
• src/utils/ts/error/errorRedirect.ts
• src/utils/ts/image/imagePreprocessor.ts
• src/utils/ts/image/imagePreprocessor.worker.ts

[coderabbitai]

🧹 Nitpick comments (3)

src/pages/Manager/ManagedRecruitmentWrite/index.tsx (3)

291-294: 변수 섀도잉 개선 권장

catch 파라미터 error가 line 76의 mutation error를 섀도잉합니다. 혼동 방지를 위해 명시적인 이름을 권장합니다.

♻️ 수정 제안

-        } catch (error) {
-          showApiErrorToast(error, '모집 공고 활성화 설정에 실패했습니다.');
+        } catch (settingsError) {
+          showApiErrorToast(settingsError, '모집 공고 활성화 설정에 실패했습니다.');
           setIsRecruitmentEnabled(previousRecruitmentEnabled);
           return;
         }

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx` around lines 291 - 294,
The catch block is shadowing the mutation variable named error (declared
earlier), so rename the catch parameter to a distinct name (e.g., apiError or
err) and update its usage in the catch body (where showApiErrorToast is called)
to avoid shadowing; ensure you still call
setIsRecruitmentEnabled(previousRecruitmentEnabled) and return as before.
Reference symbols: the catch block around setIsRecruitmentEnabled,
showApiErrorToast, previousRecruitmentEnabled, and the earlier mutation variable
error — change only the catch parameter and its usage.

---

568-580: 버튼 텍스트가 생성/수정 구분 없이 항상 '수정'으로 표시됩니다

에러 메시지(line 562)와 성공 토스트(line 298)는 existingRecruitment 여부로 생성/수정을 구분하지만, 버튼 텍스트는 항상 '모집공고 수정'입니다.

♻️ 수정 제안

               {isPreparingImages
                 ? '이미지 준비 중…'
                 : isUploading
                   ? '이미지 업로드 중…'
                   : isSavingRecruitment
-                    ? '수정 중…'
-                    : '모집공고 수정'}
+                    ? (existingRecruitment ? '수정 중…' : '등록 중…')
+                    : (existingRecruitment ? '모집공고 수정' : '모집공고 등록')}

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx` around lines 568 - 580,
The submit button always shows "모집공고 수정" regardless of whether we're creating or
editing; update the button text logic to mirror the elsewhere-used
existingRecruitment check (used for error message and success toast) so it shows
creation text (e.g., "모집공고 등록" or equivalent) when existingRecruitment is falsy
and the appropriate in-progress variants when
isPreparingImages/isUploading/isSavingRecruitment are true; change the button
label rendering inside the button (the ternary chain) to first decide base
actionText = existingRecruitment ? '모집공고 수정' : '모집공고 등록' and then apply the
existing isPreparingImages/isUploading/isSavingRecruitment precedence to show
the correct in-progress strings.

---

51-79: 페이지 로직 분리 권장 (Optional)

코딩 가이드라인에 따르면 페이지별 로직은 hooks/ 하위 디렉토리로 분리해야 합니다. 현재 컴포넌트는 15개 이상의 state와 복잡한 handleSubmit 로직을 포함하고 있어, 추후 리팩토링 시 커스텀 훅으로 분리를 고려해주세요.

As per coding guidelines: "Separate page logic into page-specific hooks/ subdirectory instead of keeping it in the page component"

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx` around lines 51 - 79,
The ManagedRecruitmentWrite component contains heavy page logic and many states
(startDate, endDate, startTime, endTime, content, isRecruitmentEnabled,
isAlwaysRecruiting, images, currentImageIndex, isPreparingImages, isUploading,
hasHandledExisting, hasInitializedRecruitmentEnabled, textareaRef, fileInputRef)
and async mutations/hooks (useUploadImage, managedClubQueries.recruitment,
managedClubQueries.settings, useUpsertManagedClubRecruitmentMutation,
usePatchManagedClubSettingsMutation, useApiErrorToast, useToastContext) that
should be moved into a custom hook to follow the page-logic separation
guideline; extract this state and all related handlers (including handleSubmit,
image preparation/upload handlers, and modal controls like
isChoiceModalOpen/openChoiceModal/closeChoiceModal) into a new hook (e.g.,
useManagedRecruitmentWrite) under hooks/, return only the necessary values and
action callbacks from the hook, and refactor ManagedRecruitmentWrite to call
that hook and render UI only. Ensure the hook imports/uses the same
query/mutation hooks and preserves behavior and types so tests and consumers
remain unchanged.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx`:
- Around line 291-294: The catch block is shadowing the mutation variable named
error (declared earlier), so rename the catch parameter to a distinct name
(e.g., apiError or err) and update its usage in the catch body (where
showApiErrorToast is called) to avoid shadowing; ensure you still call
setIsRecruitmentEnabled(previousRecruitmentEnabled) and return as before.
Reference symbols: the catch block around setIsRecruitmentEnabled,
showApiErrorToast, previousRecruitmentEnabled, and the earlier mutation variable
error — change only the catch parameter and its usage.
- Around line 568-580: The submit button always shows "모집공고 수정" regardless of
whether we're creating or editing; update the button text logic to mirror the
elsewhere-used existingRecruitment check (used for error message and success
toast) so it shows creation text (e.g., "모집공고 등록" or equivalent) when
existingRecruitment is falsy and the appropriate in-progress variants when
isPreparingImages/isUploading/isSavingRecruitment are true; change the button
label rendering inside the button (the ternary chain) to first decide base
actionText = existingRecruitment ? '모집공고 수정' : '모집공고 등록' and then apply the
existing isPreparingImages/isUploading/isSavingRecruitment precedence to show
the correct in-progress strings.
- Around line 51-79: The ManagedRecruitmentWrite component contains heavy page
logic and many states (startDate, endDate, startTime, endTime, content,
isRecruitmentEnabled, isAlwaysRecruiting, images, currentImageIndex,
isPreparingImages, isUploading, hasHandledExisting,
hasInitializedRecruitmentEnabled, textareaRef, fileInputRef) and async
mutations/hooks (useUploadImage, managedClubQueries.recruitment,
managedClubQueries.settings, useUpsertManagedClubRecruitmentMutation,
usePatchManagedClubSettingsMutation, useApiErrorToast, useToastContext) that
should be moved into a custom hook to follow the page-logic separation
guideline; extract this state and all related handlers (including handleSubmit,
image preparation/upload handlers, and modal controls like
isChoiceModalOpen/openChoiceModal/closeChoiceModal) into a new hook (e.g.,
useManagedRecruitmentWrite) under hooks/, return only the necessary values and
action callbacks from the hook, and refactor ManagedRecruitmentWrite to call
that hook and render UI only. Ensure the hook imports/uses the same
query/mutation hooks and preserves behavior and types so tests and consumers
remain unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d2e382f7-9487-4ad4-9551-5361e38ae825

📥 Commits

Reviewing files that changed from the base of the PR and between 3aef073 and af94304.

📒 Files selected for processing (2)

• src/pages/Manager/ManagedRecruitmentWrite/index.tsx
• src/utils/ts/error/apiErrorMessage.ts

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

• src/utils/ts/error/apiErrorMessage.ts