fix:모달 버그 해결, feat:모달 테스트 페이지 추가

[Ivex0002]

💡 개요

• 모달 관련한 로직들 전반적으로 개편

📝 상세 내용

• 기존 useLocation 의존적이던 prevPath, title, subTitle을 스토어 의존적으로 변경
• 커스텀 훅에 닫기 로직을 추가하여 닫기를 통한 이동 완료시 스토어 초기화
• BasicModal 닫기 로직을 커스텀 훅을 통해 실행되도록 변경
• 각 세부적인 모달 컴포넌트에서 스토어를 직접 참조하는 닫기 로직이 있었으나, 커스텀 훅을 사용하도록 변경

• 모달 테스트 페이지를 추가하여 이후에 모달이 추가되더라도 쉽게 테스트 가능하도록 조치함

✅ 체크리스트

• 코드에 불필요한 console.log 제거
• lint 검사 통과
• 테스트 통과
• 관련 문서/README 업데이트

🔗 관련 이슈

• close [모달] 기본 컴포넌트 #9 [모달] 모달창 라우팅 설정하기 #27

[rimi-w]

setModalOpen -> setIsModalOpen 으로 다시 변경하는게 좋을 것 같아요-
아까는 생각을 못했는데 isModalOpen을 변경해주는거라 setIsModalOpen이 더 직관적인 것 같습니다-

[Ivex0002]

import { create } from 'zustand'

type ModalState = {
  isModalOpen: boolean
  prevPath: string
  title: string
  subTitle?: string
}
interface storeModalState {
  modalState: ModalState

  setModalState: (state: Partial<ModalState>) => void
  clearModal: () => void
}

const initState: ModalState = {
  isModalOpen: false,
  prevPath: '',
  title: '',
  subTitle: '',
}

export const storeModalOpen = create<storeModalState>((set) => ({
  modalState: initState,
  setModalState: (newState) =>
    set((cur) => ({ modalState: { ...cur.modalState, ...newState } })),
  clearModal: () => set(() => ({ modalState: initState })),
}))

현재 isModalOpen뿐만 아니라 prevPath, title, subTitle 모두 스토어에서 관리하도록 조치하면서 이름을 변경했습니다.

const setModalState = storeModalOpen((state) => state.setModalState)

해당 라인에서 setModalOpen 의 변수명 또한 setModalState 로 변경 완료했습니다

[rimi-w]

아이콘에 onClose가 있으면 버튼의 onClick에는 e.preventDefault()만 있어도 되지 않을까요-?!
2개가 중복되는 것 같아요-
2개가 다 필요 한걸까요-?!

[Ivex0002]

import { useModal } from '@/hooks/useModal'
import { X } from 'lucide-react'

type ModalHeaderProps = {
  title: string
  subTitle?: string | null
}

const ModalHeader = ({ title, subTitle = null }: ModalHeaderProps) => {
  const { closeModal } = useModal()

  const handleClickCancel = (e: React.MouseEvent) => {
    e.preventDefault()
    closeModal()
  }

  return (
    <header className="flex w-full justify-between border-b border-gray-300 p-6 text-gray-900">
      <div className="flex flex-col">
        <h1 className="text-lg font-semibold">{title}</h1>
        <h2 className="text-sm font-normal text-gray-500">{subTitle}</h2>
      </div>
      <button onClick={(e) => handleClickCancel(e)} className="cursor-pointer">
        <X size={18} />
      </button>
    </header>
  )
}

export default ModalHeader

수정 완료했습니다

[rimi-w]

Property 'setIsModalState' does not exist on type 'storeModalState'. Did you mean 'setModalState'?

build 오류 났어요- 수정해주세요-

[rimi-w]

Property 'setIsModalState' does not exist on type 'storeModalState'. Did you mean 'setModalState'?

여기도 build 오류 났습니다- 수정해주세요-

[Ivex0002]

useModal.ts에서 변경 이후 저장을 안해서 생겼던 문제였습니다. 수정후 빌드 확인 했습니다

change repuest가 풀리퀘를 다시 작성하라는 건지 몰랐어요ㅜㅜ
그냥 수정하라는건줄 알았는데 아니었네요....ㅜㅜ

[rimi-w]

확인 했습니다-