Feat/#77 이력서 생성·편집·미리보기 및 목차(미니맵) 기능 구현 by leeleeleeleejun · Pull Request #82 · YAPP-Github/28th-Web-Team-1-FE

leeleeleeleejun · 2026-07-22T08:20:18Z

#️⃣연관된 이슈

[Feature] 이력서 수정 기능 구현 (경험 선택 후 이력서 작성 하는 flow) #77

📝작업 내용

이력서 생성부터 편집·미리보기·목차까지 이어지는 전체 플로우를 구현했습니다.

이력서 생성

경험 선택(ExperiencePickerDialog) → 이력서 생성 플로우 연결 및 다이얼로그 열림 상태 관리
생성 시 섹션 순서를 정의하고, EXPERIENCE는 선택된 경험 아이템으로 채움
그 외 섹션은 useDefaultItems로 서버 기본값을 채우도록 변경 (API 스키마 변경 반영)
이력서 배경 UI 추가

이력서 편집 / 미리보기

상세 조회 페이지(미리보기·목차) 구현, 미리보기 섹션 클릭 시 활성화
react-hook-form 기반 편집 폼 상태 모델 및 실시간 미리보기·저장 연결
우측 Edit 영역 섹션 컴포넌트 구현(경력/자격증/핵심역량/학력/경험/어학/기술/수상)
기본정보 편집(연락처·이메일 숨기기 토글), 항목 추가/삭제 및 삭제 확인 모달
수동/자동 저장 상태 구분 및 자동 저장 기능

목차(미니맵)

미니맵에서 드래그앤드롭으로 섹션·아이템 순서 변경 (@dnd-kit)
카테고리 추가/삭제 모달 (삭제는 visible 토글로 데이터 보존)
목차에서 섹션·아이템 클릭 시 해당 섹션으로 포커스 이동 및 미리보기 스크롤

스크린샷 (선택)

2026-07-22.5.25.05-1.mov

💬리뷰 요구사항(선택)

AI 첨삭 기능이 이후 PR에서 진행하겠습니다.

- payload 필드 optional화 및 optimizationMode 추가

- 삭제는 visible 토글로 데이터 보존 - 섹션 uid로 신규 섹션 포커스 - 삭제 시 포커스 이동 처리

- 수동 저장과 자동 저장 상태 구분 추가

)

#77)

…개선 (#77)

vercel · 2026-07-22T08:20:24Z

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

Project	Deployment	Actions	Updated (UTC)
28th-web-team-1-fe	Ready	Preview, Comment	Jul 22, 2026 8:44am

coderabbitai · 2026-07-22T08:20:56Z

Warning

Review limit reached

@leeleeleeleejun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 36 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d8684e3b-84c5-461d-9d09-a4f395e949c8

📥 Commits

Reviewing files that changed from the base of the PR and between 4facc0a and fd4a7ab.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (55)

package.json
schema.graphql
src/entities/jd/api/jd.api.ts
src/entities/jd/index.ts
src/entities/jd/model/jd.keys.ts
src/entities/jd/model/jd.queries.ts
src/entities/resume/api/resume.api.ts
src/entities/resume/index.ts
src/entities/resume/model/resume.mutations.ts
src/entities/user/index.ts
src/entities/user/model/user.queries.ts
src/shared/hooks/useIntervalAutosave.ts
src/shared/lib/date.ts
src/shared/lib/gql/gql.ts
src/shared/lib/gql/graphql.ts
src/shared/ui/date_picker/DatePicker.stories.tsx
src/shared/ui/date_picker/DatePicker.tsx
src/shared/ui/date_picker/index.ts
src/shared/ui/month_picker/MonthPicker.stories.tsx
src/shared/ui/month_picker/MonthPicker.tsx
src/shared/ui/month_picker/index.ts
src/views/resume_create/index.ts
src/views/resume_create/model/buildResumeInput.ts
src/views/resume_create/ui/ExperiencePickerDialog.tsx
src/views/resume_create/ui/ResumeCreatePage.tsx
src/views/resume_edit/model/category.ts
src/views/resume_edit/model/experiencesToFormItems.ts
src/views/resume_edit/model/formToSaveInput.ts
src/views/resume_edit/model/resume-form.types.ts
src/views/resume_edit/model/resumeToFormValues.ts
src/views/resume_edit/model/section.ts
src/views/resume_edit/ui/ResumeEditPage.tsx
src/views/resume_edit/ui/ResumeIndex.tsx
src/views/resume_edit/ui/edit/AwardSection.tsx
src/views/resume_edit/ui/edit/BasicInfoSection.tsx
src/views/resume_edit/ui/edit/CarrerSection.tsx
src/views/resume_edit/ui/edit/CertificatesSection.tsx
src/views/resume_edit/ui/edit/CoreSkillSection.tsx
src/views/resume_edit/ui/edit/DeleteItemAlert.tsx
src/views/resume_edit/ui/edit/EducationSection.tsx
src/views/resume_edit/ui/edit/ExperienceSection.tsx
src/views/resume_edit/ui/edit/LanguageSection.tsx
src/views/resume_edit/ui/edit/ResumeSectionEdit.tsx
src/views/resume_edit/ui/edit/Section.tsx
src/views/resume_edit/ui/edit/SkillSection.tsx
src/views/resume_edit/ui/form/FormDatePicker.tsx
src/views/resume_edit/ui/form/FormInput.tsx
src/views/resume_edit/ui/form/FormPeriodPicker.tsx
src/views/resume_edit/ui/form/FormTextarea.tsx
src/views/resume_edit/ui/preview/AwardSection.tsx
src/views/resume_edit/ui/preview/CertificatesSection.tsx
src/views/resume_edit/ui/preview/LanguageSection.tsx
src/views/resume_edit/ui/preview/ResumeSectionView.tsx
src/views/resume_edit/ui/preview/Section.tsx
src/views/resume_edit/ui/preview/SkillSection.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/#77

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.}

github-actions · 2026-07-22T08:23:22Z

🚀storybook: https://6a263d3313574544fa940c79-cptquffywm.chromatic.com/

…77)

optshj

고생하셨습니다~~

나중에 DatePicker랑 MonthPicker랑 합쳐서
type="date" | "month" 이런식으로 해도 괜찮을것 같습니다

optshj · 2026-07-22T08:28:29Z


 // TODO : 날짜 형식이 늘어날 경우 추가 필요
-type DateFormat = 'YYYY.MM.DD' | 'YYYY.MM'
+type DateFormat = 'YYYY.MM.DD' | 'YYYY.MM' | 'HH:mm:ss'


leeleeleeleejun added 30 commits July 20, 2026 18:45

✨ [Feat] 이력서 수정을 위한 UpdateResume 뮤테이션 및 useUpdateResume 훅 추가 (#77)

c82f110

✨ [Feat] react-hook-form 패키지 추가 (#77)

a9201f5

✨[Feat] 이력서 편집 폼 상태 모델 및 RHF 입력 어댑터 추가 (#77)

29d4cb2

✨[Feat] 이력서 편집 섹션 폼 연결 및 실시간 미리보기·저장 (#77)

0c8d1f7

✨ [Feat] 드래그 앤 드롭 기능 구현을 위한 @dnd-kit 의존성 패키지 추가 (#77)

451f06d

✨ [Feat] 미니맵 드래그앤드롭으로 섹션·아이템 순서 변경 (#77)

44a3300

⚙️[Chore] 백엔드 스키마 동기화 (#77)

52bd14c

- payload 필드 optional화 및 optimizationMode 추가

✨[Feat] 미니맵 카테고리(섹션) 추가/삭제 모달 (#77)

fb24d40

- 삭제는 visible 토글로 데이터 보존 - 섹션 uid로 신규 섹션 포커스 - 삭제 시 포커스 이동 처리

✨[Feat] 섹션 배경색 투명도 조정 (#77)

a2ef845

✨[Feat] 섹션 드래그 앤 드롭 UI 개선 및 스타일 수정 (#77)

d1c2fae

✨[Feat] 이력서 입력 형식에서 항목 앞에 대시 추가 (#77)

894c1f7

✨[Feat] 기본 정보 섹션에 연락처 및 이메일 숨기기 토글 추가 (#77)

61a8870

✨[Feat] 숨겨진 섹션이 없을 때 메시지 표시 및 UI 개선 (#77)

8e71c52

✨[Feat] 개선된 UI 요소에 호버 효과 추가 및 텍스트 색상 조정 (#77)

c82dd80

✨[Feat] 이력서 자동 저장 기능 추가 및 날짜 형식 지원 (#77)

79de116

✨[Feat] 항목 삭제 확인 모달 추가 및 삭제 버튼 개선 (#77)

dba67b9

✨[Feat] 연락처 및 이메일 숨기기 기능 추가 및 UI 개선 (#77)

03d4311

✨[Feat] 경험 재선택 다이얼로그 추가 및 경험 항목 교체 기능 구현 (#77)

75ab860

✨[Feat] 이력서 저장 기능 개선 (#77)

3c02afd

- 수동 저장과 자동 저장 상태 구분 추가

✨[Feat] 월 선택 기능을 위한 MonthPicker 컴포넌트 추가 (#77)

9f3b41c

✨[Feat] 날짜 선택 기능을 위한 DatePicker 컴포넌트 추가 (#77)

7bd19c4

✨[Feat] 날짜 및 기간 선택 기능을 위한 FormDatePicker 및 FormPeriodPicker 컴포넌트 추가 (#77

38c3438

)

✨[Feat] FormDatePicker 및 FormPeriodPicker 컴포넌트를 사용하여 수상일 및 기간 입력 기능 개선 (

b63775e

#77)

✨[Feat] 기술 숙련도 선택 기능을 위한 SkillLevelSelect 컴포넌트 추가 및 UI 개선 (#77)

2bd8ef9

✨[Feat] ResumeCreatePage에서 ExperiencePickerDialog의 열림 상태 관리 기능 추가 (#77)

68f0a0d

✨[Feat] 현재 로그인한 사용자 정보를 Suspense로 조회하는 useMe 훅 추가 (#77)

6dc3f66

✨[Feat] JD 메타 정보를 조회하는 useJdMeta 훅 추가 및 ResumeCreatePage에서 이력서 배경 UI …

d2c372c

…개선 (#77)

✨[Feat] 이력서 생성 시 섹션 순서 정의 및 EXPERIENCE 섹션에 선택된 경험 아이템 채우기 기능 추가 (#77)

2a50c26

✨[Feat] 이력서 생성 시 섹션 순서 정의 및 EXPERIENCE 섹션에 선택된 경험 아이템 채우기 기능 추가 (#77)

7144f07

✨[Feat] ResumeIndex 컴포넌트에 섹션 선택 기능 추가 (#77)

e86e2da

leeleeleeleejun self-assigned this Jul 22, 2026

leeleeleeleejun added the ✨ Feature 기능 구현 label Jul 22, 2026

leeleeleeleejun linked an issue Jul 22, 2026 that may be closed by this pull request

[Feature] 이력서 수정 기능 구현 (경험 선택 후 이력서 작성 하는 flow) #77

Closed

1 task

Merge branch 'dev' into feat/#77

baca037

leeleeleeleejun requested a review from optshj July 22, 2026 08:21

vercel Bot had a problem deploying to Preview July 22, 2026 08:21 Failure

leeleeleeleejun added 2 commits July 22, 2026 17:43

✨ [Feat] ResumeEditPage에서 섹션 선택 시 스크롤 이동 및 DOM 등록 기능 추가 (#77)

2ec8912

✨ [Feat] ResumeCreatePage에서 Suspense fallback UI 개선 및 기업명, 포지션 정보 추가 (#…

fd4a7ab

…77)

vercel Bot deployed to Preview July 22, 2026 08:44 View deployment

optshj approved these changes Jul 22, 2026

View reviewed changes

leeleeleeleejun merged commit b4669da into dev Jul 22, 2026
6 checks passed

Navigation Menu

Repository navigation

Feat/#77 이력서 생성·편집·미리보기 및 목차(미니맵) 기능 구현 - #82

Feat/#77 이력서 생성·편집·미리보기 및 목차(미니맵) 기능 구현#82
leeleeleeleejun merged 33 commits into
devfrom
feat/#77

leeleeleeleejun commented Jul 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

Review limit reached

Uh oh!

github-actions Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

optshj left a comment

Uh oh!

optshj Jul 22, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

leeleeleeleejun commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣연관된 이슈

📝작업 내용

이력서 생성

이력서 편집 / 미리보기

목차(미니맵)

스크린샷 (선택)

💬리뷰 요구사항(선택)

Uh oh!

vercel Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

github-actions Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

optshj left a comment

Choose a reason for hiding this comment

Uh oh!

optshj Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

leeleeleeleejun commented Jul 22, 2026 •

edited

Loading

vercel Bot commented Jul 22, 2026 •

edited

Loading

coderabbitai Bot commented Jul 22, 2026 •

edited

Loading

github-actions Bot commented Jul 22, 2026 •

edited

Loading