-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/fe-078 : 생성 페이지 1.0v 업데이트 적용 #107
Conversation
…to feature/FE-078
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.
생성 페이지 기능 구현 고생하셨습니다! 수정이 필요한 사항들만 반영하면 될 것 같아요
추가적으로 Dropdown.BottomSheet
가 있는 모바일 페이지(ex - 작성페이지 stepOne)의 경우 높이가 작은 화면 상에서 스크롤이 안되고 있는 상황이 발생하고 있는데 제가 만들었던 컴포넌트의 문제여서 아래의 수정사항 적용해주시면 해결될 것 같습니다!
// src/components/BottomSheet/BottomSheetView.tsx
useLockScroll(isOpen); // 인자값에 `isOpen`을 추가해주세요
// src/hooks/useLockScroll.ts
// 훅을 아래의 내용으로 바꿔주세요
const useLockScroll = (isOpen = true) => {
useLayoutEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);
};
<Dropdown.BottomSheet title={title} selectable selectedItemKey={value} onSelectChange={onChange}> | ||
{selections.map((v) => ( | ||
<Dropdown.Item key={v} itemKey={v}> | ||
{v} | ||
</Dropdown.Item> | ||
))} | ||
</Dropdown.BottomSheet> |
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.
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.
추가적으로 시간 선택처럼 목록 내용이 엄청 많은 경우 스크롤이 되도록하는 className을 추가해 Dropdown.BottomSheet
의 인자로 넘겨주어야 할듯 합니다
overflow: 'scroll',
selectors: {
'&::-webkit-scrollbar': {
display: 'none',
},
},
src/app/write/page.tsx
Outdated
const { data: profile } = useProfile(); | ||
const isLogin = Boolean(profile); | ||
if (!isLogin) { | ||
// window.history.back(); |
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.
주석은 제거해주시는게 좋을 것 같아요!
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.
추가적으로 쓰기 페이지를 벗어날때는 전역상태를 초기화 해주는 작업을 해주는 게 좋을 듯 합니다! 안그러면 계속 기존에 입력한 값들이 살아있는 것으로 보입니다
const reset = useFormStore((state) => state.reset);
useEffect(() => {
return () => {
reset();
}
}, []);
<div className={inputGap}> | ||
<InputSection label="날짜" direction="row" required={true}> | ||
<InputDate control={method.control} name={'meetingDate'} /> | ||
</InputSection> | ||
<InputSection label="시간" direction="row" required={true}> | ||
<InputDropdown | ||
control={method.control} | ||
name={'meetingTime'} | ||
placeholder="시간 선택" | ||
selections={getTimeList()} | ||
></InputDropdown> | ||
<InputDate control={stepOneMethod.control} name={'meetingDate'} /> | ||
</InputSection> | ||
<TimeDropDown /> | ||
</div> |
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.
Kudos, SonarCloud Quality Gate passed! 0 Bugs No Coverage information |
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.
👍🏼
체크 리스트
작업 내역
생성 페이지 모바일 컴포넌트 업데이트
생성 페이지 api v2 업데이트
문제 상황과 해결
비고