[Feat] Gallery List Page & Component 개발 (#471)

* feat: header 생성 * feat: gallery card view * feat: list view card 구현 * feat: filter tab click style 추가 * feat: layout 수정, animation 추가 * feat: 명함 유도 한번 누르면 다시는 보이지 않도록 * refactor: card open 로직 분리 * feat: modal add * feat: modal content style 추가 * feat: gallery 명함 게시 컴포넌트 추가, API 연결만 하면 됨. * feat: 내 갤러리 프리뷰 조회 API 연결, 더미 추가 * feat: 내 카드 (ME) tag 추가 * refactor: div 구조 변경 * chore: 혜성님 리뷰 반영 * refactor: gallery header 공통 컴포넌트로 분리 * fix: api 변경사항 적용 * 내 명함 업로드 기능 추가 (#473) * feat: 조회 API 연결, 응답값 수정 반영 * feat: 나의 갤러리 preview api 연결 및 스켈레톤 추가 * feat: survey submit mutate 추가 * feat: 명함 게시 후 에러 핸들링 * feat: 명함 업로드 후 리패칭 * refactor: 헷갈리는 네이밍 수정 * refactor: 서버에서 내 명함이 있는지 확인하는 로직 수정 * 명함 갤러리 조회 & 필터 추가 (#475) * feat: 선택한 필터 탭에 따라 정렬 순서 변경 * feat: 명함 filter position -> job * refactor: key 추가 (애니매이션) --------- Co-authored-by: byun sumi <[email protected]> * refactor: 리뷰 적용 --------- Co-authored-by: byun sumi <[email protected]> * 사이드 구현 (#481) * refacotor: 코드 정리 및 애니매이션 추가 * feat: 유저 정보 API 연결 * style: menu list style 추가 * refactor: 코드리뷰 적용 --------- Co-authored-by: byun sumi <[email protected]> * 명함 갤러리 북마크 추가 / 삭제 기능 (#480) * feat: 조회 API 연결, 응답값 수정 반영 * feat: 나의 갤러리 preview api 연결 및 스켈레톤 추가 * feat: survey submit mutate 추가 * feat: 명함 게시 후 에러 핸들링 * feat: 명함 업로드 후 리패칭 * feat: 선택한 필터 탭에 따라 정렬 순서 변경 * feat: 명함 filter position -> job * refactor: key 추가 (애니매이션) * feat: bookmark add and get api 연결 추가 * refactor: refetching 로직 추가 * feat: add bookmark 로직 확인 * feat: 내 카드 검증 및 북마크 체크 * feat: bookmark 삭제 기능 추가 * feat: card click시 페이지 이동 * refactor: 헷갈리는 네이밍 수정 * refactor: 서버에서 내 명함이 있는지 확인하는 로직 수정 * refactor: bookmark state 제거 * 명함 갤러리 조회 & 필터 추가 (#475) * feat: 선택한 필터 탭에 따라 정렬 순서 변경 * feat: 명함 filter position -> job * refactor: key 추가 (애니매이션) --------- Co-authored-by: byun sumi <[email protected]> * 내가 저장한 명함 페이지 추가 (#482) * feat: 내가 북마크한 리스트 보여주기 * feat: 북마크 삭제 및 리프레싱 * feat: 타이틀 추가, 비었다는 안내 추가 * refactor: todo 및 리뷰 적용 * refactor: 주석 제거 --------- Co-authored-by: byun sumi <[email protected]> * fix: build error fix * feat: menu herf 추가 * fix: 놓친 부분 수정 * refactor: interface 분리 * refactor: 혜성님 리뷰 적용 * refactor: 빠진 부분 수정 --------- Co-authored-by: byun sumi <[email protected]>
depromeet · Mar 12, 2024 · 12e989c · 12e989c
1 parent 62d13ee
commit 12e989c
Show file tree

Hide file tree

Showing 56 changed files with 2,021 additions and 28 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,8 +12,8 @@
   "stylelint.customSyntax": "postcss-styled-syntax",
 
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "editor.formatOnSave": true,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

diff --git a/.yarn/cache/@esbuild-darwin-x64-npm-0.17.19-30afb0190b-8.zip b/.yarn/cache/@esbuild-darwin-x64-npm-0.17.19-30afb0190b-8.zip
diff --git a/.yarn/cache/@esbuild-darwin-x64-npm-0.18.13-e38db97cb2-8.zip b/.yarn/cache/@esbuild-darwin-x64-npm-0.18.13-e38db97cb2-8.zip
diff --git a/.yarn/cache/@next-swc-darwin-x64-npm-13.5.6-3c6ecf4082-8.zip b/.yarn/cache/@next-swc-darwin-x64-npm-13.5.6-3c6ecf4082-8.zip
diff --git a/public/images/dna/careerCard/A.png b/public/images/dna/careerCard/A.png
diff --git a/public/images/dna/careerCard/A.webp b/public/images/dna/careerCard/A.webp
diff --git a/public/images/dna/careerCard/B.png b/public/images/dna/careerCard/B.png
diff --git a/public/images/dna/careerCard/B.webp b/public/images/dna/careerCard/B.webp
diff --git a/public/images/dna/careerCard/C.png b/public/images/dna/careerCard/C.png
diff --git a/public/images/dna/careerCard/C.webp b/public/images/dna/careerCard/C.webp
diff --git a/public/images/dna/careerCard/D.png b/public/images/dna/careerCard/D.png
diff --git a/public/images/dna/careerCard/D.webp b/public/images/dna/careerCard/D.webp
diff --git a/public/images/dna/careerCard/E.png b/public/images/dna/careerCard/E.png
diff --git a/public/images/dna/careerCard/E.webp b/public/images/dna/careerCard/E.webp
diff --git a/public/images/dna/careerCard/F.png b/public/images/dna/careerCard/F.png
diff --git a/public/images/dna/careerCard/F.webp b/public/images/dna/careerCard/F.webp
diff --git a/public/images/gallery/imgUploadCareerCard.png b/public/images/gallery/imgUploadCareerCard.png
diff --git a/public/images/profile/profile-basic.png b/public/images/profile/profile-basic.png
diff --git a/src/components/header/MobileHeader.tsx b/src/components/header/MobileHeader.tsx
@@ -0,0 +1,63 @@
+import { css, type Theme } from '@emotion/react';
+
+import { MenuBarIcon } from '~/components/icons/MenuIcon';
+import SideMenu from '~/components/sideMenu/SideMenu';
+import useBoolean from '~/hooks/common/useBoolean';
+import { HEAD_1_BOLD } from '~/styles/typo';
+
+// NOTE: MobileHeader 임시 네이밍, 추후 수정 필요
+interface Props {
+  title: string;
+}
+
+function MobileHeader(props: Props) {
+  const [isSideMenuOpen, toggleSideMenu] = useBoolean(false);
+
+  return (
+    <>
+      <header css={headerCss}>
+        <h1>{props.title}</h1>
+        <button type="button" css={menuButtonCss} onClick={toggleSideMenu}>
+          <MenuBarIcon color="#394258" />
+        </button>
+      </header>
+      <div css={blankCss} />
+      <SideMenu isOpen={isSideMenuOpen} onClose={toggleSideMenu} />
+    </>
+  );
+}
+
+export default MobileHeader;
+
+const menuButtonCss = css`
+  height: 48px;
+`;
+
+const headerCss = (theme: Theme) => css`
+  position: fixed;
+  z-index: ${theme.zIndex.aboveDefault};
+  top: 0;
+  right: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100vw;
+  max-width: ${theme.size.maxWidth};
+  height: 60px;
+  margin-inline: auto;
+  padding: 0 20px;
+
+  background-color: ${theme.colors.white};
+
+  h1 {
+    ${HEAD_1_BOLD};
+  }
+`;
+
+const blankCss = css`
+  width: 100%;
+  height: 60px;
+`;
diff --git a/src/components/icons/AlignUpdatedIcon.tsx b/src/components/icons/AlignUpdatedIcon.tsx
@@ -0,0 +1,25 @@
+import { type ComponentProps } from 'react';
+
+import type Svg from '../svg/Svg';
+
+function AlignUpdatedIcon({ width = 21, height = 20, color = '#1D2942', ...rest }: ComponentProps<typeof Svg>) {
+  return (
+    <svg
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      color={color}
+      {...rest}
+    >
+      <path
+        d="M10.7 3.28003C14.23 3.28003 17.13 5.89003 17.62 9.28003H19.7L16.2 13.28L12.7 9.28003H15.02C14.7963 8.30114 14.2473 7.42701 13.4626 6.8004C12.678 6.17379 11.7041 5.83171 10.7 5.83003C9.24999 5.83003 7.96999 6.54003 7.15999 7.61003L5.44999 5.66003C6.1045 4.91159 6.91167 4.31195 7.81722 3.90143C8.72278 3.49092 9.70573 3.27903 10.7 3.28003ZM10.3 16.72C6.77999 16.72 3.86999 14.11 3.37999 10.72H1.29999L4.79999 6.72003C5.96999 8.05003 7.12999 9.39003 8.29999 10.72H5.97999C6.2037 11.6989 6.7527 12.5731 7.53733 13.1997C8.32196 13.8263 9.29586 14.1684 10.3 14.17C11.75 14.17 13.03 13.46 13.84 12.39L15.55 14.34C14.8961 15.0892 14.0891 15.6894 13.1834 16.1C12.2777 16.5106 11.2944 16.722 10.3 16.72Z"
+        // fill="#1D2942"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default AlignUpdatedIcon;
diff --git a/src/components/icons/BookmarkIcon.tsx b/src/components/icons/BookmarkIcon.tsx
@@ -8,14 +8,21 @@ interface Props extends ComponentProps<typeof Svg> {
   isBookmarked: boolean;
 }
 
-const BookmarkIcon = ({ size = 32, isBookmarked = false, ...rest }: Props) => {
+const BookmarkIcon = ({ size = 32, isBookmarked = false, color, ...rest }: Props) => {
+  const fillColor = (() => {
+    if (color) return color;
+    if (isBookmarked) return colors.primary_200;
+
+    return colors.gray_300;
+  })();
+
   return (
-    <Svg size={size} {...rest}>
+    <Svg size={size} viewBox="0 0 32 32" {...rest}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.90039 5.81349C6.90039 4.91057 7.43372 4.26562 8.18039 4.26562H23.7537C24.5004 4.26562 25.0337 4.91057 25.0337 5.81349V27.9996C25.0337 28.6446 24.5004 29.0315 24.0737 28.6446L16.6071 23.485C16.1804 23.227 15.7537 23.227 15.3271 23.485L7.86039 28.6446C7.43372 28.9025 6.90039 28.5156 6.90039 27.9996V5.81349Z"
-        fill={isBookmarked ? colors.primary_200 : colors.gray_300}
+        fill={fillColor}
       />
     </Svg>
   );

diff --git a/src/components/icons/CheckCircleIcon.tsx b/src/components/icons/CheckCircleIcon.tsx
@@ -0,0 +1,18 @@
+import { type ComponentProps } from 'react';
+
+import Svg from '~/components/svg/Svg';
+
+function CheckCircleIcon({ width = 24, height = 24, color = '#CDE7AC', ...rest }: ComponentProps<typeof Svg>) {
+  return (
+    <Svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.207 10.215L11.624 15.799C11.4359 15.9858 11.1816 16.0906 10.9165 16.0906C10.6514 16.0906 10.3971 15.9858 10.209 15.799L6.793 12.383C6.70016 12.2902 6.62651 12.1799 6.57626 12.0586C6.52601 11.9373 6.50015 11.8073 6.50015 11.676C6.50015 11.4108 6.60549 11.1565 6.793 10.969C6.98051 10.7815 7.23482 10.6762 7.5 10.6762C7.76518 10.6762 8.01949 10.7815 8.207 10.969L10.916 13.678L15.793 8.801C15.8858 8.70816 15.9961 8.63451 16.1174 8.58426C16.2387 8.53401 16.3687 8.50815 16.5 8.50815C16.6313 8.50815 16.7613 8.53401 16.8826 8.58426C17.0039 8.63451 17.1142 8.70816 17.207 8.801C17.2998 8.89384 17.3735 9.00407 17.4237 9.12537C17.474 9.24668 17.4998 9.3767 17.4998 9.508C17.4998 9.6393 17.474 9.76932 17.4237 9.89063C17.3735 10.0119 17.2998 10.1222 17.207 10.215ZM12 1C5.925 1 1 5.925 1 12C1 18.075 5.925 23 12 23C18.075 23 23 18.075 23 12C23 5.925 18.075 1 12 1Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
+
+export default CheckCircleIcon;
diff --git a/src/components/icons/MenuIcon.tsx b/src/components/icons/MenuIcon.tsx
@@ -16,3 +16,17 @@ const MenuIcon = ({ size = 24, color = '#B0B0B0', ...rest }: ComponentProps<type
 };
 
 export default MenuIcon;
+
+// TODO: MenuIcon 이랑 다른지 체크 후 삭제
+export const MenuBarIcon = ({ size = 24, color = '#B0B0B0', ...rest }: ComponentProps<typeof Svg>) => {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" size={size} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM21 18C21 17.4477 20.5523 17 20 17H4C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
diff --git a/src/components/icons/MinusCircleIcon.tsx b/src/components/icons/MinusCircleIcon.tsx
@@ -0,0 +1,18 @@
+import React, { type ComponentProps } from 'react';
+
+import Svg from '~/components/svg/Svg';
+
+function MinusCircleIcon({ width = 24, height = 24, color = '#F85B81', ...rest }: ComponentProps<typeof Svg>) {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" width={width} height={height} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.492 13.061H7.492C7.34999 13.0654 7.20856 13.0412 7.07608 12.9898C6.9436 12.9385 6.82279 12.8611 6.7208 12.7622C6.6188 12.6633 6.53771 12.5449 6.48234 12.414C6.42696 12.2832 6.39843 12.1426 6.39843 12.0005C6.39843 11.8584 6.42696 11.7178 6.48234 11.587C6.53771 11.4561 6.6188 11.3377 6.7208 11.2388C6.82279 11.1399 6.9436 11.0625 7.07608 11.0112C7.20856 10.9598 7.34999 10.9356 7.492 10.94H16.492C16.7676 10.9485 17.0291 11.0639 17.2211 11.2619C17.4131 11.4598 17.5204 11.7247 17.5204 12.0005C17.5204 12.2763 17.4131 12.5412 17.2211 12.7391C17.0291 12.9371 16.7676 13.0525 16.492 13.061ZM12 1C5.925 1 1 5.925 1 12C1 18.076 5.925 23 12 23C18.075 23 23 18.076 23 12C23 5.925 18.075 1 12 1Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
+
+export default MinusCircleIcon;
diff --git a/src/components/icons/ThreeDotsIcon.tsx b/src/components/icons/ThreeDotsIcon.tsx
@@ -4,12 +4,27 @@ import Svg from '../svg/Svg';
 
 const ThreeDotsIcon = ({ color = '#677089', size = 24, ...rest }: ComponentProps<typeof Svg>) => {
   return (
-    <Svg color={color} size={size} {...rest}>
+    <Svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color={color} size={size} {...rest}>
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 0.771019C16.2627 0.771085 16.5228 0.822894 16.7655 0.92349C17.0082 1.02408 17.2287 1.1715 17.4144 1.35731C17.6001 1.54312 17.7474 1.76369 17.8479 2.00642C17.9484 2.24916 18.0001 2.50931 18 2.77202C17.9999 3.03473 17.9481 3.29485 17.8475 3.53754C17.7469 3.78023 17.5995 4.00072 17.4137 4.18644C17.2279 4.37216 17.0073 4.51946 16.7646 4.61993C16.5219 4.72041 16.2617 4.77209 15.999 4.77202C15.4684 4.77189 14.9597 4.56099 14.5846 4.18573C14.2095 3.81047 13.9989 3.30158 13.999 2.77102C13.9991 2.24045 14.21 1.73167 14.5853 1.3566C14.9605 0.981526 15.4694 0.770886 16 0.771019ZM9.229 0.771019C9.75943 0.771019 10.2681 0.981733 10.6432 1.35681C11.0183 1.73188 11.229 2.24059 11.229 2.77102C11.229 3.30145 11.0183 3.81016 10.6432 4.18523C10.2681 4.56031 9.75943 4.77102 9.229 4.77102C8.69857 4.77102 8.18986 4.56031 7.81479 4.18523C7.43971 3.81016 7.229 3.30145 7.229 2.77102C7.229 2.24059 7.43971 1.73188 7.81479 1.35681C8.18986 0.981733 8.69857 0.771019 9.229 0.771019ZM2.459 0.771018C2.72171 0.771084 2.98183 0.822894 3.22452 0.923489C3.46721 1.02408 3.6877 1.17149 3.87342 1.3573C4.05914 1.54312 4.20644 1.76369 4.30691 2.00642C4.40738 2.24916 4.45907 2.50931 4.459 2.77202C4.45893 3.03473 4.40713 3.29485 4.30653 3.53754C4.20593 3.78023 4.05852 4.00072 3.87271 4.18644C3.6869 4.37216 3.46633 4.51946 3.2236 4.61993C2.98086 4.72041 2.72071 4.77208 2.458 4.77202C1.9273 4.77189 1.41839 4.56094 1.04323 4.18559C0.66806 3.81023 0.457367 3.30122 0.4575 2.77052C0.457634 2.23982 0.668577 1.73091 1.04393 1.35574C1.41929 0.980578 1.9283 0.770886 2.459 0.771018Z"
-        fill={color}
+        d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </Svg>
   );

diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -1,5 +1,5 @@
 import { type ComponentProps, type MouseEvent, type PropsWithChildren } from 'react';
-import { css, type Theme } from '@emotion/react';
+import { css, type Interpolation, type Theme } from '@emotion/react';
 import { m } from 'framer-motion';
 
 import Header from '~/components/header/Header';
@@ -13,6 +13,7 @@ interface Props {
    * 외부영역 클릭시 호출될 함수
    */
   onClickOutside?: VoidFunction;
+  blurOverrideCss?: Interpolation<Theme>;
 }
 
 /**
@@ -26,13 +27,14 @@ const Modal = ({
   mode,
   onClickOutside,
   children,
+  blurOverrideCss,
 }: PropsWithChildren<Props> & ComponentProps<typeof AnimatePortal>) => {
   useScrollLock({ lock: isShowing });
 
   return (
     <AnimatePortal isShowing={isShowing} mode={mode}>
       <div css={dialogPositionCss}>
-        <ModalBlur onClickOutside={onClickOutside} />
+        <ModalBlur onClickOutside={onClickOutside} blurOverrideCss={blurOverrideCss} />
         <div css={containerCss}>{children}</div>
       </div>
     </AnimatePortal>
@@ -52,7 +54,7 @@ const dialogPositionCss = css`
   height: 100vh;
 `;
 
-const ModalBlur = ({ onClickOutside }: Pick<Props, 'onClickOutside'>) => {
+const ModalBlur = ({ onClickOutside, blurOverrideCss }: Pick<Props, 'onClickOutside' | 'blurOverrideCss'>) => {
   const onClickOutsideDefault = (e: MouseEvent) => {
     if (e.target !== e.currentTarget) return;
     if (onClickOutside) onClickOutside();
@@ -61,7 +63,7 @@ const ModalBlur = ({ onClickOutside }: Pick<Props, 'onClickOutside'>) => {
   return (
     <m.div
       onClick={onClickOutsideDefault}
-      css={blurCss}
+      css={[blurCss, blurOverrideCss]}
       variants={defaultFadeInVariants}
       initial="initial"
       animate="animate"

diff --git a/src/components/sideMenu/MenuSection.tsx b/src/components/sideMenu/MenuSection.tsx
@@ -0,0 +1,110 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { css } from '@emotion/react';
+
+import BookmarkIcon from '~/components/icons/BookmarkIcon';
+import useKakaoLogin from '~/hooks/auth/useKakaoLogin';
+
+function MenuSection() {
+  const router = useRouter();
+  const { logOutHandler } = useKakaoLogin();
+
+  const MENU_LIST: {
+    id: string;
+    label: string;
+    href?: string;
+    action?: () => void;
+  }[] = [
+    {
+      id: 'bookmark-card',
+      label: '저장한 명함',
+      href: '/gallery/bookmarks',
+    },
+    {
+      id: 'logout',
+      label: '로그아웃',
+      action: () => {
+        // 실 환경에서 되는지 체크
+        logOutHandler();
+        router.replace('/');
+      },
+    },
+    // {
+    //   id: 'terms',
+    //   label: '약관 및 정책',
+    //   href: '#',
+    // },
+    // {
+    //   id: 'suggest',
+    //   label: '건의하기',
+    //   href: '#',
+    // },
+    // {
+    //   id: 'withdraw',
+    //   label: '회원탈퇴',
+    //   href: '#',
+    // },
+  ];
+
+  return (
+    <section>
+      <ul css={menuListCss}>
+        {MENU_LIST.map((menu) => {
+          if (menu.href) {
+            return (
+              <Link
+                key={menu.id}
+                href={menu.href}
+                style={{
+                  all: 'unset',
+                }}
+              >
+                <li css={menuItemCss}>
+                  <BookmarkIcon isBookmarked={false} width={20} height={20} color="#fff" />
+                  <span>{menu.label}</span>
+                </li>
+              </Link>
+            );
+          }
+          if (menu.action) {
+            return (
+              <button type="button" key={menu.id} onClick={menu.action}>
+                <li css={menuItemCss}>
+                  <BookmarkIcon isBookmarked={false} width={20} height={20} color="#fff" />
+                  <span>{menu.label}</span>
+                </li>
+              </button>
+            );
+          }
+
+          return null;
+        })}
+      </ul>
+    </section>
+  );
+}
+
+export default MenuSection;
+
+const menuListCss = css`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const menuItemCss = css`
+  cursor: pointer;
+
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  padding: 8px 20px;
+
+  color: #fff;
+
+  span {
+    display: inline-block;
+    text-decoration: none;
+  }
+`;