Design: 번역페이지 모바일 기반 뷰

DEVOCEAN-YOUNG-404 · Oct 13, 2023 · f07fc61 · f07fc61
1 parent 67ca66f
commit f07fc61
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 38 deletions.
diff --git a/front/src/pages/TranslatePage/config/ConfigModal.tsx b/front/src/pages/TranslatePage/config/ConfigModal.tsx
@@ -154,26 +154,26 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
         {success ? (
           <div
             ref={modalRef}
-            className="container w-[42rem] h-[28rem] flex flex-col items-center justify-center bg-white rounded-3xl shadow-lg"
+            className="container w-[22rem] h-[18rem] md:w-[42rem] md:h-[28rem] flex flex-col items-center justify-center bg-white rounded-3xl shadow-lg"
           >
             <ConfigSuccess onModalAlert={onOpenModal} />
           </div>
         ) : (
           <div
             ref={modalRef}
-            className="container w-[42rem] h-[28rem] flex flex-col items-center justify-center bg-white rounded-3xl shadow-lg"
+            className="container w-[22rem] h-[18rem] md:w-[42rem] md:h-[28rem] flex flex-col items-center justify-center bg-white rounded-3xl shadow-lg"
           >
-            <p className="text-3xl font-bold text-black font-main">
+            <p className="text-2xl font-bold text-black md:text-3xl font-main">
               설정할 플랫폼을 선택해주세요
             </p>
-            <div className="flex flex-row items-center justify-center mt-6 mb-6">
+            <div className="flex flex-col items-center justify-center md:mt-6 md:mb-6 md:flex-row">
               <div
-                className={`items-end justify-end w-48 h-12 mt-10 ${
-                  selectedItem!.name === "Discord" ? "mr-5" : ""
+                className={`items-end justify-end w-48 h-12 md:mt-10 ${
+                  selectedItem!.name === "Discord" ? "mr-0 md:mr-5" : ""
                 } scale-100`}
               >
                 <Listbox value={selectedItem} onChange={setSelectedItem}>
-                  <div className="mt-2">
+                  <div className="mt-4 md:mt-2">
                     <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md cursor-default focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-green-300 sm:text-sm">
                       {selectedItem && (
                         <span className="flex flex-row truncate">
@@ -240,13 +240,13 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
               </div>
               {selectedItem!.name === "Discord" ? (
                 loading ? (
-                  <div className="w-48 h-12 mt-14">
+                  <div className="w-48 h-12 mt-8 md:mt-14">
                     <p className="py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md sm:text-sm">
                       loading...
                     </p>
                   </div>
                 ) : (
-                  <div className="w-48 h-12 mt-10">
+                  <div className="w-48 h-12 mt-8 md:mt-14">
                     <Listbox
                       value={selectedChannel}
                       onChange={setSelectedChannel}

diff --git a/front/src/pages/TranslatePage/translate/Input.tsx b/front/src/pages/TranslatePage/translate/Input.tsx
@@ -112,11 +112,11 @@ const Input = () => {
   return (
     <div className="">
       {loading && (
-        <div className="z-10 absolute md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] rounded-xl border border-gray-200 shadow-md flex items-center justify-center">
+        <div className="z-10 absolute w-[20rem] h-[20rem] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] rounded-xl border border-gray-200 shadow-md flex items-center justify-center">
           로딩 중...
         </div>
       )}
-      <div className="relative md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] overflow-hidden flex flex-col items-center justify-center rounded-[15px]">
+      <div className="relative w-[20rem] h-[20rem] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] overflow-hidden flex flex-col items-center justify-center rounded-[15px]">
         {/* 비디오 캡쳐 */}
         <div>
           <Webcam
@@ -134,7 +134,7 @@ const Input = () => {
         {/* 랜드마크를 손에 표시 */}
         <canvas
           ref={canvasRef}
-          className="absolute md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-white"
+          className="absolute w-[20rem] h-[20rem] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-white"
           width={500}
           height={600}
         />

diff --git a/front/src/pages/TranslatePage/translate/NotTranslating.tsx b/front/src/pages/TranslatePage/translate/NotTranslating.tsx
@@ -2,8 +2,8 @@ import { BsPersonFill } from "react-icons/bs";
 
 export const NotTranslating = () => {
   return (
-    <div className="flex flex-col items-center justify-center md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-gray-200 border-none rounded-xl">
-      <p className="text-[400px] text-gray-300">
+    <div className="flex flex-col items-center justify-center w-[20rem] h-[20rem] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-gray-200 border-none rounded-xl">
+      <p className="text-[250px] md:text-[400px] text-gray-300">
         <BsPersonFill />
       </p>
     </div>

diff --git a/front/src/pages/TranslatePage/translate/Translate.tsx b/front/src/pages/TranslatePage/translate/Translate.tsx
@@ -81,69 +81,67 @@ const Translate = () => {
   });
 
   return (
-    <div className="mt-[7rem] flex flex-col items-center justify-start w-full h-full mx-auto mb-[4rem]">
+    <div className="mt-[5rem] md:mt-[7rem] flex flex-col items-center justify-start w-full h-full mx-auto mb-[4rem]">
       {openModal && <ConfigModal onOpenModal={onModalAlert} />}
       <button
         onClick={onModalAlert}
-        className="w-[160px] h-[3rem] font-main text-xl font-bold items-end justify-end md:ml-[48.7rem] xl:ml-[61rem] text-white bg-main-2 rounded-lg"
+        className="w-[8rem] h-[2.5rem] md:w-[160px] md:h-[3rem] font-main text-xl font-bold items-end justify-end ml-[12rem] md:ml-[48.7rem] xl:ml-[61rem] text-white bg-main-2 rounded-lg"
       >
         연동 설정
       </button>
-      <div className="flex flex-row items-center justify-center mt-2">
+      <div className="flex flex-col items-center justify-center mt-2 md:flex-row">
         {translate ? <Input /> : <NotTranslating />}
-        <p className="ml-[40px] text-6xl text-gray-200">
+        <p className="hidden md:block ml-[40px] text-6xl text-gray-200">
           <FaArrowRightLong />
         </p>
         {translate ? (
-          <div className="flex flex-col ml-[40px] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-white rounded-xl border border-gray-200 shadow-md">
-            <p className="w-[31.25rem] md:h-[30rem] xl:h-[31.25rem] break-all text-4xl text-black font-main p-9">
+          <div className="mt-3 md:mt-0 flex flex-col md:ml-[40px] w-[20rem] h-[13rem] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-white rounded-xl border border-gray-200 shadow-md">
+            <p className="w-[20rem] h-[9.5rem] md:w-[31.25rem] md:h-[30rem] xl:h-[31.25rem] break-all overflow-scroll text-2xl md:text-4xl text-black font-main p-5 md:p-9">
               {text}
             </p>
             <div
-              className={`flex flex-row items-center justify-center h-[50px] md:mb-[10px] xl:mt-[35px]
+              className={`flex flex-row items-center justify-end md:justify-center mr-2 md:mr-0 h-[50px] md:mb-[10px] xl:mt-[35px]
               }`}
             >
               <button
                 onClick={() => {
                   copyToClipboardHandler(text);
                 }}
-                className="text-4xl text-gray-300 mr-[15px] hover:bg-gray-200 hover:bg-opacity-30 rounded-full cursor-pointer"
+                className="text-2xl md:text-4xl text-gray-300 mr-[15px] hover:bg-gray-200 hover:bg-opacity-30 rounded-full cursor-pointer"
               >
                 <BiCopy />
               </button>
               <button
                 onClick={textClearHandler}
-                className="text-4xl text-gray-300 md:mr-[30px] xl:mr-[75px] hover:bg-gray-200 hover:bg-opacity-30 rounded-full cursor-pointer"
+                className="text-2xl md:text-4xl text-gray-300 md:mr-[30px] xl:mr-[75px] hover:bg-gray-200 hover:bg-opacity-30 rounded-full cursor-pointer"
               >
                 <BiRevision />
               </button>
               <button
                 onClick={SendMessage}
-                className="flex flex-row justify-center items-center rounded-xl min-w-[16rem] md:w-[16rem] xl:w-[18.75rem] md:h-[3rem] xl:h-[3.2rem] bg-[#5865f2] text-white font-main text-xl"
+                className="ml-4 md:ml-0 flex flex-row justify-center items-center rounded-xl md:min-w-[16rem] w-[11rem] h-[2.7rem] md:w-[16rem] xl:w-[18.75rem] md:h-[3rem] xl:h-[3.2rem] bg-[#5865f2] text-white font-main text-xl"
               >
                 <img
                   src={discord}
                   alt="discord"
-                  className="md:w-[40px] xl:w-[50px] mr-[5px]"
+                  className="w-[30px] md:w-[40px] xl:w-[50px] mr-[5px]"
                 />
                 디스코드로 전송
               </button>
             </div>
           </div>
         ) : (
-          <div>
-            <div className="p-9 ml-[40px] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl: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 />
-              </p>
-              <button
-                onClick={onClick}
-                className="w-[140px] h-[55px] mt-[30px] rounded-xl font-bold font-main text-xl text-white bg-main-2"
-              >
-                시작하기
-              </button>
-            </div>
+          <div className="mt-3 md:mt-0 p-5 md:p-9 md:ml-[40px] w-[20rem] h-[13rem] md:w-[25rem] xl:w-[31.25rem] md:h-[31.25rem] xl:h-[37.5rem] bg-white rounded-xl border border-gray-200 shadow-md">
+            <p className="text-2xl font-bold leading-normal text-black md:text-3xl font-main">
+              번역을 시작하려면 <br />
+              아래 버튼을 눌러주세요. <br />
+            </p>
+            <button
+              onClick={onClick}
+              className="w-[7rem] h-[2.7rem] md:w-[8.75rem] md:h-[3rem] mt-[30px] rounded-xl font-bold font-main text-xl text-white bg-main-2"
+            >
+              시작하기
+            </button>
           </div>
         )}
       </div>