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

Seungjun

front/package.json

@@ -35,7 +35,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

front/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#ffffff" />
     <meta
       name="description"
       content="Web site created using create-react-app"

front/src/components/Header/Header.tsx

@@ -1,4 +1,5 @@
-import logo from "../../assets/icons/logo.png";
+import logo from "../../assets/icons/logo.svg";
+import menu from "../../assets/icons/menu.svg";
 import HeaderButton from "./HeaderButton";
 import { useLocation } from "react-router-dom";
 import { useRecoilState } from "recoil";
@@ -33,44 +34,50 @@ const Header = () => {
   };
 
   return (
-    <div className="bg-white bg-opacity-70 top-0 fixed z-10 w-full h-[4.5rem] border-b border-gray border-opacity-70 flex flex-row justify-between items-center">
-      <div className="ml-[10rem]">
-        <Link to="/">
-          <img src={logo} alt="logo" className="w-[11.7rem] h-6" />
-        </Link>
+    <div>
+      <div className="px-6 flex lg:hidden bg-white bg-opacity-70 top-0 fixed z-10 w-full h-[3.1rem] border-b border-gray border-opacity-70 flex-row justify-between items-center">
+        <img src={logo} alt="logo" className="inline w-auto h-5" />
+        <img src={menu} alt="menu" className="inline" />
       </div>
+      <div className="hidden lg:flex bg-white bg-opacity-70 top-0 fixed z-10 w-full h-[4.5rem] border-b border-gray border-opacity-70 flex-row justify-between items-center">
+        <div className="ml-[10rem]">
+          <Link to="/">
+            <img src={logo} alt="logo" className="w-auto h-6" />
+          </Link>
+        </div>
 
-      <div className="flex flex-row items-center justify-center h-full mr-[10vw]">
-        <HeaderButton
-          isClicked={path === "/" ? true : false}
-          name="메인"
-          link="/"
-        />
-        <HeaderButton
-          isClicked={path === "/translate" ? true : false}
-          name="번역"
-          link="/translate"
-        />
-        <HeaderButton
-          isClicked={path === "/plugin" ? true : false}
-          name="플러그인"
-          link="/plugin"
-        />
-        {auth ? (
-          <div
-            className={`w-20
-       h-full font-main text-base text-black flex flex-col justify-center items-center cursor-pointer`}
-            onClick={logoutHandler}
-          >
-            로그아웃
-          </div>
-        ) : (
+        <div className="flex flex-row items-center justify-center h-full mr-[10vw]">
+          <HeaderButton
+            isClicked={path === "/" ? true : false}
+            name="메인"
+            link="/"
+          />
           <HeaderButton
-            isClicked={path === "/login" ? true : false}
-            name="로그인"
-            link="/login"
+            isClicked={path === "/translate" ? true : false}
+            name="번역"
+            link="/translate"
           />
-        )}
+          <HeaderButton
+            isClicked={path === "/plugin" ? true : false}
+            name="플러그인"
+            link="/plugin"
+          />
+          {auth ? (
+            <div
+              className={`w-20
+       h-full font-main text-base text-black flex flex-col justify-center items-center cursor-pointer`}
+              onClick={logoutHandler}
+            >
+              로그아웃
+            </div>
+          ) : (
+            <HeaderButton
+              isClicked={path === "/login" ? true : false}
+              name="로그인"
+              link="/login"
+            />
+          )}
+        </div>
       </div>
     </div>
   );

front/src/pages/MainPage/MainPage.tsx

@@ -18,7 +18,7 @@ let options = {
   arrowNavigation: true, // use arrow keys
   className: "SectionContainer", // the class name for the section container
   delay: 1000, // the scroll animation speed
-  navigation: true, // use dots navigatio
+  navigation: false, // use dots navigation
   scrollBar: false, // use the browser default scrollbar
   sectionClassName: "Section", // the section class name
   sectionPaddingTop: "0", // the section top padding

front/src/pages/MainPage/Page1.tsx

@@ -6,7 +6,7 @@ const Page1 = () => {
   return (
     <div
       id="section1"
-      className="h-[100vh] flex flex-row items-center justify-center w-full"
+      className="h-[100vh] flex flex-col md:flex-row items-center justify-center w-full"
     >
       <div className="flex flex-col items-start justify-start mt-16">
         <p className="font-bold text-black text-[2rem] mb-[10px] font-main">
@@ -26,7 +26,7 @@ const Page1 = () => {
       <img
         src={main}
         alt="main"
-        className="block w-auto md:h-[17rem] lg:h-[20rem] 2xl:h-[25rem] ml-[120px] mt-[60px]"
+        className="hidden md:block w-auto md:h-[17rem] lg:h-[20rem] 2xl:h-[25rem] ml-[120px] mt-[60px]"
       />
     </div>
   );

front/src/pages/MainPage/Page2.tsx

@@ -5,26 +5,29 @@ const Page2 = () => {
   return (
     <div
       id="section2"
-      className="w-full h-[100vh] flex flex-row items-center justify-start space-x-20 pr-20"
+      className="w-full h-[100vh] flex flex-row items-center justify-start md:space-x-20 px-10 md:pr-20"
     >
       <img
         src={main2}
         alt="main2"
-        className="w-auto max-w-full md:h-[23rem] lg:h-[27rem] xl:h-[30rem] block"
+        className="hidden md:block w-auto max-w-full md:h-[23rem] lg:h-[27rem] xl:h-[30rem]"
       />
-
-      <div className="min-w-[25rem] md:w-[28rem] lg:w-[35rem] xl:w-[43rem] flex flex-col">
+      <div className="md:min-w-[26rem] md:w-[28rem] lg:w-[35rem] xl:w-[43rem] flex flex-col">
         <div className="flex flex-row items-center justify-start">
-          <img src={logo} alt="logo" className="block w-auto h-[2rem]" />
-          <p className="text-4xl font-bold text-black font-main ml-[15px]">
+          <img
+            src={logo}
+            alt="logo"
+            className="block w-auto h-[1.6rem] md:h-[2rem]"
+          />
+          <p className="text-3xl md:text-4xl font-bold text-black font-main ml-[15px]">
             소개
           </p>
         </div>
         <p className="text-base text-gray-400 font-main mt-[20px] leading-8">
           HandTalker는 인공지능 기반의 혁신적인 기술을 기반으로 수어를 신속하고
           정확하게 인식하여 한국어로 번역해주는 탁월한 서비스입니다.
         </p>
-        <p className="text-base text-gray-400 font-main mt-[15px] leading-8">
+        <p className="hidden md:block text-base text-gray-400 font-main mt-[15px] leading-8">
           일상 생활, 회사 업무 뿐만 아니라 가족 구성원 내에 농인 자녀를 두고
           계신 가정에서 소통의 어려움을 해결하기 위해 개발되었으며, 그 뿐만
           아니라 후천적으로 농인이 된 분들을 위한 실습 교육 자료로도 활용되고

front/src/pages/MainPage/Page3.tsx

@@ -11,53 +11,59 @@ const Page3 = () => {
       <p className="text-4xl font-bold text-black font-main">
         서비스 이용 대상
       </p>
-      <p className="text-lg text-gray-600 font-main mt-[20px]">
+      <p className="text-lg text-gray-600 font-main mt-[20px] px-10 text-center">
         HandTalker는 많은 곳에서 사용할 수 있는 확장성 높은 서비스입니다.
       </p>
-      <div className="flex flex-row items-center justify-center mt-[40px]">
-        <div className="w-[21.25rem] h-auto mr-[30px] border-b-2 border-b-icon border border-gray-100 shadow-lg flex flex-col items-center justify-start">
-          <img
-            src={school}
-            alt="school"
-            className="w-auto h-24 mt-[50px] mb-[20px]"
-          />
-          <p className="text-2xl font-bold text-black font-main mb-[10px]">
-            학교에서
-          </p>
-          <p className="w-64 text-base text-center text-gray-400 font-main mb-[35px]">
+      <div className="flex flex-col md:flex-row items-center justify-center mt-[40px] space-y-6 md:space-y-0">
+        <div className="w-[21.25rem] h-auto md:mr-[30px] border-b-2 border-b-icon border border-gray-100 shadow-lg flex flex-col items-center justify-start">
+          <div className="flex flex-row items-center justify-center py-[0.7rem] md:pt-[3.125rem] md:flex-col">
+            <img
+              src={school}
+              alt="school"
+              className="w-auto h-[3rem] md:h-24 md:mb-[20px] mr-[0.5rem] md:m-0"
+            />
+            <p className="text-2xl font-bold text-black font-main md:mb-[10px]">
+              학교에서
+            </p>
+          </div>
+          <p className="hidden md:block w-64 text-base text-center text-gray-400 font-main mb-[35px]">
             농인 학생들과 교사 및 학생들 간의 소통을 돕습니다. 이를 통해 농인
             학생들의 학습 능력을 향상시키고 평등한 교육 기회를 제공할 수
             있습니다.
           </p>
         </div>
-        <div className="w-[21.25rem] h-auto mr-[30px] border-b-2 border-b-icon border border-gray-100 shadow-lg flex flex-col items-center justify-start">
-          <img
-            src={hospital}
-            alt="hospital"
-            className="w-auto h-24 mt-[50px] mb-[20px]"
-          />
-          <p className="text-2xl font-bold text-black font-main mb-[10px]">
-            병원에서
-          </p>
-          <p className="w-64 text-base text-center text-gray-400 font-main mb-[35px]">
-            농인 환자들이 의사와의 상담이나 의료 절차에 참여할 때 HandTalker를
-            활용하여 의사 결정에 적극적으로 참여할 수 있도록 지원합니다.
-          </p>
+        <div className="w-[21.25rem] h-auto md:mr-[30px] border-b-2 border-b-icon border border-gray-100 shadow-lg flex flex-col items-center justify-start">
+          <div className="flex flex-row items-center justify-center py-[0.7rem] md:pt-[3.125rem] md:flex-col">
+            <img
+              src={hospital}
+              alt="hospital"
+              className="w-auto h-[3rem] md:h-24 md:mb-[20px] mr-2 md:m-0"
+            />
+            <p className="text-2xl font-bold text-black font-main md:mb-[10px]">
+              병원에서
+            </p>
+            <p className="hidden md:block w-64 text-base text-center text-gray-400 font-main mb-[35px]">
+              농인 환자들이 의사와의 상담이나 의료 절차에 참여할 때 HandTalker를
+              활용하여 의사 결정에 적극적으로 참여할 수 있도록 지원합니다.
+            </p>
+          </div>
         </div>
-        <div className="w-[21.25rem] h-auto mr-[30px] border-b-2 border-b-icon border border-gray-100 shadow-lg flex flex-col items-center justify-start">
-          <img
-            src={work}
-            alt="work"
-            className="w-auto h-24 mt-[50px] mb-[20px]"
-          />
-          <p className="text-2xl font-bold text-black font-main mb-[10px]">
-            회사에서
-          </p>
-          <p className="w-64 text-base text-center text-gray-400 font-main mb-[35px]">
-            다른 직원들과의 의사소통을 원할하게 하도록 돕습니다. 이를 통해 농인
-            직원들은 조직 내에서 더욱 적극적으로 참여하고 업무 기회를 놓치지
-            않을 수 있습니다.
-          </p>
+        <div className="w-[21.25rem] h-auto md:mr-[30px] border-b-2 border-b-icon border border-gray-100 shadow-lg flex flex-col items-center justify-start">
+          <div className="flex flex-row items-center justify-center py-[0.7rem] md:pt-[3.125rem] md:flex-col">
+            <img
+              src={work}
+              alt="work"
+              className="w-auto h-[3rem] md:h-24 md:mb-[20px] mr-2 md:m-0"
+            />
+            <p className="text-2xl font-bold text-black font-main md:mb-[10px]">
+              회사에서
+            </p>
+            <p className="hidden md:block w-64 text-base text-center text-gray-400 font-main mb-[35px]">
+              다른 직원들과의 의사소통을 원할하게 하도록 돕습니다. 이를 통해
+              농인 직원들은 조직 내에서 더욱 적극적으로 참여하고 업무 기회를
+              놓치지 않을 수 있습니다.
+            </p>
+          </div>
         </div>
       </div>
     </div>

front/src/pages/MainPage/Page4.tsx

@@ -9,20 +9,28 @@ const Page4 = () => {
       id="section4"
       className="h-[100vh] flex flex-col items-center justify-center"
     >
-      <p className="text-4xl font-bold text-black font-main mb-[20px] text-center">
+      <p className="text-2xl md:text-4xl font-bold text-black font-main mb-[20px] text-center">
         다른 서비스에서도 쉽고 빠르게
       </p>
       <div className="flex flex-row items-center justify-center text-center">
-        <img src={logo} alt="logo" className="w-[260px]" />
-        <p className="text-4xl font-bold text-black font-main ml-[10px]">
+        <img src={logo} alt="logo" className="w-auto h-[1rem] md:h-[2rem]" />
+        <p className="text-2xl md:text-4xl font-bold text-black font-main ml-[10px]">
           를 이용해보세요
         </p>
       </div>
-      <div className="flex flex-row items-center justify-center mt-[60px]">
-        <img src={discord} alt="discord" className="w-[150px] mr-[50px]" />
-        <img src={slack} alt="slack" className="w-[150px] mr-[50px]" />
-        <div className="w-[150px] h-[150px] rounded-full">
-          <img src={kakaotalk} alt="kakaotalk" />
+      <div className="flex flex-row items-center justify-center mt-[60px] space-x-6 md:space-x-[4rem]">
+        <img
+          src={discord}
+          alt="discord"
+          className="w-auto h-[5rem] md:h-[10rem]"
+        />
+        <img src={slack} alt="slack" className="w-auto h-[5rem] md:h-[10rem]" />
+        <div className="rounded-full">
+          <img
+            src={kakaotalk}
+            alt="kakaotalk"
+            className="w-auto h-[5rem] md:h-[10rem]"
+          />
         </div>
       </div>
     </div>