feat: add List component

[jinhyeonkwon]

요약 *

It closes #1342

기존에 여러 구현 방식으로 만들어져 있던 bullet list와 number list를 하나의 컴포넌트로 통일합니다.
아래는 적용 예시입니다.

<List listType="bullet" gap={16}>
  <ListItem>{`활동 장소: ${data.location}`}</ListItem>
  <ListItem>{`활동 목적: ${data.purpose}`}</ListItem>
  <ListItem>{`활동 내용: ${data.detail}`}</ListItem>
</List>

bullet point로도 사용할 수 있고, 시작 index (0 이상)를 정해서 number list로도 사용할 수 있습니다.
활동보고서 상세 보기 (packages/web/src/features/activity-report/frames/ActivityReportDetailFrame.tsx) 에 우선 적용해 두었으며, 추후 적용이 필요한 다른 페이지 리팩토링을 진행하고자 합니다.

이슈들

1. List와 ListItem을 같은 폴더의 다른 파일로 분리해 봤는데, 매번 2개씩 import해야 한다는 단점이 있군요.. 어떻게 생각하시나요?
2. 위와 같은 구조로 바꾸면서, bullet 또는 숫자 뒤에 임의로 0.5em 만큼의 margin을 주도록 했는데 어때 보이시나요?
3. 이상하게 ListItem의 children 속에,
   이 들어가 있는 것이 잘 적용이 안됩니다. <></>으로 감싸도 안되고,
   로 감싸면 줄바꿈이 됩니다. 이 문제에 대해 어떻게 생각하시나요?
4. bullet과 한 자리 숫자, 두 자리 숫자 각각 폭이 달라서 content가 시작하는 x좌표도 달라지는데 이것은 어떻게 생각하시는지 궁금합니다

스크린샷

Current

• 활동 보고서에 적용한 예시
  
• Number List
  
• Storybook
  

---

Outdated screenshots

• Bullet list
  
• Number list
  

data로 string이랑 일반적인 ReactNode를 섞어 쓸 수 있게 허용하다 보니, number로 했을 때 이런 광경을 볼 수 있긴 합니다

List 여러 개로 쪼개고, 필요한 대로 startIndex 조절하면서 해결이 가능하나, 추후에 수정 필요가 있다면 numbering 로직을 바꾸겠습니다.

이후 Task *

• 다른 페이지에 적용하기
• Storybook 문서화 (완료)

[wjeongchoi]

number 쓰이는 경우가 꽤 있다면 넘버링 로직 수정해보면 어떨까요 @babycroc

[babycroc]

#코멘트1

List children 타입이 string과 react node 두 타입 모두 받을 수 있다는 점은 좋아요!

다만 react node일 경우에, bullet 또는 numbering을 표시 안하는 것은 좋지 않을 것 같아요! (타입이 뭐든 간에, item으로 들어왔으면 bullet 또는 numbering이 표시되어야 함)

pr에 첨부한 케이스를 해결하기 위해 그렇게 한 것으로 추정되긴 하지만, 저 디자인의 의도는 사실 "줄별로 하나씩 item임"이라기보다는, "카테고리별로 하나의 item임"이거덩 (아래 사진 참고)

그래서 이런 케이스는, dataList에 ["첨부파일", <첨부파일노드>, "부가설명"] <= 이렇게 들어가는 게 아니라,

[
  <>"첨부파일" <첨부파일노드></>, 
  "부가설명"
]

이런 식으로 들어가는 게 맞아여

---

#코멘트2

그리고 개인적으로, item들을 list화 시켜서 dataList에 넣어도 되긴 하지만,
아래와 같은 형식으로 쓰는 게 좀 더 친숙할 것 같다는 생각이 들긴 했습니다!

import { List, ListItem } from "@sparcs-clubs/web/common/components/List"

<List>
  <ListItem>에베벱</ListItem>
  <ListItem>에베벱</ListItem>
  <ListItem>에베벱</ListItem>
</List>

---

우선 해당 PR은 코멘트1 정도 처리해준 다음에 머지해도 될 것 같구요,
코멘트2처럼 사용할 수 있게 하는 것은 해당 PR에서 해도 좋고, 별도 이슈로 파서 고민해봐도 좋을 것 같습니당

[babycroc]

number 쓰이는 경우가 꽤 있다면 넘버링 로직 수정해보면 어떨까요 @babycroc

넘버링 쓰는 경우가 아직 거의 없을것 같긴 한데? 뭔가 내가 말한 코멘트1 적용하면 별도 로직 필요 없이 해결되지 않을까 싶긴 함

[jinhyeonkwon]

코멘트 반영하고, 질문 사항은 댓글 또는 PR 설명에 업데이트해 두었습니다!
Storybook 연결까지 완료했고 리뷰를 거쳐 최신 버전을 다른 페이지에 적용하려 합니다