"지원하기" 페이지에 자잘한 기타 기능들 추가 및 자잘한 경로 에러 수정( issue #293, #299 ) #300
Conversation
Walkthrough이 변경사항은 주로 import 경로를 더 깊거나 올바른 디렉터리 구조로 수정하는 작업으로 구성되어 있습니다. 일부 파일에서는 props 타입 추가, interface 확장, 모달 관련 로직 개선 등 소규모 기능적 변경도 포함되어 있습니다. 전체적으로 코드 구조와 모듈 경로 일관성을 높이고, 모달 컴포넌트의 확장성을 개선하였습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ApplyStep
participant useModal
participant Modal
User->>ApplyStep: 페이지 접근
ApplyStep->>ApplyStep: userData, project 상태 검증
alt 비로그인/이미 지원/수락/소유자
ApplyStep->>useModal: handleModalOpen(메시지, onConfirm)
useModal->>Modal: 모달 표시(onConfirm 전달)
User->>Modal: 확인 클릭
Modal->>useModal: handleConfirm()
useModal->>ApplyStep: onConfirm 콜백 실행(네비게이션)
else 정상 접근
ApplyStep->>User: 지원 폼 표시
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
src/pages/user/register/Register.tsx (1)
3-3:Mainlogoimport 경로 및 변수명 일관성 검토
깊어진 디렉토리 구조에 맞춰 import 경로를 잘 수정하셨습니다. 다만 다른 파일에서MainLogo로 표기되는 것과 달리 여기서는Mainlogo로 변수명이 달라 가독성 및 유지보수를 위해 네이밍을 통일할 것을 권장합니다.src/constants/user/modalMessage.ts (1)
27-27: 문구 개선 제안
현재 메시지"이미 참여한/지원하신 공고 입니다."에 불필요한 띄어쓰기(공고 입니다)와 슬래시 표현(참여한/지원하신)이 혼용되어 있어 가독성이 떨어집니다. 예를 들어alreadyApply: '이미 참여했거나 지원하신 공고입니다.',와 같이 수정을 고려해 주세요.
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (1)
3-3: 타입 전용 import로 최적화 제안
MyInquiries는 런타임에서 사용되지 않는 타입이므로import type { MyInquiries } from '...';처럼
import type을 사용해 번들 크기를 줄이는 것이 좋습니다.src/components/user/mypage/joinedProject/Project.tsx (2)
4-4: import 식별자 일관성 제안
에셋 import 식별자를 과거 패턴(BeginnerIcon)과 일관된 PascalCase(import BeginnerIcon from '…')로 통일하면 가독성과 유지보수성이 향상됩니다.
24-26: JSX 간소화 및 null 반환 제안
빈 문자열 대신null반환 또는 && 연산자를 활용해 렌더 로직을 간결하게 할 수 있습니다. 예:- {project.isBeginner ? <img src={beginner} alt='beginner' /> : ''} + {project.isBeginner && <img src={beginner} alt='beginner' />}src/components/user/home/projectCardLists/cardList/CardList.tsx (1)
31-31: PositionButton에 fontSize prop 추가PositionButton 컴포넌트에 fontSize라는 boolean 타입 prop이 추가되었습니다. 이를 통해 버튼의 폰트 크기를 조절할 수 있게 되었을 것으로 예상됩니다.
하지만 해당 prop의 목적이 명확하지 않고, 명시적인 크기 지정 없이 boolean 타입을 사용하는 것은 직관성이 떨어질 수 있습니다.
- fontSize + fontSize={true} // 명시적인 값을 할당하거나 + fontSize="small" // 더 명확한 의미를 가진 값을 사용하는 것을 고려해보세요src/components/common/header/Header.tsx (1)
55-74: 알림 컴포넌트 UI 비활성화알림 드롭다운 컴포넌트와 관련 UI가 주석 처리되었습니다. 알림 기능 관련 임포트와 일관되게 처리되었습니다.
이 코드 블록이 상당히 큰데, 주석 처리보다는 완전히 제거하고 필요한 경우 버전 관리 시스템을 통해 복원하는 것이 코드 유지보수 측면에서 더 좋을 것 같습니다.
src/pages/user/projectDetail/ProjectDetail.tsx (1)
61-62: 디버깅용 console.log 문 제거 필요개발 과정에서 추가된 디버깅용 console.log 문은 프로덕션 코드에서 제거하는 것이 좋습니다.
- console.log(data); - console.log(userData.id);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (45)
src/api/auth.api.ts(1 hunks)src/components/common/header/Header.tsx(1 hunks)src/components/common/modal/Modal.tsx(3 hunks)src/components/common/modal/ModalWrapper.tsx(1 hunks)src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts(2 hunks)src/components/user/applyComponents/careersComponent/CareersComponent.tsx(1 hunks)src/components/user/comment/commentComponent/CommentComponentLayout.tsx(1 hunks)src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx(1 hunks)src/components/user/comment/commentInput/CommentInput.styled.ts(1 hunks)src/components/user/comment/commentInput/CommentInput.tsx(1 hunks)src/components/user/comment/replyComponent/ReplyComponent.tsx(1 hunks)src/components/user/evaluation/EvaluationContent.styled.ts(1 hunks)src/components/user/home/banner/Banner.tsx(1 hunks)src/components/user/home/projectCardLists/cardList/CardList.tsx(2 hunks)src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx(1 hunks)src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx(1 hunks)src/components/user/manageProjects/passNonPassList/SendResultButton.styled.ts(1 hunks)src/components/user/mypage/ContentTab.tsx(1 hunks)src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx(1 hunks)src/components/user/mypage/joinedProject/Project.tsx(2 hunks)src/components/user/mypage/myProfile/profile/Profile.tsx(1 hunks)src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts(1 hunks)src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx(1 hunks)src/components/user/projectFormComponents/projectInformationText/ProjectInformation.tsx(1 hunks)src/components/user/projectFormComponents/stepComponent/StepComponent.tsx(2 hunks)src/components/user/userPage/userProfile/UserProfile.tsx(1 hunks)src/constants/sidebarItems.tsx(1 hunks)src/constants/user/modalMessage.ts(1 hunks)src/context/ModalContext.tsx(1 hunks)src/hooks/useModal.ts(2 hunks)src/models/createProject.ts(1 hunks)src/models/joinProject.ts(1 hunks)src/models/projectDetail.ts(1 hunks)src/pages/login/Login.tsx(1 hunks)src/pages/login/LoginSuccess.tsx(1 hunks)src/pages/user/apply/Apply.styled.ts(1 hunks)src/pages/user/apply/ApplyStep.styled.ts(2 hunks)src/pages/user/apply/ApplyStep.tsx(7 hunks)src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx(1 hunks)src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.tsx(1 hunks)src/pages/user/mypage/MyPage.tsx(1 hunks)src/pages/user/projectDetail/ProjectDetail.styled.ts(1 hunks)src/pages/user/projectDetail/ProjectDetail.tsx(4 hunks)src/pages/user/register/Register.tsx(1 hunks)src/pages/user/userpage/UserPage.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/components/common/modal/Modal.tsx (1)
src/components/common/modal/ModalWrapper.tsx (1)
ModalWrapper(10-28)
src/pages/user/apply/ApplyStep.tsx (2)
src/hooks/useModal.ts (1)
useModal(3-46)src/constants/user/modalMessage.ts (1)
MODAL_MESSAGE(1-28)
src/components/common/modal/ModalWrapper.tsx (1)
src/context/ModalContext.tsx (1)
ModalContextProps(3-7)
src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts (1)
src/components/user/comment/commentInput/CommentInput.styled.ts (1)
ButtonWrapper(19-24)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (64)
src/components/user/home/banner/Banner.tsx (1)
2-2: 자산 경로 수정 확인
banner.svg의 import 경로를../../../../assets/banner.svg로 업데이트하여src/assets폴더를 정확히 가리키고 있습니다. 이전../../../assets/banner.svg는 잘못된 상위 디렉터리를 참조하던 경로였으며, 이번 변경으로 올바른 위치의 자산을 불러옵니다.src/models/createProject.ts (1)
2-2:projectConstants경로 수정 확인
디렉토리 구조 변경에 따라createProjectScheme의 import 경로를../constants/user/projectConstants로 올바르게 업데이트했습니다.src/components/user/projectFormComponents/projectInformationText/ProjectInformation.tsx (1)
8-8: SVG 에셋 import 경로 일관성 확보
절대 경로에서 상대 경로(../../../../assets/beginner.svg)로 수정되어 다른 컴포넌트와 일관된 구조를 따릅니다.src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx (1)
3-3:MainLogoimport 경로 조정
프로젝트 구조 변경에 맞춰MainLogo의 상대 경로(../../../../assets/mainlogo.svg)가 정확히 업데이트되었습니다.src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.tsx (1)
3-3:MainLogoimport 경로 조정
디렉토리 깊이가 변경된 구조에 맞추어MainLogoimport 경로가 올바르게 수정되었습니다.src/pages/user/userpage/UserPage.tsx (1)
4-4: 로딩 이미지 import 경로 업데이트
상대 경로를 한 단계 더 올려../../../assets/loadingImg.svg로 수정하여 올바른 assets 폴더를 참조하도록 변경되었습니다.src/components/user/mypage/myProfile/profile/Profile.tsx (1)
2-2: BeginnerIcon import 경로 수정
상대 경로를 추가로 조정하여../../../../../assets/beginner.svg에서 올바른 assets 디렉토리를 참조하도록 변경되었습니다.src/pages/user/mypage/MyPage.tsx (1)
9-9: 로딩 이미지 assets 경로 조정
../../../assets/loadingImg.svg로 경로를 수정하여 assets 폴더를 정확히 가리키도록 변경되었습니다.src/models/joinProject.ts (1)
2-2: ApplyScheme import 경로 업데이트
constants 디렉터리 구조 변경에 맞춰../constants/user/projectConstants로 경로를 조정했습니다. 정확한 위치에 파일이 존재하는지 확인해주세요.src/api/auth.api.ts (1)
4-5: registerFormValues 및 changePasswordFormValues import 경로 변경
폼 타입이../pages/user/register/Register및../pages/user/changePassword/ChangePassword에서 export되는지 확인하여 import 경로를 업데이트했습니다. 해당 경로 및 export가 올바른지 검증해주세요.src/components/user/userPage/userProfile/UserProfile.tsx (1)
1-1: import 경로 유효성 확인 필요
import * as S from '../../';가 의도한 styled 컴포넌트 또는 index 파일을 정확히 가리키는지 검증이 필요합니다. 실제 파일 구조(예:UserProfile.styled.ts나 상위index.ts)와 일치하는지 확인해주세요.src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (1)
4-4: 상수 import 경로 및 명명 일관성 승인
My_INQUIRIES_MESSAGE의 경로가constants/user/customerService구조와 일치하며, 명명 규칙에도 문제가 없습니다.src/components/user/evaluation/EvaluationContent.styled.ts (1)
2-2: 경로 변경 승인
Button컴포넌트 import 경로가 프로젝트 구조에 맞춰../../common/Button/Button로 잘 조정되었습니다. 별다른 문제가 없어 보입니다.src/constants/sidebarItems.tsx (1)
6-6:ROUTESimport 경로가 올바르게 업데이트되었습니다.
경로를./user/routes로 수정해 새 디렉터리 구조와 일치시켰습니다.src/components/user/comment/commentInput/CommentInput.styled.ts (1)
2-2:Button컴포넌트 import 경로가 정확합니다.
깊어진 경로../../../common/Button/Button가 올바른 위치를 가리킵니다.src/components/user/manageProjects/passNonPassList/SendResultButton.styled.ts (1)
2-2:Button컴포넌트 import 경로가 올바르게 조정되었습니다.
../../../common/Button/Button경로로 변경해 일관성을 유지했습니다.src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts (1)
2-2:PositionButtonimport 경로가 올바르게 깊어졌습니다.
../../../../common/positionButton/PositionButton로 디렉터리 구조를 반영했습니다.src/pages/login/LoginSuccess.tsx (1)
8-9:ROUTES및AUTH_MESSAGEimport 경로가 새 디렉터리 구조에 맞게 수정되었습니다.
../../constants/user/...로 변경해 user 관련 상수 파일을 정확히 참조합니다.src/pages/user/apply/Apply.styled.ts (1)
2-2: 경로 수정이 올바르게 이루어졌습니다.Button 컴포넌트의 import 경로가 올바르게 수정되었습니다. 이 수정은 현재 파일 위치 기준으로 올바른 상대 경로를 반영하고 있습니다.
src/pages/user/projectDetail/ProjectDetail.styled.ts (1)
2-2: 경로 수정이 정확하게 완료되었습니다.Button 컴포넌트의 import 경로가 올바르게 수정되었습니다. 이 변경은 프로젝트의 디렉토리 구조 개선과 일관성을 위한 것으로 보입니다.
src/components/user/mypage/ContentTab.tsx (1)
6-6: 경로 수정이 올바르게 적용되었습니다.ROUTES 상수의 import 경로가 적절하게 수정되었습니다. 이 변경은 user 관련 상수들을 더 명확하게 분리하여 모듈화를 개선하는 데 기여합니다.
src/components/user/applyComponents/careersComponent/CareersComponent.tsx (1)
32-49: 버튼 스타일링 개선이 잘 이루어졌습니다.AddButton 컴포넌트를 ButtonWrapper로 감싸서 가운데 정렬을 적용한 것은 UI 일관성과 사용자 경험 향상에 도움이 됩니다. 기존 기능은 그대로 유지하면서 스타일만 개선한 좋은 접근법입니다.
src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx (1)
39-41: onClick 이벤트에 명시적 타입 추가
이벤트 매개변수에React.MouseEvent<HTMLElement>를 선언하여 타입 안정성과 가독성을 개선했습니다.src/components/user/comment/replyComponent/ReplyComponent.tsx (2)
3-3: DefaultImg import 경로 수정 승인
이미지 자산 경로를 올바른 깊이로 조정하여 에셋 로딩 실패 가능성을 제거했습니다.
12-12: dropdownButton import 경로 수정 승인
드롭다운 버튼 아이콘 경로를 올바르게 맞춰 자산이 정상적으로 로드되도록 했습니다.src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx (1)
10-10: beginner SVG import 경로 수정 승인
beginner.svg경로를 상위 디렉토리 깊이에 맞춰 변경하여 에셋이 올바르게 로드됩니다.src/components/user/comment/commentInput/CommentInput.tsx (1)
5-5: DefaultImg import 경로 수정 승인
자산 경로를 올바른 깊이로 업데이트하여 디폴트 이미지를 정상적으로 참조하도록 했습니다.src/models/projectDetail.ts (1)
36-37: ProjectDetailPlusExtended에 신청 및 수락 ID 필드 추가
applicantIds및acceptedIds배열 필드를 추가하여 신청자 및 수락된 사용자 식별 로직을 지원합니다. 백엔드 API 응답에 해당 필드가 항상 포함되는지 확인이 필요합니다.src/components/user/home/projectCardLists/cardList/CardList.tsx (1)
6-7: 임포트 순서 변경이 있었습니다.임포트 순서가 변경되어 코드의 가독성이 향상되었습니다. 별도의 기능적인 문제는 없어 보입니다.
src/pages/user/apply/ApplyStep.styled.ts (2)
2-2: Button 컴포넌트 임포트 경로 수정임포트 경로가 수정되었습니다. 올바른 디렉토리 구조를 반영한 것으로 보입니다.
49-50: StepButton 스타일 변경StepButton의 스타일이 변경되었습니다:
- justify-content가 right에서 left로 변경
- padding-top 20px이 추가
이 변경사항은 PR 목표 중 "지원하기 페이지의 스텝 확인 컴포넌트에서 각 단계를 클릭해 이동하는 로직 제거"와 관련이 있는 것으로 보입니다. 버튼 위치가 오른쪽에서 왼쪽으로 변경되고, 상단 여백이 추가되어 UI 배치가 개선되었습니다.
src/components/common/modal/ModalWrapper.tsx (2)
18-18: onConfirm 콜백 함수 추가모달 컴포넌트에 onConfirm 콜백 함수를 추가하셨네요. 이는 PR 목표 중 "모달 닫기 시 콜백 함수를 실행할 수 있게 모달 동작 수정"과 일치하는 변경사항입니다.
기본값으로 빈 함수를 설정한 것은 좋은 접근법입니다. 이를 통해 onConfirm prop이 전달되지 않았을 때도 에러가 발생하지 않습니다.
24-24: modalProps에 onConfirm 추가modalProps 객체에 onConfirm 속성을 추가하여 ModalProvider에 전달하도록 구현하셨습니다. 이는 ModalContextProps 인터페이스와 일치하는 구현으로, 모달 시스템 전체에 확인 콜백 기능을 제공합니다.
src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx (1)
4-7: 임포트 경로 수정여러 모듈의 임포트 경로가 업데이트되었습니다:
- useSaveSearchFiltering 훅
- MethodTag, PositionTag 타입
- SEARCH_FILTERING_DEFAULT_VALUE 상수
- useOutsideClick 훅
이 변경사항은 디렉토리 구조 조정에 따른 것으로 보이며, 경로에 'user' 디렉토리 세그먼트가 추가되었습니다. PR 목표 중 "자잘한 경로 에러 수정"과 일치하는 변경사항입니다.
src/components/user/comment/commentComponent/CommentComponentLayout.tsx (1)
6-10: 임포트 경로를 절대 경로로 수정하여 코드 가독성 향상상대 경로에서 절대 경로(
src부터 시작하는 경로)로 변경하여 코드의 일관성과 가독성이 향상되었습니다. 이러한 방식은 특히 깊은 중첩 구조에서 경로를 더 명확하게 표현하는 데 도움이 됩니다.src/components/common/header/Header.tsx (1)
14-18: 알림 기능 관련 임포트 비활성화알림 기능과 관련된 임포트들이 주석 처리되었습니다. 이는 PR 목표에 언급된 "자잘한 경로 에러 수정"의 일환으로 보입니다.
알림 기능을 완전히 제거할 계획인지 혹은 일시적으로 비활성화한 것인지 확인이 필요합니다. 나중에 이 기능을 다시 활성화할 예정이라면 주석 대신 코드를 제거하는 것이 더 깔끔할 수 있습니다.
src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx (1)
3-8: 임포트 경로 깊이 조정임포트 경로가 더 깊은 상대 경로를 사용하도록 수정되었습니다. 이는 PR의 "자잘한 경로 에러 수정" 목표에 부합합니다.
파일 위치에 맞게 정확한 경로로 수정된 것은 좋습니다. 다만, 이렇게 깊은 상대 경로(
../../../../../)는 유지보수 측면에서 어려움이 있을 수 있으므로, 향후에는 절대 경로 또는 path alias를 사용하는 것을 고려해 보세요.src/context/ModalContext.tsx (2)
6-6: 모달 컨텍스트에 onConfirm 콜백 추가
ModalContextProps인터페이스에onConfirm콜백 함수가 추가되었습니다. 이는 PR 목표의 "모달 동작 수정하여 모달 닫힐 때 콜백 함수 실행 가능하도록 변경" 항목을 구현하는 부분입니다.모달 닫기와 확인 액션을 분리함으로써 더 유연한 모달 처리가 가능해졌습니다. 이는 사용자 경험 향상에 기여할 것입니다.
12-12: onConfirm의 기본값 구현새로 추가된
onConfirm콜백의 기본 구현을 빈 함수로 제공하여 호출 시 오류가 발생하지 않도록 처리했습니다.기본값을 제공하는 것은 좋은 방어적 프로그래밍 방식입니다. 이렇게 하면
onConfirm이 제공되지 않았을 때도 안전하게 동작합니다.src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts (2)
2-2: Button 컴포넌트 경로가 적절하게 수정되었습니다.Button 컴포넌트의 import 경로가 더 깊은 상대 경로로 수정되었습니다. 이 변경은 프로젝트의 전체적인 디렉토리 구조 재정비와 일치합니다.
20-23: 버튼 배치 스타일링이 개선되었습니다.새로 추가된 ButtonWrapper 컴포넌트는 자식 요소를 가로 방향으로 중앙 정렬하는 플렉스 컨테이너를 제공합니다. 이는 사용자 인터페이스의 일관성과 버튼 배치의 시각적 균형을 향상시킵니다.
src/pages/login/Login.tsx (1)
13-18: import 경로가 적절하게 재구성되었습니다.상수와 컴포넌트의 import 경로가 user 서브 디렉토리 구조로 올바르게 업데이트되었습니다. 이는 코드베이스의 모듈성과 명확성을 개선하기 위한 리팩토링의 일부로 보입니다.
src/components/user/projectFormComponents/stepComponent/StepComponent.tsx (2)
1-8: Props 인터페이스가 단순화되었습니다.StepComponentProps에서 setCurrentStepIndex 프로퍼티가 제거되어 인터페이스가 단순화되었습니다. 이는 PR 목표에 언급된 "스텝 확인 컴포넌트에서 각 스텝 클릭 시 발생하는 네비게이션 로직 제거"와 일치합니다.
22-22: 스텝 네비게이션 로직이 제거되었습니다.S.Circle 요소에서 onClick 이벤트 핸들러가 제거되어 스텝 원형을 클릭하여 다른 스텝으로 이동하는 기능이 제거되었습니다. 이 변경은 PR 목표에 언급된 "스텝 확인 컴포넌트에서 각 스텝 클릭 시 발생하는 네비게이션 로직 제거"와 일치합니다.
src/components/common/modal/Modal.tsx (4)
11-11: 모달 기능 확장을 위한 onConfirm 콜백 추가ModalProps 인터페이스에 옵셔널한 onConfirm 콜백이 추가되었습니다. 이는 PR 목표에 언급된 "모달 닫을 때 콜백 함수 실행 가능하도록 모달 동작 수정"과 일치합니다.
18-18: 모달 컴포넌트에 onConfirm 프로퍼티 추가Modal 컴포넌트가 새롭게 추가된 onConfirm 프로퍼티를 받아들이도록 업데이트되었습니다. 이는 인터페이스 확장과 일관성 있게 구현되었습니다.
29-33: 모달 닫기 시 확인 콜백 실행 로직 추가handleAnimationEnd 함수가 수정되어 onConfirm이 제공된 경우 이를 호출하고, 그렇지 않은 경우 onClose로 폴백하는 조건부 로직이 추가되었습니다. 이는 모달 닫기 애니메이션 완료 후 확인 액션을 트리거할 수 있게 해주는 좋은 개선점입니다.
42-42: ModalWrapper에 onConfirm 프로퍼티 전달onConfirm 콜백이 ModalWrapper 컴포넌트에 적절하게 전달되어, 모달 컨텍스트 시스템 전체에서 확인 액션이 일관되게 처리될 수 있도록 했습니다.
src/pages/user/projectDetail/ProjectDetail.tsx (3)
44-50: 사용자 로그인 검증 로직 추가로그인하지 않은 사용자에 대한 가드 조건을 추가하여 UX를 개선했습니다. 이제 로그인하지 않은 사용자는 모달 메시지와 함께 차단됩니다.
94-96: 프로젝트 참여 버튼 노출 조건 개선프로젝트 소유자, 이미 참여 중인 사용자 또는 이미 지원한 사용자에게 '프로젝트 함께하기' 버튼이 표시되지 않도록 조건을 개선했습니다. 이 변경은 PR 목표에 명시된 요구사항과 일치합니다.
111-111: 옵셔널 체이닝 제거새로 추가된 가드 조건 덕분에 옵셔널 체이닝이 필요 없어졌습니다. 이제 userData가 존재한다는 것이 보장되므로 이 변경은 적절합니다.
src/hooks/useModal.ts (5)
6-6: 모달 확인 콜백 상태 추가모달 확인 시 실행할 콜백 함수를 저장할 수 있는 상태를 추가했습니다. 이를 통해 모달이 닫힐 때 추가 동작을 수행할 수 있어 확장성이 향상되었습니다.
8-15: handleModalOpen 함수 확장모달 열기 함수에 콜백 파라미터를 추가했습니다. 이제 모달이 확인될 때 실행할 함수를 지정할 수 있어 유연성이 높아졌습니다.
20-20: handleModalClose 함수 개선모달을 닫을 때 콜백 함수를 초기화하는 로직을 추가했습니다. 이는 모달이 닫힌 후 콜백이 계속 유지되는 것을 방지하여 메모리 누수를 예방합니다.
23-26: handleConfirm 함수 추가모달 확인 버튼 클릭 시 실행할 함수를 추가했습니다. 이 함수는 저장된 콜백이 있으면 실행한 후 모달을 닫습니다. 이를 통해 모달 확인 후 추가 동작을 수행할 수 있습니다.
44-44: handleConfirm 함수 반환에 추가handleConfirm 함수를 훅의 반환 객체에 추가했습니다. 이로써 이 훅을 사용하는 컴포넌트에서 모달 확인 로직을 활용할 수 있게 되었습니다.
src/pages/user/apply/ApplyStep.tsx (8)
5-5: useNavigate 훅 추가네비게이션 기능을 사용하기 위해 useNavigate 훅을 추가했습니다. 이를 통해 모달 확인 시 이전 페이지로 돌아가는 기능을 구현할 수 있습니다.
27-29: useNavigate 및 useModal 훅 활용네비게이션 기능과 확장된 모달 기능을 활용하도록 코드를 업데이트했습니다. 이제 모달 확인 시 콜백을 실행할 수 있어 사용자 경험이 향상되었습니다.
32-32: 사용자 데이터 활용 개선이메일만 가져오던 방식에서 전체 사용자 데이터를 가져오는 방식으로 변경했습니다. 이를 통해 사용자 ID 기반 검증이 가능해졌습니다.
49-60: 사용자 상태 검증 로직 추가PR 목표에 맞게 사용자의 프로젝트 참여 상태를 검증하는 로직을 추가했습니다. 이제 로그인하지 않은 사용자, 프로젝트 소유자, 이미 참여 중인 사용자, 이미 지원한 사용자가 URL을 통해 지원 페이지에 접근할 수 없습니다. 모달 확인 시 이전 페이지로 자동 이동하는 기능도 함께 구현되었습니다.
105-106: 이메일 입력 필드 초기값 설정 로직 개선사용자 데이터 구조 변경에 맞게 이메일 입력 필드 초기값 설정 로직을 업데이트했습니다. 이제 옵셔널 체이닝을 통해 안전하게 이메일 값을 설정합니다.
157-157: 단계 컴포넌트 상호작용 제거PR 목표에 명시된 대로 단계 컴포넌트 클릭 시 해당 단계로 이동하는 기능을 제거했습니다. 이제 사용자는 '이전'과 '다음' 버튼만으로 단계를 이동할 수 있습니다.
137-141: 모달 확인 콜백 추가모달에 확인 콜백을 추가하여 모달이 닫힐 때 추가 동작을 수행할 수 있도록 했습니다. 이를 통해 모달 확인 시 네비게이션 등의 후속 작업이 가능해졌습니다.
201-205: 모달 확인 콜백 추가두 번째 모달에도 동일하게 확인 콜백을 추가했습니다. 이를 통해 모든 모달에서 일관된 사용자 경험을 제공합니다.
구현내용
연관이슈
close #299
Summary by CodeRabbit
신규 기능
버그 수정
리팩터
스타일
문서화