[230515] 사이드 프로젝트 작업

1. 사이드프로젝트 - TabBar 구현

styled-components 에서 className 사용하려면 &.classname 으로 사용하면 됨

const Kindergarten = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const infoData = dummyData.data.kindergarten_info;
  const tabClickHandler = (index: number) => {
    setActiveIndex(index);
  };

  const tabArr = [
    {
      name: "소개",
      content: <span> 소개 내용 </span>,
    },
    {
      name: "공지사항",
      content: <span> 공지사항 내용 </span>,
    },
    {
      name: "커리큘럼",
      content: <span> 커리큘럼 내용 </span>,
    },
  ];

  return (
    <StyledBackground>
      <TabBar>
        {tabArr.map((element, index) => (
          <TabButton className={index === activeIndex ? "actived" : undefined} onClick={() => tabClickHandler(index)}>
            {tabArr[index].name}
          </TabButton>
        ))}
      </TabBar>
      <ContextBox>{tabArr[activeIndex].content}</ContextBox>
    </StyledBackground>
  );
};

export const TabButton = styled.button`
  width: 33.33%;
  height: 100%;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  color: #a6a6a6;

  &.actived {
    border-bottom: 3px solid #333333;
    color: #333333;
  }
`;

2.사이드프로젝트 회의 - Branch 규칙

Git 브랜치

• main: 운영배포 브랜치
• develop: 개발 (기능 완성될 때 merge 하는 브랜치, 기능 테스트 브랜치)
• develop에서 Feature/티켓번호로 각자 브랜치 따서 작업 후 merge

 Merge 규칙

• 브랜치 merge 전 PR (pull request) 올리기
• 리뷰 해주기
• 자기 파트한테 approve 1명이상 받으면 merge 가능
• Feature/티켓번호 → develop : Squash Merge
• develop → main : Rebase Merge

3. CSS 정리 툴

소장님이 안쓰는 css 정리해주는 툴도 있다길래 찾아봄
https://purgecss.com/
온라인 버전도 있다. 간단하게 사용가능
https://purifycss.online/