refactor: make table ul list

Nexters · Aug 4, 2023 · a07b543 · a07b543
1 parent 3100436
commit a07b543
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 33 deletions.
diff --git a/src/client/view/App.tsx b/src/client/view/App.tsx
@@ -64,5 +64,14 @@ const globalStyle = css`
     p {
       margin: 0;
     }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      margin-block: 0;
+      margin-inline: 0;
+      padding-inline-start: 0;
+    }
   }
 `;
diff --git a/src/client/view/share/components/Cell.tsx b/src/client/view/share/components/Cell.tsx
@@ -9,17 +9,21 @@ type CellProps = {
   type: CellType;
   title: string | null;
   isCompleted: boolean;
+  position?: CellPosition;
 };
 
-export const Cell = ({ type, title, isCompleted }: CellProps) => {
+export type CellPosition = 'lt' | 'rt' | 'lb' | 'rb' | 'center';
+
+export const Cell = ({ type, title, isCompleted, position }: CellProps) => {
   const className = cx(
     baseCellBox,
     type === 'sub' && subCellBox,
     type === 'main' && mainCellBox,
     type === 'task' && isCompleted && 'completed',
+    type !== 'task' && position && positionToStyle[position],
   );
   return (
-    <div className={className}>
+    <div role={'checkbox'} className={className} aria-checked={isCompleted}>
       {title}
       {isCompleted && (
         <div className={completedDim}>
@@ -57,9 +61,11 @@ const baseCellBox = css`
 `;
 
 const subCellBox = css`
+  position: absolute;
   background-color: var(--sub-color);
   color: var(--main-color);
   font-weight: 700;
+  z-index: 1;
 `;
 
 const mainCellBox = css`
@@ -68,9 +74,29 @@ const mainCellBox = css`
   font-weight: 700;
 
   position: absolute;
+`;
+
+const center = css`
   top: calc((${TABLE_SIZE} - ${CELL_SIZE}) / 2 * 1px);
   left: calc((${TABLE_SIZE} - ${CELL_SIZE}) / 2 * 1px);
 `;
+const lt = css`
+  top: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+  left: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+`;
+const rt = css`
+  top: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+  right: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+`;
+const lb = css`
+  bottom: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+  left: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+`;
+const rb = css`
+  bottom: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+  right: calc((${TABLE_SIZE} / 2 - ${CELL_SIZE} * 0.5) / 2 * 1px);
+`;
+const positionToStyle = { center, lt, rt, lb, rb } as const;
 
 const completedDim = css`
   position: absolute;

diff --git a/src/client/view/share/components/HeaderSection.tsx b/src/client/view/share/components/HeaderSection.tsx
@@ -23,7 +23,9 @@ export const HeaderSection = ({
       )}
       <h1 className={title}>{detail.title}</h1>
       <div className={progressInfoContainer}>
-        <span className={subtext}>달성률 ({completionRatio}%)</span>
+        <span id={'progressLabel'} className={subtext}>
+          달성률 ({completionRatio}%)
+        </span>
         {detail.dueDate && (
           <span className={cx(subtext, dueDate)}>~{formattedDueDate}</span>
         )}
@@ -32,7 +34,13 @@ export const HeaderSection = ({
         className={progressContainer}
         style={{ '--progress-ratio': completionRatio } as CSSProperties}
       >
-        <progress value={completionRatio} aria-label="반다라트 달성률" />
+        <progress
+          value={completionRatio}
+          max={100}
+          aria-labelledby="progressLabel"
+          aria-valuenow={completionRatio}
+          aria-valuemax={100}
+        />
       </div>
     </section>
   );

diff --git a/src/client/view/share/components/Table.tsx b/src/client/view/share/components/Table.tsx
@@ -1,7 +1,7 @@
 import { BandalartCell } from '../../../../types/BandalartCell';
 import React from 'react';
 import { css, cx } from '@linaria/core';
-import { Cell } from './Cell';
+import { Cell, CellPosition } from './Cell';
 import {
   GAP_BETWEEN_CELLS,
   PADDING_IN_SECTION,
@@ -13,38 +13,48 @@ type TableProps = {
 };
 
 const subTaskPosition = [4, 2, 3, 1];
-const subSectionPosition = ['lt', 'rt', 'lb', 'rb'];
+const subSectionPosition = ['lt', 'rt', 'lb', 'rb'] as CellPosition[];
 
 export const Table = ({ root }: TableProps) => {
   return (
-    <div className={container}>
-      <Cell type={'main'} title={root.title} isCompleted={root.isCompleted} />
-      {root.children.map((subCell, subIdx) => (
-        <div
-          key={subSectionPosition[subIdx]}
-          className={cx(subSection, subSectionPosition[subIdx])}
-        >
-          {subCell.children.map((task, taskIdx) => (
-            <>
-              {taskIdx === subTaskPosition[subIdx] && (
-                <Cell
-                  key={subCell.key}
-                  type={'sub'}
-                  title={subCell.title}
-                  isCompleted={subCell.isCompleted}
-                />
-              )}
+    <ul className={container}>
+      <li>
+        <Cell
+          type={'main'}
+          title={root.title}
+          isCompleted={root.isCompleted}
+          position={'center'}
+        />
+        {root.children.map((subCell, subIdx) => (
+          <ul key={subSectionPosition[subIdx]}>
+            <li key={subCell.key}>
               <Cell
-                key={task.key}
-                type={'task'}
-                title={task.title}
-                isCompleted={task.isCompleted}
+                type={'sub'}
+                title={subCell.title}
+                isCompleted={subCell.isCompleted}
+                position={subSectionPosition[subIdx]}
               />
-            </>
-          ))}
-        </div>
-      ))}
-    </div>
+              <ul className={cx(subSection, subSectionPosition[subIdx])}>
+                {subCell.children.map((task, taskIdx) => (
+                  <>
+                    {taskIdx === subTaskPosition[subIdx] && (
+                      <li aria-hidden="true" />
+                    )}
+                    <li key={task.key}>
+                      <Cell
+                        type={'task'}
+                        title={task.title}
+                        isCompleted={task.isCompleted}
+                      />
+                    </li>
+                  </>
+                ))}
+              </ul>
+            </li>
+          </ul>
+        ))}
+      </li>
+    </ul>
   );
 };
 

diff --git a/src/client/view/share/index.tsx b/src/client/view/share/index.tsx
@@ -23,7 +23,9 @@ export const BandalartSharePage = () => {
       }
     >
       <HeaderSection detail={detail} completionRatio={completionRatio} />
-      <Table root={treeRoot} />
+      <main>
+        <Table root={treeRoot} />
+      </main>
     </div>
   );
 };