[UI] 목표 상세페이지 구현 #94
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,17 +14,36 @@ import pr2 from '../../assets/icons/pr-2-sm.svg'; | |
| import pr3 from '../../assets/icons/pr-3-sm.svg'; | ||
| import pr4 from '../../assets/icons/pr-4-sm.svg'; | ||
| import IcProfile from '../../assets/icons/user-circle-sm.svg'; | ||
| import IcCalendar from '../../assets/icons/date-lg.svg'; | ||
| import IcIssue from '../../assets/icons/issue.svg'; | ||
|
|
||
| import { getStatusColor } from '../../utils/listItemUtils'; | ||
| import { statusLabelToCode } from '../../types/detailitem'; | ||
| import CommentSection from '../../components/DetailView/Comment/CommentSection'; | ||
| import CalendarDropdown from '../../components/Calendar/CalendarDropdown'; | ||
| import { useDropdownActions, useDropdownInfo } from '../../hooks/useDropdown'; | ||
| import { formatDateDot } from '../../utils/formatDate'; | ||
| import ArrowDropdown from '../../components/Dropdown/ArrowDropdown'; | ||
|
|
||
| const GoalDetail = () => { | ||
| const [title, setTitle] = useState(''); | ||
| const [isCompleted, setIsCompleted] = useState(false); | ||
|
|
||
| // '기한' 속성의 달력 드롭다운: 시작일, 종료일 2개를 저장 | ||
| const [selectedDate, setSelectedDate] = useState<[Date | null, Date | null]>([null, null]); | ||
|
|
||
| const [option, setOption] = useState<string>('이슈'); | ||
| const { isOpen, content } = useDropdownInfo(); // 현재 드롭다운의 열림 여부와 내용 가져옴 | ||
| const { openDropdown, closeDropdown } = useDropdownActions(); | ||
|
|
||
| // '기한' 속성의 텍스트(시작일, 종료일) 결정하는 함수 | ||
| const getDisplayText = () => { | ||
| const [start, end] = selectedDate; | ||
| if (start && end) return `${formatDateDot(start)} - ${formatDateDot(end)}`; // 시작일과 종료일 둘 다 있을 경우 | ||
| if (start || end) return formatDateDot(start ?? end!); // 날짜 하나만 선택된 경우 | ||
| return '기한'; // 날짜 선택 안 된 경우: default로 '기한' 글씨가 그대로 보이도록 | ||
| }; | ||
|
|
||
| // '우선순위' 속성 아이콘 매핑 | ||
| const priorityIconMap = { | ||
| 우선순위: pr3, | ||
|
|
@@ -58,7 +77,7 @@ const GoalDetail = () => { | |
| {/* 상세페이지 메인 */} | ||
| <div className="flex px-[3.2rem] gap-[8.8rem] w-full h-full"> | ||
| {/* 상세페이지 좌측 영역 - 제목 & 상세설명 & 댓글 */} | ||
| <div className="flex flex-col gap-[3.2rem] w-[calc(100%-33rem)] h-full"> | ||
| {/* 상세페이지 제목 */} | ||
| <DetailTitle | ||
| defaultTitle="목표를 생성하세요" | ||
|
|
@@ -111,19 +130,59 @@ const GoalDetail = () => { | |
| </div> | ||
|
|
||
| {/* (4) 기한 */} | ||
| <div | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| openDropdown({ name: 'date' }); | ||
| }} | ||
| 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={IcCalendar} alt="date" /> | ||
| <div className="relative"> | ||
| {/* '기한' 항목명 - 날짜 설정하면 반영됨 */} | ||
| <span className={`font-body-r text-gray-600`}>{getDisplayText()}</span> | ||
| {/* 달력 드롭다운 오픈 */} | ||
| {isOpen && content?.name === 'date' && ( | ||
| <CalendarDropdown | ||
| selectedDate={selectedDate} | ||
| onSelect={(date) => setSelectedDate(date)} | ||
| /> | ||
| )} | ||
| </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} | ||
| /> | ||
| )} | ||
|
Comment on lines
+172
to
+183
Collaborator
There was a problem hiding this comment. P1: 드롭다운이 정상적으로 닫히지 않는 문제는 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()}
>
Member
Author
There was a problem hiding this comment. 이거는 아래 내용 보시면, 해당 속성 항목이 차지하는 전체 영역을 눌렀을 때 드롭다운이 열리게 하는 방식으로 UX를 개선하고자 e.stopPropagation() 처리도 속성 항목의 최상위 div에 적용을 했는데요, 바로 직속 상위 div 태그에 이벤트 처리하지 않고, 아래와 같은 방식으로 처리하면 해당 이벤트 처리가 안 먹히는 건가 싶어서 해당 e.stopPropagation() 처리만 최상위 div 태그가 아닌 바로 직속 상위 div 태그에 넣어봤는데, 이렇게 하면 문제는 해결되지만 대신에 바로 직속 상위 div 태그인 속성 이름을 클릭하면 드롭다운이 열리지 않는 문제가 생깁니다... 이 부분에 대해서도 한번만 봐주시면 좋을 것 같아요.... ㅠㅠ 어떻게 해야할지 모르겠습니다 @gaeulzzang
Collaborator
There was a problem hiding this comment. 
GoalDetail.tsx 코드는 그대로 두고 ArrowDropdown.tsx 코드로 가서 제가 마우스로 드래그한 부분만 추가해주시면 됩니답
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p2: 기한명 서식 2025.07.28 이 아닌 25.07.08 입니다
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 감사합니다 수정 반영하겠습니다~