feat:#9 modal nextui library 사용

MJU-Letter · Feb 19, 2024 · ce7bd0d · ce7bd0d
1 parent 328eaa9
commit ce7bd0d
Show file tree

Hide file tree

Showing 11 changed files with 357 additions and 53 deletions.
diff --git a/src/components/atoms/letter/Letter.tsx b/src/components/atoms/letter/Letter.tsx
@@ -1,15 +1,10 @@
-import Image, { StaticImageData } from "next/image";
+import { COLORS } from "@/constants/letterColors";
+import { letterProps } from "@/types/Letter";
+import Image from "next/image";
 import React from "react";
 import trash from "../../../../public/icons/trash.png";
 
-interface LetterProps {
-  letterText: string;
-  user?: { name: string; profileImg: StaticImageData | string };
-  backgroundColor: string;
-  isMine: boolean;
-}
-
-const Letter = ({ letterText, user, backgroundColor, isMine }: LetterProps) => {
+const Letter = ({ letterText, user, backgroundColor, isMine }: letterProps) => {
   const trimmedText =
     letterText.length > 140
       ? `${letterText.slice(0, 140)}... 더보기`
@@ -18,7 +13,7 @@ const Letter = ({ letterText, user, backgroundColor, isMine }: LetterProps) => {
     <div
       className={`w-148 pt-8 pb-12 px-12 gangwon-medium`}
       style={{
-        backgroundColor: `${backgroundColor}`,
+        backgroundColor: COLORS[backgroundColor],
         boxShadow: "0px 0px 4px 0px rgba(0, 0, 0, 0.15)",
       }}
     >

diff --git a/src/components/molecules/modal/ModalView.tsx b/src/components/molecules/modal/ModalView.tsx
@@ -1,23 +1,93 @@
+import { modalProps } from "@/types/Modal";
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+} from "@nextui-org/react";
 import React, { HTMLAttributes } from "react";
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface modalViewProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-}
-
-const ModalView = ({ children, ...props }: Props) => {
-  // 모달 클릭 시 백드롭에도 터치 이벤트가 전파되는 것을 막기 위함
-  const handleClickModalView = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
-    e.stopPropagation();
+  isOpen: boolean;
+  onOpen: () => void;
+  onOpenChange: (isOpen: boolean) => void;
+  noBtn?: {
+    info: string;
+    handler?: () => void;
   };
+  yesBtn?: {
+    info: string;
+    handler?: () => void;
+  };
+}
 
+const ModalView = ({
+  children,
+  isOpen,
+  onOpen,
+  onOpenChange,
+  noBtn,
+  yesBtn,
+  ...props
+}: modalViewProps) => {
   return (
-    <div className="fixed bg-[#00000030] top-0 left-0 w-full h-full flex justify-center items-center z-modal">
-      <div onClick={handleClickModalView} {...props}>
-        {children}
-      </div>
-    </div>
+    <Modal
+      classNames={{
+        base: "w-fit min-h-fit overflow-x-hidden ",
+      }}
+      isDismissable={false}
+      shouldBlockScroll={true}
+      placement="center"
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+    >
+      <ModalContent>
+        {(onClose) => (
+          <div className="medium-medium w-280 min-h-fit pt-60 pb-16 px-16 rounded-16 bg-white flex flex-col items-center justify-center box-border z-modal">
+            <ModalBody>{children}</ModalBody>
+            <ModalFooter>
+              {noBtn && yesBtn && (
+                <div className="flex items-center justify-between">
+                  <Button
+                    className="mr-8 w-120 h-44  bg-gray-light flex items-center justify-center text-gray-medium-text-2"
+                    onClick={() => {
+                      noBtn.handler && noBtn.handler();
+                      onClose();
+                    }}
+                  >
+                    {noBtn.info}
+                  </Button>
+                  <Button
+                    className="w-120 h-44  bg-main-point text-white flex items-center justify-center"
+                    onClick={() => {
+                      yesBtn.handler && yesBtn.handler();
+                      onClose();
+                    }}
+                  >
+                    {yesBtn.info}
+                  </Button>
+                </div>
+              )}
+              {!noBtn && yesBtn && (
+                <div>
+                  <Button
+                    className="mt-[-12px] w-248 h-44 bg-main-point text-white flex items-center justify-center"
+                    onClick={() => {
+                      yesBtn.handler && yesBtn.handler();
+                      onClose();
+                    }}
+                  >
+                    {yesBtn.info}
+                  </Button>
+                </div>
+              )}
+            </ModalFooter>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
   );
 };
 

diff --git a/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx b/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+interface authCheckingModalProps {
+  name: string;
+  major: string;
+  studentId: string;
+}
+
+const AuthCheckingModal = ({
+  name,
+  major,
+  studentId,
+}: authCheckingModalProps) => {
+  return (
+    <div className="flex flex-col justify-center">
+      <h1 className="medium-medium text-gray-dark-text-1 mb-24">
+        올바른 정보가 맞는지 확인해 주세요.
+      </h1>
+      <h1 className="medium-regular text-gray-dark-text-1">이름: {name}</h1>
+      <h1 className="medium-regular text-gray-dark-text-1 mb-24">
+        학과/학번: {major} {studentId}
+      </h1>
+      <h2 className="small-regular text-gray-medium-text-2 ">
+        * 정보가 다르다면 관리자에게 문의해 주세요.
+      </h2>
+      <h2 className="small-regular text-gray-medium-text-2 ">
+        mjuletter@gmail.com
+      </h2>
+    </div>
+  );
+};
+
+export default AuthCheckingModal;
diff --git a/src/components/organisms/modal/auth/AuthModal.stories.tsx b/src/components/organisms/modal/auth/AuthModal.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import AuthModal from "./AuthModal";
+
+const meta: Meta<typeof AuthModal> = {
+  title: "components/organisms/modal/AuthModal",
+  component: AuthModal,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AuthModal>;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/src/components/organisms/modal/auth/AuthModal.tsx b/src/components/organisms/modal/auth/AuthModal.tsx
@@ -0,0 +1,69 @@
+import ModalView from "@/components/molecules/modal/ModalView";
+import { AuthModalProps } from "@/types/Modal";
+import { useDisclosure } from "@nextui-org/react";
+import React from "react";
+import AuthCheckingModalContent from "./AuthCheckingModalContent";
+
+const AuthModal = ({ authStatus }: AuthModalProps) => {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const handleYesClick = () => {
+    console.log("Yes button clicked!");
+  };
+  const handleNoClick = () => {
+    console.log("No button clicked!");
+  };
+
+  return (
+    <>
+      {authStatus === "proceeding" && (
+        <ModalView
+          isOpen={isOpen}
+          onOpen={onOpen}
+          onOpenChange={onOpenChange}
+          children={`학생카드 인증 중 \n 조금만 기다려 주세요.`}
+        />
+        // <ModalView>
+        //   <ModalContent info={`학생카드 인증 중 \n 조금만 기다려 주세요.`} />
+        // </ModalView>
+      )}
+      {authStatus === "checking" && (
+        <ModalView
+          isOpen={isOpen}
+          onOpen={onOpen}
+          onOpenChange={onOpenChange}
+          children={
+            <AuthCheckingModalContent name={""} major={""} studentId={""} />
+          }
+          yesBtn={{ info: "확인", handler: handleYesClick }}
+          noBtn={{ info: "취소", handler: handleNoClick }}
+        />
+        // <ModalView>
+        //   <ModalContent
+        //     info={
+        //       <AuthCheckingModalContent name={""} major={""} studentId={""} />
+        //     }
+        //     yesBtn={{ info: "확인", handler: handleYesClick }}
+        //     noBtn={{ info: "취소", handler: handleNoClick }}
+        //   />
+        // </ModalView>
+      )}
+      {authStatus === "failed" && (
+        <ModalView
+          isOpen={isOpen}
+          onOpen={onOpen}
+          onOpenChange={onOpenChange}
+          children={`학생카드 인증에 실패했어요.\n 다시 시도해 주세요.`}
+          yesBtn={{ info: "확인", handler: handleYesClick }}
+        />
+        // <ModalView>
+        //   <ModalContent
+        //     info={`학생카드 인증에 실패했어요.\n 다시 시도해 주세요.`}
+        //     yesBtn={{ info: "확인", handler: handleYesClick }}
+        //   />
+        // </ModalView>
+      )}
+    </>
+  );
+};
+
+export default AuthModal;
diff --git a/src/components/organisms/modal/letter/DetailModal.tsx b/src/components/organisms/modal/letter/DetailModal.tsx
@@ -0,0 +1,15 @@
+import { StaticImageData } from "next/image";
+import React from "react";
+
+interface DetailModalProps {
+  letterText: string;
+  user?: { name: string; profileImg: StaticImageData | string };
+  backgroundColor: string;
+  isMine: boolean;
+}
+
+const DetailModal = () => {
+  return <div>DetailModal</div>;
+};
+
+export default DetailModal;
diff --git a/src/components/organisms/modal/letter/WriteModal.stories.tsx b/src/components/organisms/modal/letter/WriteModal.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import WriteModal from "./WriteModal";
+const meta: Meta<typeof WriteModal> = {
+  title: "components/organisms/modal/WriteModal",
+  component: WriteModal,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WriteModal>;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/src/components/organisms/modal/letter/WriteModal.tsx b/src/components/organisms/modal/letter/WriteModal.tsx
@@ -0,0 +1,24 @@
+import ModalView from "@/components/molecules/modal/ModalView";
+import { COLORS } from "@/constants/letterColors";
+import React, { useState } from "react";
+import LetterModalContent from "./WriteModalContent";
+
+const WriteModal = () => {
+  const [selectedColor, setSelectedColor] =
+    useState<keyof typeof COLORS>("red");
+  const [isChecked, setIsChecked] = useState(false);
+  const [textAreaValue, setTextAreaValue] = useState("");
+
+  return (
+    <LetterModalContent
+      selectedColor={selectedColor}
+      setSelectedColor={setSelectedColor}
+      textAreaValue={textAreaValue}
+      setTextAreaValue={setTextAreaValue}
+      isChecked={isChecked}
+      setIsChecked={setIsChecked}
+    />
+  );
+};
+
+export default WriteModal;
diff --git a/...ts/organisms/modal/LetterModalContent.tsx → ...anisms/modal/letter/WriteModalContent.tsx b/...ts/organisms/modal/LetterModalContent.tsx → ...anisms/modal/letter/WriteModalContent.tsx
@@ -20,7 +20,7 @@ const LetterModalContent = ({
   setSelectedColor,
 }: letterModalContentProps) => {
   return (
-    <div className="flex flex-col justify-center">
+    <div className="flex flex-col justify-center text-gray-dark-text-1 text-center whitespace-pre-line mb-44">
       <div className="mt-[-24px] mb-20 text-gray-dark-text-1 medium-medium">
         롤링페이퍼로 마음을 전해보세요.
       </div>