punchdrunkard commented 1 year ago

요약

children을 받는 버튼이 하나 있는 모달과 모달 내부의 컨텐츠 들을 구현하였습니다.

사진 (구현 캡처)

https://user-images.githubusercontent.com/74234333/221427124-6c279af0-83aa-4142-8e21-d8f794de145f.mov

작업 내용

기타 (논의하고 싶은 부분)

로컬에서 다음 코드를 붙여넣어 확인해주세요.

pages/index.tsx

import dynamic from 'next/dynamic'

const ModalWithSingleButton = dynamic(
  () => import('../components/templates/ModalWithSingleButton'),
  {
    ssr: false,
  },
)

import {
  Spacer,
  WelcomeModalContent,
  ProfileRegisterContent,
} from '@components'
import { useDisclosure } from '@hooks'

export default function Home() {
  const [showWelcomeModal, setShowWelcomeModal, toggleWelcomeModal] =
    useDisclosure()
  const [showProfileModal, setShowProfileModal, toggleProfileModal] =
    useDisclosure()

  return (
    <>
      <button
        className="rounded-[20px] bg-violet-light p-[16px] text-title2 font-bold text-gray-100"
        onClick={toggleWelcomeModal}
      >
        웰컴 모달
      </button>
      <ModalWithSingleButton
        showModal={showWelcomeModal}
        setShowModal={setShowWelcomeModal}
        handleOnClick={() => {
          console.log('클릭')
          setShowWelcomeModal(false)
        }}
        submitMessage="프로필 등록하기"
        hasCloseButton
      >
        <WelcomeModalContent />
      </ModalWithSingleButton>

      <Spacer size={16} />

      <button
        className="rounded-[20px] bg-blue_gradient p-[16px] text-title2 font-bold text-gray-100"
        onClick={toggleProfileModal}
      >
        프로필 모달
      </button>
      <ModalWithSingleButton
        showModal={showProfileModal}
        setShowModal={setShowProfileModal}
        handleOnClick={() => {
          console.log('클릭')
          setShowProfileModal(false)
        }}
        submitMessage="프로필 등록하기"
        hasCloseButton
      >
        <ProfileRegisterContent />
      </ModalWithSingleButton>
    </>
  )
}

타 직군 전달 사항

백엔드 전달 사항

디자이너 전달 사항

close #273

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
danverse	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 28, 2023 at 9:31AM (UTC)

punchdrunkard commented 1 year ago

제 기준에서 모달 위치가 안 맞는데 2번째 사진 체크(top 값으로 인한 문제 일 가능성이 높아 보여여)해주시면 감사드리겠습니다 (__) 고생하셨습니다!

다른 방식으로 해결했습니다!

dnd-side-project / dnd-8th-1-frontend

✨ feat: ModalWithSingleButton 컴포넌트 구현 #274