Merge pull request #10 from MJU-Letter/1st-QA-fix

Feat:#9 modal nextUi library
MJU-Letter · Feb 19, 2024 · bb6b5fc · bb6b5fc
2 parents 8dc417a + ce7bd0d
commit bb6b5fc
Show file tree

Hide file tree

Showing 33 changed files with 3,605 additions and 995 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@nextui-org/react": "^2.2.9",
+    "framer-motion": "^11.0.5",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/(main)/test/page.tsx b/src/app/(main)/test/page.tsx
@@ -1,5 +1,5 @@
-import MainDetail from "@/components/templates/main/MainDetail";
 import React from "react";
+import MainDetail from "../../../components/templates/main/MainDetail";
 
 const page = () => {
   return (

diff --git a/src/app/_app.tsx b/src/app/_app.tsx
@@ -0,0 +1,11 @@
+import { NextUIProvider } from "@nextui-org/react";
+import type { AppProps } from "next/app";
+import React from "react";
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <NextUIProvider>
+      <Component {...pageProps} />
+    </NextUIProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,8 +17,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className="flex justify-center  tablet:w-screen ">
+    <html lang="en" className=" bg-main-background">
+      <body className="flex justify-center">
         <figure className=" hidden tablet:flex tablet:h-screen  tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100 ">
           <Image
             className="w-419 h-198 object-contain "
@@ -27,7 +27,7 @@ export default function RootLayout({
           />
         </figure>
         <main className="flex flex-col items-center tablet:flex-none w-fit ">
-          <header className="w-full">
+          <header className="w-full mb-76">
             <Navigation />
           </header>
           {children}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Main from "@/components/templates/main/Main";
 import Image from "next/image";
+import React from "react";
 
 export default function Home() {
   return (

diff --git a/src/app/setting/profile/page.tsx b/src/app/setting/profile/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import ProfileSetting from "@/components/organisms/profileSetting/ProfileSetting";
 import React from "react";
-import testProfile from "../../../../public/icons/testProfile.png";
+import testProfile '../../../'
 
 const page = () => {
   const test = () => {

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/ModalContent.stories.tsx b/src/components/molecules/modal/ModalContent.stories.tsx
diff --git a/src/components/molecules/modal/ModalContent.tsx b/src/components/molecules/modal/ModalContent.tsx
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/AuthModal.tsx b/src/components/organisms/modal/AuthModal.tsx
diff --git a/src/components/organisms/modal/LetterModal.stories.tsx b/src/components/organisms/modal/LetterModal.stories.tsx
diff --git a/src/components/organisms/modal/LetterModal.tsx b/src/components/organisms/modal/LetterModal.tsx
diff --git a/...anisms/modal/AuthCheckingModalContent.tsx → ...s/modal/auth/AuthCheckingModalContent.tsx b/...anisms/modal/AuthCheckingModalContent.tsx → ...s/modal/auth/AuthCheckingModalContent.tsx
diff --git a/...nts/organisms/modal/AuthModal.stories.tsx → ...rganisms/modal/auth/AuthModal.stories.tsx b/...nts/organisms/modal/AuthModal.stories.tsx → ...rganisms/modal/auth/AuthModal.stories.tsx