사이드바 구현

[handje]

Pull request

Related issue

Resolve #10 @handje

Motivation and context

• 채팅의 사이드바를 구현하였습니다.
• 추후에 사이드바에서 사용될 수 있는 tooltip, collapsible, sheet, skeleton 모두 구현하였습니다. 다른곳에 사용되지 않아 해당 브랜치에 함께 작업하였습니다.
• 불필요한요소를 제외하고 모든 코드는 shadcn 컴포넌트를 사용하였습니다. 필요한 파일이 많아져서 commit으로 분리하였습니다.

Solution

1. 기본 사용법

<SidebarProvider>
       <Sidebar>
          <SidebarHeader>Header</SidebarHeader>
          <SidebarContent className="gap-0">
            sidebar contents
          </SidebarContent>
       </Sidebar>
       <SidebarInset>
          <SidebarTrigger className="-ml-1" />
       </SidebarInset>
</SidebarProvider>

• SidebarInset내부에 채팅메인 컴포넌트가 들어감

2. 사이드바 토글방법 : SidebarTrigger사용 or SidebarRail 사용
3. 참여채팅방, 참여하지 않은 채팅방을 그룹으로 분리하고 접을수 있도록 Collapsible예시를 storybook구현하였습니다. (스토리북에서는 토글이 작동되지않습니다.)
4. 사이드바 토글은 가능한데 사이즈 조절은 속성으로는 제공되지 않는다고 나와서 state를 사용해야한다고 합니다. 혹시 방법 아신다면 리뷰 남겨주세요!
5. SidebarProvider 속성인 const SIDEBAR_WIDTH를 11rem으로 설정하였습니다. 변경이 필요하시다면 해당 변수 변경해주세요!

How has this been tested

1. 사이드바 접었을 때
   
2. 사이드바 열었을 때
   

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[KimKyuHoi]

나중에 사이드바 넣을때 slug값으로 네이밍만 변경해주시면 감사하겠습니다!

[KimKyuHoi]

👍 👍 👍