Impl Semester component And DocType component

[ChaeyeonAhn]

요약 *

It closes #47

Update 12/23

테스트용 /app/page.tsx 코드

"use client";

import { useState } from "react";
import ThreeInput, {
  ThreeInputItem,
} from "../common/components/ThreeInput/index";
import { mockData } from "../common/components/ThreeInput/mock";
import { DocumentType } from "../common/components/SelectCard/DocumentTypeSelectCard";
import Typography from "../common/components/Typography";

const Home = () => {
  const items: ThreeInputItem[] = mockData;

  // 학기 선택
  const [year, setYear] = useState<number>(items[0].year);
  const [isSpring, setIsSpring] = useState<boolean>(items[0].value.isSpring);

  // 문서 유형 선택
  const [type, setType] = useState<DocumentType>(DocumentType.BudgetProposal);

  // 조직 유형 선택
  const [selectedKey, setSelectedKey] = useState<string>(""); // CHACHA: TODO: enum으로 변경
  const [selectedValue, setSelectedValue] = useState<string>(""); // CHACHA: TODO: enum으로 변경

  return (
    <>
      <div>Welcome to SPARCS Students!</div>
      <Typography>
        {year} {isSpring ? "봄" : "가을"} {type} {selectedKey} {selectedValue}
      </Typography>
      <ThreeInput
        itemList={items}
        year={year}
        setYear={setYear}
        isSpring={isSpring}
        setIsSpring={setIsSpring}
        type={type}
        setType={setType}
        selectedKey={selectedKey}
        setSelectedKey={setSelectedKey}
        selectedValue={selectedValue}
        setSelectedValue={setSelectedValue}
      />
    </>
  );
};
export default Home;

얘기하고 싶은 것

• 예시 코드와 같이 전체 list를 넣어주고, useState 통해 상태 관리 로직만 간단하게 넣어주면 알아서 잘 작동합니다! 아래 영상을 참고해주세요.

• 예시 list가 너무 길어서 mockData로 빼 놓았어요! (백 코드가 완성되면 백에서 가져오는 구조대로 싹 바꾸어야 할 듯 합니다.)

• 연도/학기 -> 문서 유형 -> 조직 키 -> 조직 밸류 의 의존성이 있다고 판단하고 구현했습니다.

• 2022년/봄 -> 문서1, 문서2 => 문서 1에 대해 조직1 -> 조직1에 대해 그 아래 조직들 n개 / 문서 2에 대해 조직1 ,2 ... 어쩌구 이렇게

• 여기서 설명하기가 어려워서, mockData 봐 주시면 감사하겠습니다!

스크린샷

2024-12-23.8.39.33.mov

이후 Task *

• 없음

[wjeongchoi]

분기 / 문서유형 에 따라 선택할 수 있는 단체 사라지는 것도 보고 싶어요!
그리고 테스트용 코드에 현재 선택된 상태 볼 수 있게 밑에 텍스트로 추가해주실 수 있나요?

[ChaeyeonAhn]

최종 디자인 반영했습니다!

• chevron mui icons 사용
• dropdown(옵션들 몇 개 없어도 높이 고정, 선택된 옵션에 그린 배경 깔릴 때 border radius 등),
• 테이블 헤더와 테이블 컨텐츠 패딩

등등 수정하여 반영했습니다!

2025-01-02.12.01.57.mov

[wjeongchoi]

주석처리된 부분만 한 번 확인해주세요!