[#49] ✨ 공통 컴포넌트 Modal 개발

[KingNono1030]

📌 PR 템플릿

🏷️ PR 타입 (PR Type)

아래 해당 사항에 체크해 주세요.

• 🐛 버그 수정 (Bugfix)
• ✨ 기능 개발 (Feature)
• 🎨 코드 스타일 변경 (Code style update) - 포매팅, 로컬 변수 등
• ♻️ 리팩토링 (Refactoring) - 기능 변화 없음, API 변경 없음
• 🛠️ 빌드 관련 변경 (Build related changes)
• 📝 문서 내용 변경 (Documentation)
• 🔄 기타 (Other) - 설명 작성

---

📝 요약 (Summary)

PR의 목적과 간단한 설명을 적어주세요.

• 공통 컴포넌트 모달 추가
• Portal 컴포넌트 추가
• 모달 상태 useModalStore 추가

---

• 테일윈드 수정
• 프리티어 수정
• container Box 수정 (default props)
• 버튼s 수정 (export interfaces)
• highlight 컴포넌트 추가

---

🔍 상세 내용 (Describe your changes)

변경 사항을 구체적으로 작성해 주세요.

• 주요 변경점 예시: "버튼 스타일 변경" 등

---

🔗 관련 이슈 또는 링크 (Issue Number or Link)

이슈 번호나 관련 링크가 있다면 추가해 주세요.

• resolves: [FEATURE] [공통 컴포넌트] Modal #49

---

✅ 체크리스트 (Checklist)

PR 작성 시 아래 사항들을 점검해 주세요.

• 빌드가 성공적으로 되었나요?
• 코드에 주석을 추가했나요?
• 모든 테스트가 통과했나요?
• 관련 문서가 업데이트되었나요?

---

📸 스크린샷 (선택 사항)

변경 사항이 UI와 관련이 있다면 스크린샷을 추가해 주세요.

ModalContent 컴포넌트로 공통화 전과 후

• 공통화 전

import Image from 'next/image'
import NextLink from 'next/link'

import { Link } from '@/components/common/button'
import { Box } from '@/components/common/containers'
import { Text } from '@/components/common/text'

import useModalStore from '@/stores/useModalStore'

import celebrateImage from '/public/assets/images/img-celebration.png'

export const SignUpSuccessModalContent = (): JSX.Element => {
  const { closeModal } = useModalStore()
  return (
    <div className={'flex flex-col items-center gap-20 text-center'}>
      <div className={'h-100 w-100'}>
        <Image src={celebrateImage} alt={'축하 이미지'} />
      </div>
      <div className={'flex flex-col gap-8'}>
        <Text.Heading as={'h2'} variant={'heading4'} color={'gray800'}>
          회원가입 완료!
        </Text.Heading>
        <Text.Body variant={'body1'} color={'gray600'}>
          홍길동님의 회원가입이
          <br />
          성공적으로 완료되었습니다.
        </Text.Body>
      </div>
      <Box variant={'contained'} color={'secondary'} className='px-12 py-8'>
        <Text.Body variant={'body3'} color={'gray600'}>
          *나의 정보 확인 및 수정은{' '}
          <NextLink
            href={'/'}
            className={'text-primary-normal'}
            onClick={closeModal}
          >
            {'마이페이지 > 프로필'}
          </NextLink>
          에서 가능합니다.
        </Text.Body>
      </Box>
      <Link
        href={'/team'}
        label={'로그인 바로가기'}
        // onClick={closeModal}
        size={'lg'}
        fullWidth
        className={'text-title2'}
      ></Link>
    </div>
  )
}

• 공통화 후

---

📝 기타 사항

PR과 관련된 기타 사항이 있다면 적어주세요.

• 모달 외의 변경이 많으나, 이슈 넘버로 구분 지었습니다.
• 모달의 상태 제어 + 모달 오버레이 스타일은 Modal
• 모달 내부의 컨텐츠는 ModalContent
• ModalContent 를 조립하여, 도메인 맥락이 있는 ModalContent 를 구성하는 식으로 구현했습니다.

[yellowjang]

pr 계속 읽어보고 있었는데! 승인 후에 마저 읽도록 하겠습니다!
고생하셨습니다 :)