🐛Fix: Modal 뒤로가기 버그

src/modals/ModalContainer/index.tsx

@@ -1,8 +1,24 @@
+import { useEffect } from 'react'
 import * as S from './styles'
 import { useModalStore } from '~stores/modalStore'
 
 export default function ModalContainer() {
-  const { modalList } = useModalStore()
+  const { modalList, popModal } = useModalStore()
+
+  useEffect(() => {
+    if (modalList.length > 0) {
+      window.history.pushState({ modal: true }, '', window.location.href)
+    }
+
+    const handlePopState = (e: PopStateEvent) => {
+      if (e.state && e.state.modal) {
+        popModal()
+      }
+    }
+
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [modalList, popModal])
 
   return <>{modalList.length ? <S.ModalWrapper>{...modalList}</S.ModalWrapper> : null}</>
 }

src/pages/MyPage/SettingModal/index.tsx

@@ -3,18 +3,15 @@ import { PrevButton } from '~components/Button/PrevButton/styles'
 import { Typo17 } from '~components/Typo'
 import ToggleArea from '~components/ToggleArea'
 import ToggleBox from '~components/ToggleBox'
-type SettingModalProps = {
-  isOpen: boolean
-  onClose: () => void
-}
+import { useModalStore } from '~stores/modalStore'
 
-export default function SettingModal({ isOpen, onClose }: SettingModalProps) {
-  if (!isOpen) return null
+export default function SettingModal() {
+  const { popModal } = useModalStore()
 
   return (
     <S.SettingModalContainer>
       <S.Header>
-        <S.BackButton onClick={onClose}>
+        <S.BackButton onClick={popModal}>
           <PrevButton size={28} />
         </S.BackButton>
         <S.TitleWrap>

src/pages/MyPage/index.tsx

@@ -1,23 +1,19 @@
-import { useState } from 'react'
-import * as S from './styles'
+import ProfileImage from 'assets/masterprofile.svg?react'
 import { Helmet } from 'react-helmet-async'
 import { IoSettingsOutline } from 'react-icons/io5'
-import ProfileImage from 'assets/masterprofile.svg?react'
-import { Typo13, Typo15, Typo24 } from '~components/Typo'
-import ToggleBox from '~components/ToggleBox'
 import { useTheme } from 'styled-components'
+import ToggleBox from '~components/ToggleBox'
+import { Typo13, Typo15, Typo24 } from '~components/Typo'
 import SettingModal from '~pages/MyPage/SettingModal'
+import { useModalStore } from '~stores/modalStore'
+import * as S from './styles'
 
 export default function MyPage() {
   const theme = useTheme()
-  const [onClickSetting, setOnclickSetting] = useState(false)
+  const { pushModal } = useModalStore()
 
   const onSettingsClick = () => {
-    setOnclickSetting(true)
-  }
-
-  const onCloseSettingModal = () => {
-    setOnclickSetting(false)
+    pushModal(<SettingModal />)
   }
 
   return (
@@ -78,7 +74,6 @@ export default function MyPage() {
           </S.CustomActionButton>
         </S.ButtonArea>
       </S.MainContainer>
-      <SettingModal isOpen={onClickSetting} onClose={onCloseSettingModal} />
     </S.MyPage>
   )
 }

src/pages/SocialPage/components/ChatItem/styles.ts

@@ -0,0 +1,32 @@
+import { styled } from 'styled-components'
+
+export const ChatItem = styled.div`
+  position: relative;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  cursor: pointer;
+`
+export const TypoWrapper = styled.div``
+export const UserInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+export const DetailWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`
+
+export const UnreadChatCount = styled.span`
+  position: absolute;
+  right: 20px;
+  display: block;
+  border-radius: 22px;
+  background-color: ${({ theme }) => theme.colors.brand.sub};
+  padding: 1.5px 6px;
+  color: ${({ theme }) => theme.colors.grayscale.gc_4};
+`

src/stores/modalStore.ts

@@ -8,15 +8,29 @@ interface ModalStore {
   clearModal: () => void
 }
 
-export const useModalStore = create<ModalStore>(set => ({
+export const useModalStore = create<ModalStore>((set, get) => ({
   modalList: [],
-  pushModal: modal =>
+  pushModal: modal => {
     set(state => ({
       modalList: [...state.modalList, modal],
-    })),
-  popModal: () =>
+    }))
+    // 모달이 추가될 때 새로운 히스토리 항목 생성
+    if (get().modalList.length > 0) {
+      window.history.pushState({ modal: true }, '', window.location.href)
+    }
+  },
+  popModal: () => {
+    // 모달이 제거될 때 히스토리 뒤로가기
+    if (get().modalList.length > 0) {
+      window.history.back()
+    }
     set(state => ({
       modalList: state.modalList.slice(0, -1),
-    })),
-  clearModal: () => set({ modalList: [] }),
+    }))
+  },
+  clearModal: () => {
+    set({ modalList: [] })
+    // 모든 모달 제거 시 히스토리 초기화
+    window.history.go(-get().modalList.length)
+  },
 }))