[#3] 코드 컨벤션 논의

[intersoom]

논의사항

• 타입 interface / type 통일
• 함수 타입 통일
• 스타일 컴포넌트 파일 관리 방식

[intersoom]

스타일 컴포넌트 파일 관리 방식 제안

• 유사한 스타일끼리 묶어서 object로 사용 - key 값을 props로 받아서 접근하게끔

  import styled from 'styled-components';
  import colors from './colors';
  
  interface StyledTagProps {
   readonly variant: 'color' | 'gray';
  }
  
  const StyledTag = styled.span<StyledTagProps>`
   background-color: ${(props) => backgroundColor[props.variant]};
   color: ${(props) => textColor[props.variant]};
   border-radius: ${(props) => radiusSize[props.variant]};
   height: 24px;
   min-width: fit-content;
   font-size: 12px;
   border: none;
   padding: 5px 12px;
   margin: 0;
  `;
  
  export default StyledTag;
  
  const backgroundColor = {
   color: colors.primarybg,
   gray: colors.graybg,
  };
  
  const textColor = {
   color: colors.primary,
   gray: colors.gray3,
  };
  
  const radiusSize = {
   color: '8px',
   gray: '100px',
  };
  

• style 파일은 따로 만들어서 import하게 (styles 폴더에서 관리)
• style 파일명은 styledXXX로 통일

[intersoom]

스타일 컴포넌트 관련 추가적인 제안

추가적으로 styles 폴더 내부에서도 Tag, Spacing 같은거는 reusable 폴더로 빼버리고
다른 컴포넌트들이나 페이지에 대한 파일들은 폴더 단위로 관리하는게 좋을 것 같아요!
https://alanbsmith.medium.com/structuring-our-styled-components-part-i-2bf21fa64b28
요기서 알려주는 방식 좋은 것 같아서 이 방법 차용하면 좋을 것 같은데 어떤가요?

[intersoom]

타입 관련 참고 자료

https://yceffort.kr/2021/03/typescript-interface-vs-type

type-alias는 모든 타입을 선언할 때 사용될 수 있고, interface는 객체에 대한 타입을 선언할 때 사용될 수 있다. 둘 다 객체에 대한 타입을 선언하는 데 사용될 수 있는데, 확장 측면에서 사용 용도가 달라진다. 확장이 불가능한 타입을 선언하려면 type-alias를 사용하면 되고, 확장이 가능한 타입을 선언하려면 선언 병합이 가능한 interface를 사용하면 된다.

확장성이 필요하냐 객체 외의 타입에 대한 선언이 필요하냐 정도로 선택하면 될 것 같아용

[intersoom]

스타일 컴포넌트 관련 추가적인 제안

추가적으로 styles 폴더 내부에서도 Tag, Spacing 같은거는 reusable 폴더로 빼버리고 다른 컴포넌트들이나 페이지에 대한 파일들은 폴더 단위로 관리하는게 좋을 것 같아요! https://alanbsmith.medium.com/structuring-our-styled-components-part-i-2bf21fa64b28 요기서 알려주는 방식 좋은 것 같아서 이 방법 차용하면 좋을 것 같은데 어떤가요?

헹 근데 이거 타입은 적용을 어떻게 해야할까요 흑흑
생각해보니 이건 js네요 ㅠㅠ

[intersoom]

스타일 컴포넌트 관련 추가적인 제안

추가적으로 styles 폴더 내부에서도 Tag, Spacing 같은거는 reusable 폴더로 빼버리고 다른 컴포넌트들이나 페이지에 대한 파일들은 폴더 단위로 관리하는게 좋을 것 같아요! https://alanbsmith.medium.com/structuring-our-styled-components-part-i-2bf21fa64b28 요기서 알려주는 방식 좋은 것 같아서 이 방법 차용하면 좋을 것 같은데 어떤가요?

헹 근데 이거 타입은 적용을 어떻게 해야할까요 흑흑 생각해보니 이건 js네요 ㅠㅠ

https://velog.io/@realzu/React-%EC%9E%AC%EC%82%AC%EC%9A%A9%EC%84%B1-%EB%86%92%EC%9D%B4%EB%8A%94-styled-components-%EB%B6%84%EB%A6%AC

대체제를 찾아봤어용 ㅎㅎ
원래 이런식으로 많이들 사용하는지는 몰라도 이 방법이 괜찮은 것 같아요!
컴포넌트별로 스타일들을 한 파일에서 관리가 가능해서..
이 방법 어떤가요?

[seocylucky]

오.... 확인했어요 아니 수민,, 척이면 척 빠르게 이렇게 다 알아보다니... 최고야 당신...👍🏻❤️ 저 열심히 공부하겠어요🔥

[intersoom]

근데 뭐가 좋은 방법인지 모르겠어서 좀 이따가 좀만 더 찾아볼게용 !!
좋은 방법 있으묜 알려주세요 🥺🥺
스타일드 컴포넌트 거의 처음이라소 ㅠㅜ

[intersoom]

import styled from 'styled-components';
import ContentText from './ContentText';

const StyledCard: any = styled.div`
  flex-direction: column;
  justify-content: start;
  width: 280px;
  height: 240px;
  border-radius: 8px;
  border: 1px solid var(--gray-1, #f2f4f6);
  background: var(--white, #fff);
  padding: 21px 32px 20px 32px;
`;

StyledCard.ContentText = ContentText;

export default StyledCard;

위에 안될 것 같다한 방법을 이렇게 하면 가능해요! (any로 선언)
둘 중에 어떤 방법을 선택할까용?

-> 다만 이 방법은� 자동완성 같은건 잘 안됩니당 ㅜ

[seocylucky]

저는 any 사용은 자제해야 하는게 좋을 것 같아서 1번이 더 나을 거 같아요!! 자동완성 면도 그렇고ㅎㅎㅎ 일단 더 좋은 방법 없는지 저도 계속 서치중입니다....... 저렇게 세분화해서 하는건 첨이라 저두 어색하네여ㅠㅠㅠ

[intersoom]

스타일드 컴포넌트 관련 결론

• 유사한 스타일끼리 묶어서 object로 사용 - key 값을 props로 받아서 접근하게끔

  import styled from 'styled-components';
  import colors from './colors';
  
  interface StyledTagProps {
   readonly variant: 'color' | 'gray';
  }
  
  const StyledTag = styled.span<StyledTagProps>`
   background-color: ${(props) => backgroundColor[props.variant]};
   color: ${(props) => textColor[props.variant]};
   border-radius: ${(props) => radiusSize[props.variant]};
   height: 24px;
   min-width: fit-content;
   font-size: 12px;
   border: none;
   padding: 5px 12px;
   margin: 0;
  `;
  
  export default StyledTag;
  
  const backgroundColor = {
   color: colors.primarybg,
   gray: colors.graybg,
  };
  
  const textColor = {
   color: colors.primary,
   gray: colors.gray3,
  };
  
  const radiusSize = {
   color: '8px',
   gray: '100px',
  };
  

• 디자인 시스템 파일 제작 후, 공통된 사항들 (color / font) 해당 파일에서 불러와서 사용 (Theme 제작)

• 스타일드 컴포넌트 코드들은 컴포넌트 별로 함수 하단에서 관리

[intersoom]

@seocylucky 저희 타입은 어떡할까용?
interface로 갈까욧?