refactor: Story 및 React Template 수정

[iyu88]

🤠 개요

• Refactor: Story 및 React Template 수정  #94

💫 설명

• 문서 작업을 하면서 Template에 포함되면 좋을 것 같은 필드를 추가했어요.

• 기존에 있던 각 필드에 대한 설명을 간략하게 수정했어요.

• 있어도 되고 없어도 되는 필드 이름 옆에는 (Optional) 로 표시했어요.

• docs-description-component에서 컴포넌트 세부 설명을 적을 수 있어요.

• category에서 props 카테고리를 추가할 수 있어요.

  • 원래 용도는 backgroundColor, textColor 등을 하나의 color 카테고리에 포함시키는 역할을 하는 것 같아요.
  • 근데 저는 문서 작업할 때 Compound Component에서 각 Sub Component의 Props를 명시할 때 사용했어요.
  • 이유는 각각의 Sub Component를 subcomponents 필드를 사용해서 명시할 수 있는데, 이렇게 했을 때 Sub Component에 대한 argsType을 명시하기 위해 Add-on을 추가로 설치해야 하는 것 같았어요.
  • category로 충분히 하위 컴포넌트의 props를 설명할 수 있다고 생각했어요.

[prayinforrain]

공식 문서를 읽어보고 왔는데, 제가 링크한 category가 맞나요?
직접 생성해 보니 제대로 카테고리가 분류되지 않는 것 같아서, 제가 이해한 게 맞다면 props.table의 하위로 들어가야 할 것 같아요. category를 배열로 사용하는건 어떻게 작동하는지 잘 이해가 되지 않아서(제가 보기에는 그냥 배열이 toString으로 변환되어 단일 카테고리로 사용되는 것 같아요), 차라리 subcategory를 추가하는 게 좋아보여요.

[iyu88]

아! 그렇네요 control 위치를 잘못 올렸어요.

category를 배열 형태로 추가하는 건, 여러 개를 표시할 때 배열로 표현한 레퍼런스를 봐서 그렇게 했어요 (지금은 못찾겠네요 😫)

한편 subcategory를 적용한다면 어떻게 사용할 수 있을지 자세하게 알려주실 수 있을까요?

[prayinforrain]

지금은 다른 브랜치 본다고 다 지워서 제가 해본 게 안남아있긴 한데, table 하위에 subcategory: '카테고리명',으로 삽입하면 올렸던 사진처럼 서브카테고리가 생기더라구요. depth를 더 깊게 나눌수는 없어 보이고 딱 메인/서브카테고리 2단으로만 나눠지는 것 같아요!

[iyu88]

subcategory로 depth를 추가해야 하는 이유가 잘 이해되지 않아요.
현재 category를 적용한 이유는,

1. 하위 컴포넌트에서 사용하는 props를 표시하고
   (Compound 패턴 / Table 컴포넌트처럼 subcomponent가 필요한 경우, 이 때 하위 컴포넌트의 props는 Args Table에 추가되지 않기 때문)

2. 동일하게 적용되는 props는 합쳐서 반복을 줄이기 위해

두 가지에요.

결국 "묶어준다"는 이유 때문에 depth는 하나만 필요하다고 생각했고, 이를 위해서 category 필드를 사용했어요.

혹시

category에 여러 개 넣을 바에 subcategory를 쓰는게 낫겠다

라고 생각하신거면 category에 여러 개가 들어가 있는 것은 depth를 나타내기 위함은 아니라고 말씀드릴 수 있겠어요.

제가 의도를 제대로 파악한 것인지 잘 모르겠어서 코멘트 기다릴게요.

---

2. 동일하게 적용되는 props는 합쳐서 반복을 줄이기 위해

이 부분은 지금 생각해보면 그냥 반복되더라도 category를 하나씩 할당해서 적용하는 편이 더 나을 수 있겠다는 생각도 드네요.

[prayinforrain]

만약 여러 카테고리를 적용해야 하는 경우라면 상황에 따라 subcategory가 대안이 될 수 있을 것 같아 이런것도 있더라고 말씀드리려고 했어요. depth를 더 깊게 파야한다, 그런 의미는 아니었고, 어제 봤을 때에는 string 배열로 category를 넣는 것이 무슨 의미를 갖는지 이해하지 못했어서(단순히 stringify 되어 들어가고 있어서 제대로 동작하는 것이 아닌 줄 알았어요) 이런 말을 했습니다 😅

[prayinforrain]

게더에서 이야기드린대로 글로 남깁니다. Component 템플릿도 아래와 같이 지원이 되었으면 좋겠어요!

interface {{Component}}Props {
}

const {{Component}} => ({} : {{Component}}Props) => {
// ...

[iyu88]

이제 이렇게 생성될 겁니다!
의견 감사해요