SP-530 사이드바 컴포넌트 구현

[abiriadev]

프리뷰 확인해 보기: https://6639b92a06ad1d3b783f16fd-pqspiznurc.chromatic.com/?path=/docs/components-sidebar--docs

Closes #185

💡 다음 이슈를 해결했어요.

• 참고: SP-530 사이드바 컴포넌트 #185
• 마이페이지에 사용될 사이드바 컴포넌트를 구현해 사용자들이 마이페이지를 더욱 쉽게 이동할 수 있도록 하였어요
• 탭을 hover시 스타일을 바꾸어 클릭할 수 있음을 알려주며, 클릭 시 해당 탭으로 이동할 수 있도록 하였어요
  
  
  

💡 이슈를 처리하면서 추가된 코드가 있어요.

• <Sidebar /> 컴포넌트를 추가했어요
  • <Tab /> 컴포넌트를 추가했어요
  • 탭 컴포넌트에 적절한 라우트 경로를 할당했어요.

  • ludo-frontend/src/Components/Sidebar/Sidebar.tsx

    Lines 8 to 21 in 408fc09

    	<Navigation>
    	<TabGroup name="회원 정보">
    	<Tab title="회원 정보" to={ROUTES.MYPAGE.HOME} />
    	<Tab title="스터디원이 남긴 나의 리뷰" to={ROUTES.MYPAGE.REVIEWS} />
    	<Tab title="임시 저장된 글" to={ROUTES.MYPAGE.SAVED} />
    	</TabGroup>
    	<TabGroup name="설정">
    	<Tab title="프로필 설정" to={ROUTES.MYPAGE.PROFILE_SETTINGS} />
    	<Tab title="알림 권한 설정" to={ROUTES.MYPAGE.NOTIFICATIONS_SETTINGS} />
    	</TabGroup>
    	<TabGroup name="알림">
    	<Tab title="루도가 알려요" to={ROUTES.MYPAGE.NOTIFICATIONS} />
    	</TabGroup>
    	</Navigation>

💡 필요한 후속작업이 있어요.

• 임의로 할당한 라우트 전부 Router/index.tsx 및 Constants/route.ts와 호환되게 바꾸기
  
  
  

💡 다음 자료를 참고하면 좋아요.

• https://www.figma.com/file/Sho4QHn0XqEptYBBlbf704/Page-Layout?node-id=3596-31164&mode=dev
  
  
  

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[hyosin-Jang]

@abiriadev 코드의 가독성이 정말 좋네요! 변수명이 명확하고 이해하기 쉬웠습니다.
NavLink의 isActive로 활성 탭인지 간단하게 확인하신 건 정말 인상적이었습니다.
고생하셨습니다! 🙏

[SungHyun627]

사이드바 컴포넌트 구현하신 것 확인했습니다. 수고하셨습니다!!