[UI] 목표 상세페이지 구현#94
Conversation
| <img src={IcCalendar} alt="date" /> | ||
| <div className="relative"> | ||
| {/* '기한' 항목명 - 날짜 설정하면 반영됨 */} | ||
| <span className={`font-body-r text-gray-600`}>{getDisplayText()}</span> |
There was a problem hiding this comment.
p2: 기한명 서식 2025.07.28 이 아닌 25.07.08 입니다
넵 반영하겠습니다! |
gaeulzzang
left a comment
gaeulzzang
left a comment
There was a problem hiding this comment.
드롭다운 관련 이슈는 코드 리뷰에 해결 방법 남겨두었으니 참고 부탁드립니다!
또한, 불필요한 div 태그 사용은 지양하고, 텍스트나 본문 내용은 p 태그를 활용해 구현해주시면 더 좋을 것 같습니다.
| <div className="flex items-center"> | ||
| {/* 속성 항목명 */} | ||
| <div className="font-body-r text-gray-600">{option}</div> | ||
| </div> |
There was a problem hiding this comment.
| <div className="flex items-center"> | |
| {/* 속성 항목명 */} | |
| <div className="font-body-r text-gray-600">{option}</div> | |
| </div> | |
| <p className="font-body-r text-gray-600 max-w-[27.4rem] truncate">{option}</p> |
P1: 속성 항목명을 감싸는 상위 div 태그는 불필요한 것 같아 없애주시면 좋을 것 같습니다!
또한, 글이 들어가기 때문에 div 태그보다는 p태그를 사용하는게 더 적절할 것 같습니다.
truncate을 지정하려면 최대 너비를 지정해야 하므로 ArrowDropdown과 같은 너비인 27.4rem을 지정해주시면 될 것 같습니다!
| {isOpen && content?.name === '이슈' && ( | ||
| <ArrowDropdown | ||
| defaultValue={'이슈'} | ||
| options={[ | ||
| '기능 정의: 구현할 핵심 기능과 어쩌구 저쩌구 텍스트가 길어지면 이렇게 표시', | ||
| '와이어프레임 디자인', | ||
| '컴포넌트 정리', | ||
| ]} | ||
| onSelect={(value: string) => setOption(value)} | ||
| onClose={closeDropdown} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
P1: 드롭다운이 정상적으로 닫히지 않는 문제는 e.stopPropagation() 처리가 누락되어 발생한 것으로 확인되었습니다...
ArrowDropdown.tsx 상위 div 태그에 아래와 같이 onClick 이벤트에 e.stopPropagation()을 추가해주시면 문제를 해결하실 수 있습니다. 죄송합니다 😢
<div
ref={dropdownRef}
style={{ boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.15)' }}
className={`absolute z-30 top-0 left-0 flex flex-col w-[27.4rem]
border border-gray-400 bg-white rounded-[0.4rem] ${className}`}
onClick={(e) => e.stopPropagation()}
>There was a problem hiding this comment.
이거는 아래 내용 보시면, 해당 속성 항목이 차지하는 전체 영역을 눌렀을 때 드롭다운이 열리게 하는 방식으로 UX를 개선하고자 e.stopPropagation() 처리도 속성 항목의 최상위 div에 적용을 했는데요,
바로 직속 상위 div 태그에 이벤트 처리하지 않고, 아래와 같은 방식으로 처리하면 해당 이벤트 처리가 안 먹히는 건가 싶어서 해당 e.stopPropagation() 처리만 최상위 div 태그가 아닌 바로 직속 상위 div 태그에 넣어봤는데, 이렇게 하면 문제는 해결되지만 대신에 바로 직속 상위 div 태그인 속성 이름을 클릭하면 드롭다운이 열리지 않는 문제가 생깁니다...
{/* (5) 이슈 */}
<div
onClick={(e) => {
e.stopPropagation();
openDropdown({ name: '이슈' });
}}
className={`flex w-full h-[3.2rem] px-[0.5rem] rounded-md items-center gap-[0.8rem] mb-[1.6rem] whitespace-nowrap hover:bg-gray-200 cursor-pointer`}
>
{/* 속성 아이콘 */}
<img src={IcIssue} alt="이슈" />
{/* 속성 이름 */}
<div className="flex relative">
{/* 속성 항목명 */}
<p className="font-body-r text-gray-600 max-w-[27.4rem] truncate">{option}</p>
{/* 드롭다운 오픈 */}
{isOpen && content?.name === '이슈' && (
<ArrowDropdown
defaultValue={'이슈'}
options={[
'기능 정의: 구현할 핵심 기능과 어쩌구 저쩌구 텍스트가 길어지면 이렇게 표시',
'와이어프레임 디자인',
'컴포넌트 정리',
]}
onSelect={(value: string) => setOption(value)}
onClose={closeDropdown}
/>
)}
</div>
</div>
이 부분에 대해서도 한번만 봐주시면 좋을 것 같아요.... ㅠㅠ 어떻게 해야할지 모르겠습니다 @gaeulzzang
There was a problem hiding this comment.
GoalDetail.tsx 코드는 그대로 두고 ArrowDropdown.tsx 코드로 가서 제가 마우스로 드래그한 부분만 추가해주시면 됩니답
| <div className="flex items-center"> | ||
| {/* 속성 항목명 */} | ||
| <div className="font-body-r text-gray-600">{value}</div> | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
P1: 속성 항목명도 div로 감싸지 않고 바로 p태그로 적용하는게 좋을 것 같습니다
gaeulzzang
left a comment
gaeulzzang
left a comment
There was a problem hiding this comment.
GoalHome.tsx 보시면 TODO: 추가 버튼 라우터 연결이 있는데 상세페이지랑 버튼 연결해주셔야 할 것 같습니다
네 이 부분도 반영했습니다~ |
|
|
gaeulzzang
left a comment
gaeulzzang
left a comment
There was a problem hiding this comment.
수정사항 확인했습니다~!! 상세페이지 와다다 머지하자!!! ❤️
4 participants
체크리스트
📌 관련 이슈번호
✅ Key Changes
구현한 상세페이지 기본 컴포넌트 기반으로, 목표 상세페이지 구현을 완료했습니다.
주요 변경사항:
CalendarDropdown.tsx)을 '기한' 속성 항목에 연결 완료.ArrowDropdown.tsx)을 '이슈' 속성 항목에 연결 완료.PropertyItem.tsx)으로 변경하여 UX 개선.📸 스크린샷 or 실행영상
2025-08-01.2.47.18.mov
💬 To Reviewers
상세페이지 타이틀 문구가 파묻히는 문제상세페이지 제목 입력하여 작성 완료 버튼을 눌렀을 때 댓글창은 제대로 나타나지만, 상세페이지 제목이 파묻히게 되는 현상=> ✅ 금주에 리팩토링하면서 해당 오류를 수정하였습니다.
기타: 디자인 측에게 추가 기능 명세 물어보고 반영해야 하는 부분들금주에 논의 완료 후 추가 반영하겠습니다.=> ✅ 금주에 논의 완료된 내용(댓글창 위 오버레이되는 흰색 그라데이션)을 반영했습니다.
이슈 드롭다운(
ArrowDropdown.tsx) 관련 요청 @gaeulzzang그외 자잘한 내용들을 마저 수정하였습니다.
확인 후 리뷰 부탁드립니다. @sunhwaaRj @jinj00oo @waldls