Refactor: zustand로 isSideBarOpen 상태 관리 / desktop 사이즈 일때 narrow 사이즈 고려

[hankim0904]

📌요구사항

• zustand로 isSideBarOpen 상태 관리 하기
• desktop 사이즈일 때 narrow 사이즈 고려해서 반응형 구현하기
• Stack 컴포넌트의 img 최소 사이즈 정해주기
• Scrap 컴포넌트의 변수명 변경하기

📌작업 진행 상황 (에러, 막혔던 부분, 그외 궁금한것 등등)

• /src/stores/sideBarStore.ts 생성 후 isSideBarOpen 변수 및 toggleSideBar 함수 전역 관리
• /src/hooks/useResponsiveSideBar.ts 생성 후 현재 스크린 상태를 판단하는 hook 구현
  • useResponsiveSidebar hook은isSidebarOpenNarrow 변수를 반환함
  • const isSidebarOpenNarrow = isSideBarOpen && screenWidth < 1410; 이므로 사이드바가 열렸고, 스크린 width가 1410px 이하일 경우 true를 반환함
• Stack 컴포넌트 리팩토링 완료 -> 디자인 시안 나오면 width와 height 변경해야 함
• Scrap 컴포넌트의 wasScraped 변수 대신 isScraped와 isScrpedValue를 사용하는 것으로 변경

📌스크린샷 / 테스트결과 (선택)

• home 페이지 사이드바 반응형

home_sidebar_.mp4

• Stack 컴포넌트

• Scrap 컴포넌트

Scrap_onClick.mp4

📌이슈 번호

[github-actions]

올바른 PR 형식

올바른 PR 형식입니다.
코드 작성하시느라 수고 많으셨습니다 :)

[hankim0904]

stack && STACK_ICONS[stack]의 && STACK_ICONS[stack]은 /src/constants/stackIcons.ts 파일이 완성되면 제거해도 되는 조건 입니다.

[kimbobby]

hook 감사합니다! 따봉