[유저] 수강신청 연습페이지 UI 컴포넌트 구현#1136
Conversation
Gwak-Seungju
left a comment
Gwak-Seungju
left a comment
There was a problem hiding this comment.
고생하셨습니다~! 몇 가지 고치면 좋을 것 같은 부분 코멘트 남겼습니다!
제 기억과 학사 > 수강신청(정정) 탭을 보고 느낀 부분을 얘기해볼게용.
실제 수강신청 페이지와 비교했을 때 컴포넌트들이 너무 큰 느낌인 것 같아요.
전체 요소들에 대해서는 정확하게 기억나지는 않지만, 예비수강과목 컴포넌트에 대해서는 정확히 기억이 납니다..!
해당 테이블에 과목이 한 7~8개까지만 보이고 나머지는 스크롤해서 내려서 신청해야 했던 기억이 있습니다. 따라서 컴포넌트 높이를 줄여야 할 것 같습니다!
현재 회사 컴퓨터 환경으로는 이렇게 보이네욥.. 노트북이면 컴포넌트 크기가 줄을 것 같긴 한데, 보통 수강신청은 데스크탑으로 하니까 고정 높이를 주는 게 좋을 것 같아요.
| <input | ||
| id="course-name" | ||
| className={styles.search__input} | ||
| type="text" | ||
| placeholder="과목명 또는 코드" | ||
| value={formInputs.name} | ||
| onChange={onNameChange} | ||
| /> |
There was a problem hiding this comment.
엔터 눌러서 검색 가능하게 onKeyDown 이벤트 추가해도 좋을 것 같아요.
학사 > 수강신청(정정) 탭에서는 엔터 검색 기능이 가능한데, 실제 수강신청 페이지도 가능하겠죵..? 기억이 잘 안 나네용..
There was a problem hiding this comment.
제 기억에도 엔터 검색이 가능했던걸로 기억해서 추가했습니다!
| const sizeClass = variant === 'open' ? styles['table--full'] : styles['table--half']; | ||
| const variantClass = styles[`table--${variant}`]; |
There was a problem hiding this comment.
오.. 요소에 직접 주는 것보다 변수 선언해서 하는 게 더 좋아보이네용.. 👍
| <div className={styles['table__body-wrapper']}> | ||
| <table className={styles['table__body-table']}> | ||
| <tbody> | ||
| {data.map((item, index) => ( | ||
| <tr key={getRowKey(item, index)} className={styles.table__row}> | ||
| {columns.map((col) => ( | ||
| <td key={col.key} className={styles.table__td}> | ||
| {col.render(item, index)} | ||
| </td> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> |
There was a problem hiding this comment.
제 환경에서는 스크롤바가 생기면서 tbody에 있는 요소들이 약간 밀려서 칸이 깨지는 현상이 나오고 있어욥!
table__body-wrapper를 thead까지 포함시키면 좋을 것 같아요!
| const col = { | ||
| no: <T,>(): Column<T> => ({ | ||
| key: 'no', | ||
| header: 'No.', | ||
| render: (_, index) => index + 1, | ||
| }), |
There was a problem hiding this comment.
처음보는 방식입니다.. 제 기준에서는 잘 만들어진 것 같아요. 👍👍
말씀해주신 부분 보완해서 전체적인 UI 수정해보았습니다!
|
Gwak-Seungju
left a comment
Gwak-Seungju
left a comment
There was a problem hiding this comment.
반영 감사합니당!
스크롤바 관련해서 추가 답변 달았습니다.
추가로 지금 발견한건데 No가 100 이상 되면 말줄임표 처리되는 이슈가 있네욥! 고치면 좋을 것 같습니다!
| position: static; | ||
| border-top: 2px solid #1f74c2; |
There was a problem hiding this comment.
엇 th에 border-top을 주는 것보다 그냥 원래 했던 table__container에 border-top 주는 게 외관상 좋아보이는데 어떨까욥..? 제 개인적인 생각입니당..
추가로 기본값인 position static을 준 이유가 있을까용?
There was a problem hiding this comment.
border와 position 모두 th를 sticky로 적용하면서 플리커링 현상이 있어서 고치는 과정에서 이것저것 시도해보다가 다시 돌려놓지 않고 커밋했던거라 다시 수정했습니다! 감사합니다!
2 participants
What is this PR? 🔍
Changes 📝
백엔드 트랙의 두현님꼐서 수강신청 연습 페이지를 코인에 구현해보고자 하셨고 api를 구현하여 주셔서 만들게 되었습니다.
ScreenShot 📷
Precaution
css의 경우 학사페이지의 css를 차용했습니다. 그러므로 코드가 길지만 css는 조금 편하게 넘어가면서 보셔도 괜찮지 않을까... 싶습니다.
✔️ Please check if the PR fulfills these requirements
developbranch unconditionally?main?yarn lint