-
Notifications
You must be signed in to change notification settings - Fork 0
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
feat(time): TimeTable Modal 추가기능 #215
Conversation
… -> `NEXT_PUBLIC_SERVER_URL`
|
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.
개선사항 제안으로 걸어놨어요, 해당 개선은 @SWARVY님 선택이므로 필요시 수정하면 돼요, PR은 승인합니다
}); | ||
const lectureList = data.data.values; | ||
|
||
return ( | ||
<> |
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.
<> |
)} | ||
</tr> | ||
)} | ||
</tbody> | ||
</> |
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.
</> |
@@ -229,7 +229,7 @@ const TimeTableModalMajorInput = memo(function TimeTableModalMajorInput({ | |||
selectedMajor, | |||
handleMajorInputChange, | |||
}: TimeTableModalMajorInputProps) { | |||
const [inputValue, setInputValue] = useState(''); | |||
const [inputValue, setInputValue] = useState<string>(''); |
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 [inputValue, setInputValue] = useState<string>(''); | |
const [inputValue, setInputValue] = useState(''); |
@@ -229,7 +229,7 @@ const TimeTableModalMajorInput = memo(function TimeTableModalMajorInput({ | |||
selectedMajor, | |||
handleMajorInputChange, | |||
}: TimeTableModalMajorInputProps) { | |||
const [inputValue, setInputValue] = useState(''); | |||
const [inputValue, setInputValue] = useState<string>(''); | |||
const [open, setOpen] = useState<boolean>(false); |
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 [open, setOpen] = useState<boolean>(false); | |
const [open, setOpen] = useState(false); |
queryFn: ({ pageParam }) => | ||
getLectureList({ ...params, cursor: pageParam }), | ||
initialPageParam: 0, | ||
select: (data) => (data.pages ?? []).flatMap((page) => page.data.values), |
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.
select: (data) => (data.pages ?? []).flatMap((page) => page.data.values), | |
select: ({ pages = [] }) => pages.flatMap((page) => page.data.values), |
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.
무한 스크롤 적용으로 사용자 경험이 개선되었네요 🙌
Summary
TimeTableModal
에 미구현되었던 기능들을 구현했습니다.Tasks
useInfiniteQuery
를 사용하여useLectureList
훅 재설계useInfiniteScroll
공용 훅 생성Pretendard
폰트 적용id
가 추가되도록 구현inputValue
가 초기화되도록 변경getAPIURL
유틸 함수가 정상적으로 URL을 반환하지 못하는 문제 수정ETC
TimeTableLectureTable
의thead
부분에sticky
를 적용했는데, 이거 적용하니까border-y
속성이 날아가서 뷰가 조금 부자연스러워 보이는 문제가 있습니다. 해당 문제 해결법 찾아서 수정하도록 하겠습니다.table-auto
속성이 적용되어있어서 특정 데이터의 길이에 따라서 특정 카테고리의 영역이 점점 늘어나는 경우가 있는데, 해당 부분에 대해서 고정 사이즈를 적용하기에는 조금 문제가 있어보여서 해당 부분들은 조금 더 좋은 방법을 찾아보도록 하겠습니다.Screenshot