From ae937cda5994056423432444459e97bbe5ff14fe Mon Sep 17 00:00:00 2001
From: SEUNGJUN JEONG <jsj9620@hufs.ac.kr>
Date: Sat, 14 Oct 2023 01:57:20 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=ED=94=8C=EB=9F=AC=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B0=98=20=EB=B7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/pages/PlugIn/UsrOffline.tsx   |  12 +-
 front/src/pages/PlugIn/UsrOnline.tsx    | 230 +++++++++++++-----------
 front/src/pages/PlugIn/modal/MPage1.tsx |  10 +-
 front/src/pages/PlugIn/modal/MPage2.tsx |  26 ++-
 front/src/pages/PlugIn/modal/MPage3.tsx |   6 +-
 front/src/pages/PlugIn/modal/Modal.tsx  |  10 +-
 6 files changed, 161 insertions(+), 133 deletions(-)

diff --git a/front/src/pages/PlugIn/UsrOffline.tsx b/front/src/pages/PlugIn/UsrOffline.tsx
index 6cd026c..10add30 100644
--- a/front/src/pages/PlugIn/UsrOffline.tsx
+++ b/front/src/pages/PlugIn/UsrOffline.tsx
@@ -3,16 +3,16 @@ import { Link } from "react-router-dom";
 
 const UsrOffline = () => {
   return (
-    <div className="w-full h-[100vh] flex flex-col px-10">
-      <div className="w-full h-full flex mt-[100px] flex-col pb-[20px]">
-        <div className="flex flex-row items-center justify-center">
+    <div className="w-full h-[100vh] flex flex-col px-9 md:px-10">
+      <div className="w-full h-full flex mt-[50px] md:mt-[100px] flex-col pb-[20px]">
+        <div className="flex flex-col items-center justify-center md:flex-row">
           <img
             src={plugin1}
             alt="디스코드 연동 예시 이미지"
             className="md:w-[30rem] lg:w-[35rem] xl:w-[40rem]"
           />
-          <div className="flex flex-col items-start justify-center ml-[50px] h-full">
-            <p className="text-4xl font-bold leading-normal font-main">
+          <div className="flex flex-col items-start justify-center md:ml-[50px] h-full">
+            <p className="text-3xl font-bold leading-normal md:text-4xl font-main">
               지금 번역한 메시지, <br />
               모두에게 공유하고 싶다면?
             </p>
@@ -20,7 +20,7 @@ const UsrOffline = () => {
               HandTalker로 번역한 메시지를 <br /> 여러 서비스로 전송해보세요.
             </p>
             <Link to="/login">
-              <button className="flex flex-row justify-center items-center bg-main-2 w-[300px] h-[50px] text-xl text-white font-main mt-[20px] rounded-lg">
+              <button className="flex flex-row justify-center items-center bg-main-2 w-[250px] h-[48px] md:w-[300px] md:h-[50px] text-xl text-white font-main mt-[20px] rounded-lg">
                 로그인하고 사용해보기
               </button>
             </Link>
diff --git a/front/src/pages/PlugIn/UsrOnline.tsx b/front/src/pages/PlugIn/UsrOnline.tsx
index 0f07648..4b06b8e 100644
--- a/front/src/pages/PlugIn/UsrOnline.tsx
+++ b/front/src/pages/PlugIn/UsrOnline.tsx
@@ -20,119 +20,131 @@ const UsrOnline = () => {
       {openModal && <Modal onOpenModal={onModalAlert} />}
 
       <div className="h-full flex flex-col items-center justify-center md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
-        <div className="flex flex-row h-[320px] items-center justify-center w-full mb-[50px]">
-          <div className="w-[301px] h-[320px] mt-[50px] border border-[#5865F2] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={discord_blue}
-              alt="디스코드 로고"
-              className="w-auto h-[67px] mt-[10px]"
-            />
-            <p className="font-main text-lg text-[#5865F2] mt-[40px] text-center">
-              Discord에서 HandTalker로 <br />
-              번역한 메시지를 전송해보세요
-            </p>
-            <button
-              onClick={onModalAlert}
-              className="w-[230px] h-[50px] mt-[20px] text-[#5865F2] font-main text-xl border border-[#5865F2] rounded-xl hover:bg-[#5865F2] hover:text-white hover:drop-shadow-xl transition-colors duration-200"
-            >
-              연결하기
-            </button>
+        <div className="flex flex-col md:flex-row h-[320px] items-center justify-center w-full mb-[50px]">
+          <div className="flex flex-row items-center justify-center">
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-[50px] border border-[#5865F2] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={discord_blue}
+                alt="디스코드 로고"
+                className="w-auto h-[40px] md:h-[67px] mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#5865F2] mt-[40px] text-center">
+                Discord에서 HandTalker로 <br />
+                번역한 메시지를 전송해보세요
+              </p>
+              <button
+                onClick={onModalAlert}
+                className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#5865F2] font-main text-xl border border-[#5865F2] rounded-xl hover:bg-[#5865F2] hover:text-white hover:drop-shadow-xl transition-colors duration-200"
+              >
+                연결하기
+              </button>
+            </div>
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-[50px] ml-8 md:ml-[50px] border border-[#03CF5D] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={naver}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#03CF5D] mt-[40px] text-center">
+                네이버에서 HandTalker로 <br />
+                번역한 메시지를 검색해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#03CF5D] font-main text-xl border border-[#03CF5D] rounded-lg md:rounded-xl hover:bg-[#03CF5D] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
           </div>
-          <div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#03CF5D] flex flex-col items-center justify-center rounded-xl ">
-            <img src={naver} alt="로고" className="w-auto h-[67px] mt-[10px]" />
-            <p className="font-main text-lg text-[#03CF5D] mt-[40px] text-center">
-              네이버에서 HandTalker로 <br />
-              번역한 메시지를 검색해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#03CF5D] font-main text-xl border border-[#03CF5D] rounded-xl hover:bg-[#03CF5D] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
-          </div>
-          <div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#4888F4] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={google}
-              alt="로고"
-              className="w-auto h-[67px] mt-[10px]"
-            />
-            <p className="font-main text-lg text-[#4888F4] mt-[40px] text-center">
-              Google에서 HandTalker로 <br />
-              번역한 메시지를 검색해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#4888F4] font-main text-xl border border-[#4888F4] rounded-xl hover:bg-[#4888F4] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
-          </div>
-          <div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#381c1e] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={kakaotalk}
-              alt="로고"
-              className="w-auto h-[67px] scale-150 mt-[10px]"
-            />
-            <p className="font-main text-lg text-[#381c1e] mt-[40px] text-center">
-              카카오톡에서 HandTalker로 <br />
-              번역한 메시지를 전송해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#381c1e] font-main text-xl border border-[#381c1e] rounded-xl hover:bg-[#381E1F] hover:text-[#FEE800] hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
+          <div className="flex flex-row items-center justify-center mt-8 md:mt-0">
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] md:ml-[50px] border border-[#4888F4] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={google}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#4888F4] mt-[40px] text-center">
+                Google에서 HandTalker로 <br />
+                번역한 메시지를 검색해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#4888F4] font-main text-xl border border-[#4888F4] rounded-xl hover:bg-[#4888F4] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] ml-8 md:ml-[50px] border border-[#381c1e] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={kakaotalk}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] scale-150 mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#381c1e] mt-[40px] text-center">
+                카카오톡에서 HandTalker로 <br />
+                번역한 메시지를 전송해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#381c1e] font-main text-xl border border-[#381c1e] rounded-xl hover:bg-[#381E1F] hover:text-[#FEE800] hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
           </div>
         </div>
-        <div className="flex flex-row h-[320px] items-center justify-center w-full">
-          <div className="w-[301px] h-[320px] mt-[50px] border border-[#E83B6F] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={instagram}
-              alt="로고"
-              className="w-auto h-[67px] mt-[10px] scale-125"
-            />
-            <p className="font-main text-lg text-[#E83B6F] mt-[40px] text-center">
-              Instagram에서 HandTalker로 <br />
-              번역한 메시지를 공유해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#E83B6F] font-main text-xl border border-[#E83B6F] rounded-xl hover:bg-[#E83B6F] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
-          </div>
-          <div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#3B589E] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={facebook}
-              alt="로고"
-              className="w-auto h-[67px] mt-[10px] scale-125"
-            />
-            <p className="font-main text-lg text-[#3B589E] mt-[40px] text-center">
-              Facebook에서 HandTalker로 <br />
-              번역한 메시지를 공유해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#3B589E] font-main text-xl border border-[#3B589E] rounded-xl hover:bg-[#3B589E] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
-          </div>
-          <div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#4A98EA] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={twitter}
-              alt="로고"
-              className="w-auto h-[67px] mt-[10px] scale-125"
-            />
-            <p className="font-main text-lg text-[#4A98EA] mt-[40px] text-center">
-              Twitter에서 HandTalker로 <br />
-              번역한 메시지를 공유해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#4A98EA] font-main text-xl border border-[#4A98EA] rounded-xl hover:bg-[#4A98EA] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
+        <div className="flex flex-col md:flex-row h-[320px] items-center justify-center w-full">
+          <div className="flex flex-row items-center justify-center md:flex-col">
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] border border-[#E83B6F] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={instagram}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] scale-125 mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#E83B6F] mt-[40px] text-center">
+                Instagram에서 HandTalker로 <br />
+                번역한 메시지를 공유해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#E83B6F] font-main text-xl border border-[#E83B6F] rounded-xl hover:bg-[#E83B6F] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] md:mt-[50px] ml-8 md:ml-[50px] border border-[#3B589E] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={facebook}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] scale-125 mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#3B589E] mt-[40px] text-center">
+                Facebook에서 HandTalker로 <br />
+                번역한 메시지를 공유해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#3B589E] font-main text-xl border border-[#3B589E] rounded-xl hover:bg-[#3B589E] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
           </div>
-          <div className="w-[301px] h-[320px] mt-[50px] ml-[50px] border border-[#0041FF] flex flex-col items-center justify-center rounded-xl ">
-            <img
-              src={devocean}
-              alt="로고"
-              className="w-auto h-[67px] scale-125 mt-[10px]"
-            />
-            <p className="font-main text-lg text-[#0041FF] mt-[40px] text-center">
-              데보션에서 HandTalker로 <br />
-              번역한 메시지를 공유해보세요
-            </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#0041FF] font-main text-xl border border-[#0041FF] rounded-xl hover:bg-[#0041FF] hover:text-[#ffffff] hover:drop-shadow-xl transition-colors duration-200">
-              연결하기
-            </button>
+          <div className="flex flex-row items-center justify-center md:flex-col">
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-8 md:mt-[50px] md:ml-[50px] border border-[#4A98EA] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={twitter}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] scale-125 mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#4A98EA] mt-[40px] text-center">
+                Twitter에서 HandTalker로 <br />
+                번역한 메시지를 공유해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#4A98EA] font-main text-xl border border-[#4A98EA] rounded-xl hover:bg-[#4A98EA] hover:text-white hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
+            <div className="w-[140px] h-[140px] md:w-[301px] md:h-[320px] mt-8 md:mt-[50px] ml-8 md:ml-[50px] border border-[#0041FF] flex flex-col items-center justify-center rounded-xl ">
+              <img
+                src={devocean}
+                alt="로고"
+                className="w-auto h-[40px] md:h-[67px] scale-150 mt-[10px]"
+              />
+              <p className="hidden md:block font-main text-lg text-[#0041FF] mt-[40px] text-center">
+                데보션에서 HandTalker로 <br />
+                번역한 메시지를 공유해보세요
+              </p>
+              <button className="w-[120px] h-[40px] md:w-[230px] md:h-[50px] mt-[20px] text-[#0041FF] font-main text-xl border border-[#0041FF] rounded-xl hover:bg-[#0041FF] hover:text-[#ffffff] hover:drop-shadow-xl transition-colors duration-200">
+                연결하기
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/front/src/pages/PlugIn/modal/MPage1.tsx b/front/src/pages/PlugIn/modal/MPage1.tsx
index 9438298..6333535 100644
--- a/front/src/pages/PlugIn/modal/MPage1.tsx
+++ b/front/src/pages/PlugIn/modal/MPage1.tsx
@@ -2,9 +2,13 @@ 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-auto h-[430px]" />
-      <p className="text-xl font-main">
+    <div className="flex flex-col items-center justify-center w-[18rem] h-[25rem] md:w-[730px] md:h-[520px]">
+      <img
+        src={discord}
+        alt="디스코드 화면"
+        className="w-auto h-[12rem] md:h-[430px]"
+      />
+      <p className="text-lg md:text-xl font-main">
         1. 디스코드 데스크톱 애플리케이션을 실행해주세요.
       </p>
     </div>
diff --git a/front/src/pages/PlugIn/modal/MPage2.tsx b/front/src/pages/PlugIn/modal/MPage2.tsx
index ce2b219..134bedd 100644
--- a/front/src/pages/PlugIn/modal/MPage2.tsx
+++ b/front/src/pages/PlugIn/modal/MPage2.tsx
@@ -4,10 +4,18 @@ import page2_2 from "../../../assets/images/plugin/page2-2.png";
 
 const MPage2 = () => {
   return (
-    <div className="flex flex-col items-center justify-center w-[730px] h-[520px]">
-      <div className="flex flex-row items-center justify-center pb-5 space-x-3">
-        <img src={page2_1} alt="디스코드 화면" className="h-[260px]" />
-        <img src={page2_2} alt="디스코드 화면" className="h-[260px]" />
+    <div className="flex flex-col items-center justify-center w-[18rem] h-[25rem] md:w-[730px] md:h-[520px]">
+      <div className="flex flex-row items-center justify-start pb-5 space-x-3 overflow-scroll md:justify-center">
+        <img
+          src={page2_1}
+          alt="디스코드 화면"
+          className="w-auto h-[10rem] md:h-[260px]"
+        />
+        <img
+          src={page2_2}
+          alt="디스코드 화면"
+          className="w-auto h-[10rem] md:h-[260px]"
+        />
       </div>
 
       <a
@@ -15,12 +23,16 @@ const MPage2 = () => {
         target="_blank"
         rel="noreferrer"
       >
-        <button className="flex flex-row justify-center items-center rounded-xl scale-90 w-[300px] h-[50px] bg-[#5865f2] text-white font-main text-xl">
-          <img src={discord} alt="discord" className="w-[50px] mr-[5px]" />
+        <button className="flex flex-row justify-center items-center rounded-xl scale-90 w-[250px] h-[48px] md:w-[300px] md:h-[50px] bg-[#5865f2] text-white font-main text-xl">
+          <img
+            src={discord}
+            alt="discord"
+            className="w-[40px] md:w-[50px] mr-[5px]"
+          />
           디스코드 봇 추가
         </button>
       </a>
-      <p className="pt-5 text-xl leading-loose text-center font-main">
+      <p className="pt-5 text-lg leading-normal text-center md:leading-loose md:text-xl font-main">
         2. 위 버튼을 클릭하여 서버에 봇을 추가해주세요. <br />봇 추가를 위해서는
         서버 관리자 권한이 필요합니다. <br />
         봇을 추가하기 위해 사진과 같이 권한 설정을 해주세요.
diff --git a/front/src/pages/PlugIn/modal/MPage3.tsx b/front/src/pages/PlugIn/modal/MPage3.tsx
index 125cfb9..9a05575 100644
--- a/front/src/pages/PlugIn/modal/MPage3.tsx
+++ b/front/src/pages/PlugIn/modal/MPage3.tsx
@@ -2,10 +2,10 @@ import page3 from "../../../assets/images/plugin/page3.png";
 
 const MPage3 = () => {
   return (
-    <div className="flex flex-col items-center justify-center w-[730px] h-[520px]">
-      <img src={page3} alt="page3" className="w-[600px] mb-2" />
+    <div className="flex flex-col items-center justify-center w-[18rem] h-[25rem] md:w-[730px] md:h-[520px]">
+      <img src={page3} alt="page3" className="w-[400px] md:w-[600px] mb-2" />
 
-      <p className="pt-5 text-xl leading-loose text-center font-main">
+      <p className="pt-5 text-lg leading-normal text-center md:text-xl md:leading-loose font-main">
         3. 성공적으로 봇이 추가되었는지 확인해주세요.
       </p>
     </div>
diff --git a/front/src/pages/PlugIn/modal/Modal.tsx b/front/src/pages/PlugIn/modal/Modal.tsx
index a44d44d..c6b1759 100644
--- a/front/src/pages/PlugIn/modal/Modal.tsx
+++ b/front/src/pages/PlugIn/modal/Modal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { ModalPortal } from "../../../utils/helpers/ModalPortal";
-import { GrClose, GrNext, GrPrevious } from "react-icons/gr";
+import { GrNext, GrPrevious } from "react-icons/gr";
 import MPage1 from "./MPage1";
 import MPage2 from "./MPage2";
 import MPage3 from "./MPage3";
@@ -44,11 +44,11 @@ const Modal = ({ onOpenModal }: ModalProps) => {
       <div className="fixed top-0 left-0 flex items-center justify-center w-full h-screen bg-black bg-opacity-70">
         <div
           ref={modalRef}
-          className="container w-[850px] h-[600px] flex flex-col items-center justify-center bg-white border-none rounded-3xl"
+          className="container w-[22rem] h-[30rem] md:w-[850px] md:h-[600px] flex flex-col items-center justify-center bg-white border-none rounded-3xl"
         >
-          <div className="flex flex-row items-center mt-[20px]">
+          <div className="flex flex-row items-center md:mt-[20px]">
             <button onClick={prevPage}>
-              <p className="text-4xl text-gray-500 opacity-60">
+              <p className="text-3xl text-gray-500 md:text-4xl opacity-60">
                 <GrPrevious />
               </p>
             </button>
@@ -56,7 +56,7 @@ const Modal = ({ onOpenModal }: ModalProps) => {
             {currentPage === 2 && <MPage2 />}
             {currentPage === 3 && <MPage3 />}
             <button onClick={nextPage}>
-              <p className="text-4xl text-gray-500 opacity-60">
+              <p className="text-3xl text-gray-500 md:text-4xl opacity-60">
                 <GrNext />
               </p>
             </button>