Merge pull request #20 from DEVOCEAN-YOUNG-404/seungjun

Design: 여러가지 수정 사항/오류 반영
DEVOCEAN-YOUNG-404 · Aug 23, 2023 · 5276848 · 5276848
2 parents 7829ce5 + 7c4797a
commit 5276848
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 27 deletions.
diff --git a/front/src/pages/PlugIn/modal/MPage1.tsx b/front/src/pages/PlugIn/modal/MPage1.tsx
@@ -3,7 +3,7 @@ import discord from "../../../assets/images/discord_screenshot.png";
 const MPage1 = () => {
   return (
     <div className="flex flex-col items-center justify-center w-[730px] h-[520px]">
-      <img src={discord} alt="디스코드 화면" className="w-[500px]" />
+      <img src={discord} alt="디스코드 화면" className="w-auto h-[430px]" />
       <p className="text-xl font-main">
         1. 디스코드 데스크톱 애플리케이션을 실행해주세요.
       </p>

diff --git a/front/src/pages/PlugIn/modal/Modal.tsx b/front/src/pages/PlugIn/modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { ModalPortal } from "../../../utils/helpers/ModalPortal";
 import { GrClose, GrNext, GrPrevious } from "react-icons/gr";
 import MPage1 from "./MPage1";
@@ -9,9 +9,12 @@ import { ModalProps } from "../../../types/ModalProps";
 const Modal = ({ onOpenModal }: ModalProps) => {
   useEffect(() => {
     document.body.style.overflow = "hidden";
+    document.addEventListener("mousedown", outsideClickHandler);
     return () => {
       document.body.style.overflow = "auto";
+      document.removeEventListener("mousedown", outsideClickHandler);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -28,20 +31,21 @@ const Modal = ({ onOpenModal }: ModalProps) => {
     }
   };
 
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  const outsideClickHandler = (e: MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+      onOpenModal();
+    }
+  };
+
   return (
     <ModalPortal>
       <div className="fixed top-0 left-0 flex items-center justify-center w-full h-screen bg-black bg-opacity-70">
-        <div className="container w-[850px] h-[600px] flex flex-col items-center justify-center bg-white border-none rounded-3xl">
-          <div className="flex flex-row items-center mt-[20px]">
-            <p className="text-4xl font-bold text-black font-main">
-              디스코드 연결 가이드
-            </p>
-            <button onClick={onOpenModal}>
-              <p className="text-4xl text-gray-500 opacity-60 ml-[470px]">
-                <GrClose />
-              </p>
-            </button>
-          </div>
+        <div
+          ref={modalRef}
+          className="container w-[850px] h-[600px] flex flex-col items-center justify-center bg-white border-none rounded-3xl"
+        >
           <div className="flex flex-row items-center mt-[20px]">
             <button onClick={prevPage}>
               <p className="text-4xl text-gray-500 opacity-60">

diff --git a/front/src/pages/TranslatePage/Input.tsx b/front/src/pages/TranslatePage/Input.tsx
@@ -113,7 +113,7 @@ const Input = () => {
   return (
     <div className="h-[600px]">
       {loading && (
-        <div className="z-10 absolute w-[500px] h-[600px] rounded-xl border border-gray-200 shadow-md flex mt-[16px] items-center justify-center">
+        <div className="z-10 absolute w-[500px] h-[600px] rounded-xl border border-gray-200 shadow-md flex items-center justify-center">
           로딩 중...
         </div>
       )}
@@ -157,7 +157,6 @@ const styles = {
     height: auto;
     overflow: hidden;
     display: flex;
-    margin-top: 16px;
     justify-content: center;
     align-items: center;
     border-radius: 15px;

diff --git a/front/src/pages/TranslatePage/Translate.tsx b/front/src/pages/TranslatePage/Translate.tsx
@@ -70,15 +70,15 @@ const Translate = () => {
       {openModal && <ConfigModal onOpenModal={onModalAlert} />}
       <button
         onClick={onModalAlert}
-        className="cursor-pointer mb-[-20px] w-[10rem] h-12 font-main text-xl font-bold items-end justify-end ml-[61rem] text-white bg-main-2 rounded-lg"
+        className="w-[10rem] h-12 font-main text-xl font-bold items-end justify-end ml-[61rem] text-white bg-main-2 rounded-lg"
       >
         연동 설정
       </button>
-      <div className="flex flex-row items-center justify-center">
+      <div className="flex flex-row items-center justify-center mt-2">
         {translate ? (
           <Input />
         ) : (
-          <div className="flex flex-col items-center justify-center px-12 py-24 mt-8 bg-gray-200 border-none rounded-xl">
+          <div className="flex flex-col items-center justify-center px-12 h-[600px] bg-gray-200 border-none rounded-xl">
             <p className="text-[400px] text-gray-300">
               <BsPersonFill />
             </p>
@@ -88,7 +88,7 @@ const Translate = () => {
           <FaArrowRightLong />
         </p>
         {translate ? (
-          <div className="flex flex-col ml-[30px] mt-[30px] w-[31.25rem] h-[37.5rem] md:w-2/3 bg-white rounded-xl border border-gray-200 shadow-md">
+          <div className="flex flex-col ml-[30px] w-[31.25rem] h-[37.5rem] md:w-2/3 bg-white rounded-xl border border-gray-200 shadow-md">
             <p className="w-[31.25rem] h-[31.25rem] break-all text-4xl text-black font-main p-9">
               {text}
             </p>
@@ -125,7 +125,7 @@ const Translate = () => {
           </div>
         ) : (
           <div>
-            <div className="p-9 ml-[40px] mt-[30px] w-[31.25rem] h-[37.5rem] bg-white rounded-xl border border-gray-200 shadow-md">
+            <div className="p-9 ml-[40px] w-[31.25rem] h-[37.5rem] bg-white rounded-xl border border-gray-200 shadow-md">
               <p className="text-3xl font-bold leading-normal text-black font-main">
                 번역을 시작하려면 <br />
                 아래 버튼을 눌러주세요. <br />

diff --git a/front/src/pages/TranslatePage/config/ConfigModal.tsx b/front/src/pages/TranslatePage/config/ConfigModal.tsx
@@ -156,7 +156,7 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
             ref={modalRef}
             className="container w-[42rem] h-[28rem] flex flex-col items-center justify-center bg-white rounded-3xl shadow-lg"
           >
-            <ConfigSuccess />
+            <ConfigSuccess onModalAlert={onOpenModal} />
           </div>
         ) : (
           <div
@@ -166,7 +166,7 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
             <p className="text-3xl font-bold text-black font-main">
               설정할 플랫폼을 선택해주세요
             </p>
-            <div className="flex flex-row items-center justify-center">
+            <div className="flex flex-row items-center justify-center mt-6 mb-6">
               <div
                 className={`items-end justify-end w-48 h-12 mt-10 ${
                   selectedItem!.name === "Discord" ? "mr-5" : ""
@@ -240,13 +240,13 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
               </div>
               {selectedItem!.name === "Discord" ? (
                 loading ? (
-                  <div className="items-end justify-end w-48 h-12 mt-10 scale-100">
-                    <div className="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md cursor-default sm:text-sm">
+                  <div className="w-48 h-12 mt-14">
+                    <p className="py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md sm:text-sm">
                       loading...
-                    </div>
+                    </p>
                   </div>
                 ) : (
-                  <div className="items-end justify-end w-48 h-12 mt-10 scale-100">
+                  <div className="w-48 h-12 mt-10">
                     <Listbox
                       value={selectedChannel}
                       onChange={setSelectedChannel}

diff --git a/front/src/pages/TranslatePage/config/ConfigSuccess.tsx b/front/src/pages/TranslatePage/config/ConfigSuccess.tsx
@@ -1,4 +1,18 @@
-export const ConfigSuccess = () => {
+import { useEffect } from "react";
+
+interface ConfigSuccessProps {
+  onModalAlert: () => void;
+}
+
+export const ConfigSuccess = ({ onModalAlert }: ConfigSuccessProps) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onModalAlert();
+    }, 1500);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="flex flex-col items-center justify-center w-full h-full">
       <p className="mb-8 text-7xl">🥳</p>