과제 중간 점검2

개발 기간: 2023.12.13.(수) ~ 2023.12.28.(목)
중간 점검: 2023.12.22.(금)
계획: 12/18 ~ 12/20 chart 부분, 12/21 ~ 12/22 Detail 부분, 12/23 api, 차주부터 3D
실제: 12/18 ~ 12/21 chart 분분, 12/21 ~ 12/22 Detail 부분, 12/23 ~ 12/25 Detail, API 부분 연장

---

차이점

기존 프로젝트는 Scss 사용
과제는 styled components 사용

공통점

Recoil 동일하게 사용

라이브러리로 react, styled components, recoil, chart.js, react-chartjs-2, antd (table), react-rnd (table 밖으로 내보낼 때 사용)

---

styled components 장점

1. 코드의 모듈성과 재사용성: Styled Components를 사용하면 스타일을 캡슐화하여 컴포넌트 내부에 유지함으로써, 스타일과 로직이 더 밀접하게 연결됩니다. 코드의 모듈성과 재사용성을 향상시킵니다.

   각 컴포넌트(OverallEfficiency, UtilizationRate )는 독립적인 스타일을 가지며, 이 스타일은 해당 컴포넌트 내부에서 정의됩니다. 스타일의 캡슐화를 통해 각 컴포넌트의 모듈성을 높여줍니다.

activeStyle, inactiveStyle, gridStyleLt, gridStyleRt와 같은 스타일 조각은 여러 위치에서 재사용될 수 있습니다. 코드의 중복을 줄이고 유지보수를 용이하게 합니다.

2. 코드의 간결성: 전통적인 CSS 또는 SCSS와 달리, Styled Components는 추가 클래스명을 만들거나 관리할 필요 없이, 스타일을 직접 컴포넌트에 연결합니다.

   

3. 동적 스타일링 용이성: JavaScript의 전체 기능을 활용하여 동적으로 스타일을 변경할 수 있습니다. 조건부 렌더링, 테마 적용, props에 따른 스타일 변화 등 다양한 상황에서 유용합니다.

OperateList 컴포넌트에서는 props.showFixed 값에 따라 다른 스타일을 적용합니다. CSS-in-JS의 기능을 활용한 것입나다. gridStyleLt와 gridStyleRt라는 두 가지 스타일 중 하나를 적용합니다.

const GridContainer = styled.div`
  ${props => (props.showFixed ? gridStyleLt : gridStyleRt)}
`;

const gridStyleLt = css`
  margin-top: -275px;
  width: 203px;
  display: grid;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 0px 16px 16px 16px;
  border-color: none;
  grid-template-columns: 200px 200px;
  background: #ffffff 0% 0% no-repeat padding-box;
`;

props.showFixed가 true일 때는 gridStyleLt 스타일이 적용되고, false일 때는 gridStyleRt 스타일이 적용됩니다. 컴포넌트의 외부 상태나 속성에 기반하여 스타일을 변경할 수 있습니다.

기존 scss 사용과 비교

---

Recoil 사용

Recoil은 리액트 애플리케이션의 상태 관리를 위한 라이브러리로, 전역 상태 관리를 간편하고 효율적으로 할 수 있게 해줍니다. Recoil을 사용함으로써, 컴포넌트 간에 상태를 쉽게 공유하고 관리할 수 있으며, 애플리케이션의 상태 로직을 더 깔끔하고 관리하기 쉽게 만들어줍니다. 여러 Recoil 상태를 사용하여, 사용자 상호작용에 따라 애플리케이션의 다른 부분들의 상태를 업데이트하고 있습니다.

recoil.js

//OverallEfficiency component
  // Recoil
  const [isOpenDetail, setIsOpenDetail] = useRecoilState(efficiencyCloseBtn);
  const utilzationRate = useSetRecoilState(utilzationRateCloseBtn);
  const overtimeRatec = useSetRecoilState(overtimeRateCloseBtn);
  const timeUtilzation = useSetRecoilState(timeUtilzationCloseBtn);
  const unattended = useSetRecoilState(unattendedCloseBtn);
  const throughput = useSetRecoilState(throughputCloseBtn);

// detail open
const handleOpenDetails = () => {
  setIsOpenDetail(!isOpenDetail);
  utilzationRate(false);
  overtimeRatec(false);
  timeUtilzation(false);
  unattended(false);
  throughput(false);
};