style: useToast 커스텀 훅 제작

src/components/common/BottomSheet/RandomMatchingSheet.tsx

@@ -3,7 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { MouseEvent, useState } from 'react'
 import { AiOutlineClose } from 'react-icons/ai'
 
-import RandomMatchingJoinButton from '@/components/common/Buttons/IconButton/RandomMatchingJoin'
+import RandomMatchingJoinButton from '@/components/common/Buttons/IconButton/RandomMatchingJoinButton'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 

src/components/common/Buttons/IconButton/RandomMatchingJoin.tsx

@@ -1,61 +0,0 @@
-import { BiChevronRight } from 'react-icons/bi'
-
-import { Text, TextWrapper } from '@/components/common/Text'
-
-import { StyleIconButtonWrapper, StyleIconWrapper } from '.'
-
-type RandomMatchingJoinButtonProps = {
-  isDarkMode: boolean
-  moveToRandomMatching: () => void
-}
-
-const RandomMatchingJoinButton = ({
-  isDarkMode,
-  moveToRandomMatching,
-}: RandomMatchingJoinButtonProps) => {
-  const setButtonType = isDarkMode ? 'random-matching-join-dark' : 'random-matching-join'
-
-  return (
-    <StyleIconButtonWrapper
-      iconButtonType={setButtonType}
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      }}
-      onClick={moveToRandomMatching}
-    >
-      <TextWrapper
-        style={{
-          flex: 1,
-        }}
-      >
-        <Text
-          font={'Body_16'}
-          fontWeight={500}
-          letterSpacing={-2}
-          style={{
-            width: '100%',
-            textAlign: 'right',
-          }}
-        >
-          {'매칭방에 접속해주세요!'}
-        </Text>
-      </TextWrapper>
-      <StyleIconWrapper
-        style={{
-          margin: '18px 5px 18px 40px',
-        }}
-      >
-        <BiChevronRight
-          style={{
-            width: 30,
-            height: 30,
-          }}
-        />
-      </StyleIconWrapper>
-    </StyleIconButtonWrapper>
-  )
-}
-
-export default RandomMatchingJoinButton

src/components/common/Buttons/IconButton/RandomMatchingJoinButton.tsx

@@ -0,0 +1,61 @@
+import { BiChevronRight } from 'react-icons/bi'
+
+import { Text, TextWrapper } from '@/components/common/Text'
+
+import { StyleIconButtonWrapper, StyleIconWrapper } from '.'
+
+type RandomMatchingJoinButtonProps = {
+  isDarkMode: boolean
+  moveToRandomMatching: () => void
+}
+
+const RandomMatchingJoinButton = ({
+  isDarkMode,
+  moveToRandomMatching,
+}: RandomMatchingJoinButtonProps) => {
+  const setButtonType = isDarkMode ? 'random-matching-join-dark' : 'random-matching-join'
+
+  return (
+    <StyleIconButtonWrapper
+      iconButtonType={setButtonType}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+      onClick={moveToRandomMatching}
+    >
+      <TextWrapper
+        style={{
+          flex: 1,
+        }}
+      >
+        <Text
+          font={'Body_16'}
+          fontWeight={500}
+          letterSpacing={-2}
+          style={{
+            width: '100%',
+            textAlign: 'right',
+          }}
+        >
+          {'매칭방에 접속해주세요!'}
+        </Text>
+      </TextWrapper>
+      <StyleIconWrapper
+        style={{
+          margin: '18px 5px 18px 40px',
+        }}
+      >
+        <BiChevronRight
+          style={{
+            width: 30,
+            height: 30,
+          }}
+        />
+      </StyleIconWrapper>
+    </StyleIconButtonWrapper>
+  )
+}
+
+export default RandomMatchingJoinButton

src/components/common/Buttons/NormalButton/NormalButton.tsx

@@ -7,20 +7,28 @@ import { NormalButtonStyles, NormalButtonType } from './NormalButtonStyles'
 
 const NormalButton = styled.button<{
   normalButtonType: NormalButtonType
+  isDarkMode: boolean
 }>`
-  ${({ normalButtonType }) => {
-    const fontFunc = typo[NormalButtonStyles[normalButtonType].font]
+  ${({ normalButtonType, isDarkMode }) => {
+    const processedTypeKey = isDarkMode ? `${normalButtonType}-dark` : normalButtonType
+    const processedType = (
+      NormalButtonStyles[processedTypeKey as NormalButtonType] ? processedTypeKey : normalButtonType
+    ) as NormalButtonType
+
+    console.log(processedType)
+
+    const fontFunc = typo[NormalButtonStyles[processedType].font]
     return css`
       ${fontFunc(
-        NormalButtonStyles[normalButtonType].fontWeight,
-        NormalButtonStyles[normalButtonType].letterSpacing,
+        NormalButtonStyles[processedType].fontWeight,
+        NormalButtonStyles[processedType].letterSpacing,
       )}
-      width: ${NormalButtonStyles[normalButtonType].width}px;
-      height: ${NormalButtonStyles[normalButtonType].height}px;
-      color: ${NormalButtonStyles[normalButtonType].fontColor};
-      background-color: ${NormalButtonStyles[normalButtonType].backgroundColor};
-      box-shadow: ${NormalButtonStyles[normalButtonType].boxShadow};
-      border-radius: ${NormalButtonStyles[normalButtonType].borderRadius}px;
+      width: ${NormalButtonStyles[processedType].width}px;
+      height: ${NormalButtonStyles[processedType].height}px;
+      color: ${NormalButtonStyles[processedType].fontColor};
+      background-color: ${NormalButtonStyles[processedType].backgroundColor};
+      box-shadow: ${NormalButtonStyles[processedType].boxShadow};
+      border-radius: ${NormalButtonStyles[processedType].borderRadius}px;
     `
   }}
 `

src/components/layouts/Layout.tsx

@@ -1,12 +1,16 @@
+import 'react-toastify/dist/ReactToastify.css'
+
 import styled from '@emotion/styled'
 import { Outlet } from 'react-router-dom'
+import { ToastContainer } from 'react-toastify'
 
 import { theme } from '@/styles/theme'
 
 const Layout = () => {
   return (
     <MainContainer>
       <Outlet />
+      <ToastContainer />
     </MainContainer>
   )
 }

src/hooks/useToast.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react'
+import { toast } from 'react-toastify'
+
+type ToastType = 'success' | 'error' | 'info' | 'warning'
+
+type ToastProps = {
+  message: string | ReactNode
+  type: ToastType
+  isDarkMode: boolean
+}
+
+export const useToast = () => {
+  const showToast = ({ message, type, isDarkMode }: ToastProps) => {
+    toast(message, {
+      position: 'top-center',
+      draggable: true,
+      theme: isDarkMode ? 'dark' : 'light',
+      type,
+    })
+  }
+
+  return { showToast }
+}
+
+export default useToast