feat: 강의시간표 페이지 구현 #18
Merged
Conversation
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
- Header.tsx -> Header으로 변경했습니다.
- 상단에 탭 부분을 구현했습니다. - 아직 사이드 바와 연동되어 있지 않습니다. 탭 닫기 와 전체 닫기 버튼은 작동하지만 다시 탭을 열 수는 없습니다. - 테마에 선언한 텍스트 스타일의 이름을 변경했습니다. (tap->tab)
This reverts commit c9bd819.
- 드롭다운, 인풋, 조회 버튼을 컴포넌트화 했습니다. - Warning: Received "true" for a non-boolean attribute 오류를 해결했습니다. - 스타일 요소들을 수정했습니다.
- API 연결이 되어있지 않아 임의로 데이터를 만들어 구현했습니다. - 열의 항목들이 페이지마다 달라서 Table을 사용할 때 열 데이터를 만들어 전달해야 합니다.
Closed
3 tasks
stableh
approved these changes
Jul 29, 2024
Member
stableh
left a comment
stableh
left a comment
There was a problem hiding this comment.
지금까지의 코드로 develop merge 한 다음 로컬에서 api 테스트 해보겠습니다! 고생하셨어요!!
Comment on lines
+34
to
+52
| const handleMouseDown = (index: number) => (event: React.MouseEvent) => { | ||
| const startX = event.clientX; | ||
| const startWidth = columnWidths[index]; | ||
|
|
||
| const handleMouseMove = (moveEvent: MouseEvent) => { | ||
| const newWidth = startWidth + (moveEvent.clientX - startX); | ||
| setColumnWidths(prevWidths => | ||
| prevWidths.map((width, i) => (i === index ? newWidth : width)), | ||
| ); | ||
| }; | ||
|
|
||
| const handleMouseUp = () => { | ||
| document.removeEventListener('mousemove', handleMouseMove); | ||
| document.removeEventListener('mouseup', handleMouseUp); | ||
| }; | ||
|
|
||
| document.addEventListener('mousemove', handleMouseMove); | ||
| document.addEventListener('mouseup', handleMouseUp); | ||
| }; |
Member
There was a problem hiding this comment.
이 코드만 봐도 테이블 구현하는데 엄청 힘드셨을 것 같아요.. 고생하셨습니다!!
Comment on lines
+21
to
+43
| const InputWrap = styled.input<{sizes: string}>` | ||
| ${props => props.theme.texts.content}; | ||
|
|
||
| ${props => | ||
| props.sizes === 's' && | ||
| css` | ||
| width: 14rem; | ||
| `}; | ||
| ${props => | ||
| props.sizes === 'm' && | ||
| css` | ||
| width: 19.5rem; | ||
| `}; | ||
| ${props => | ||
| props.sizes === 'xl' && | ||
| css` | ||
| width: 48.5rem; | ||
| `}; | ||
|
|
||
| height: 2.4rem; | ||
| border: 1px solid ${props => props.theme.colors.neutral5}; | ||
| padding-left: 0.8rem; | ||
| `; |
Member
There was a problem hiding this comment.
styled component 이런식으로 활용하니 장점이 보이는 것 같습니다! 많이 배웁니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Issue
Details
탭 닫기 와 전체 닫기 버튼은 작동하지만 다시 탭을 열 수는 없습니다.