feat: 전체화면버튼 기능 수정

5초뒤가 아닌 화면 터치시 다시 나타나도록 변경 <버튼도 사라지게
boostcampwm2023 · Dec 12, 2023 · b086fa2 · b086fa2
1 parent 6066f14
commit b086fa2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/front/src/components/Prev/Prev.tsx b/front/src/components/Prev/Prev.tsx
@@ -21,6 +21,7 @@ const Prev = (props: PrevProps) => {
 
   return (props.set === 'Canvas' && view) || props.set !== 'Canvas' ? (
     <StyledPrev
+      id="prevBtn"
       src={'/icons/prev.svg'}
       onClick={() => {
         setMessage('');

diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx
@@ -65,6 +65,15 @@ const ToastMsg = styled.div`
   padding: 1rem;
 `;
 
+const EmptyDiv = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: all;
+`;
+
 const screenTime = (
   setScreen: React.Dispatch<React.SetStateAction<boolean>>,
   refs: Array<React.RefObject<HTMLDivElement>>
@@ -83,19 +92,22 @@ const screenTime = (
   const music = document.getElementById('musicController');
   music ? (music.style.display = 'none') : null;
 
+  const prev = document.getElementById('prevBtn');
+  prev ? (prev.style.display = 'none') : null;
+
   setTimeout(() => {
     setScreen(true);
   }, 1000);
+};
 
-  setTimeout(() => {
-    setScreen(false);
-    music ? (music.style.display = 'block') : null;
-    refs.forEach(ref => {
-      if (ref.current) {
-        ref.current.style.setProperty('animation', 'none');
-      }
-    });
-  }, 5000);
+const uiOn = (setScreen: React.Dispatch<React.SetStateAction<boolean>>) => {
+  const music = document.getElementById('musicController');
+  music ? (music.style.display = 'block') : null;
+
+  const prev = document.getElementById('prevBtn');
+  prev ? (prev.style.display = 'block') : null;
+
+  setScreen(false);
 };
 
 const MainButtonBox = (props: MainButtonBoxProps) => {
@@ -213,7 +225,6 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
               ])
             }
           />
-
           <StyledShareLink
             ref={shareLinkRef}
             src={'/icons/shareLink.svg'}
@@ -230,7 +241,9 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
             </ToastMsg>
           ) : null}
         </>
-      ) : null}
+      ) : (
+        <EmptyDiv onClick={() => uiOn(setScreen)} />
+      )}
     </>
   );
 };