Merge branch 'add-photocard' into develop

Project-Photohub · Jun 27, 2024 · 8893b61 · 8893b61
2 parents e5c1ddb + c0bed83
commit 8893b61
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 85 deletions.
diff --git a/src/component/body/modal/BlurModal.tsx b/src/component/body/modal/BlurModal.tsx
@@ -1,6 +1,7 @@
 export interface BlurModalProps {
     children: JSX.Element[],
-    setModel: (value: JSX.Element | undefined) => void
+    setModel: (value: JSX.Element | undefined) => void,
+    onClose?: () => void
 }
 
 export const BlurModal = (
@@ -13,14 +14,15 @@ export const BlurModal = (
             className={"fixed top-0 bottom-0 left-0 w-screen h-screen bg-blur-default overflow-hidden"}
             onClick={() => {
                 props.setModel(undefined)
+                props.onClose && props.onClose()
             }}>
 
             {/* Modal Wrapper, Align Modal */}
             <div className={"flex w-full h-full justify-center items-center"}>
 
                 {/* The Modal. */}
                 <div
-                    className={"flex flex-col gap-[30px] items-center rounded-[30px] bg-background-highlight w-[1000px] pt-[20px] pb-[20px] pl-[50px] pe-[50px] shadow-blur-modal"}
+                    className={"flex flex-col gap-[30px] items-center rounded-[30px] bg-background-highlight pt-[20px] pb-[20px] pl-[50px] pe-[50px] shadow-blur-modal"}
                     onClick={(event) => {
                         event.stopPropagation()
                     }}>

diff --git a/src/component/body/photocard/add/InputPhotoCard.tsx b/src/component/body/photocard/add/InputPhotoCard.tsx
@@ -1,4 +1,6 @@
 import {PhotoCardImage} from "../PhotoCardImage";
+import {BlurModal} from "../../modal/BlurModal";
+import React from "react";
 
 export interface InputPhotoCardProps {
     image: string | null
@@ -9,35 +11,75 @@ export interface InputPhotoCardProps {
 }
 
 export const InputPhotoCard = (props: InputPhotoCardProps) => {
+
+    function closeInputModal() {
+        props.setModal(undefined)
+        document.onpaste = null
+    }
+
+    function setImage(file: File) {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = (event) => {
+            props.setImageFile(file)
+            props.setImage(event.target!.result as string)
+        }
+    }
+
+    function isImageFile(file: File) {
+        return file.type === "image/png" ||
+            file.type === "image/jpeg" ||
+            file.type === "image/jpg" ||
+            file.type === "image/heic"
+    }
+
     return (
-        <div>
-            <input id={`input-photo-card-${props.id}`}
-                   type={"file"}
-                   accept={"image/png,image/jpeg,image/heic"}
-                   multiple={false}
-                   hidden={true}
-                   onInput={(input) => {
-                       const file = (input.target as HTMLInputElement).files?.item(0)
-
-                       if (file === null || file === undefined) {
-                           props.setImage(null)
-                           props.setImageFile(null)
-                       } else {
-                           const reader = new FileReader()
-                           reader.readAsDataURL(file)
-                           reader.onload = (event) => {
-                               props.setImageFile(file)
-                               props.setImage(event.target!.result as string)
-                           }
-                       }
-                   }}
-                   className={"bg-background-highlight placeholder:text-text-subtext3 placeholder:font-p-light outline-0 text-text-white w-[500px] pl-[30px] pr-[30px] pt-[10px] pb-[10px]"}/>
-            <label htmlFor={`input-photo-card-${props.id}`}>
-                <PhotoCardImage
-                    image={props.image !== null ? props.image : "/images/inputImage.png"}
-                    width={"440px"} height={"680px"}
-                />
-            </label>
+        <div onClick={() => {
+            document.onpaste = (event) => {
+
+                if (event.clipboardData == null || event.clipboardData.files[0] == null) {
+                    return
+                }
+
+                const file = event.clipboardData.files[0]
+
+                if (isImageFile(file)) {
+                    setImage(file)
+                }
+
+                closeInputModal()
+            }
+
+            props.setModal(
+                <BlurModal setModel={props.setModal} onClose={closeInputModal}>
+                    <></>
+                    <input id={`input-photo-card-${props.id}`}
+                           type={"file"}
+                           accept={"image/png,image/jpeg,image/heic"}
+                           multiple={false}
+                           hidden={true}
+                           onInput={(input) => {
+                               const file = (input.target as HTMLInputElement).files!.item(0)!
+
+                               setImage(file)
+
+                               closeInputModal()
+                           }}/>
+                    <label htmlFor={`input-photo-card-${props.id}`}>
+                        <div
+                            className={"flex justify-center items-center border-dashed border-[10px] border-header-default w-[800px] h-[550px]"}>
+                            <p className={"text-center text-[32px] font-p-medium text-text-subtext3"}>
+                                클릭하여 이미지를 불러오거나<br/>붙여넣기 하세요
+                            </p>
+                        </div>
+                    </label>
+                </BlurModal>
+            )
+        }}>
+            <PhotoCardImage
+                image={props.image !== null ? props.image : "/images/inputImage.png"}
+                width={"440px"} height={"680px"}
+            />
         </div>
     )
 }
diff --git a/src/component/body/photocard/add/InputPhotoCardTitle.tsx b/src/component/body/photocard/add/InputPhotoCardTitle.tsx
@@ -0,0 +1,25 @@
+export interface PhotoCardNameInputProps {
+    setTitle: (title: string | null) => void
+}
+
+export const InputPhotoCardTitle = (props: PhotoCardNameInputProps) => {
+    return (
+        <div className={"flex flex-row w-full justify-start pl-[100px]"}>
+            <div
+                className={"flex border-background-highlight border-solid border-[3px] rounded-[30px] pl-[80px] pr-[80px] pt-[20px] pb-[20px]"}>
+                <input type={"text"} placeholder={"멋진 이름을 지어주세요!"}
+                       className={"bg-background-default placeholder:text-text-subtext3 placeholder:font-p-light outline-0  font-p-light text-text-white text-[36px]"}
+                       onInput={(input) => {
+                           const text = (input.target as HTMLInputElement).value
+
+                           if (text === null || text === undefined || text.trim() === "") {
+                               props.setTitle(null)
+                           } else {
+                               props.setTitle((input.target as HTMLInputElement).value)
+                           }
+                       }}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/src/component/body/photocard/add/PhotoCardGroupMemberSelector.tsx b/src/component/body/photocard/add/PhotoCardGroupMemberSelector.tsx
@@ -0,0 +1,12 @@
+import {DefaultGroupMemberSelectionComponent} from "../../group/DefaultGroupMemberSelectionComponent";
+
+export const PhotoCardGroupMemberSelector = () => {
+    return (
+        <div className={"flex flex-col gap-[30px]"}>
+            <div className={"flex pl-[100px]"}>
+                <p className={"font-light text-text-subtext3 text-[32px]"}>누구에 대한 포토카드인가요?</p>
+            </div>
+            <DefaultGroupMemberSelectionComponent/>
+        </div>
+    )
+}
diff --git a/src/pages/ModalBase.tsx b/src/pages/ModalBase.tsx
diff --git a/src/pages/PageBase.tsx b/src/pages/PageBase.tsx
@@ -1,6 +1,5 @@
 import {Header} from "../component/header/Header";
 import {Footer} from "../component/footer/Footer";
-import {ModalBase} from "./ModalBase";
 
 export interface PageBaseProps {
     children: JSX.Element[]
@@ -10,8 +9,6 @@ export const PageBase = (props: PageBaseProps) => {
     return (
         <div className={"flex flex-col gap-[50px]"}>
 
-            <ModalBase/>
-
             <Header/>
 
             {props.children}

diff --git a/src/pages/add/AddPhotoCardPage.tsx b/src/pages/add/AddPhotoCardPage.tsx
@@ -1,22 +1,20 @@
-import {PageBase} from "../PageBase";
 import {InputPhotoCard} from "../../component/body/photocard/add/InputPhotoCard";
 import {useState} from "react";
-import {
-    currentGroupId,
-    currentMemberId,
-    DefaultGroupMemberSelectionComponent
-} from "../../component/body/group/DefaultGroupMemberSelectionComponent";
+import {currentGroupId, currentMemberId} from "../../component/body/group/DefaultGroupMemberSelectionComponent";
 import {DivButton} from "../../component/button/DivButton";
 import axios from "axios";
 import {HttpMethod} from "../../module/request/ServerInfo";
 import {BlurModal} from "../../component/body/modal/BlurModal";
-import {getTopLevelModalSetter} from "../ModalBase";
+import {PageBase} from "../PageBase";
+import {InputPhotoCardTitle} from "../../component/body/photocard/add/InputPhotoCardTitle";
+import {PhotoCardGroupMemberSelector} from "../../component/body/photocard/add/PhotoCardGroupMemberSelector";
 
 let isRequested = 0
 
 export const AddPhotoCardPage = () => {
 
-    const setModal = getTopLevelModalSetter()
+    const [modal, setModal]
+        = useState<JSX.Element | undefined>();
 
     const [image, setImage] =
         useState<string | null>("images/inputImage.png");
@@ -31,31 +29,9 @@ export const AddPhotoCardPage = () => {
 
     return (
         <PageBase>
-            <div className={"flex flex-row w-full justify-start pl-[100px]"}>
-                <div
-                    className={"flex border-background-highlight border-solid border-[3px] rounded-[30px] pl-[80px] pr-[80px] pt-[20px] pb-[20px]"}>
-                    <input type={"text"} placeholder={"멋진 이름을 지어주세요!"}
-                           className={"bg-background-default placeholder:text-text-subtext3 placeholder:font-p-light outline-0  font-p-light text-text-white text-[36px]"}
-                           onInput={(input) => {
-                               const text = (input.target as HTMLInputElement).value
-
-                               if (text === null || text === undefined || text.trim() === "") {
-                                   setTitle(null)
-                               } else {
-                                   setTitle((input.target as HTMLInputElement).value)
-                               }
+            <InputPhotoCardTitle setTitle={setTitle}/>
 
-                               isRequested = 0
-                           }}
-                    />
-                </div>
-            </div>
-            <div className={"flex flex-col gap-[30px]"}>
-                <div className={"flex pl-[100px]"}>
-                    <p className={"font-light text-text-subtext3 text-[32px]"}>누구에 대한 포토카드인가요?</p>
-                </div>
-                <DefaultGroupMemberSelectionComponent/>
-            </div>
+            <PhotoCardGroupMemberSelector/>
 
             <div className={"flex flex-row w-full justify-center gap-[30px]"}>
                 <InputPhotoCard image={image} setImage={setImage}
@@ -109,6 +85,7 @@ export const AddPhotoCardPage = () => {
                     <p className={"text-text-black text-[32px] font-p-extra-bold"}>Submit</p>
                 </DivButton>
             </div>
+            {modal!}
         </PageBase>
     )
 }