[fe] 메인 페이지 설계

[hjsong333]

To Do

• [x] 메인 페이지 컴포넌트 구조
• [x] 컴포넌트간 데이터 흐름

Considerations

[hjsong333]

import { ThemeProvider } from "styled-components";
import { designSystem } from "./constants/designSystem";

export default function Main() {
  return (
    <ThemeProvider theme={designSystem}>
      <MainHeader />
      <MainBody />
    </ThemeProvider>
  );
}

function MainHeader() {
  return (
    <>
      <FilterBar />
      <TabButton />
      <Button />
    </>
  );
}

type MainBodyProps = {
  issues: Issue[]; // API 형태를 그대로 따른다
  openedIssueCount: number;
  closedIssueCount: number;
  multiFilters: Filters; // API 형태를 그대로 따른다
}

function MainBody(props: MainBodyProps) {
  return <div>
    <IssueTableHeader />
    <IssueTableList />
  </div>;
}

type IssueTableHeaderProps = {
  openedIssueCount: number;
  closedIssueCount: number;
  multiFilters: Filters;
  // 현재 선택된 이슈 상태는? opened or closed
};

function IssueTableHeader(props: IssueTableHeaderProps) {
  return <>
    <TabButton />
    <FilterList />
  </>;
}

type IssueTableListProps = {
  issues: Issue[];
};

function IssueTableList(props: IssueTableListProps) {
  return <></>;
}

type FilterBarProps = {
  name: string;
  options: {
    name: string;
    onClick: () => void;
  }[];
  currentFilter: string;
  onFilterChange: (filter: string) => void;
};

function FilterBar(props: FilterBarProps) {
  return <></>;
}

type TabButtonProps = {
  tabs: string[];
  onClick: (param: string) => void; // 같은 페이지로 이동
};

function TabButton(props: TabButtonProps) {
  return <></>;
}