[REFACTOR] sidebar 컴포넌트 개선

[seongminn]

🌍 이슈 번호

• closed [REFACTOR] 사이드바 컴포넌트 개선 #51

✅ 작업 내용

• vanilla extract에서 스타일을 주입할 때 우선적으로 적용되는 스타일에 대한 기준이 명확하지 않아 스타일이 오버라이드 되지 않는 버그가 있습니다. 이를 해결하기 위해 모달 컴포넌트에 있는 기본 스타일을 제거했습니다.
• accordion 컴포넌트 추가
  • 클릭 시 숨겨져 있던 내용이 등장하는 accordion 컴포넌트를 구현했습니다.
  • 사용 방법은 아래와 같으며, 자세한 내용은 스토리북을 참고해주세요!

    <Accordion type="single">
      <Accordion.Item value="2023">
        <Accordion.Trigger>2023년도</Accordion.Trigger>
        <Accordion.Content>콘텐츠입니다.</Accordion.Content>
      </Accordion.Item>
    </Accordion>

• sidebar 컴포넌트 내부를 개선합니다.
  • accordion 컴포넌트를 이용하여 점점 길어질 수 있는 컨텐츠를 최대한 줄일 수 있도록 했습니다.

📝 참고 자료

♾️ 기타

• LeagueList 컴포넌트에서는 List 컴포넌트를 이용하고 있습니다. arr.map(data => <Component {...data} />처럼 명시적으로 매핑하는 구조를 제거하고 싶어서 구현해 보았는데, 막상 구현하고 나니 오히려 흐름 파악이 더 어려워진 것 같다는 생각이 들기도 하네요.. 해당 컴포넌트에 대한 여러분의 생각이 궁금합니다. 과하다는 생각이 드신다면 바로 제거하겠습니다!
• 연도 클릭 시 해당 해에 개최된 대회 목록이 나타납니다. 이 때 연도에 마우스를 호버하면 클릭할 수 있다는 표시를 제공하기 위해 여러가지 스타일을 넣어볼까 했는데, 적당히 어울리는 게 없어 보이네요.. 그나마 괜찮은 것은 underline을 추가하는 것일 거 같은데, 여러분의 의견이 궁금합니다. 우측에 아래를 가리키는 화살표가 있어서 굳이 스타일이 필요 없을 것 같기도 하고, 떠 호버 이펙트를 제공해서 유저가 심심하지 않으며 플로우를 어느정도 유도할 수 있기에 스타일을 추가하는 것도 좋을 것 같기도 하고, 반반입니다 저는...
• 스타일 X
  
• underline
  

[netlify]

✅ Deploy Preview for hufscheer-manager ready!

Name	Link
🔨 Latest commit	404d069
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer-manager/deploys/65e83b476ffd3d000824d5da
😎 Deploy Preview	https://deploy-preview-56--hufscheer-manager.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for hufscheer ready!

Name	Link
🔨 Latest commit	404d069
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer/deploys/65e83b476ffd3d000824d5dc
😎 Deploy Preview	https://deploy-preview-56--hufscheer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ohprettyhak]

Accordion 컴포넌트를 통해 대회가 누적될 때를 대비한 부분이 정말 세심하게 뷰를 구현한다는 생각이 드네요! Sidebar 부분도 기존에 추가한 Modal 컴포넌트를 활용하여 효율적으로 구현하신 거 같습니다. 고생하셨습니다.

말씀하신 List 컴포넌트의 경우 LeagueList 라는 이름의 컴포넌트 내부에서 두 번에 걸쳐 사용 되고 있는데, List 컴포넌트의 코드를 확인하지 않으면 어떤 기능을 하는지 정확하게 판단하기가 어렵습니다.
네이밍이 비슷해서 이런 느낌을 받는 거 같기도 하고, components 폴더의 같은 레벨에 두 컴포넌트가 존재하다보니 헷갈리는 거 같아요.

[ohprettyhak]

이쪽 코드가 더 이상 사용되지 않는다면 제거해도 좋을 거 같습니다.

[seongminn]

앗 그러네요! 수정하겠습니다ㅎㅎ

[ohprettyhak]

연도 클릭과 내부 대회 리스트 디자인과 관련해서는 디자인쪽과 논의해보는 것은 어떨까요? 저는 굳이 필요 없다는 의견이긴 하지만, 이쪽 디자인을 보니 이펙트가 있는 것이 사용자 경험 면에서 더 좋을 거 같기도 하네요.

[seongminn]

1. 그렇군요! 그러면 List 컴포넌트를 제거하고 작성한 코드를 올려두겠습니다ㅎㅎ

2. 디자인 측에 한 번 이야기해봐야겠네요. preview 페이지가 있어 소통하기 쉬울 것 같습니다ㅎㅎ👍

[HiimKwak]

저는 이 프로젝트가 사이드 프로젝트인만큼 이것저것 시도해보는 것은 정말 바람직하다 생각합니다. List 컴포넌트도 그 일환인 것 같아요. 다만 저도 List 컴포넌트는 오히려 이해의 단계를 불필요하게 한 단계 추가한다고 느껴져 적극적인 사용을 할 필요는 없다 생각합니다.
고생하셨습니다!