[TIL] 2023-08-25 styled-component props로 스타일링

chips 관련 스타일링 이슈

---

원래 쓰던 chips를 활용하여 필터링 하는 카테고리 필터 컴포넌트를 다른 페이지에도 넣어야 하는 일이 생겼다.
이런저런 사정이 있고 어쨌든 결론은!

ConditionBtn	flex-direction	align-items
true	row	center
false	column	stretch

이렇게 되어야 함!
그래서 styled component props에 관해서 막 찾아보고 그랬는데,
처음에는 어떻게 했냐면...(지금 생각해도 바보같다)

CategoryFilterWrapper가 FlexBoxFullWidthCenter를 받아서 만들고 있는 거라 거기 가서 ConditionBtn 이런 속성?을 만들었다...ㅎㅎ...
근데 일단 안 되고, 아무리 봐도 아닌 것 같은 거야.
다시 팔짱 끼고 고민하다가 일단 당장 되어야 하는 건이라서 매우 거지같은 코드로 배포를 했다.

<div>
  {isConditionBtn ? (
    <CategoryFilterWrapper>
      <ConditionBtn onClick={handleClick} />
      <RadioGroup onChange={handleChange} value={value}>
        <Radio.Button key={`radio-group-option${code}`} value={code}>
        {name}
        </Radio.Button>
      </RadioGroup>
    </CategoryFilterWrapper>
  ) : (
        <CategoryFilterWrapper 
		style={{ 
			flexDirection: 'column', 
			alignItems: 'stretch' 
			}}>
      <ConditionBtn onClick={handleClick} />
      <RadioGroup onChange={handleChange} value={value}>
        <Radio.Button key={`radio-group-option${code}`} value={code}>
        {name}
        </Radio.Button>
      </RadioGroup>
    </CategoryFilterWrapper>
  )}
</div>

실제 코드는 이거보다 더복잡하니까 훨씬 길고...
누가봐도... 코드가 똑같은 게 반복이 되잖아?
좋지 않음...
그래서 어제 집에 가서도 어떻게 하면 이걸 중복을 줄일 수 있을까 하고 고민을 하던 중 갑자기! 이피퍼니처럼! 팟! 왔다!

export const FlexBoxFullWidthCenter = styled.div<FlexBoxFullWidthCenterProps>`
  display: flex;
  flex-direction: ${({ direction }) => direction};
  align-items: ${({ align }) => align ?? 'center'};
  justify-content: ${({ justify }) => justify};
  width: 100%;
  gap: ${({ gap }) => (typeof gap === 'number' ? `${gap}px` : gap)};
`;

CategoryFilterWrapper가 받고있는 FelxBoxFullWidthCenter는 이렇게 생겼다.
여기서 gap을 쓸 때는 그냥 <FlexBoxFullWidthCenter gap=10> 이런 식으로 쓰는 걸 다른 코드에서 봤으니까 생각을 하다가 떠올랐다!
나는 또 isContentBtn의 true/false 여부에만 너무 매달려서 이거 자체를 props로 받아야 한다는 생각에 사로잡혀 있었던 것임!
props로 받는 건 말 그대로 스타일링 관련한 것이어야 하는데!
그럼 그 props를 주는 부분에서 isContentBtn의 여부를 가늠하면 되는 것을!

<CategoryFilterWrapper 
	direction={isConditionBtn ? 'row' : 'column'} 
	align={isMealFilter ? 'center' : 'stretch'}>
      {isConditionBtn ? <ConditionBtn onClick={handleClick} /> : null}
      <RadioGroup onChange={handleChange} value={value}>
        <Radio.Button key={`radio-group-option${code}`} value={code}>
        {name}
        </Radio.Button>
      </RadioGroup>
</CategoryFilterWrapper>

그리고 애초에 만들어져 있는 FlexBoxFullWidthCenter에서 props의 이름을 정해주었으니까 그 이름대로(flexDirection이 아니라 direction으로, alignItems가 아니라 align으로) 넣어주면 되는 props로 되는 것이었음!