Mara-32 나눔 목록 조회 화면 구현

package.json

@@ -19,12 +19,18 @@
     ]
   },
   "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",
+    "@material-tailwind/react": "^2.1.8",
     "@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;