Merge pull request peer-42seoul#516 from peer-42seoul/feat/mypage

[C-MYPAGE] 개인정보, 홈페이지 설정 토스트 가져오는 방식 수정
asroq1 · Jan 21, 2024 · 6a3e422 · 6a3e422
2 parents 4999961 + 93c4e21
commit 6a3e422
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 215 deletions.
diff --git a/src/app/my-page/homepage-setting/page.tsx b/src/app/my-page/homepage-setting/page.tsx
@@ -1,81 +1,18 @@
-'use client'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import NotifSetting from './panel/NotifSetting'
 import DisplaySetting from './panel/DisplaySetting'
 import KeywordSetting from './panel/KeywordSetting'
-import useToast from '@/hook/useToast'
-import { AlertColor } from '@mui/material/Alert'
 import { Stack } from '@mui/material'
-import * as style from '../panel/my-page.style'
-import useMedia from '@/hook/useMedia'
-
-interface IToast {
-  severity: AlertColor | undefined
-  message: React.ReactNode
-}
 
 const HomepageSetting = () => {
-  const [toastMessage, setToastMessage] = useState({} as IToast)
-  const {
-    CuToast,
-    isOpen: isInfoOpen,
-    openToast: openInfoToast,
-    closeToast: closeInfoToast,
-  } = useToast()
-  const {
-    isOpen: isErrorOpen,
-    openToast: openErrorToast,
-    closeToast: closeErrorToast,
-  } = useToast()
-
-  const closeToast = () => {
-    if (isInfoOpen) closeInfoToast()
-    if (isErrorOpen) closeErrorToast()
-  }
-
-  const { isPc } = useMedia()
-
-  useEffect(() => {
-    if (toastMessage.message) {
-      if (
-        toastMessage.severity === 'info' ||
-        toastMessage.severity === 'success'
-      ) {
-        closeToast()
-        openInfoToast()
-      } else {
-        closeToast()
-        openErrorToast()
-      }
-    }
-  }, [toastMessage])
-
-  const clearToast = () => {
-    closeToast()
-    setToastMessage((prev) => ({ ...prev, message: '' }))
-  }
-  const pageStyle = isPc ? style.pagePcStyle : style.pageMobileStyle
-
   return (
     <Stack
-      sx={{ ...pageStyle, whiteSpace: 'pre-line', wordBreak: 'keep-all' }}
-      spacing={isPc ? '2rem' : '1.5rem'}
+      sx={{ whiteSpace: 'pre-line', wordBreak: 'keep-all' }}
+      spacing={['1.5rem', '2rem']}
     >
-      <NotifSetting setToastMessage={setToastMessage} />
-      <KeywordSetting setToastMessage={setToastMessage} />
+      <NotifSetting />
+      <KeywordSetting />
       <DisplaySetting />
-      <CuToast
-        severity={'info'}
-        open={isInfoOpen}
-        onClose={clearToast}
-        message={toastMessage.message}
-      />
-      <CuToast
-        severity={'error'}
-        open={isErrorOpen}
-        onClose={clearToast}
-        message={toastMessage.message}
-      />
     </Stack>
   )
 }

diff --git a/src/app/my-page/homepage-setting/panel/KeywordSetting.tsx b/src/app/my-page/homepage-setting/panel/KeywordSetting.tsx
@@ -19,39 +19,44 @@ import TagChip from './TagChip'
 import CuTextModal from '@/components/CuTextModal'
 import TitleBox from '@/components/TitleBox'
 import useMedia from '@/hook/useMedia'
+import useToast from '@/states/useToast'
 
 interface IChip {
   key: number
   label: string
 }
 
-interface IToastProps {
-  severity: AlertColor | undefined
-  message: React.ReactNode
-}
-
 const KeywordAddingField = ({
   mutate,
-  setToastMessage,
+  openToast,
+  closeToast,
   keywordList,
 }: {
   mutate: () => void
-  setToastMessage: (message: IToastProps) => void
+  openToast: ({
+    severity,
+    message,
+  }: {
+    severity: AlertColor
+    message: React.ReactNode
+  }) => void
+  closeToast: () => void
   keywordList: Array<IChip> | undefined | null
 }) => {
   const [inputValue, setInputValue] = useState<string>('' as string)
   const textFieldRef = useRef<HTMLInputElement | null>(null)
   const axiosWithAuth = useAxiosWithAuth()
 
   const validateData = (trimmed: string) => {
+    closeToast()
     if (trimmed.length < 2) {
-      setToastMessage({
+      openToast({
         severity: 'error',
         message: '알림 키워드는 최소 2자 이상이어야 합니다.',
       })
       return false
     } else if (keywordList?.some((keyword) => keyword.label === trimmed)) {
-      setToastMessage({
+      openToast({
         severity: 'error',
         message: '이미 등록된 알림 키워드입니다.',
       })
@@ -61,12 +66,13 @@ const KeywordAddingField = ({
   }
 
   const addKeyword = async (trimmed: string) => {
+    closeToast()
     await axiosWithAuth
       .post(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/alarm/add`, {
         newKeyword: trimmed,
       })
       .then(() => {
-        setToastMessage({
+        openToast({
           severity: 'success',
           message: (
             <>
@@ -78,12 +84,12 @@ const KeywordAddingField = ({
       })
       .catch((error) => {
         if (error.response.status === 400) {
-          setToastMessage({
+          openToast({
             severity: 'error',
             message: `${error.response.data.message}`,
           })
         } else {
-          setToastMessage({
+          openToast({
             severity: 'error',
             message: (
               <>
@@ -151,12 +157,10 @@ const ChipsArray = ({
   data,
   mutate,
   isLoading,
-  setToastMessage,
 }: {
   mutate: () => void
   data: Array<IChip> | undefined | null
   isLoading: boolean
-  setToastMessage: (message: IToastProps) => void
 }) => {
   return (
     <Grid container columnSpacing={0.75} rowSpacing={1} py={1}>
@@ -176,14 +180,7 @@ const ChipsArray = ({
         ))}
       {data &&
         data.map((chip) => {
-          return (
-            <TagChip
-              key={chip.key}
-              mutate={mutate}
-              setToastMessage={setToastMessage}
-              chip={chip}
-            />
-          )
+          return <TagChip key={chip.key} mutate={mutate} chip={chip} />
         })}
     </Grid>
   )
@@ -194,25 +191,33 @@ const KeywordDisplayBox = ({
   data,
   isLoading,
   error,
-  setToastMessage,
+  openToast,
+  closeToast,
 }: {
   mutate: () => void
   data: Array<IChip> | undefined | null
   isLoading: boolean
   error: any
-  setToastMessage: (message: IToastProps) => void
+  openToast: ({
+    severity,
+    message,
+  }: {
+    severity: AlertColor
+    message: React.ReactNode
+  }) => void
+  closeToast: () => void
 }) => {
   const { isOpen, closeModal, openModal } = useModal()
   const axiosWithAuth = useAxiosWithAuth()
 
   const deleteAll = async () => {
-    console.log('전체 삭제')
+    closeToast()
     await axiosWithAuth
       .delete(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/alarm/delete/all`)
       .then(() => {
         closeModal()
         mutate()
-        setToastMessage({
+        openToast({
           severity: 'success',
           message: '모든 키워드를 삭제하였습니다.',
         })
@@ -234,12 +239,7 @@ const KeywordDisplayBox = ({
       {error ? (
         <Typography>데이터를 가져오지 못했습니다.</Typography>
       ) : (
-        <ChipsArray
-          setToastMessage={setToastMessage}
-          mutate={mutate}
-          data={data}
-          isLoading={isLoading}
-        />
+        <ChipsArray mutate={mutate} data={data} isLoading={isLoading} />
       )}
       <CuTextModal
         open={isOpen}
@@ -259,13 +259,11 @@ const KeywordDisplayBox = ({
   )
 }
 
-const KeywordSetting = ({
-  setToastMessage,
-}: {
-  setToastMessage: (message: IToastProps) => void
-}) => {
+const KeywordSetting = () => {
   const { isPc } = useMedia()
 
+  const { openToast, closeToast } = useToast()
+
   const axiosWithAuth = useAxiosWithAuth()
 
   const getKeywords = async (url: string) =>
@@ -309,12 +307,14 @@ const KeywordSetting = ({
       }
     >
       <KeywordAddingField
-        setToastMessage={setToastMessage}
+        openToast={openToast}
+        closeToast={closeToast}
         mutate={mutate}
         keywordList={data}
       />
       <KeywordDisplayBox
-        setToastMessage={setToastMessage}
+        openToast={openToast}
+        closeToast={closeToast}
         mutate={mutate}
         data={data}
         isLoading={isLoading}

diff --git a/src/app/my-page/homepage-setting/panel/NotifSetting.tsx b/src/app/my-page/homepage-setting/panel/NotifSetting.tsx
@@ -1,20 +1,9 @@
 'use client'
 import CuToggle from '@/components/CuToggle'
 import TitleBox from '@/components/TitleBox'
-import {
-  AlertColor,
-  Box,
-  FormControlLabel,
-  Stack,
-  Typography,
-} from '@mui/material'
+import { Box, FormControlLabel, Stack, Typography } from '@mui/material'
 import React, { useState } from 'react'
 
-interface IToastProps {
-  severity: AlertColor | undefined
-  message: string
-}
-
 const Notif = ({
   checked,
   handleChange,
@@ -50,17 +39,12 @@ const Notif = ({
   )
 }
 
-const NotifSetting = ({
-  setToastMessage,
-}: {
-  setToastMessage: (message: IToastProps) => void
-}) => {
+const NotifSetting = () => {
   const [keyword, setKeyword] = useState(false)
   const [team, setTeam] = useState(false)
   const [message, setMessage] = useState(false)
   const [night, setNight] = useState(false)
 
-  console.log(setToastMessage)
   return (
     <TitleBox title="알림 설정">
       <Stack spacing={2}>

diff --git a/src/app/my-page/homepage-setting/panel/TagChip.tsx b/src/app/my-page/homepage-setting/panel/TagChip.tsx
@@ -2,24 +2,18 @@ import { Chip, Grid, SxProps, Typography } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import './TagChip.css'
 import useAxiosWithAuth from '@/api/config'
-import IToast from '@/types/IToastProps'
+import useToast from '@/states/useToast'
 
 interface IChip {
   key: number
   label: string
 }
 
-const TagChip = ({
-  chip,
-  mutate,
-  setToastMessage,
-}: {
-  chip: IChip
-  mutate: () => void
-  setToastMessage: (toastProps: IToast) => void
-}) => {
+const TagChip = ({ chip, mutate }: { chip: IChip; mutate: () => void }) => {
   const [style, setStyle] = useState<SxProps>({} as SxProps)
 
+  const { openToast, closeToast } = useToast()
+
   useEffect(() => {
     setStyle({
       animation: 'PopAnimation 0.5s',
@@ -34,14 +28,15 @@ const TagChip = ({
   }, [])
 
   const axiosWithAuth = useAxiosWithAuth()
-  const handleDelete = async (chip: IChip) =>
+  const handleDelete = async (chip: IChip) => {
+    closeToast()
     await axiosWithAuth
       .delete(
         `${process.env.NEXT_PUBLIC_API_URL}/api/v1/alarm/delete?keyword=${chip.label}`,
       )
       .then(() => {
         console.log(chip.label)
-        setToastMessage({
+        openToast({
           severity: 'success',
           message: `'${chip.label}'를 알림 키워드 목록에서 삭제했습니다.`,
         })
@@ -51,11 +46,12 @@ const TagChip = ({
       })
       .catch((error) => {
         console.log(error)
-        setToastMessage({
+        openToast({
           severity: 'error',
           message: `'${chip.label}'를 알림 키워드 목록에서 삭제하지 못했습니다`,
         })
       })
+  }
 
   return (
     <Grid item xs={0}>