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

Seungjun
DEVOCEAN-YOUNG-404 · Aug 22, 2023 · 72ce661 · 72ce661
2 parents 483d158 + 27d91e6
commit 72ce661
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 42 deletions.
diff --git a/front/src/components/Header/Header.tsx b/front/src/components/Header/Header.tsx
@@ -33,7 +33,7 @@ const Header = () => {
   };
 
   return (
-    <div className="bg-white bg-opacity-70 top-0 fixed z-10 min-w-[1266px] w-full h-[72px] border-b border-gray border-opacity-70 flex flex-row justify-start items-center">
+    <div className="bg-white bg-opacity-70 top-0 fixed z-10 w-full h-[72px] border-b border-gray border-opacity-70 flex flex-row justify-start items-center">
       <div className="flex-1">
         <Link to="/">
           <img

diff --git a/front/src/pages/PlugIn/UsrOnline.tsx b/front/src/pages/PlugIn/UsrOnline.tsx
@@ -16,15 +16,10 @@ const UsrOnline = () => {
   };
 
   return (
-    <div className="h-full min-w-[1366px] w-full flex justify-start mt-[100px] flex-col mb-[100px]">
+    <div className="h-full min-w-[1366px] w-full flex justify-center items-center mt-[100px] flex-col mb-[100px]">
       {openModal && <Modal onOpenModal={onModalAlert} />}
 
-      <div className="flex items-start justify-start">
-        <p className="h-auto text-5xl font-bold text-black font-main ml-[118px]">
-          플러그인
-        </p>
-      </div>
-      <div className="h-full flex flex-col items-start justify-start md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
+      <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
@@ -77,7 +72,7 @@ const UsrOnline = () => {
               카카오톡에서 HandTalker로 <br />
               번역한 메시지를 전송해보세요
             </p>
-            <button className="w-[230px] h-[50px] mt-[20px] text-[#381c1e] font-main text-xl border border-[#381c1e] rounded-xl hover:bg-[#FFE702] hover:border-[#FFE702] hover:text-[#381c1e] hover:drop-shadow-xl transition-colors duration-200">
+            <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>

diff --git a/front/src/pages/TranslatePage/Input.tsx b/front/src/pages/TranslatePage/Input.tsx
@@ -153,7 +153,7 @@ const Input = () => {
 const styles = {
   container: css`
     position: relative;
-    width: 500px;
+    width: 31.25rem;
     height: auto;
     overflow: hidden;
     display: flex;
@@ -164,24 +164,10 @@ const styles = {
   `,
   canvas: css`
     position: absolute;
-    width: 500px;
-    height: 600px;
+    width: 31.25rem;
+    height: 37.5rem;
     background-color: #fff;
   `,
-  buttonContainer: css`
-    position: absolute;
-    top: 20px;
-    left: 20px;
-  `,
-  button: css`
-    color: #fff;
-    background-color: #0082cf;
-    font-size: 1rem;
-    border: none;
-    border-radius: 5px;
-    padding: 10px 10px;
-    cursor: pointer;
-  `,
 };
 
 export default Input;
diff --git a/front/src/pages/TranslatePage/Translate.tsx b/front/src/pages/TranslatePage/Translate.tsx
@@ -96,15 +96,15 @@ const Translate = () => {
   });
 
   return (
-    <div className="w-full h-full flex mt-[-60px] flex-col items-center justify-center md:scale-75 xl:scale-[85%] 2xl:scale-90 3xl:scale-100">
+    <div className="flex flex-col items-center justify-center w-full h-full mx-auto mt-14 lg:scale-90 xl:scale-100">
       {loading ? (
-        <div className="w-[200px] h-[50px] scale-125 items-end justify-end ml-[878px]">
+        <div className="w-48 h-12 scale-125 items-end justify-end ml-[56rem]">
           <div className="relative mt-[20px] w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md cursor-default sm:text-sm">
             loading...
           </div>
         </div>
       ) : (
-        <div className="w-[200px] h-[50px] scale-125 items-end justify-end ml-[878px]">
+        <div className="w-48 h-12 scale-125 items-end justify-end ml-[56rem]">
           <Listbox value={selectedItem} onChange={setSelectedItem}>
             <div className="mt-5">
               <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">
@@ -159,7 +159,7 @@ const Translate = () => {
         {translate ? (
           <Input />
         ) : (
-          <div className="w-[500px] h-[600px] ml-[0px] mt-[30px] flex flex-col justify-center items-center bg-gray-200 border-none rounded-xl">
+          <div className="flex flex-col items-center justify-center px-12 py-24 mt-8 bg-gray-200 border-none rounded-xl">
             <p className="text-[400px] text-gray-300">
               <BsPersonFill />
             </p>
@@ -169,11 +169,12 @@ const Translate = () => {
           <FaArrowRightLong />
         </p>
         {translate ? (
-          <div className="flex flex-col ml-[30px] mt-[30px] w-[500px] h-[600px] bg-white rounded-xl border border-gray-200 shadow-md">
-            <p className="text-4xl text-black font-main p-9">{text}</p>
+          <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">
+            <p className="w-[31.25rem] h-[31.25rem] break-all text-4xl text-black font-main p-9">
+              {text}
+            </p>
             <div
-              className={`flex flex-row items-center justify-center h-[50px] ${
-                text === "" ? "mt-[460px]" : "mt-[420px]"
+              className={`flex flex-row items-center justify-center h-[50px] mt-[35px]
               }`}
             >
               <button
@@ -205,7 +206,7 @@ const Translate = () => {
           </div>
         ) : (
           <div>
-            <div className="p-9 ml-[40px] mt-[30px] w-[500px] h-[600px] bg-white rounded-xl border border-gray-200 shadow-md">
+            <div className="p-9 ml-[40px] mt-[30px] 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/TranslatePage.tsx b/front/src/pages/TranslatePage/TranslatePage.tsx
@@ -4,11 +4,8 @@ import Translate from "./Translate";
 
 const TranslatePage = () => {
   return (
-    <div className="min-w-[1366px] w-full h-[100vh] flex flex-col">
+    <div className="w-full h-[100vh] flex flex-col">
       <Header />
-      <p className="ml-[118px] mt-[100px] pb-[20px] text-5xl font-bold text-black font-main">
-        번역하기
-      </p>
       <Translate />
       <Footer />
     </div>

diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -21,9 +21,6 @@ module.exports = {
       dropShadow: {
         xl: "0px 0px 4px rgba(0, 0, 0, 0.35)",
       },
-      screens: {
-        "3xl": "1600px",
-      },
       variants: {
         borderColor: ["responsive", "hover", "focus", "focus-within"],
       },