Merge pull request #82 from SeoJaeWan/develop

Deploy

Author: SeoJaeWan

src/components/atoms/admin/listOption/index.tsx

@@ -3,11 +3,12 @@ import { color } from "@/style/theme";
 import ListOptionStyle from "./listOption.style";
 import { useEffect, useState } from "react";
 import { TiLink, TiArrowShuffle, TiArrowLoop } from "react-icons/ti";
+import HoverInfo from "../../common/hoverInfo";
 
 const Img = {
-  link: { Image: TiLink, size: 22 },
-  loop: { Image: TiArrowLoop, size: 20 },
-  shuffle: { Image: TiArrowShuffle, size: 20 },
+  link: { Image: TiLink, size: 22, label: "공유" },
+  loop: { Image: TiArrowLoop, size: 20, label: "반복 재생" },
+  shuffle: { Image: TiArrowShuffle, size: 20, label: "랜덤 셔플" },
 };
 
 interface ListOptionProps {
@@ -34,9 +35,11 @@ const ListOption = (props: ListOptionProps) => {
 
   return (
     <ListOptionStyle.Container
+      className="tooltip"
       $active={!isActive || active}
       onClick={handleClick}
     >
+      <HoverInfo>{Icon.label}</HoverInfo>
       <Icon.Image size={Icon.size} color={color.white} />
     </ListOptionStyle.Container>
   );

src/components/atoms/common/hoverInfo/hoverInfo.style.ts

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+interface ContainerProps {
+  $leftTooltip?: boolean;
+}
+
+const Container = styled.span<ContainerProps>`
+  position: absolute;
+  top: calc(100% + 5px);
+  ${(props) => (props.$leftTooltip ? "left" : "right")}: 0;
+
+  display: inline-block;
+
+  width: 60px;
+  padding: 5px;
+
+  background-color: ${(props) => props.theme.color.black};
+  border-radius: 5px;
+
+  color: ${(props) => props.theme.color.white};
+
+  visibility: hidden;
+  opacity: 0;
+
+  transition: all 0.5s;
+`;
+
+const HoverInfoStyle = {
+  Container,
+};
+
+export default HoverInfoStyle;

src/components/atoms/common/hoverInfo/index.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from "react";
+import HoverInfoStyle from "./hoverInfo.style";
+
+interface HoverInfoProps extends PropsWithChildren {
+  leftTooltip?: boolean;
+}
+
+const HoverInfo = (props: HoverInfoProps) => {
+  const { children, leftTooltip } = props;
+
+  return (
+    <HoverInfoStyle.Container
+      $leftTooltip={leftTooltip}
+      className="tooltip-info"
+    >
+      {children}
+    </HoverInfoStyle.Container>
+  );
+};
+
+export default HoverInfo;

src/components/atoms/common/trackController/index.tsx

@@ -4,8 +4,14 @@ import useTrackManager from "@/store/trackManager";
 import TrackControllerStyle from "./trackController.style";
 import { color } from "@/style/theme";
 import { useYoutube } from "@/hooks/useYoutube";
+import HoverInfo from "../hoverInfo";
 
-const TrackController = () => {
+interface TrackControllerProps {
+  leftTooltip?: boolean;
+}
+
+const TrackController = (props: TrackControllerProps) => {
+  const { leftTooltip } = props;
   const { isList, updateList } = useTrackManager();
   const { list } = useYoutube();
 
@@ -14,11 +20,18 @@ const TrackController = () => {
   };
 
   return (
-    <TrackControllerStyle.Container onClick={handleUpdateList}>
+    <TrackControllerStyle.Container
+      className="tooltip"
+      onClick={handleUpdateList}
+    >
+      <HoverInfo leftTooltip={leftTooltip}>
+        {isList ? "노래 추가" : "재생 목록"}
+      </HoverInfo>
+
       {isList ? (
-        <FaListUl color={color.white} />
-      ) : (
         <IoAddOutline color={color.white} size={20} />
+      ) : (
+        <FaListUl color={color.white} />
       )}
     </TrackControllerStyle.Container>
   );

src/components/molecules/admin/controller/controller.style.ts

@@ -55,6 +55,7 @@ const MusicTitle = styled.h1`
 
   @media (max-width: ${(props) => props.theme.media.mobile}) {
     font-size: ${(props) => props.theme.font(24)};
+    height: 29px;
   }
 `;
 

src/components/molecules/admin/controller/index.tsx

@@ -45,7 +45,7 @@ const Controller = () => {
   return (
     <ControllerStyle.Container>
       <ControllerStyle.TopController>
-        <TrackController />
+        <TrackController leftTooltip />
 
         <ControllerStyle.PlayingBox>
           <ListOption type="link" onClick={handleCopyLink} />

src/components/molecules/client/controller/controller.style.ts

@@ -24,6 +24,11 @@ const Title = styled.h1`
   font-weight: 600;
 
   color: ${(props) => props.theme.color.white};
+
+  @media (max-width: ${(props) => props.theme.media.mobile}) {
+    font-size: ${(props) => props.theme.font(24)};
+    height: 29px;
+  }
 `;
 
 const ControllerStyle = {

src/hooks/useYoutube/index.tsx

@@ -145,7 +145,9 @@ const YoutubeProvider = (props: PropsWithChildren) => {
   };
 
   const updateVolume = (vol: number) => {
-    player.current!.setVolume(vol);
+    if (player.current) {
+      player.current.setVolume(vol);
+    }
     volume.current = vol;
   };
 

src/style/global/index.ts

@@ -55,6 +55,15 @@ const Global = styled.createGlobalStyle`
   #player {
     display: none;
   }
+
+  .tooltip {
+    position: relative;
+
+    &:hover .tooltip-info {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 `;
 
 export default Global;