[PR] 과제 업로드 단계 페이지(UploadStepPage) 리펙토링

[TTOCHIwas]

📌 요약 (Summary)

• 업로드 step 페이지를 읽기 쉽고 수정하기 쉬운 구조로 정리했습니다.
• 진행 중인 프로젝트를 다시 열었을 때, 이어서 작업할 수 있도록 진입 흐름을 추가했습니다.

✅ 주요 변경 사항 (Key Changes)

• UploadStepPage를 헤더 섹션과 본문 섹션으로 나눴습니다.
• 업로드 step 관련 로직을 역할별 hook으로 분리했습니다.
• 진행 중인 프로젝트를 누르면 업로드 step 페이지로 이동하고, 다시 이어서 작업할 수 있게 했습니다.
• 뒤로가기 버튼과 복사 기능을 공용 컴포넌트/훅으로 분리했습니다.

🛠 상세 구현 내용 (Implementation Details)

1. 업로드 step 페이지 구조 정리

• UploadStepPage는 라우트 확인과 섹션 조립만 하도록 정리했습니다.

• 헤더 영역은 UploadStepHeaderSection으로 분리했습니다.

• 본문 영역은 UploadStepContentSection으로 분리했습니다.
• 기존에 페이지 안에 같이 있던 로직과 UI를 나눠서, 각 파일의 역할이 더 분명해졌습니다.

2. 업로드 step 로직 분리

• useUploadStepProject - step 정보 계산
• useUploadStepData - 현재 step 데이터 조회
• useUploadStepNavigation - 이전 단계 이동
• useUploadStepSubmission - 결과 저장과 완료 처리

이렇게 나눠, 한 hook에 몰려있던 일을 나눴습니다.

3. 진행 중인 프로젝트 이어하기

• 마이페이지에서 IN_PROGRESS 상태의 프로젝트를 누르면 상세 페이지가 아니라 업로드 step 페이지로 이동하도록 바꿨습니다.
• 이때 resume 진입으로 들어온 경우에만, 사용자가 마지막으로 이어서 해야 하는 step으로 이동합니다.

4. 경로와 공통 코드 정리

• 업로드 step 경로를 문자열로 직접 만들지 않고, 공통 경로 함수로 만들도록 정리했습니다.

• 뒤로가기 버튼은 공통 BackButton으로 분리했습니다.

• 복사 기능은 useClipboardCopy hook으로 분리했습니다.

🚨 트러블 슈팅 (Trouble Shooting)

default.mp4

• 처음에는 진행 중 프로젝트를 다시 열었을 때, 현재 step에 계속 묶이는 방식으로 구현되어 이전 단계 버튼 이동이 자연스럽지 않았습니다.
• 이를 해결하기 위해, resume은 "처음 들어올 때만" 동작하도록 바꿨습니다.
• 또, 라우트 검증과 resume 처리 과정에서 타입 에러가 있었는데, enabled 조건을 분리해서 해결했습니다.

📎 알려진 이슈 및 참고 사항 (Known Issues & Notes)

• 이번 PR에서는 업로드 step 페이지 리팩토링과 진행 중 프로젝트 이어하기를 같이 반영했습니다.
• UploadStepIndicator는 나중에 다른 화면에서도 같이 쓰게 되면, 위치를 다시 올릴지 검토할 수 있습니다.

🖼 스크린샷 (Screenshots)

default.mp4

#️⃣ 관련 이슈 (Related Issues)

• 과제 업로드 페이지(UploadPage) 리펙토링 #54

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 업로드 스텝 페이지의 구조를 개선하고 사용자 경험을 향상시키는 데 중점을 둡니다. 페이지의 UI와 로직을 모듈화하여 코드의 가독성과 유지보수성을 크게 높였으며, 진행 중인 프로젝트를 사용자가 중단했던 지점부터 쉽게 재개할 수 있도록 새로운 진입 흐름을 도입했습니다. 또한, 공통적으로 사용되는 기능들을 별도의 컴포넌트나 훅으로 분리하여 코드 재사용성을 증대시켰습니다.

Highlights

• 업로드 Step 페이지 리팩토링: 기존 UploadStepPage 컴포넌트의 UI와 로직을 분리하여 UploadStepHeaderSection과 UploadStepContentSection으로 나누고, 각 섹션의 역할을 명확히 했습니다.
• 역할별 Hook 분리: 업로드 스텝 관련 로직(데이터 조회, 내비게이션, 프로젝트 정보, 제출 처리)을 useUploadStepData, useUploadStepNavigation, useUploadStepProject, useUploadStepSubmission 등 전용 커스텀 훅으로 분리하여 재사용성과 유지보수성을 높였습니다.
• 진행 중인 프로젝트 이어하기 기능 추가: 마이페이지에서 'IN_PROGRESS' 상태의 프로젝트를 클릭하면 해당 프로젝트의 마지막 미완료 스텝으로 바로 이동하여 작업을 이어갈 수 있도록 기능을 구현했습니다.
• 공용 컴포넌트/훅 추출: 뒤로가기 버튼(BackButton)과 클립보드 복사 기능(useClipboardCopy)을 공용 컴포넌트 및 훅으로 분리하여 여러 곳에서 재사용할 수 있도록 했습니다.
• 동적 라우트 경로 관리 개선: 업로드 스텝 관련 라우트 경로를 동적 경로 함수(DYNAMIC_ROUTE_PATHS)로 관리하도록 개선하여 경로 생성의 일관성과 안정성을 확보했습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant refactoring and enhancement of the project upload step functionality. It modularizes the UploadStepPage by extracting UI components (UploadStepIndicator, UploadStepResultInput, UploadStepContentSection, UploadStepHeaderSection) and custom hooks (useUploadStepData, useUploadStepNavigation, useUploadStepProject, useUploadStepResumeRedirect, useUploadStepSubmission) to manage step-specific logic, data fetching, navigation, and submission. A new BackButton component and a useClipboardCopy hook are also added for reusability. The changes also update routing to support dynamic step navigation and a resume feature for in-progress projects, redirecting users to their last uncompleted step. There are no review comments to address.