feat: TimeTable 컴포넌트 개발 - #4

components/atom/table/TableData.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from 'styled-components'
+import { usePriorityTime } from '../../../hooks/member/usePriorityTime'
+
+interface TableDataProps {
+  data: string
+  onClickTableData?: () => void
+}
+
+export default function TableData({ data, onClickTableData }: TableDataProps) {
+  const { groupSelectedTimeBlock } = usePriorityTime()
+
+  const groupList: number[] = []
+  groupSelectedTimeBlock.forEach((group) => {
+    group.forEach((element) => {
+      groupList.push(element)
+    })
+  })
+  console.log('groupList', groupList)
+
+  return (
+    <Styled.Td 
+      id={data} 
+      onClick={() => console.log('data', data)}
+      isSelected={groupList.includes(Number(data))}
+    >
+      {data}
+    </Styled.Td>
+  )
+}
+
+const Styled = {
+  Td: styled.td<{ isSelected: boolean }>`
+    width: 4.5rem;
+    height: 1.4rem;
+    text-align: center;
+    border: 1px solid #000;
+
+    vertical-align: top; /* 위 */
+    vertical-align: bottom; /* 아래 */
+    vertical-align: middle;
+    background-color: ${({ isSelected }) => (isSelected? 'blue': 'white')};
+    cursor: pointer;
+    pointer-events: ${({ isSelected }) => (isSelected? 'auto': 'none')};
+  `,
+}

components/atom/table/TableHeading.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import styled from "styled-components"
+
+interface TableHeadingProp {
+  data: string
+  onClickTableData?: () => void
+}
+
+export default function TableHeading({ data, onClickTableData }: TableHeadingProp) {
+  return(
+    <Styled.Th onClick={onClickTableData}>
+      {data}
+    </Styled.Th>
+  )
+}
+
+const Styled = {
+  Th: styled.th`
+    width: 4.5rem;
+    height: 1.4rem;
+    text-align: center;
+    border: 1px solid #000;
+
+    vertical-align: top;	/* 위 */
+    vertical-align: bottom;   /* 아래 */
+    vertical-align: middle;
+  `,
+}

components/atom/table/TableRow.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from "styled-components"
+import TableHeading from './TableHeading'
+import TableData from './TableData'
+
+interface TableRowBodyProps {
+  step: string
+  contents: Array<string>
+}
+
+const BodyTypes: { [key: string]: React.JSXElementConstructor<any>} = {
+  'head': TableHeading,
+  'data': TableData,
+}
+
+export default function TableRow({ step, contents }: TableRowBodyProps) {
+  const CurrentTableComponent = BodyTypes[step]
+  return(
+    <Styled.Tr>
+      {contents.map((content, i) => {
+        return (
+          <CurrentTableComponent 
+            key={i}
+            data={content}
+          />
+        )
+      })}
+    </Styled.Tr>
+  )
+}
+const Styled = {
+  Tr: styled.tr`
+  `,
+}

components/modules/TimeTable.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import TableRow from '../atom/table/TableRow'
+import { weekList } from '../../data/available/checkAvailableTimeTableData'
+import { table } from 'console'
+
+export default function TimeTable() {
+  const [mounted, setMounted] = useState<boolean>(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const slots: string[] = []
+  for (let i = 0; i < 7; ++i) {
+    let key = Math.floor(i / 7) + 34 * (i % 7)
+    slots.push(`${key}`)
+  }
+
+  const tableRows = []
+  for (let i = 0; i < 34; ++i) {
+    tableRows.push(i)
+  }
+
+  return (
+    mounted && (
+      <Styled.TableWrapper>
+        <Styled.Table>
+          {tableRows.map((tableRow) => {
+            return (
+              <TableRow
+                step="data"
+                contents={slots.map((slot, i) => String(Number(slot) + tableRow))}
+              />
+            )
+          })}
+        </Styled.Table>
+      </Styled.TableWrapper>
+    )
+  )
+}
+
+const Styled = {
+  TableWrapper: styled.div``,
+  Table: styled.table`
+    border-collapse: collapse;
+  `,
+}