react 표 만들고 싶을 때 참고

import React, { useEffect, useCallback, useState } from "react";
import styled from "styled-components";
import BackgroundImg from "../assests/image/DIP01.png";
import axios from "axios";
import { getCookie, setCookie } from "../utils/cookie";

const Main = () => {
  const [userName, setUserName] = useState<string>("");

  useEffect(() => {
    axios.get("http://dip.kia.co.kr:8000/sso/autologin", {}).then((res) => {
      const obj = JSON.parse(res.data);
      console.log(obj.Name);
      //네임이 빈값이 아니면 쿠키 저장 아니면 다른 페이지 이동
      if (obj.Name !== "CannotAceess" && obj.SSO_ID !== "CannotAceess") {
        setCookie(obj.Name, obj.SSO_ID);
        setUserName(obj.Name);
      } else {
        return alert("오토웨이 페이지 이동!");
      }
    });
  }, [userName]);

  //클릭시 설치 팝업
  function RunProgram() {
    window.open("DIP:\\", "_self");
  }

  const DIPClick = () => {
    RunProgram();
  };

  return (
    <Container>
      <MainDiv>
        <Header>환영합니다</Header>
        <ExcuteSection>
          <Table>
            <tr>
              <td className="userInfo">
                <p className="userInfo--text">이름</p>
              </td>
              <td className="userInfo2">
                <p className="userInfo--text2">PPRK</p>
              </td>
            </tr>
            <tr>
              <td className="userInfo">
                <p className="userInfo--text">소속</p>
              </td>
              <td className="userInfo2">
                <p className="userInfo--text2">디자인팀</p>
              </td>
            </tr>
            <tr>
              <td className="userInfo">
                <p className="userInfo--text">직위</p>
              </td>
              <td className="userInfo2">
                <p className="userInfo--text2">사원</p>
              </td>
            </tr>
          </Table>

          <Button onClick={DIPClick}>DIP 실행하기</Button>
        </ExcuteSection>
      </MainDiv>
    </Container>
  );
};

export default Main;

const Container = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(${BackgroundImg}) no-repeat center center;
  background-size: cover;
`;

const MainDiv = styled.main`
  width: 473px;
  height: 353px;
  border: 1px solid #def9ff;
`;

const Header = styled.header`
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7db6c9;
  font: normal normal normal 23px HDharmony M;
  letter-spacing: 0px;
  color: #ffffff;
`;
const ExcuteSection = styled.section`
  width: 100%;
  height: 303px;
  background-color: rgb(42, 55, 69, 0.7);
  box-sizing: border-box;
  padding: 20px;
`;

const Table = styled.table`
  width: 100%;
  height: 180px;
  margin: auto;
  border-collapse: collapse;
  td {
    border-bottom: 2px solid #78979b;
  }

  .userInfo {
    width: 30%;
    border-right: 2px solid #78979b;
    .userInfo--text {
      display: flex;
      justify-content: center;
      font: normal normal normal 18px HDharmony M;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }

  .userInfo2 {
    width: 70%;
    .userInfo--text2 {
      margin-left: 20px;
      font: normal normal normal 18px HDharmony M;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
`;

const Button = styled.div`
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: 20px;
  border: 1px solid #fff;
  font: normal normal normal 18px HDharmony M;
  letter-spacing: 0px;
  color: #ffffff;
  background: #5c8ca8;
  justify-content: center;
  align-items: center;
`;