Mara-32 나눔 목록 조회 화면 구현 (#8)

* style: pc 화면시 영역 밖 배경색 변경

* chore: Angle Icon 추가

* fix: Header component backgroundColor props 추가

* style: global.css body color 설정

* chore: dayjs install

* feat: TabButton component 생성

* feat: 나눔 리스트 아이템 컴포넌트 (ShareListItem) 생성

* feat: 나눔 탭 화면 구현

* chore: material-tailwind/react insall

* chore: dayjs locale 설정

* chore: chakra-ui/react, emotion/react, emotion/styled, framer-motion install

* feat: Radio component 생성

* feat: 나눔 탭 화면 바텀 시트 구현

* chore: globals.css font-family 적용 수정

* chore: 사용하지 않는 svg파일 제거

* chore: assets directory 구조 변경, 홈에 사용되는 svg파일 위치이동

* chore: lint 수정

* fix: 사용되고 있던 svg파일 컴포넌트화, 적용

* fix: 기존 Icon 파일제거, 내부 Icon svg assets으로 이동, barrel 파일 추가

* fix: lint 수정

* chore: material-tailwind/react remove

* chore: RadioButtonField, SortButton component로 분리

* chore: TabLabel, SortLabel interface types로 분리

* chore: mock data date 수정

* fix: header backbutton onClick event 수정

package.json

@@ -19,12 +19,17 @@
     ]
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@typescript-eslint/parser": "^6.19.0",
     "axios": "^1.6.5",
+    "dayjs": "^1.11.10",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
+    "framer-motion": "^11.0.3",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",

src/assets/icons/AlarmIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+const AlarmIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clipPath="url(#clip0_201_3609)">
+            <path fillRule="evenodd" clipRule="evenodd" d="M13.0873 1.14286C13.0873 0.511675 12.5756 0 11.9444 0C11.3132 0 10.8016 0.511675 10.8016 1.14286V2.36712C6.92455 2.92157 3.9442 6.2558 3.9442 10.2861V14.8573L3.94403 14.8574L3.94387 14.8575L2.52654 17.6922C2.12759 18.4901 2.70779 19.4289 3.59985 19.4289H20.288C21.1801 19.4289 21.7602 18.4901 21.3613 17.6922L20.0709 15.1114C19.9876 14.9447 19.9442 14.761 19.9442 14.5747V10.2861C19.9442 6.25596 16.9641 2.92183 13.0873 2.36718V1.14286Z" fill={props.fill ? "current" : "#CCCFD7"} />
+            <path fillRule="evenodd" clipRule="evenodd" d="M7.37418 20.571C7.88141 22.543 9.67141 24.0003 11.8018 24.0003C13.9321 24.0003 15.7221 22.543 16.2294 20.571H7.37418Z" fill={props.fill ? "current" : "#CCCFD7"} />
+        </g>
+        <defs>
+            <clipPath id="clip0_201_3609">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);
+
+export default AlarmIcon;

src/assets/icons/AngleIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const AngleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14.6446 1.41789C15.0351 1.80842 15.0351 2.44158 14.6446 2.83211L7.47671 10L14.6446 17.1679C15.0351 17.5584 15.0351 18.1916 14.6446 18.5821C14.2541 18.9726 13.6209 18.9726 13.2304 18.5821L4.64828 10L13.2304 1.41789C13.6209 1.02737 14.2541 1.02737 14.6446 1.41789Z"
+            fill={props.fill ? "current" : '#CCCFD7'}
+        />
+    </svg>
+);
+
+export default AngleIcon;

src/assets/icons/BoxIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const BoxIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        width="21"
+        height="20"
+        viewBox="0 0 21 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M1.25 3.0251C1.25 2.03099 2.05589 1.2251 3.05 1.2251H17.45C18.4441 1.2251 19.25 2.03099 19.25 3.0251V5.7251H1.25V3.0251Z"
+            fill={props.fill ? "current" : '#3CAA8D'}
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.5506 18.775C17.5447 18.775 18.3506 17.969 18.3506 16.975V7.07495H2.15063V16.975C2.15063 17.969 2.95654 18.775 3.95063 18.775H16.5506ZM7.38189 8.98745C6.82268 8.98745 6.36938 9.44097 6.36938 9.99995C6.36938 10.5589 6.82268 11.0125 7.38189 11.0125H13.1194C13.6786 11.0125 14.1319 10.5589 14.1319 9.99995C14.1319 9.44097 13.6786 8.98745 13.1194 8.98745H7.38189Z"
+            fill={props.fill ? "current" : '#3CAA8D'}
+        />
+    </svg>
+);
+
+export default BoxIcon;