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

feat: mediapipe hands -> holistic
DEVOCEAN-YOUNG-404 · Oct 31, 2023 · 15ea187 · 15ea187
2 parents 67b300b + 723c472
commit 15ea187
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 91 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -9,6 +9,7 @@
     "@mediapipe/camera_utils": "^0.3.1675466862",
     "@mediapipe/drawing_utils": "^0.3.1675466124",
     "@mediapipe/hands": "^0.4.1675469240",
+    "@mediapipe/holistic": "^0.5.1675471629",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/front/src/pages/MainPage/Page2.tsx b/front/src/pages/MainPage/Page2.tsx
@@ -1,20 +1,17 @@
 import main2 from "../../assets/images/main2.webp";
 import logo from "../../assets/icons/logo.svg";
-import LazyLoad from "react-lazy-load";
 
 const Page2 = () => {
   return (
     <div
       id="section2"
       className="w-full h-[100vh] flex flex-row items-center justify-start md:space-x-20 px-10 md:pr-20"
     >
-      <LazyLoad>
-        <img
-          src={main2}
-          alt="main2"
-          className="hidden md:block w-auto max-w-full md:h-[23rem] lg:h-[27rem] xl:h-[30rem]"
-        />
-      </LazyLoad>
+      <img
+        src={main2}
+        alt="main2"
+        className="hidden md:block w-auto max-w-full md:h-[23rem] lg:h-[27rem] xl:h-[30rem]"
+      />
 
       <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">

diff --git a/front/src/pages/MainPage/Page4.tsx b/front/src/pages/MainPage/Page4.tsx
@@ -20,29 +20,20 @@ const Page4 = () => {
         </p>
       </div>
       <div className="flex flex-row items-center justify-center mt-[60px] space-x-6 md:space-x-[4rem]">
-        <LazyLoad>
-          <img
-            src={discord}
-            alt="discord"
-            className="w-auto h-[5rem] md:h-[10rem]"
-          />
-        </LazyLoad>
-        <LazyLoad>
+        <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={slack}
-            alt="slack"
+            src={kakaotalk}
+            alt="kakaotalk"
             className="w-auto h-[5rem] md:h-[10rem]"
           />
-        </LazyLoad>
-
-        <div className="rounded-full">
-          <LazyLoad>
-            <img
-              src={kakaotalk}
-              alt="kakaotalk"
-              className="w-auto h-[5rem] md:h-[10rem]"
-            />
-          </LazyLoad>
         </div>
       </div>
     </div>

diff --git a/front/src/pages/MainPage/Page5.tsx b/front/src/pages/MainPage/Page5.tsx
@@ -31,9 +31,7 @@ const Page5 = () => {
         <div className="flex flex-row items-center justify-center">
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <LazyLoad>
-                <img src={sujin} alt="sujin" className="w-full" />
-              </LazyLoad>
+              <img src={sujin} alt="sujin" className="w-full" />
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">
@@ -55,9 +53,7 @@ const Page5 = () => {
           </div>
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <LazyLoad>
-                <img src={bokyeong} alt="bokyeong" className="w-full" />
-              </LazyLoad>
+              <img src={bokyeong} alt="bokyeong" className="w-full" />
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">
@@ -81,9 +77,7 @@ const Page5 = () => {
         <div className="flex flex-row items-center justify-center mt-[10px] md:mt-[50px]">
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <LazyLoad>
-                <img src={seungjun} alt="seungjun" className="w-full" />
-              </LazyLoad>
+              <img src={seungjun} alt="seungjun" className="w-full" />
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">
@@ -105,9 +99,7 @@ const Page5 = () => {
           </div>
           <div className="flex flex-col md:flex-row items-center justify-start mt-[50px] md:ml-[10px] w-[200px] md:w-[400px]">
             <div className="w-[80px] h-[80px] md:w-[180px] md:h-[180px] rounded-full overflow-hidden">
-              <LazyLoad>
-                <img src={hyeonbin} alt="hyeonbin" className="w-full" />
-              </LazyLoad>
+              <img src={hyeonbin} alt="hyeonbin" className="w-full" />
             </div>
             <div className="flex flex-col items-center md:items-start justify-center md:ml-[20px]">
               <p className="mt-2 text-2xl font-bold text-black md:m-0 md:text-4xl font-main">

diff --git a/front/src/pages/TranslatePage/config/ConfigModal.tsx b/front/src/pages/TranslatePage/config/ConfigModal.tsx
@@ -240,13 +240,13 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
               </div>
               {selectedItem!.name === "Discord" ? (
                 loading ? (
-                  <div className="w-48 h-12 mt-8 md:mt-14">
+                  <div className="w-48 h-12 mt-8 md:mt-10">
                     <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-8 md:mt-14">
+                  <div className="w-48 h-12 mt-8 md:mt-10">
                     <Listbox
                       value={selectedChannel}
                       onChange={setSelectedChannel}
@@ -269,7 +269,7 @@ const ConfigModal = ({ onOpenModal }: ModalProps) => {
                           leaveFrom="opacity-100"
                           leaveTo="opacity-0"
                         >
-                          <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                          <Listbox.Options className="absolute w-48 py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                             {channels.map((item, itemIdx) => (
                               <Listbox.Option
                                 key={itemIdx}