[정규]안녕하시렵니까?

[regularPark]

반갑습니다. 나는솔로아저씨입니다

먼저 아래 보시는 코드는 여러분들의 귀중한 리뷰를 토대로 재탄생한 코드입니다.^^7

  const allAgreed = privacy && marketing && analysis;
  const agreeStatus = [privacy, marketing, analysis];
  const toggleFunctions = [setPrivacy, setMarketing, setAnalysis];

  // 단 한줄! 하지만 동의사항이 두 개로 줄어서 곧 사라질 예정인!🤬
  const toggleAgreeAll = () => {
    toggleFunctions.forEach((setter) => setter(!allAgreed));
  };

감사합니다 여러분!🙏🙏👍👍

---

리뷰하실 코드

재한님께서 toss/emotion-utils를 참고하여 만드신 Flex를 리뷰하면서 잊혀졌던 아무렇게나 짠 뒤 버려버린 Flex가 떠올랐답니다?

그래서 여러분께 가져와봤어요~

import { PropsWithChildren } from 'react';
import styled from 'styled-components';

type DIRECTION = 'row' | 'row-reverse' | 'column' | 'column-reverse';
type JUSTIFY = 'center' | 'flex-start' | 'flex-end' | 'space-between';
type ALIGN = 'center' | 'flex-start' | 'flex-end';

interface CSSFlexProps extends PropsWithChildren {
  direction?: DIRECTION;
  justify?: JUSTIFY;
  align?: ALIGN;
  gap?: number;
  padding?: number;
}

const Flex = ({
  direction = 'row',
  justify = 'center',
  align = 'center',
  gap,
  padding,
  children,
}: CSSFlexProps) => {
  return (
    <FlexLayout direction={direction} justify={justify} align={align} gap={gap} padding={padding}>
      {children}
    </FlexLayout>
  );
};

const FlexLayout = styled.div<CSSFlexProps>`
  display: flex;
  flex-direction: ${(props) => props.direction};
  justify-content: ${(props) => props.justify};
  align-items: ${(props) => props.align};
  gap: ${(props) => props.gap}px;

  width: 100%;
  height: 100%;
  padding: ${(props) => props.padding}px;
`;
export default Flex;

거의 1년 전에 대충 만들어서 npm 배포까지 했던 녀석인데, 정말 대충 만들었네요.

패키지로 배포할거였으면 '이런 속성은 꼭 필요하다!', '~하면 더 우아하게 할 수 있다!' 같은 리뷰 기다리고 있겠읍니다.

완성도, 확장성 등 다방면으로 부족한 제 귀여운 Flex 많이 많이 혼내주세요~🤗

스토리북

스토리북 배포 링크입니다. 직접 사용해보면 더 맵게 리뷰를 남길 수 있답니다?

[Wisesaturn]

오히려 제가 정규님 코드 보고 추가해야 할 사항이 많은 것 같군요 😂
제가 만든 Flex에도 gap을 추가해보고 싶어졌습니다 ㅋㅋㅋ

깔끔해서 더 코멘트보다는 오히려 이 부분을 더 정리하면 괜찮아 보이네요
기본값이 주어지는 부분만 명시하고, 나머지는 전달 받은 props로만 전달한다면 조금 더 코드가 간결해질 것 같습니다!

const Flex = ({
  direction = 'row',
  justify = 'center',
  align = 'center',
  children,
  ...props
}: CSSFlexProps) => {
  return (
    <FlexLayout
      direction={direction}
      justify={justify}
      align={align}
      {...props}
    >
      {children}
    </FlexLayout>
  );
};

저는 스타일을 짤 때, styled 내부에 기본값을 두었는데 다시 생각해보면 props에다가 기본값을 두어야 좀 더 명확한 기본값을 찾을 수가 있을 것 같긴 하군요 (오히려 배우고 갑니다)

[bbearcookie]

안녕하십니까아 정규님!! 😊
Flex와 Grid까지.. 디자인 시스템에서 자주 사용되는 레이아웃 관련 요소를 정리하고 스토리 북으로 사용법까지 작성해주셔서 넘나 좋은 부분인 것 같아요!!

저는 justfyContent, alignItems 등의 속성을 이미 정의된 타입 정의 React.CSSProperties 에서 가져와서 사용한다면 어떨까 싶은 생각이 들었어요!

import { type CSSProperties, PropsWithChildren } from 'react';
import styled from 'styled-components';

interface CSSFlexProps extends PropsWithChildren {
  direction?: CSSProperties['flexDirection'];
  justify?: CSSProperties['justifyContent'];
  align?: CSSProperties['alignItems'];
  gap?: number;
  padding?: number;
}

const Flex = ({
  direction = 'row',
  justify = 'center',
  align = 'center',
  gap,
  padding,
  children,
}: CSSFlexProps) => {
  return (
    <FlexLayout direction={direction} justify={justify} align={align} gap={gap} padding={padding}>
      {children}
    </FlexLayout>
  );
};

[Wisesaturn]

이 부분은 정말 좋네요 ㅎㅎ 배워 갑니다

[KyuTae98]

npm까지 배포하시다니... 정말 멋지십니다...

저도 요즘 디자인 시스템을 개발하면서 많은 고민들을 하고 있습니다.

npm에 배포한 코드가 아닌 프로젝트에 사용하고 있는 코드라면

gap과 padding값에 default값을 주는 것도 좋다고 생각합니다!

또, 확장성을 열어두기 위해 나머지 props를 ...props로 받아도 좋다고 생각합니다!

[qhahd78]

안녕하세요 몬스터보이 정규님.. 몬스터걸 하유민이 리뷰 남깁니다요

스토리북까지 완전 퍼펙트입니다 ! 그래서 딱히 리뷰 남길 게 없긴 한데, 다들 남겨주신 코멘트처럼

• default 값 정의

정도.... ㅎㅎ 역시 몬스터보이 믿고있었습니다.