Merge pull request #21 from Pro-Pofol/feature/#18-toast

Feature/#18 toast
Pro-Pofol · May 22, 2024 · 35c979d · 35c979d
2 parents 33cb6ec + 22ed44b
commit 35c979d
Show file tree

Hide file tree

Showing 15 changed files with 466 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -9,15 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "1.9.7",
+    "framer-motion": "^11.2.5",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-redux": "8.1.3",
+    "redux": "^5.0.1",
+    "redux-logger": "^3.0.6",
     "sharp": "^0.33.3"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/redux-logger": "^3.0.12",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "autoprefixer": "^10.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import './globals.css'
 import { Footer, Header } from '@/components'
+import ReduxProvider from '@/utils/store/Provider'
+import Toaster from '@/utils/toast/Toaster'
 
 const Pretendard = localFont({
   src: './PretendardVariable.woff2',
@@ -20,9 +22,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={Pretendard.className}>
-        <Header />
-        {children}
-        <Footer />
+        <ReduxProvider>
+          <Header />
+          {children}
+          <Footer />
+          <Toaster />
+        </ReduxProvider>
       </body>
     </html>
   )

diff --git a/src/assets/Check.tsx b/src/assets/Check.tsx
@@ -2,9 +2,10 @@ interface PropsType {
   size?: number
   onClick?: () => void
   className?: string
+  isFill?: boolean
 }
 
-export const Check = ({ size = 24, onClick, className = '' }: PropsType) => {
+export const Check = ({ size = 24, onClick, className = '', isFill }: PropsType) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,7 +16,12 @@ export const Check = ({ size = 24, onClick, className = '' }: PropsType) => {
       onClick={onClick}
       className={`${onClick ? 'cursor-pointer ' : ''}${className}`}
     >
-      <path d="M9.9997 15.171L19.1921 5.97864L20.6063 7.39285L9.9997 17.9994L3.63574 11.6355L5.04996 10.2213L9.9997 15.171Z" fill="currentColor" />
+      {
+        isFill ? 
+        <path d="M12 22.0001C6.47715 22.0001 2 17.5229 2 12.0001C2 6.47727 6.47715 2.00012 12 2.00012C17.5228 2.00012 22 6.47727 22 12.0001C22 17.5229 17.5228 22.0001 12 22.0001ZM11.0026 16.0001L18.0737 8.92905L16.6595 7.51484L11.0026 13.1717L8.17421 10.3432L6.75999 11.7575L11.0026 16.0001Z" fill="currentColor"/>
+        :
+        <path d="M9.9997 15.171L19.1921 5.97864L20.6063 7.39285L9.9997 17.9994L3.63574 11.6355L5.04996 10.2213L9.9997 15.171Z" fill="currentColor" />
+      }
     </svg>
   )
 }
diff --git a/src/assets/Download.tsx b/src/assets/Download.tsx
@@ -0,0 +1,21 @@
+interface PropsType {
+  size?: number
+  onClick?: () => void
+  className?: string
+}
+
+export const Download = ({ size = 24, onClick, className = '' }: PropsType) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      onClick={onClick}
+      className={`${onClick ? 'cursor-pointer ' : ''}${className}`}
+    >
+      <path d="M13 10.0001H18L12 16.0001L6 10.0001H11V3.00012H13V10.0001ZM4 19.0001H20V12.0001H22V20.0001C22 20.5524 21.5523 21.0001 21 21.0001H3C2.44772 21.0001 2 20.5524 2 20.0001V12.0001H4V19.0001Z" fill="currentColor" />
+    </svg>
+  )
+}