[FEAT] 마이페이지 매칭 현황 화면 구현 #64
Conversation
✅ Deploy Preview for umc-nect ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @kyeongb-bin, I'm Gemini Code Assist1! 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
Changelog
Activity
Using Gemini Code AssistThe 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
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 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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| interface CTAModalProps { | ||
| message: string | ||
| subMessage?: string | ||
| isMessageHighlight?: boolean | ||
| fixedHeight?: boolean | ||
| // 단일 버튼 모드 | ||
| buttonMsg?: string | ||
| onButtonClick?: () => void | ||
| // 이중 버튼 모드 | ||
| leftButtonMsg?: string | ||
| rightButtonMsg?: string | ||
| onLeftClick?: () => void | ||
| onRightClick?: () => void | ||
| } |
There was a problem hiding this comment.
CTAModalProps 인터페이스는 단일 버튼 모드와 이중 버튼 모드에 대한 props를 모두 옵셔널로 정의하고 있어, 의도치 않은 props 조합(예: buttonMsg와 leftButtonMsg를 함께 사용)이 전달될 수 있습니다. 이는 타입 안정성을 저해할 수 있습니다.
Discriminated Union 타입을 사용하여 두 모드를 명확히 구분하면 컴포넌트의 의도를 더 명확하게 하고 타입 안정성을 높일 수 있습니다.
interface CTAModalBaseProps {
message: string
subMessage?: string
isMessageHighlight?: boolean
fixedHeight?: boolean
}
type CTAModalProps = CTAModalBaseProps & (
| {
// 단일 버튼 모드
buttonMsg: string
onButtonClick?: () => void
leftButtonMsg?: never
rightButtonMsg?: never
onLeftClick?: never
onRightClick?: never
}
| {
// 이중 버튼 모드
buttonMsg?: never
onButtonClick?: never
leftButtonMsg: string
rightButtonMsg: string
onLeftClick?: () => void
onRightClick?: () => void
}
)
| <div | ||
| className={`flex flex-col items-center text-center whitespace-pre-line ${isSingleButtonMode ? 'gap-[18px] py-1' : ''} ${isMessageHighlight ? 'text-primary-500-normal' : 'text-neutral-900'} ${fixedHeight ? ' h-40.5' : ''}`} | ||
| > | ||
| <span className='leading-[160%] text-[20px] font-bold'>{parseMessage(message)}</span> | ||
|
|
||
| <div className={`body-1 font-medium text-neutral-600 ${isSingleButtonMode ? '' : 'mt-4.5'} ${!subMessage ? 'min-h-[24px]' : ''}`}> | ||
| {subMessage} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
이 컴포넌트 내에서 조건부 클래스명을 문자열 템플릿으로 처리하고 있습니다. 프로젝트의 다른 컴포넌트들과 일관성을 맞추고 가독성을 높이기 위해 cn 유틸리티를 사용하는 것이 좋습니다.
먼저 import { cn } from '@/utils/cn'를 추가한 후, 다음과 같이 수정할 수 있습니다.
<div
className={cn(
'flex flex-col items-center text-center whitespace-pre-line',
isSingleButtonMode && 'gap-[18px] py-1',
isMessageHighlight ? 'text-primary-500-normal' : 'text-neutral-900',
fixedHeight && 'h-40.5'
)}
>
<span className='leading-[160%] text-[20px] font-bold'>{parseMessage(message)}</span>
<div className={cn('body-1 font-medium text-neutral-600', !isSingleButtonMode && 'mt-4.5', !subMessage && 'min-h-[24px]')}>
{subMessage}
</div>
</div>
| nickname={member.nickname} | ||
| part={member.part} | ||
| introduction={member.introduction} | ||
| onMessageClick={() => console.log(`${member.nickname}에게 메시지 보내기`)} |
There was a problem hiding this comment.
console.log는 개발 중 디버깅에는 유용하지만, 프로덕션 코드에 포함되어서는 안 됩니다. 실제 기능 구현 시 제거하거나, 필요하다면 적절한 로깅 라이브러리로 대체해야 합니다. 이 파일의 다른 부분들(예: 343, 357, 372, 386, 401, 415행)에도 console.log가 남아있습니다.
| onMessageClick={() => console.log(`${member.nickname}에게 메시지 보내기`)} | |
| onMessageClick={() => { /* 메시지 보내기 기능 구현 */ }} |
| {/* 매칭 거절 확인 모달 */} | ||
| {modalType === 'reject' && ( | ||
| <CTAModal | ||
| message='매칭 요청을 {거절} 하시겠습니까?' | ||
| subMessage='거절 후 되돌릴 수 없습니다.' | ||
| leftButtonMsg='돌아가기' | ||
| rightButtonMsg='매칭 거절' | ||
| onLeftClick={() => setModalType(null)} | ||
| onRightClick={() => { | ||
| console.log('매칭 거절 확인') | ||
| setModalType('rejectSuccess') | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {/* 매칭 거절 성공 모달 */} | ||
| {modalType === 'rejectSuccess' && ( | ||
| <CTAModal | ||
| message='매칭 요청이 거절 되었습니다' | ||
| subMessage='' | ||
| isMessageHighlight={true} | ||
| buttonMsg='확인' | ||
| onButtonClick={() => { | ||
| console.log('매칭 거절 성공 확인') | ||
| setModalType(null) | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {/* 매칭 수락 확인 모달 */} | ||
| {modalType === 'accept' && ( | ||
| <CTAModal | ||
| message='매칭 요청을 {수락} 하시겠습니까?' | ||
| subMessage='수락 후 번복 할 수 없습니다.' | ||
| leftButtonMsg='돌아가기' | ||
| rightButtonMsg='매칭 수락' | ||
| onLeftClick={() => setModalType(null)} | ||
| onRightClick={() => { | ||
| console.log('매칭 수락 확인') | ||
| setModalType('acceptSuccess') | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {/* 매칭 수락 성공 모달 */} | ||
| {modalType === 'acceptSuccess' && ( | ||
| <CTAModal | ||
| message='매칭이 수락 되었습니다' | ||
| subMessage='넥트가 응원할게요 !' | ||
| isMessageHighlight={true} | ||
| buttonMsg='확인' | ||
| onButtonClick={() => { | ||
| console.log('매칭 수락 성공 확인') | ||
| setModalType(null) | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {/* 매칭 취소 확인 모달 */} | ||
| {modalType === 'cancel' && ( | ||
| <CTAModal | ||
| message='매칭 요청을 {취소} 하시겠습니까?' | ||
| subMessage='취소 후 24시간 동안 해당 프로젝트 매칭 신청이 제한됩니다.' | ||
| leftButtonMsg='돌아가기' | ||
| rightButtonMsg='매칭 취소' | ||
| onLeftClick={() => setModalType(null)} | ||
| onRightClick={() => { | ||
| console.log('매칭 취소 확인') | ||
| setModalType('cancelSuccess') | ||
| }} | ||
| /> | ||
| )} | ||
|
|
||
| {/* 매칭 취소 성공 모달 */} | ||
| {modalType === 'cancelSuccess' && ( | ||
| <CTAModal | ||
| message='매칭 요청이 취소 되었습니다' | ||
| subMessage='' | ||
| isMessageHighlight={true} | ||
| buttonMsg='확인' | ||
| onButtonClick={() => { | ||
| console.log('매칭 취소 성공 확인') | ||
| setModalType(null) | ||
| }} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
모달을 렌더링하는 부분이 여러 조건부 렌더링으로 반복되고 있어 코드가 길고 유지보수가 어렵습니다.
modalType에 따라 모달에 전달될 props를 정의하는 설정(configuration) 객체를 만들고, 이를 기반으로 CTAModal을 한 번만 렌더링하도록 리팩토링하면 코드를 더 간결하고 선언적으로 만들 수 있습니다. 이는 코드 중복을 줄이고 가독성을 향상시킬 것입니다.
kyeongb-bin
force-pushed
the
feat/57-matching-status
branch
from
ce55809 to
a60fcca
Compare
kyeongb-bin
force-pushed
the
feat/57-matching-status
branch
from
29c3a30 to
2e17992
Compare
4 participants
[FEAT] 마이페이지 매칭 현황 화면 구현
🎯 Issue
📝 변경 내용
마이페이지 내 매칭 현황 화면을 구현하고, 관련 컴포넌트들을 재사용 가능하도록 리팩토링했습니다.
주요 구현 내용
매칭 현황 페이지 구현
매칭 현황 컴포넌트 구현
매칭 액션 모달 구현
공용 컴포넌트 개선
✅ 변경 사항
📷 스크린샷
📋 체크리스트