♻️ reflect the contents of the PR(#78).

- add offscreen style constant. - cellWidth -> columnsWidth - px -> rem - change Table children component naming - remove children type in TableProps
Co-Studo · Nov 3, 2022 · 2883113 · 2883113
1 parent d08b98a
commit 2883113
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 79 deletions.
diff --git a/src/components/common/Table/index.tsx b/src/components/common/Table/index.tsx
@@ -3,18 +3,18 @@ import { css } from 'styled-components';
 
 import FlexBox from '@components/common/FlexBox';
 import Text from '@components/common/Text';
+import { offscreen } from '@styles/commonStyles';
 
 type TableDefaultProps = {
   children: ReactElement | ReactElement[];
 };
 
 export interface TableProps extends TableDefaultProps {
   caption: string;
-  cellWidth?: string[];
-  children: ReactElement | ReactElement[];
+  columnsWidth?: string[];
 }
 
-const Table = ({ caption, cellWidth, children }: TableProps) => (
+const Table = ({ caption, columnsWidth, children }: TableProps) => (
   <table
     css={css`
       width: 100%;
@@ -23,21 +23,10 @@ const Table = ({ caption, cellWidth, children }: TableProps) => (
       table-layout: fixed;
     `}
   >
-    <caption
-      css={css`
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        clip-path: polygon(0 0, 0 0, 0 0);
-      `}
-    >
-      {caption}
-    </caption>
-    {cellWidth && (
+    <caption css={offscreen}>{caption}</caption>
+    {columnsWidth && (
       <colgroup>
-        {cellWidth?.map((width, index) => (
+        {columnsWidth.map((width, index) => (
           <col key={index} width={width} />
         ))}
       </colgroup>
@@ -79,7 +68,7 @@ type CellSX = {
 const flexCss = {
   justifyContent: 'center',
   alignItems: 'center',
-  gap: '10px',
+  gap: '1rem',
 } as Pick<ComponentProps<typeof FlexBox>, 'sx'>;
 
 type ThProps = {
@@ -106,10 +95,10 @@ const Td = ({ sx = {}, children, ...restProps }: TdProps) => (
   </td>
 );
 
-Table.Thead = Thead;
-Table.Tbody = Tbody;
-Table.Tr = Tr;
-Table.Th = Th;
-Table.Td = Td;
+Table.Head = Thead;
+Table.Body = Tbody;
+Table.Row = Tr;
+Table.HeadCell = Th;
+Table.BodyCell = Td;
 
 export default Table;
diff --git a/src/components/common/Table/table.stories.tsx b/src/components/common/Table/table.stories.tsx
@@ -33,25 +33,28 @@ const noticeList = [
 ];
 
 export const NoticeList: ComponentStory<typeof Table> = () => (
-  <Table caption="공지사항" cellWidth={['85px', '*', '120px', '120px', '85px']}>
-    <Table.Thead>
-      <Table.Tr>
-        <Table.Th>번호</Table.Th>
-        <Table.Th>제목</Table.Th>
-        <Table.Th>작성자</Table.Th>
-        <Table.Th>날짜</Table.Th>
-        <Table.Th>조회수</Table.Th>
-      </Table.Tr>
-    </Table.Thead>
-    <Table.Tbody>
+  <Table
+    caption="공지사항"
+    columnsWidth={['85px', '*', '120px', '120px', '85px']}
+  >
+    <Table.Head>
+      <Table.Row>
+        <Table.HeadCell>번호</Table.HeadCell>
+        <Table.HeadCell>제목</Table.HeadCell>
+        <Table.HeadCell>작성자</Table.HeadCell>
+        <Table.HeadCell>날짜</Table.HeadCell>
+        <Table.HeadCell>조회수</Table.HeadCell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
       {noticeList
         .reverse()
         .map(({ id, title, writer, date, view, commentCount }) => (
-          <Table.Tr key={id}>
-            <Table.Td>
+          <Table.Row key={id}>
+            <Table.BodyCell>
               <Text ellipsis>{id}</Text>
-            </Table.Td>
-            <Table.Td
+            </Table.BodyCell>
+            <Table.BodyCell
               sx={{
                 justifyContent: 'flex-start',
               }}
@@ -65,19 +68,19 @@ export const NoticeList: ComponentStory<typeof Table> = () => (
                   {commentCount}
                 </Text.Highlight>
               )}
-            </Table.Td>
-            <Table.Td>
+            </Table.BodyCell>
+            <Table.BodyCell>
               <Text ellipsis>{writer}</Text>
-            </Table.Td>
-            <Table.Td>
+            </Table.BodyCell>
+            <Table.BodyCell>
               <Text ellipsis>{date}</Text>
-            </Table.Td>
-            <Table.Td>
+            </Table.BodyCell>
+            <Table.BodyCell>
               <Text ellipsis>{view}</Text>
-            </Table.Td>
-          </Table.Tr>
+            </Table.BodyCell>
+          </Table.Row>
         ))}
-    </Table.Tbody>
+    </Table.Body>
   </Table>
 );
 
@@ -136,33 +139,33 @@ const STATUS = {
 export const MemberManagementList: ComponentStory<typeof Table> = () => (
   <Table
     caption="스터디 멤버 관리"
-    cellWidth={['*', '15%', '15%', '13%', '13%', '13%', '13%']}
+    columnsWidth={['*', '15%', '15%', '13%', '13%', '13%', '13%']}
   >
-    <Table.Thead>
-      <Table.Tr>
-        <Table.Th>닉네임</Table.Th>
-        <Table.Th>상태</Table.Th>
-        <Table.Th>가입일</Table.Th>
-        <Table.Th>활동일</Table.Th>
-        <Table.Th>
+    <Table.Head>
+      <Table.Row>
+        <Table.HeadCell>닉네임</Table.HeadCell>
+        <Table.HeadCell>상태</Table.HeadCell>
+        <Table.HeadCell>가입일</Table.HeadCell>
+        <Table.HeadCell>활동일</Table.HeadCell>
+        <Table.HeadCell>
           미 체크인
           <Icon iconName="star" size="large" />
-        </Table.Th>
-        <Table.Th>
+        </Table.HeadCell>
+        <Table.HeadCell>
           미 체크아웃
           <Icon iconName="star" size="large" />
-        </Table.Th>
-        <Table.Th>벌점</Table.Th>
-      </Table.Tr>
-    </Table.Thead>
-    <Table.Tbody>
+        </Table.HeadCell>
+        <Table.HeadCell>벌점</Table.HeadCell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
       {memberManagementList.map((props) => (
-        <Table.Tr key={props.id}>
-          <Table.Td sx={{ justifyContent: 'flex-start' }}>
+        <Table.Row key={props.id}>
+          <Table.BodyCell sx={{ justifyContent: 'flex-start' }}>
             <Icon iconName="anonymous" size="large" color="borderLine" />
             <Text ellipsis>{props.nickName}</Text>
-          </Table.Td>
-          <Table.Td>
+          </Table.BodyCell>
+          <Table.BodyCell>
             <Text ellipsis>
               <Text.Highlight
                 as="strong"
@@ -171,24 +174,24 @@ export const MemberManagementList: ComponentStory<typeof Table> = () => (
                 {STATUS[props.status].text}
               </Text.Highlight>
             </Text>
-          </Table.Td>
-          <Table.Td>
+          </Table.BodyCell>
+          <Table.BodyCell>
             <Text ellipsis>{props.dateOfSubscription}</Text>
-          </Table.Td>
-          <Table.Td>
+          </Table.BodyCell>
+          <Table.BodyCell>
             <Text ellipsis>{props.periodOfActivity}일</Text>
-          </Table.Td>
-          <Table.Td>
+          </Table.BodyCell>
+          <Table.BodyCell>
             <Text ellipsis>{props.uncheckin}회</Text>
-          </Table.Td>
-          <Table.Td>
+          </Table.BodyCell>
+          <Table.BodyCell>
             <Text ellipsis>{props.uncheckout}회</Text>
-          </Table.Td>
-          <Table.Td>
+          </Table.BodyCell>
+          <Table.BodyCell>
             <Text ellipsis>{props.penaltyPoint}점</Text>
-          </Table.Td>
-        </Table.Tr>
+          </Table.BodyCell>
+        </Table.Row>
       ))}
-    </Table.Tbody>
+    </Table.Body>
   </Table>
 );
diff --git a/src/styles/commonStyles.ts b/src/styles/commonStyles.ts
@@ -0,0 +1,10 @@
+import { CSSObject } from 'styled-components';
+
+export const offscreen: CSSObject = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  clipPath: 'polygon(0 0, 0 0, 0 0)',
+};