Merge pull request #107 from Ureca-Mini-Project-Team4/feature/toast

FEAT: Toast 컴포넌트 구현

Author: abyss-s

react-app/src/components/Layout/Layout.tsx

@@ -1,8 +1,10 @@
 import { Outlet } from 'react-router-dom';
+import Toast from '../Toast/Toast';
 
 const Layout = () => {
   return (
     <section className="flex flex-col min-h-screen">
+      <Toast />
       <Outlet />
     </section>
   );

react-app/src/components/Toast/Toast.tsx

@@ -0,0 +1,34 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '@/store';
+import { hide } from '@/store/slices/toastSlice';
+
+export default function Toast() {
+  const toast = useSelector((state: RootState) => state.toast);
+  const dispatch = useDispatch();
+
+  if (!toast.isShow) return null;
+
+  const iconMap = {
+    success: '/assets/icons/success.svg',
+    warning: '/assets/icons/warning.svg',
+    information: '/assets/icons/info.svg',
+  };
+
+  const bgMap = {
+    success: 'bg-[var(--color-success)]',
+    warning: 'bg-[var(--color-warning)]',
+    information: 'bg-[var(--color-info)]',
+  };
+
+  return (
+    <div className="fixed top-20 sm:top-24 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-xs sm:max-w-sm md:max-w-md">
+      <div
+        className={`flex items-center gap-3 shadow-md sm:shadow-xl px-5 py-3 rounded-lg sm:rounded-2xl text-white ${bgMap[toast.type]}`}
+        onClick={() => dispatch(hide())}
+      >
+        <img src={iconMap[toast.type]} alt="icon" className="w-3 h-3 sm:w-4 sm:h-4" />
+        <span className="text-sm sm:text-base font-medium">{toast.message}</span>
+      </div>
+    </div>
+  );
+}

react-app/src/hook/useToast.ts

@@ -0,0 +1,21 @@
+import { useDispatch } from 'react-redux';
+import { show, hide, ToastType } from '@/store/slices/toastSlice';
+
+/**
+ * 사용법
+ * - const { showToast } = useToast();
+ * - showToast('성공적으로 완료되었습니다!', 'success')
+ */
+export function useToast() {
+  const dispatch = useDispatch();
+
+  const showToast = (message: string, type: ToastType = 'information', duration: number = 4000) => {
+    dispatch(show({ message, type }));
+
+    setTimeout(() => {
+      dispatch(hide());
+    }, duration);
+  };
+
+  return { showToast };
+}

react-app/src/pages/Home.tsx

@@ -1,5 +1,16 @@
-const Home = () => {
-  return <div>홈</div>;
-};
+import { useToast } from '@/hook/useToast';
 
-export default Home;
+export default function Home() {
+  const { showToast } = useToast();
+
+  const handleButtonClick = () => {
+    showToast('버튼이 클릭되었습니다', 'success');
+  };
+
+  return (
+    <div>
+      <h1>Hello</h1>
+      <button onClick={handleButtonClick}>토스트 표시</button>
+    </div>
+  );
+}

react-app/src/routes.tsx

@@ -6,7 +6,7 @@ import Vote from './pages/Vote';
 
 const router = createBrowserRouter([
   {
-    path: '/',
+    // path: '/',
     element: <Layout />,
     children: [
       {

react-app/src/store/index.ts

@@ -13,25 +13,27 @@ import storage from 'redux-persist/lib/storage';
 import authReducer from './slices/authSlice';
 import pageReducer from './slices/pageSlice';
 import timerReducer from './slices/timerSlice';
+import toastReducer from './slices/toastSlice';
 
-//  auth 슬라이스만 영구 저장되도록 설정
+// auth 슬라이스만 영구 저장되도록 설정
 const persistConfig = {
   key: 'root',
   storage,
   whitelist: ['auth'],
 };
 
-//  모든 슬라이스 리듀서를 통합
+// 모든 슬라이스 리듀서를 통합
 const rootReducer = combineReducers({
   auth: authReducer,
   page: pageReducer,
   timer: timerReducer,
+  toast: toastReducer,
 });
 
-//  persist 적용된 루트 리듀서를 스토어에 설정
+// persist 적용된 루트 리듀서를 스토어에 설정
 const persistedReducer = persistReducer(persistConfig, rootReducer);
 
-//  스토어 생성 및 미들웨어 설정
+// 스토어 생성 및 미들웨어 설정
 export const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>

react-app/src/store/slices/toastSlice.ts

@@ -0,0 +1,33 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export type ToastType = 'success' | 'warning' | 'information';
+
+interface ToastState {
+  isShow: boolean;
+  message: string;
+  type: ToastType;
+}
+
+const initialState: ToastState = {
+  isShow: false,
+  message: '',
+  type: 'success',
+};
+
+const toastSlice = createSlice({
+  name: 'toast',
+  initialState,
+  reducers: {
+    show(state, action: PayloadAction<{ message: string; type: ToastType }>) {
+      state.isShow = true;
+      state.message = action.payload.message;
+      state.type = action.payload.type;
+    },
+    hide(state) {
+      state.isShow = false;
+    },
+  },
+});
+
+export const { show, hide } = toastSlice.actions;
+export default toastSlice.reducer;

react-app/src/styles/index.css

@@ -19,7 +19,6 @@
   }
 }
 
-
 @layer base {
   html {
     font-family: 'Pretendard-Regular', 'GumiRomanceTTF', sans-serif;
@@ -49,46 +48,44 @@
   }
   .font-gumi {
     font-family: 'GumiRomanceTTF', sans-serif;
-  
-}
+  }
 
-@layer base {
-  :root {
+  @layer base {
+    :root {
+      --color-primary-base: #f5506c;
+      --color-primary-hover: #e04562;
+      --color-primary-light: #ff7b8d;
+
+      --color-secondary-base: #6366f1;
+      --color-secondary-hover: #4f46e5;
+      --color-secondary-light: #a5b4fc;
 
-    --color-primary-base: #f5506c;
-    --color-primary-hover: #e04562;
-    --color-primary-light: #ff7b8d;
-    
-    --color-secondary-base: #6366f1;
-    --color-secondary-hover: #4f46e5;
-    --color-secondary-light: #a5b4fc;
-    
-    --color-lemon: #ffee3d;
-    --color-soda: #6bd8f9;
-    --color-peach: #f4bdf8;
-    --color-orange: #ff933d;
-    
-    --color-success: #63e383;
-    --color-warning: #ef6962;
-    --color-info: #61c3f0;
+      --color-lemon: #ffee3d;
+      --color-soda: #6bd8f9;
+      --color-peach: #f4bdf8;
+      --color-orange: #ff933d;
 
-    --color-gray-200 : #e5e7eb;
+      --color-success: #3bcb5f;
+      --color-warning: #ef6962;
+      --color-info: #61c3f0;
+
+      --color-gray-200: #e5e7eb;
+    }
   }
-}
 
-.bg-lemon-gradient {
-  background: linear-gradient(180deg, var(--color-lemon), white);
-}
+  .bg-lemon-gradient {
+    background: linear-gradient(180deg, var(--color-lemon), white);
+  }
 
-.bg-soda-gradient {
-  background: linear-gradient(180deg, var(--color-soda), white);
-}
+  .bg-soda-gradient {
+    background: linear-gradient(180deg, var(--color-soda), white);
+  }
 
-.bg-peach-gradient {
-  background: linear-gradient(180deg, var(--color-peach), white);
-}
+  .bg-peach-gradient {
+    background: linear-gradient(180deg, var(--color-peach), white);
+  }
 
-.bg-orange-gradient {
-  background: linear-gradient(180deg, var(--color-orange), white);
+  .bg-orange-gradient {
+    background: linear-gradient(180deg, var(--color-orange), white);
+  }
 }
-}