Skip to content

✨ 리크루팅 지원 화면 UI/UX 개선 - #193

Merged
SeohyunLilyChoi merged 15 commits into
mainfrom
feat/recruiting-apply-ui
Aug 7, 2026
Merged

SeohyunLilyChoi merged 15 commits into
mainfrom
feat/recruiting-apply-ui

Conversation

@honeyyyoon

Copy link
Copy Markdown
Contributor

요약

리크루팅 지원 화면(대시보드·자기소개서·문제 풀이·결과)의 UI/UX를 개선하고, 그 과정에서 발견한 버그를 함께 수정했습니다.

변경 내역

  • 메인 리크루팅 대시보드
    • 지원하기 버튼: '최종 제출하기'로 변경하고 카드 목록 아래로 이동, 크기 키움 → 이젠못누르는일이없겠지
    • 마감 여부와 지원 여주에 따라 4가지 상태로 분기
      • 마감 전 · 미지원 → 최종 제출하기
      • 마감 전 · 지원완료 → 최종 제출 완료(비활성) + 지원 취소
      • 마감 후 · 지원완료 → 지원 결과 확인하기
      • 마감 후 · 미지원 → "지원이 마감되었습니다." 안내
    • 지원 취소가 이상한 위치에 있었던 문제 수정. 버튼으로 변경
    • applied 데이터 소스 통일
    • 최종 제출 시 확인 모달 추가
    • 안 쓰는 주석 제거 및 반응형 추가
  • 문제 풀이 창
    • 상단바에 문제 간 이동 탭 추가. 채점 상태(미제출/채점 중/정답/오답)를 점 색으로 표시.
    • 제출 중인 문제는 서버 응답과 무관하게 즉시 채점 중으로 표시하고, 채점 종료 후 결과를 재조회
    • 제출하기 옆에 "지원 페이지에서 최종 제출하기 버튼을 눌러야 지원이 완료됩니다" 안내 추가. → 이젠지원하기안누르는일이없겠지
    • 콘솔 내 오류를 빨간색으로 구분, 긴 메시지 줄바꿈 처리, 반응형 추가
  • 자기소개서
    • 임시저장·제출하기를 저장하기 하나로 통합.
    • 카드 문구 변경: 제출 완료 → 저장 완료, 미제출 → 작성 전
  • 결과
    • 불합격 화면의 기수를 하드코딩(23.5기 루키/디자이너)에서 recruiting.name으로 대체.
    • 오리엔테이션 일정을 ORIENTATION_DATE 상수로 분리 (src/common/const.ts)
    • 슬랙 → 디스코드 표기 변경 (자기소개서 입력 라벨, 합격 안내, 프로그래머스 안내)
  • 공통
    • 브라우저 기본 alert()·confirm()을 ConfirmModal·AlertModal로 교체. 기존 Modal 컴포넌트를 그대로 활용했습니다
    • resolveApiErrorMessage 추가 - 서버 오류 메시지 추출 + 네트워크 장애 분기.
    • 카드를
    • 에서 로 변경해 키보드(Tab)로 접근 가능하게 수정. 라벨 없는 빈 버튼도 장식 요소로 정리
    • 리크루팅 페이지 헤더 개선
  • 버그 수정
    • 포트폴리오 링크 입력이 즉시 지워지던 문제 - 의존성 버그 개선
    • 마크다운 굵게·기울임이 적용되지 않던 문제 - styled-reset이 strong·em에 font: inherit을 적용해 무력화하는 문제
    • CSS 값에 따옴표가 포함되어 무시되던 스타일 — background: "#fff" 형태로 작성되어 자기소개서·포트폴리오 카드의 hover가 동작하지 않았던 문제
    • 파일 선택 후 input 값을 초기화하지 않아 같은 파일을 연속 선택하면 무시되던 문제

체크리스트

  • pre-commit 통과
  • PR Assignees 추가
  • PR Labels 추가

기타 질문 및 공유 사항 (Optional)

@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 82b115be-3505-4577-a577-ed1bb19b7656

📥 Commits

Reviewing files that changed from the base of the PR and between a6c2f4a and 2f5a00c.

📒 Files selected for processing (4)
  • src/apis/problem/problem.types.ts
  • src/components/rookie/Progress/PortfolioCard.tsx
  • src/components/solve/ProblemDescription/ProblemDescription.tsx
  • src/lib/MarkdownRenderer.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/components/solve/ProblemDescription/ProblemDescription.tsx
  • src/lib/MarkdownRenderer.tsx
  • src/components/rookie/Progress/PortfolioCard.tsx

📝 Walkthrough

Walkthrough

지원 제출, 이력서 저장, 포트폴리오 파일 작업에 확인·알림 모달을 적용했습니다. 문제 풀이에는 문제 탭과 스트리밍 채점 오류 처리를 추가했습니다. 헤더, 진행 카드, Markdown 표시를 반응형 및 접근성 기준에 맞게 조정했습니다.

Changes

사용자 흐름 개선

Layer / File(s) Summary
공통 모달 및 오류 처리
src/components/Modal/*.tsx, src/lib/apiErrorMessage.ts
접근성 속성을 포함한 알림·확인 모달과 API 오류 메시지 변환 함수를 추가했습니다.
대시보드 지원 처리
src/pages/Dashboard.tsx, src/pages/Loader/DashboardLoader.ts
지원 제출·취소 확인, 처리 중 상태, 오류 표시, 쿼리 무효화 및 모집 상태별 화면을 추가했습니다.
이력서 및 포트폴리오 저장 흐름
src/pages/Resume.tsx, src/components/rookie/Progress/PortfolioCard.tsx
브라우저 기본 대화상자를 모달로 교체했습니다. 파일 교체·삭제를 확인 후 실행하고 오류를 알림 모달로 표시합니다.
문제 풀이 및 채점 흐름
src/pages/SolveV2.tsx, src/components/solve/ProblemTabs.tsx, src/components/solve/TestResultConsoleV2.tsx
문제 탭과 초기화 확인을 추가했습니다. 제출·스트리밍 채점 오류를 화면에 표시하고 결과 항목의 줄바꿈을 적용했습니다.
진행 카드 탐색
src/components/rookie/Progress/*
카드 전체를 Link로 변경했습니다. 모바일 너비, 키보드 포커스, 상태 설명 및 목록 줄바꿈을 조정했습니다.
콘텐츠 및 공통 반응형 UI
src/GlobalStyles.tsx, src/components/home/Header/Header.tsx, src/components/solve/ProblemDescription/ProblemDescription.tsx, src/lib/MarkdownRenderer.tsx, src/pages/Result.tsx, src/common/const.ts, src/apis/member/member.api.ts, package.json
전역 텍스트와 Markdown 표시를 조정했습니다. 헤더와 문제 설명에 반응형·접근성 스타일을 추가했습니다. 안내 문구와 언어 코드를 변경하고 결과 정보를 동적으로 표시했습니다. 회원 API에 BASE_URL을 적용하고 remark-breaks를 추가했습니다.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Dashboard
  participant ConfirmModal
  participant ApplicationAPI
  participant QueryClient
  Dashboard->>ConfirmModal: 지원 제출 확인 요청
  ConfirmModal->>Dashboard: 확인 콜백 실행
  Dashboard->>ApplicationAPI: 지원 제출 요청
  ApplicationAPI-->>Dashboard: 성공 또는 오류 응답
  Dashboard->>QueryClient: 관련 쿼리 무효화
Loading
sequenceDiagram
  participant SolveV2
  participant ProblemTabs
  participant SubmissionAPI
  participant TestResultConsoleV2
  SolveV2->>ProblemTabs: 문제 목록과 상태 전달
  SolveV2->>SubmissionAPI: 코드 제출 요청
  SubmissionAPI-->>SolveV2: 스트리밍 채점 결과 전달
  SolveV2->>TestResultConsoleV2: 결과 및 오류 렌더링
Loading

Possibly related PRs

Suggested reviewers: seohyunlilychoi

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
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 (4 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 리크루팅 지원 화면의 주요 UI/UX 개선 내용을 간결하고 명확하게 요약합니다.
Description check ✅ Passed 요약, 변경 내역, 체크리스트 및 선택 항목이 템플릿에 맞게 작성되어 변경 내용과 범위를 충분히 설명합니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/recruiting-apply-ui

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.

@honeyyyoon honeyyyoon changed the title ✨ 리크루팅 페이지 ✨ 리크루팅 지원 화면 UI/UX 개선 Aug 6, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 4

🧹 Nitpick comments (7)
src/pages/Dashboard.tsx (1)

190-192: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

오류 메시지 영역이 polite live region을 사용합니다. 두 화면 모두 API 오류 문구를 role="status"로 노출합니다. role="status"는 낮은 우선순위로 전달되므로 제출 실패와 채점 실패가 즉시 안내되지 않습니다.

  • src/pages/Dashboard.tsx#L190-L192: ErrorTextrolealert로 변경하세요.
  • src/pages/SolveV2.tsx#L230-L232: ErrorTextrolealert로 변경하세요. NoticeText는 현재 role이 없으므로 변경하지 마세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/Dashboard.tsx` around lines 190 - 192, Change the ErrorText role
from status to alert in src/pages/Dashboard.tsx lines 190-192 and
src/pages/SolveV2.tsx lines 230-232 so API errors are announced immediately;
leave NoticeText unchanged.
src/pages/SolveV2.tsx (1)

248-253: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

주석 처리된 버튼 코드를 제거하세요.

테스트 실행 버튼이 주석으로 남아 있습니다. 이 코드는 실행되지 않습니다. 기능을 되살릴 계획이 없으면 삭제하세요.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/SolveV2.tsx` around lines 248 - 253, Remove the commented-out
SubmitButton block in SolveV2, including its onClick, disabled, and label
markup; do not alter the active submission flow.
src/lib/apiErrorMessage.ts (1)

3-11: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

비-Response 오류에서 fallback이 무시됩니다.

호출부는 상황별 fallback 문구를 전달합니다. 그러나 오류가 Response가 아니면 항상 네트워크 오류 문구가 반환됩니다. SolveV2.tsx의 스트리밍 파싱 오류나 unreachable() 예외처럼 네트워크와 무관한 오류도 "네트워크 연결을 확인한 뒤 다시 시도해주세요."로 표시됩니다. 실제 오프라인 상태만 네트워크 문구로 처리하고, 나머지는 fallback을 사용하세요.

♻️ 제안 변경
 export async function resolveApiErrorMessage(error: unknown, fallback: string) {
-  if (!(error instanceof Response)) return NETWORK_ERROR_MESSAGE;
+  if (!(error instanceof Response)) {
+    if (typeof navigator !== "undefined" && navigator.onLine === false) {
+      return NETWORK_ERROR_MESSAGE;
+    }
+    return error instanceof TypeError ? NETWORK_ERROR_MESSAGE : fallback;
+  }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/apiErrorMessage.ts` around lines 3 - 11, Update
resolveApiErrorMessage so non-Response errors return the provided fallback
instead of always returning NETWORK_ERROR_MESSAGE. Preserve the network-error
message only for errors that represent an actual offline/network failure, while
retaining the existing Response detail parsing and fallback behavior.
src/components/Modal/ConfirmModal.tsx (2)

19-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

신규 모달 두 개가 설명 텍스트를 접근성 트리에 연결하지 않습니다. 두 컴포넌트 모두 aria-labelledby로 제목만 연결하고 aria-describedby를 지정하지 않습니다. alertdialog는 본문 낭독을 보장하지 않으므로 스크린리더 사용자가 설명을 듣지 못합니다.

  • src/components/Modal/ConfirmModal.tsx#L19-L25: Dialogaria-describedby="confirm-description"을 추가하고, Descriptionid="confirm-description"을 지정하세요.
  • src/components/Modal/AlertModal.tsx#L15-L17: description이 있을 때만 Dialogaria-describedby="alert-description"을 추가하고, Descriptionid="alert-description"을 지정하세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Modal/ConfirmModal.tsx` around lines 19 - 25, Connect each
modal’s description to its alert dialog for screen-reader announcements: in
src/components/Modal/ConfirmModal.tsx lines 19-25, add
aria-describedby="confirm-description" to Dialog and id="confirm-description" to
Description; in src/components/Modal/AlertModal.tsx lines 15-17, conditionally
add aria-describedby="alert-description" only when description exists and assign
id="alert-description" to Description.

26-33: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

파괴적 동작에서 autoFocus 위치를 재검토하세요.

이 모달은 지원 취소하기, 삭제하기, 교체하기, 초기화하기에 사용됩니다. 확인 버튼에 초기 포커스를 주면 사용자가 Enter를 연속 입력할 때 되돌릴 수 없는 동작이 즉시 실행됩니다. 초기 포커스를 CloseButton으로 옮기세요.

♻️ 제안 변경
-        <CloseButton type="button" onClick={onClose}>
+        <CloseButton type="button" onClick={onClose} autoFocus>
           닫기
         </CloseButton>
-        <ConfirmButton type="button" onClick={onConfirm} autoFocus>
+        <ConfirmButton type="button" onClick={onConfirm}>
           {confirmLabel}
         </ConfirmButton>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Modal/ConfirmModal.tsx` around lines 26 - 33, ConfirmModal의 버튼
포커스 기본값을 파괴적 동작이 실행되지 않도록 변경하세요. ConfirmButton의 autoFocus를 제거하고 CloseButton에 적용해
모달 열림 후 Enter 입력이 닫기 동작을 기본으로 수행하도록 하며, onConfirm과 confirmLabel 동작은 유지하세요.
src/components/solve/ProblemTabs.tsx (1)

46-50: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Nav에 라벨을 추가하고, HiddenText의 위치 기준을 고정하세요.

두 가지 개선 사항이 있습니다.

  • Navaria-label이 없습니다. 스크린리더가 이 내비게이션을 구분하지 못합니다.
  • HiddenTextposition: absolute를 사용합니다. Tabposition: relative가 없으므로 배치 기준이 조상 요소로 올라갑니다.
♻️ 제안 변경
-    <Nav>
+    <Nav aria-label="문제 목록">
 const Tab = styled(Link)<{ $current: boolean }>`
+  position: relative;
   display: inline-flex;

Also applies to: 115-119, 148-150

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/solve/ProblemTabs.tsx` around lines 46 - 50, Update the Nav
elements in ProblemTabs to include a descriptive aria-label for screen-reader
identification, and add position: relative to the Tab styling or component so
HiddenText’s absolute positioning is anchored to each tab rather than an
ancestor.
src/pages/Resume.tsx (1)

17-17: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

afterClose는 닫힘 완료 전에 실행되고, 현재 사용처가 없습니다.

useModalscloseModalclosingTime 후에 상태를 closed로 전환합니다. closeAlertcloseModal() 직후 afterClose를 실행하므로 닫기 애니메이션 완료 전에 콜백이 실행됩니다. 또한 Alert.afterClose를 전달하는 호출부가 이 파일에 없습니다. 필드를 제거하거나, useModalsafterClosed 인자로 연결하세요.

Also applies to: 35-38

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/Resume.tsx` at line 17, Remove the unused Alert.afterClose field
and its related handling in closeAlert. Do not invoke an after-close callback
immediately after closeModal; preserve the existing modal close flow without
callback behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/rookie/Progress/PortfolioCard.tsx`:
- Around line 101-111: Update replaceFile to avoid deleting the existing
portfolio before confirming the replacement upload can succeed. First verify
whether postPortfolioFile can add the target without removing previousId; if
supported, call postPortfolioFile first and deletePortfolioFile(previousId) only
after a successful upload, preserving the existing error handling and
refetchFiles flow.

In `@src/components/rookie/UserInfoForm/UserInfoForm.tsx`:
- Line 46: Discord invitation email field naming is inconsistent with the
invitation API contract. Update the field name and type key used by
UserInfoForm.tsx (line 46), ProgrammerRecruitInfo.tsx (lines 15-19), and
Result.tsx (lines 68-71) to the canonical Discord email identifier, and update
the submission mapping so the value is sent under the matching invitation key
instead of slack_email.

In `@src/pages/Dashboard.tsx`:
- Around line 45-48: Update the isClosed calculation in Dashboard so it also
treats recruiting.is_active === false as closed, matching the is_active and
to_date criteria used by DashboardLoader. Preserve the existing expiration check
for active recruitments whose to_date has passed, ensuring inactive recruitments
cannot appear open or expose the final submission button.

In `@src/pages/Resume.tsx`:
- Around line 130-141: Resume의 SubmitButton 저장 실패 처리에서 모든 오류를 마감 메시지로 표시하지 않도록
수정하세요. `resolveApiErrorMessage`를 import하고, `submit`의 `onError`에서 전달받은 API 오류를 해당
함수로 변환해 `openAlert`의 description 또는 적절한 메시지로 표시하세요. 모집 마감 오류에 대해서는 기존 "모집이
마감되었습니다." 안내를 유지하세요.

---

Nitpick comments:
In `@src/components/Modal/ConfirmModal.tsx`:
- Around line 19-25: Connect each modal’s description to its alert dialog for
screen-reader announcements: in src/components/Modal/ConfirmModal.tsx lines
19-25, add aria-describedby="confirm-description" to Dialog and
id="confirm-description" to Description; in src/components/Modal/AlertModal.tsx
lines 15-17, conditionally add aria-describedby="alert-description" only when
description exists and assign id="alert-description" to Description.
- Around line 26-33: ConfirmModal의 버튼 포커스 기본값을 파괴적 동작이 실행되지 않도록 변경하세요.
ConfirmButton의 autoFocus를 제거하고 CloseButton에 적용해 모달 열림 후 Enter 입력이 닫기 동작을 기본으로
수행하도록 하며, onConfirm과 confirmLabel 동작은 유지하세요.

In `@src/components/solve/ProblemTabs.tsx`:
- Around line 46-50: Update the Nav elements in ProblemTabs to include a
descriptive aria-label for screen-reader identification, and add position:
relative to the Tab styling or component so HiddenText’s absolute positioning is
anchored to each tab rather than an ancestor.

In `@src/lib/apiErrorMessage.ts`:
- Around line 3-11: Update resolveApiErrorMessage so non-Response errors return
the provided fallback instead of always returning NETWORK_ERROR_MESSAGE.
Preserve the network-error message only for errors that represent an actual
offline/network failure, while retaining the existing Response detail parsing
and fallback behavior.

In `@src/pages/Dashboard.tsx`:
- Around line 190-192: Change the ErrorText role from status to alert in
src/pages/Dashboard.tsx lines 190-192 and src/pages/SolveV2.tsx lines 230-232 so
API errors are announced immediately; leave NoticeText unchanged.

In `@src/pages/Resume.tsx`:
- Line 17: Remove the unused Alert.afterClose field and its related handling in
closeAlert. Do not invoke an after-close callback immediately after closeModal;
preserve the existing modal close flow without callback behavior.

In `@src/pages/SolveV2.tsx`:
- Around line 248-253: Remove the commented-out SubmitButton block in SolveV2,
including its onClick, disabled, and label markup; do not alter the active
submission flow.
🪄 Autofix

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 Plus

Run ID: 1ff811ac-3b9c-408b-a828-54d470013d82

📥 Commits

Reviewing files that changed from the base of the PR and between 23468d7 and 0d57f63.

📒 Files selected for processing (20)
  • src/GlobalStyles.tsx
  • src/common/const.ts
  • src/components/Modal/AlertModal.tsx
  • src/components/Modal/ConfirmModal.tsx
  • src/components/home/Header/Header.tsx
  • src/components/programmer/ProgrammerRecruitInfo.tsx
  • src/components/rookie/Progress/PortfolioCard.tsx
  • src/components/rookie/Progress/ProgressCard.tsx
  • src/components/rookie/Progress/ProgressList.tsx
  • src/components/rookie/Progress/ResumeCard.tsx
  • src/components/rookie/Progress/progressCardAsset.ts
  • src/components/rookie/UserInfoForm/UserInfoForm.tsx
  • src/components/solve/ProblemTabs.tsx
  • src/components/solve/TestResultConsoleV2.tsx
  • src/lib/apiErrorMessage.ts
  • src/pages/Dashboard.tsx
  • src/pages/Loader/DashboardLoader.ts
  • src/pages/Result.tsx
  • src/pages/Resume.tsx
  • src/pages/SolveV2.tsx

Comment thread src/components/rookie/Progress/PortfolioCard.tsx
type="email"
>
슬랙 초대 이메일
디스코드 초대 이메일

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

# Resume payload 구조를 확인합니다.
ast-grep outline src/pages/Resume.tsx --items all

# 초대 이메일 필드의 폼, 타입, API 사용처를 확인합니다.
rg -n -C 4 --glob '*.{ts,tsx}' \
  '\b(slack_email|discord_email)\b|invitation' src

Repository: wafflestudio/wacruit-web

Length of output: 9103


🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

# 관련 파일의 실제 사용처를 확인합니다.
printf '--- UserInfoForm.tsx ---\n'
sed -n '1,90p' src/components/rookie/UserInfoForm/UserInfoForm.tsx

printf '\n--- programmer recruit info ---\n'
sed -n '1,80p' src/components/programmer/ProgrammerRecruitInfo.tsx

printf '\n--- Result.tsx ---\n'
sed -n '55,80p' src/pages/Result.tsx

printf '\n--- API request helpers ---\n'
rg -n -C 3 'export function patchRequest|const patchRequest|function patchRequest' src/apis src --glob '*.{ts,tsx}' || true

Repository: wafflestudio/wacruit-web

Length of output: 253


🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- UserInfoForm.tsx ---'
sed -n '1,90p' src/components/rookie/UserInfoForm/UserInfoForm.tsx

printf '%s\n' ''
printf '%s\n' '--- ProgrammerRecruitInfo.tsx ---'
sed -n '1,80p' src/components/programmer/ProgrammerRecruitInfo.tsx

printf '%s\n' ''
printf '%s\n' '--- Result.tsx ---'
sed -n '55,80p' src/pages/Result.tsx

printf '%s\n' ''
printf '%s\n' '--- API request helpers ---'
rg -n -C 3 'export function patchRequest|const patchRequest|function patchRequest' src/apis src --glob '*.{ts,tsx}' || true

Repository: wafflestudio/wacruit-web

Length of output: 5946


디스코드 초대 이메일 필드 계약을 맞춰주세요.

화면은 디스코드 이메일을 수집하지만, 폼 필드명은 slack_email로 남고 Resume.tsx도 이 값을 invitation.slack_email로 전송합니다. 디스코드 초대가 이 값을 처리하지 않아 가입자가 초대받지 못하도록 보이므로, 초대 API/작업자와 일치하는 실 필드명과 타입 키를 사용하세요.

📍 Affects 3 files
  • src/components/rookie/UserInfoForm/UserInfoForm.tsx#L46-L46 (this comment)
  • src/components/programmer/ProgrammerRecruitInfo.tsx#L15-L19
  • src/pages/Result.tsx#L68-L71
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/rookie/UserInfoForm/UserInfoForm.tsx` at line 46, Discord
invitation email field naming is inconsistent with the invitation API contract.
Update the field name and type key used by UserInfoForm.tsx (line 46),
ProgrammerRecruitInfo.tsx (lines 15-19), and Result.tsx (lines 68-71) to the
canonical Discord email identifier, and update the submission mapping so the
value is sent under the matching invitation key instead of slack_email.

Comment thread src/pages/Dashboard.tsx Outdated
Comment thread src/pages/Resume.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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 (1)
src/components/rookie/Progress/PortfolioCard.tsx (1)

207-208: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

다운로드 오류 처리도 공통 오류 메시지 변환기를 사용하세요.

downloadPortfolioFilegetRequest를 호출하지만, 실패 시 서버 응답의 detail 오류 없이 고정 "다운로드에 실패했습니다."만 표시합니다. 다운로드용 기본 문구를 전달하는 형태로 handleAPIError 또는 resolveApiErrorMessage를 함께 사용해 일관된 오류 메시지를 보여주세요.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/rookie/Progress/PortfolioCard.tsx` around lines 207 - 208,
Update the download error handling around downloadPortfolioFile to pass the
caught error and the default message “다운로드에 실패했습니다.” through the shared
handleAPIError or resolveApiErrorMessage converter before calling openAlert, so
server detail responses are displayed while retaining the default fallback.
🧹 Nitpick comments (1)
src/components/solve/ProblemDescription/ProblemDescription.tsx (1)

169-177: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

모바일 표의 가로 넘침을 처리하세요.

table에 폭 제한이나 가로 스크롤 정책이 없습니다. 긴 입력값, URL 또는 수식이 있는 셀은 표 폭을 뷰포트보다 크게 만들 수 있습니다. MarkdownStyledWrapper에 표 래퍼를 추가해 overflow-x: auto를 적용하거나 셀 줄바꿈 규칙을 추가하세요.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/solve/ProblemDescription/ProblemDescription.tsx` around lines
169 - 177, Update the table styling in MarkdownStyledWrapper so wide markdown
tables remain usable on mobile: add a table wrapper with horizontal scrolling
via overflow-x: auto, or apply appropriate cell wrapping rules for long values,
while preserving the existing table borders, spacing, and padding.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/apis/member/member.api.ts`:
- Line 53: BASE_URL이 빈 문자열인 MSW 모드에서도 스폰서와 멤버 조회가 성공하도록 `${BASE_URL}/v3/sponsor`
및 관련 `/v3/members` 요청과 MSW 프록시/핸들러 계약을 일치시키세요. 기존 핸들러가 `/api/v3/...`를 사용한다면 요청
경로를 유지하고, 새 경로를 사용할 경우 해당 경로의 MSW 핸들러를 추가하세요.

In `@src/components/Modal/AlertModal.tsx`:
- Around line 15-24: Update AlertModal to use React’s useId() for
instance-unique title and description IDs, and apply those generated IDs
consistently to Dialog’s aria-labelledby/aria-describedby and the
Title/Description elements. Preserve the conditional description rendering and
undefined aria-describedby when no description exists.

In `@src/lib/MarkdownRenderer.tsx`:
- Around line 23-30: Update the preprocessing flow in the MarkdownRenderer
transformation so LaTeX expressions matched by the display-math and inline-math
replacements are protected from the earlier `/\\n/g` newline conversion.
Preserve commands such as `\neq`, `\nabla`, and `\notin` inside both `\[...\]`
and `\(...\)` while retaining the existing trimmed output delimiters.

---

Outside diff comments:
In `@src/components/rookie/Progress/PortfolioCard.tsx`:
- Around line 207-208: Update the download error handling around
downloadPortfolioFile to pass the caught error and the default message “다운로드에
실패했습니다.” through the shared handleAPIError or resolveApiErrorMessage converter
before calling openAlert, so server detail responses are displayed while
retaining the default fallback.

---

Nitpick comments:
In `@src/components/solve/ProblemDescription/ProblemDescription.tsx`:
- Around line 169-177: Update the table styling in MarkdownStyledWrapper so wide
markdown tables remain usable on mobile: add a table wrapper with horizontal
scrolling via overflow-x: auto, or apply appropriate cell wrapping rules for
long values, while preserving the existing table borders, spacing, and padding.
🪄 Autofix

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 Plus

Run ID: 273fd465-77d8-4de1-9cbb-fb11660c9474

📥 Commits

Reviewing files that changed from the base of the PR and between 0d57f63 and a6c2f4a.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (14)
  • package.json
  • src/apis/member/member.api.ts
  • src/common/const.ts
  • src/components/Modal/AlertModal.tsx
  • src/components/Modal/ConfirmModal.tsx
  • src/components/rookie/Progress/PortfolioCard.tsx
  • src/components/solve/ProblemDescription/ProblemDescription.tsx
  • src/components/solve/ProblemTabs.tsx
  • src/lib/MarkdownRenderer.tsx
  • src/lib/apiErrorMessage.ts
  • src/pages/Dashboard.tsx
  • src/pages/Result.tsx
  • src/pages/Resume.tsx
  • src/pages/SolveV2.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
  • src/common/const.ts
  • src/pages/Result.tsx
  • src/lib/apiErrorMessage.ts
  • src/components/solve/ProblemTabs.tsx
  • src/pages/Resume.tsx
  • src/pages/SolveV2.tsx
  • src/components/Modal/ConfirmModal.tsx
  • src/pages/Dashboard.tsx

Comment thread src/apis/member/member.api.ts
Comment thread src/components/Modal/AlertModal.tsx
Comment thread src/lib/MarkdownRenderer.tsx
@SeohyunLilyChoi
SeohyunLilyChoi merged commit db54377 into main Aug 7, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants