Feature/sticky player

__tests__/mockData/comment.ts

@@ -48,6 +48,60 @@ export const playerCommentsMockData: MockDataType = {
         ],
         time: 7,
       },
+      {
+        id: 'test4',
+        kind: COMMENT_TYPE.ACTION_DIRECTOR,
+        contents: [
+          '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의',
+          '가슴이 따뜻한 작고 힘있다.',
+        ],
+        time: 9,
+      },
+      {
+        id: 'test5',
+        kind: COMMENT_TYPE.ACTION_DIRECTOR,
+        contents: [
+          '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의',
+          '가슴이 따뜻한 작고 힘있다.',
+        ],
+        time: 11,
+      },
+      {
+        id: 'test6',
+        kind: COMMENT_TYPE.ACTION_DIRECTOR,
+        contents: [
+          '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의',
+          '가슴이 따뜻한 작고 힘있다.',
+        ],
+        time: 12,
+      },
+      {
+        id: 'test7',
+        kind: COMMENT_TYPE.ACTION_DIRECTOR,
+        contents: [
+          '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의',
+          '가슴이 따뜻한 작고 힘있다.',
+        ],
+        time: 13,
+      },
+      {
+        id: 'test8',
+        kind: COMMENT_TYPE.ACTION_DIRECTOR,
+        contents: [
+          '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의',
+          '가슴이 따뜻한 작고 힘있다.',
+        ],
+        time: 14,
+      },
+      {
+        id: 'test9',
+        kind: COMMENT_TYPE.ACTION_DIRECTOR,
+        contents: [
+          '방황하였으며, 우리의 얼마나 심장은 불어 청춘의 이상의 투명하되 것이다. 가슴이 따뜻한 작고 힘있다. 얼음이 무엇을 천고에 쓸쓸하랴? 같으며,설레는 거친 새 장식하는 희망의 얼음과 것 같으며, 설레는 거친 새장식하는 희망의 얼음과 것 같으며, 설레는 거친 새 장식하는 희망의',
+          '가슴이 따뜻한 작고 힘있다.',
+        ],
+        time: 15,
+      },
     ],
   },
 }

components/common/HideWrapper.tsx

@@ -0,0 +1,43 @@
+import { keyframes } from '@emotion/core'
+import styled from '@emotion/styled'
+import { useWheel } from 'hooks/useWheel'
+import React from 'react'
+
+const hide = keyframes`
+  0% {
+    max-height: 500px;
+  }
+
+  100% {
+    max-height: 0;
+  }
+`
+
+const show = keyframes`
+  0% {
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+  }
+`
+
+const Container = styled<'div', {isVisible: boolean}>('div')`
+  animation: ${({ isVisible }) => isVisible ? show : hide} 0.7s ease-in-out forwards 1;
+  overflow: hidden;
+`
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const HideWrapper = ({ children }: Props) => {
+  const { isVisible } = useWheel()
+
+  return (
+    <Container isVisible={isVisible}>
+      { children }
+    </Container>
+  )
+}

components/player/PlayerButton.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { FlexWrapper } from 'components/common/FlexWrapper'
+import { HideWrapper } from 'components/common/HideWrapper'
 import { RootState } from 'features'
 import { playerActions, playerSelectors, PlayerTime } from 'features/playerSlice'
 import React from 'react'
@@ -39,17 +40,19 @@ export const PlayerButton = () => {
   const { toggle, requestUpdateCurrentTime } = playerActions
 
   return (
-    <FlexWrapper>
-      <BackwardButton
-        onClick={() => dispatch(requestUpdateCurrentTime(current-5))}
-      />
-      <PlayButton
-        isPlaying={isPlaying}
-        onClick={() => dispatch(toggle()) }
-      />
-      <ForwardButton
-        onClick={() => dispatch(requestUpdateCurrentTime(current+5))}
-      />
-    </FlexWrapper>
+    <HideWrapper>
+      <FlexWrapper>
+        <BackwardButton
+          onClick={() => dispatch(requestUpdateCurrentTime(current-5))}
+        />
+        <PlayButton
+          isPlaying={isPlaying}
+          onClick={() => dispatch(toggle()) }
+        />
+        <ForwardButton
+          onClick={() => dispatch(requestUpdateCurrentTime(current+5))}
+        />
+      </FlexWrapper>
+    </HideWrapper>
   )
 }

components/player/PlayerController.tsx

@@ -9,11 +9,13 @@ interface Props {
 }
 
 const PlayerTop = styled.div`
-  position: relative;
+  position: sticky;
+  top: 0;
   margin-bottom: 16px;
   padding: 24px 0;
   background: rgba(0, 0, 0, 0.7);
   border-radius: 0px 0px 25px 25px;
+  z-index: 10;
 `
 
 const CloseButton = styled.span`

components/player/index.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { FetchStatusCode } from 'api'
+import { HideWrapper } from 'components/common/HideWrapper'
 import { RootState } from 'features'
 import {
   Comment,
@@ -8,7 +9,7 @@ import {
   playerActions,
 } from 'features/playerSlice'
 import { useFetchWithStore } from 'hooks/useFetch'
-import React from 'react'
+import React  from 'react'
 import { useSelector } from 'react-redux'
 import { renderByFetchState } from 'utils/renderUtils'
 
@@ -17,14 +18,16 @@ import { PlayerController } from './PlayerController'
 
 interface Props {}
 
+const COMMENT_WRAPPER = 'commentWrapper'
+
 const PlayerTitle = styled.h2`
   width: 100%;
+  overflow: hidden;
   font-style: normal;
   font-weight: bold;
   font-size: 20px;
   line-height: 29px;
   text-align: center;
-
   color: #ffffff;
 `
 
@@ -45,22 +48,26 @@ export const Player: React.FC<Props> = () => {
     return (
       <>
         <PlayerController>
-          <PlayerTitle>{title}</PlayerTitle>
+          <HideWrapper>
+            <PlayerTitle>{title}</PlayerTitle>
+          </HideWrapper>
         </PlayerController>
-        {
-          currentComment.map((comment: Comment) => {
-            const { kind, contents, time, id } = comment
+        <div id={COMMENT_WRAPPER}>
+          {
+            currentComment.map((comment: Comment) => {
+              const { kind, contents, time, id } = comment
 
-            return (
-              <Comments
-                key={id}
-                kind={kind}
-                contents={contents}
-                time={time}
-              />
-            )
-          })
-        }
+              return (
+                <Comments
+                  key={id}
+                  kind={kind}
+                  contents={contents}
+                  time={time}
+                />
+              )
+            })
+          }
+        </div>
       </>
     )
   }

hooks/useWheel.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from 'react'
+
+interface Params {
+  handleWheel: (params?: any) => void;
+}
+
+export const useWheel = () => {
+  const [isVisible, setIsVisible] = useState(true)
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (e.deltaY > 0 && isVisible) {
+        return setIsVisible(false)
+      }
+
+      if (e.deltaY < 0 && !isVisible) {
+        return setIsVisible(true)
+      }
+    },
+    [isVisible],
+  )
+
+  useEffect(() => {
+    window.addEventListener('wheel', handleWheel)
+
+    return (() => window.removeEventListener('wheel', handleWheel))
+  }, [handleWheel])
+
+  return { isVisible, setIsVisible }
+}