[Dony] Table 컴포넌트 구현 #7
There are no files selected for viewing
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| export const SortingIcon = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="17" | ||
| height="14" | ||
| viewBox="0 0 17 14" | ||
| > | ||
| <path | ||
| id="다각형_3" | ||
| data-name="다각형 3" | ||
| d="M7.645,1.408a1,1,0,0,1,1.71,0l6.723,11.073A1,1,0,0,1,15.223,14H1.777a1,1,0,0,1-.855-1.519Z" | ||
| transform="translate(17 14) rotate(180)" | ||
| fill="#007aff" | ||
| /> | ||
| </svg> | ||
| ); |
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| export const noticeList = [ | ||
| { | ||
| id: 1, | ||
| title: '스터디 가입전 해당 공지사항을 숙지해주세요.', | ||
| writer: '파크', | ||
| date: 1669750385300, | ||
| view: 101, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: '스터디 전체 공지 드립니다.', | ||
| writer: '도니', | ||
| date: 1662476400000, | ||
| view: 110, | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: '스터디 전체 공지 드립니다.', | ||
| writer: '햄디', | ||
| date: 1662476400000, | ||
| view: 9, | ||
| }, | ||
| { | ||
| id: 4, | ||
| title: '스터디 전체 공지 드립니다.', | ||
| writer: '제이미', | ||
| date: 1668750300553, | ||
| view: 9, | ||
| }, | ||
| ]; |
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { BasicTable, Text } from '@cos-ui/react'; | ||
|
|
||
| import { noticeList } from '@constants/mock'; | ||
|
|
||
| const getDateForm = (date: number) => { | ||
| const dateArray = [ | ||
| new Date(date).getFullYear(), | ||
| new Date(date).getMonth() + 1, | ||
| new Date(date).getDate(), | ||
| ]; | ||
|
|
||
| return dateArray | ||
| .map((number) => (number < 10 ? `0${number}` : number)) | ||
| .join('.'); | ||
| }; | ||
|
|
||
| const BasicTablePage = () => ( | ||
| <BasicTable caption="test" columnsWidth={['10rem', '*', '12rem', '10rem']}> | ||
| {noticeList.map(({ id, title, writer, date, view }) => ( | ||
| <BasicTable.Row key={id}> | ||
| <BasicTable.BodyCell> | ||
| <Text sx={{ textAlign: 'center' }} ellipsis> | ||
| {writer} | ||
| </Text> | ||
| </BasicTable.BodyCell> | ||
| <BasicTable.BodyCell> | ||
| <Text ellipsis>{title}</Text> | ||
| </BasicTable.BodyCell> | ||
| <BasicTable.BodyCell> | ||
| <Text sx={{ textAlign: 'center' }} ellipsis> | ||
| {getDateForm(date)} | ||
| </Text> | ||
| </BasicTable.BodyCell> | ||
| <BasicTable.BodyCell> | ||
| <Text sx={{ textAlign: 'center' }} ellipsis> | ||
| {view} | ||
| </Text> | ||
| </BasicTable.BodyCell> | ||
| </BasicTable.Row> | ||
| ))} | ||
| </BasicTable> | ||
| ); | ||
|
|
||
| export default BasicTablePage; | ||
This file contains 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 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 |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { RowTable, Text, FlexBox } from '@cos-ui/react'; | ||
|
|
||
| import { SortingIcon } from '@constants/icons'; | ||
| import { noticeList } from '@constants/mock'; | ||
|
|
||
| const sortingValues = { | ||
| writer: noticeList.map(({ writer }) => writer), | ||
| date: noticeList.map(({ date }) => date), | ||
| view: noticeList.map(({ view }) => Number(view)), | ||
| }; | ||
|
|
||
| const getDateForm = (date: number) => { | ||
| const dateArray = [ | ||
| new Date(date).getFullYear(), | ||
| new Date(date).getMonth() + 1, | ||
| new Date(date).getDate(), | ||
| ]; | ||
|
|
||
| return dateArray | ||
| .map((number) => (number < 10 ? `0${number}` : number)) | ||
| .join('.'); | ||
| }; | ||
|
|
||
| const RowTablePage = () => ( | ||
| <RowTable | ||
| caption="공지사항" | ||
| columnsWidth={['12rem', '25%', '25%', '25%', '25%']} | ||
| sortingValues={sortingValues} | ||
| > | ||
| <RowTable.Row> | ||
| <RowTable.HeadCell>번호</RowTable.HeadCell> | ||
| {noticeList.map(({ id }) => ( | ||
| <RowTable.BodyCell key={id}> | ||
| <Text ellipsis>{id}</Text> | ||
| </RowTable.BodyCell> | ||
| ))} | ||
| </RowTable.Row> | ||
| <RowTable.Row> | ||
| <RowTable.HeadCell>제목</RowTable.HeadCell> | ||
| {noticeList.map(({ id, title }) => ( | ||
| <RowTable.BodyCell key={id}> | ||
| <Text ellipsis>{title}</Text> | ||
| </RowTable.BodyCell> | ||
| ))} | ||
| </RowTable.Row> | ||
| <RowTable.Row> | ||
| <RowTable.HeadCell name="writer"> | ||
| <FlexBox | ||
| sx={{ justifyContent: 'center', alignItems: 'center', gap: '1rem' }} | ||
| > | ||
| 작성자 | ||
| <SortingIcon /> | ||
| </FlexBox> | ||
| </RowTable.HeadCell> | ||
| {noticeList.map(({ id, writer }) => ( | ||
| <RowTable.BodyCell key={id}> | ||
| <Text ellipsis>{writer}</Text> | ||
| </RowTable.BodyCell> | ||
| ))} | ||
| </RowTable.Row> | ||
| <RowTable.Row> | ||
| <RowTable.HeadCell name="date"> | ||
| <FlexBox | ||
| sx={{ justifyContent: 'center', alignItems: 'center', gap: '1rem' }} | ||
| > | ||
| 날짜 | ||
| <SortingIcon /> | ||
| </FlexBox> | ||
| </RowTable.HeadCell> | ||
| {noticeList.map(({ id, date }) => ( | ||
| <RowTable.BodyCell key={id}> | ||
| <Text ellipsis>{getDateForm(date)}</Text> | ||
| </RowTable.BodyCell> | ||
| ))} | ||
| </RowTable.Row> | ||
| <RowTable.Row> | ||
| <RowTable.HeadCell name="view"> | ||
| <FlexBox | ||
| sx={{ justifyContent: 'center', alignItems: 'center', gap: '1rem' }} | ||
| > | ||
| 조회수 | ||
| <SortingIcon /> | ||
| </FlexBox> | ||
| </RowTable.HeadCell> | ||
| {noticeList.map(({ id, view }) => ( | ||
| <RowTable.BodyCell key={id}> | ||
| <Text ellipsis>{view}</Text> | ||
| </RowTable.BodyCell> | ||
| ))} | ||
| </RowTable.Row> | ||
| </RowTable> | ||
| ); | ||
|
|
||
| export default RowTablePage; |
This file contains 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 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
Oops, something went wrong.
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.
다른 곳에서도 쓰일 것 같아서 분리해도 좋을 것 같네요~
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.
playground 는 예시를 만들어놓는 패키지라 utils 폴더가 좀 고민되네요..!
단지 예시로 만든 데이터에 쓸 함수인데 util로 빼는게 적절할까요??
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.
helpers 정도로 빼도 좋을 것 같아요
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.
분리를 해야하나 말아야하나가 고민이였던건데 분리를 해야한다면 용도로는 util이 맞는거 같아요! 다른 플젝에도 쓸 수 있는 함수니까요.
-> 그럼 helpers 안에 컴포넌트 이름 별로 폴더를 만들어서 컴포넌트에 필요한 함수들을 빼는걸로 할께요!
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.
@healtheloper 혹시 utils가 아니라 helpers로 분리하는 이유가 뭔지 여쭤봐도 될까요? 나쁘지는 않은 것 같은데 정확히 어떤 차이 때문에 helpers로 구분하는지 궁금해서요!
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.
@hemudi 관점의 차이이긴 할텐데 utils 라고 하면 "YYYY.MM.DD" 뿐만 아니라 다양한 것도 적용할 수 있어야 할 것 같다고 생각했어요, 예를들어 다른 프로젝트에서 "YYYY:MM:DD:SS" 로 쓰고싶은데? 한다면 살을 덧붙여 추가해내는 법도 있긴 하겠지만 당장에는 해당 프로젝트에서 필요로하는 포맷으로 바꾸는 용도이기 때문에 좀 더 프로젝트의 성격이 들어간 느낌이라 helpers 가 좋지않을까 생각했었습니다