Merge pull request #212 from gloddy-dev/feature/204-popup

Component : Popup 컴포넌트

src/app/grouping/create/components/GroupingModal.client.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Spacing } from '@/components/common/Spacing';
+import { Modal } from '@/components/Modal';
+import Image from 'next/image';
+
+export default function GroupingModal() {
+ return (
+ <div>
+ <Modal isOpen variant="warning">
+ <Spacing size={32} />
+ <Image src="/icons/48/warning.svg" width={48} height={48} alt="warning" />
+ <Spacing size={12} />
+ <div>
+ 모임 개설 후 수정이 불가능합니다.
+ <br />
+ 계속하시겠어요?
+ </div>
+ <Spacing size={16} />
+ </Modal>
+ </div>
+ );
+}

src/app/grouping/create/components/inputSection/LocationSection.client.tsx

@@ -1,7 +1,7 @@
 'use client';
 import InputArea from '../InputArea.server';
 import { BottomFixedButton } from '@/components/common/Button';
-import BottomSheet from '@/components/common/Modal/BottomSheet';
+import { BottomSheet } from '@/components/Modal';
 import useModalState from '@/store/useModalStore';
 
 export default function LocationSection() {

src/app/grouping/create/components/inputSection/MaxUserSection.client.tsx

@@ -2,7 +2,7 @@
 import { useCreateGroupContext } from '../CreateGroupContext';
 import InputArea from '../InputArea.server';
 import { BottomFixedButton } from '@/components/common/Button';
-import { BottomSheet } from '@/components/common/Modal';
+import { BottomSheet } from '@/components/Modal';
 import { NumberSwipePicker } from '@/components/common/SwipePicker';
 import useModalState from '@/store/useModalStore';
 

src/app/grouping/create/components/inputSection/MeetDateSection.client.tsx

@@ -3,9 +3,9 @@ import { useCreateGroupContext } from '../CreateGroupContext';
 import InputArea from '../InputArea.server';
 import { BottomFixedButton } from '@/components/common/Button';
 import Calendar from '@/components/common/Calendar';
-import { BottomSheet } from '@/components/common/Modal';
 import { DivisionSpacing } from '@/components/common/Spacing';
 import { TimeSwipePicker } from '@/components/common/SwipePicker';
+import { BottomSheet } from '@/components/Modal';
 import useModalState from '@/store/useModalStore';
 
 import type { TimeType } from '@/types';

src/app/grouping/create/page.tsx

@@ -1,10 +1,12 @@
 import CreateGroupContextProvider from './components/CreateGroupContext';
+import GroupingModal from './components/GroupingModal.client';
 import InputForm from './components/InputForm.client';
 import { Header } from '@/components/Header';
 
 export default function CreateGroup() {
  return (
  <div className="mx-20">
+ <GroupingModal />
  <Header />
  <CreateGroupContextProvider>
  <InputForm />

src/app/join/funnels/step2/components/AgreeForm.client.tsx

@@ -2,8 +2,8 @@
 
 import { Button } from '@/components/common/Button';
 import { CircleCheckbox } from '@/components/common/Checkbox';
-import { BottomSheet } from '@/components/common/Modal';
 import { Spacing } from '@/components/common/Spacing';
+import { BottomSheet } from '@/components/Modal';
 import { useModals } from '@/hooks/useModals';
 import { useEffect, useState } from 'react';
 

src/app/join/funnels/step3/Step3Component.server.tsx

@@ -2,7 +2,7 @@ import FormSection from './components/FormSection.server';
 import NoticeSection from './components/NoticeSection';
 import TimerContext from './components/TimerContext';
 import JoinTitleTextMessage from '../../components/JoinTitleTextMessage.server';
-import ModalContext from '@/components/common/Modal/ModalContext';
+import ModalContextProvider from '@/components/Modal/ModalContext.client';
 
 export default function Step3Component() {
  return (
@@ -13,11 +13,11 @@ export default function Step3Component() {
  학교 이메일을 입력해주세요
  </JoinTitleTextMessage>
 
- <ModalContext>
+ <ModalContextProvider>
  <TimerContext>
  <FormSection />
  </TimerContext>
- </ModalContext>
+ </ModalContextProvider>
 
  <NoticeSection />
  </main>

src/app/join/funnels/step3/components/CertificationForm.client.tsx

@@ -5,8 +5,7 @@ import { useFunnelContext } from '../../JoinFunnel';
 import { useEmailVerifyMutation } from '@/apis/auth';
 import { BottomFixedButton } from '@/components/common/Button';
 import { Input } from '@/components/common/Input';
-import { BottomSheet } from '@/components/common/Modal';
-import { useModalContext } from '@/components/common/Modal/ModalContext';
+import { BottomSheet, useModalContext } from '@/components/Modal';
 import { regexr } from '@/constants/regexr';
 import { memo } from 'react';
 

src/app/join/funnels/step3/components/EmailForm.client.tsx

@@ -7,8 +7,8 @@ import { useJoinContext } from '@/app/join/components/JoinContext';
 import { SignUpState } from '@/app/join/type';
 import BottomFixedDiv from '@/components/common/BottomFixedDiv';
 import { Button } from '@/components/common/Button';
-import { useModalContext } from '@/components/common/Modal/ModalContext';
 import { Spacing } from '@/components/common/Spacing';
+import { useModalContext } from '@/components/Modal';
 import { memo } from 'react';
 
 export default memo(function EmailForm() {

src/app/join/funnels/step4/components/BirthdaySection.client.tsx

@@ -2,7 +2,7 @@
 import { useJoinContext } from '../../../components/JoinContext';
 import { BottomFixedButton } from '@/components/common/Button';
 import { Input } from '@/components/common/Input';
-import { BottomSheet } from '@/components/common/Modal';
+import { BottomSheet } from '@/components/Modal';
 import { Spacing } from '@/components/common/Spacing';
 import { DateSwipePicker } from '@/components/common/SwipePicker';
 import useModalStore from '@/store/useModalStore';

src/app/join/funnels/step4/components/GenderSection.client.tsx

@@ -2,7 +2,7 @@
 import { useJoinContext } from '../../../components/JoinContext';
 import { BottomFixedButton } from '@/components/common/Button';
 import { Input } from '@/components/common/Input';
-import { BottomSheet } from '@/components/common/Modal';
+import { BottomSheet } from '@/components/Modal';
 import GenderSwipePicker from '@/components/common/SwipePicker/GenderSwipePicker';
 import useModalStore from '@/store/useModalStore';
 

src/components/Modal/Modal.client.tsx

@@ -0,0 +1,64 @@
+'use client';
+import ModalWrapper from './ModalWrapper.client';
+import { Button } from '../Button';
+import { Spacing } from '../common/Spacing';
+import { StrictPropsWithChildren } from '@/types';
+
+interface ModalProps {
+ isOpen: boolean;
+ onOkClick?: () => void;
+ okText?: string;
+ onCancelClick?: () => void;
+ cancelText?: string;
+ variant?: 'warning' | 'success';
+}
+
+const variantMap = {
+ warning: {
+ ok: 'solid-warning',
+ cancel: 'outline-warning',
+ },
+ success: {
+ ok: 'solid-primary',
+ cancel: 'solid-default',
+ },
+} as const;
+
+export default function Modal({
+ children,
+ isOpen,
+ onOkClick,
+ okText = '네',
+ onCancelClick,
+ cancelText = '아니요',
+ variant,
+}: StrictPropsWithChildren<ModalProps>) {
+ return (
+ <ModalWrapper isOpen={isOpen} onClose={onCancelClick}>
+ <div className="flex w-300 flex-col items-center rounded-16 bg-white px-16 text-center">
+ {children}
+ {variant && (
+ <div className="w-full py-12">
+ <Button
+ variant={variantMap[variant].ok}
+ className="w-full"
+ size="small"
+ onClick={onOkClick}
+ >
+ {okText}
+ </Button>
+ <Spacing size={8} />
+ <Button
+ variant={variantMap[variant].cancel}
+ className="w-full"
+ size="small"
+ onClick={onCancelClick}
+ >
+ {cancelText}
+ </Button>
+ </div>
+ )}
+ </div>
+ </ModalWrapper>
+ );
+}

src/components/common/Modal/ModalContext.tsx → src/components/Modal/ModalContext.client.tsx

@@ -18,4 +18,5 @@ const useModalContext = () => {
  if (!ctx) throw new Error('Cannot find Context. It should be wrapped within ContextProvider.');
  return ctx;
 };
+
 export { useModalContext };

src/components/common/Modal/ModalWrapper.tsx → src/components/Modal/ModalWrapper.client.tsx

@@ -1,4 +1,5 @@
-import PortalWrapper from '../PotalWrapper';
+'use client';
+import { PortalWrapper } from '../PotalWrapper';
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 import { motion } from 'framer-motion';
 import { useRef } from 'react';
@@ -21,14 +22,14 @@ export default function ModalWrapper({
 
  return (
  <PortalWrapper isShow={isOpen}>
- <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
- <div className="fixed left-1/2 top-0 z-10 h-full w-full max-w-450 -translate-x-1/2 bg-[rgba(0,0,0,0.4)]">
-  <div
-  ref={modalRef}
-  className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-  >
-  {children}
- </div>
+ <motion.div
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ className="fixed left-1/2 top-0 z-modal h-full w-full max-w-450 -translate-x-1/2 bg-[rgba(0,0,0,0.4)]"
+ >
+ <div ref={modalRef} className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+ {children}
  </div>
  </motion.div>
  </PortalWrapper>

src/components/Modal/index.ts

@@ -0,0 +1,4 @@
+export { default as ModalWrapper } from './ModalWrapper.client';
+export { default as BottomSheet } from './BottomSheet';
+export { default as Modal } from './Modal.client';
+export * from './ModalContext.client';

src/components/PotalWrapper/PortalWrapper.tsx

@@ -0,0 +1,19 @@
+import { AnimatePresence } from 'framer-motion';
+import { createPortal } from 'react-dom';
+
+import type { StrictPropsWithChildren } from '@/types';
+
+interface PortalWrapperProps {
+ isShow: boolean;
+}
+
+export default function PortalWrapper({
+ isShow,
+ children,
+}: StrictPropsWithChildren<PortalWrapperProps>) {
+ const container = typeof window !== 'undefined' && document.body;
+
+ return container
+ ? createPortal(<AnimatePresence>{isShow && children}</AnimatePresence>, container)
+ : null;
+}

src/components/PotalWrapper/index.ts

@@ -0,0 +1 @@
+export { default as PortalWrapper } from './PortalWrapper';

tailwind.config.js

@@ -12,6 +12,9 @@ module.exports = {
  animation: {
  slideUp: 'slideUp 0.5s ease-in-out',
  },
+ zIndex: {
+ modal: '100',
+ },
  },
  fontSize: fontSizes,
  },