Merge branch 'main' into fix/#547

woowacourse-teams · Oct 27, 2023 · f3e1ba6 · f3e1ba6
2 parents 539670a + 82c638a
commit f3e1ba6
Show file tree

Hide file tree

Showing 28 changed files with 323 additions and 330 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
+    "shook-layout": "^0.0.3",
     "styled-components": "^6.0.4",
     "typescript": "^5.1.6"
   },

diff --git a/frontend/practice.js b/frontend/practice.js
@@ -0,0 +1 @@
+const a = new Date(); //?
diff --git a/frontend/src/features/killingParts/components/VideoBadges.tsx b/frontend/src/features/killingParts/components/VideoBadges.tsx
@@ -1,3 +1,4 @@
+import { Flex } from 'shook-layout';
 import styled, { css, keyframes } from 'styled-components';
 import playIcon from '@/assets/icon/fill-play.svg';
 import pauseIcon from '@/assets/icon/pause.svg';
@@ -7,7 +8,6 @@ import removeIcon from '@/assets/icon/remove.svg';
 import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
 import usePin from '@/features/killingParts/hooks/usePin';
 import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
-import Flex from '@/shared/components/Flex/Flex';
 import { toMinSecText } from '@/shared/utils/convertTime';
 
 const VideoBadges = () => {
@@ -26,7 +26,7 @@ const VideoBadges = () => {
   const video = useVideoPlayerContext();
 
   const partStartTimeText = toMinSecText(partStartTime);
-  const isPaused = video.playerState === YT.PlayerState.PAUSED;
+  const isPaused = video.playerState === null || video.playerState === YT.PlayerState.PAUSED;
   const videoPlay = () => {
     if (isPlayingEntire) {
       video.play();
@@ -48,9 +48,9 @@ const VideoBadges = () => {
           <img src={playStreamIcon} style={{ marginRight: '4px' }} alt="" />
           {partStartTimeText}
         </StartBadge>
-        <Badge as="button" onClick={addPin} $isActive={!isPinListEmpty}>
+        <SavePinBadge as="button" onClick={addPin} $isActive={!isPinListEmpty}>
           <img src={pinIcon} alt="나만의 파트 임시 저장" />
-        </Badge>
+        </SavePinBadge>
         <Badge as="button" type="button" onClick={isPaused ? videoPlay : videoPause}>
           <img src={isPaused ? playIcon : pauseIcon} alt={'재생 혹은 정지'} />
         </Badge>
@@ -131,7 +131,7 @@ const slideFirstItem = keyframes`
   from {
     opacity: 0;
     transform: translateX(-30px);
-    
+
   }
   to {
     opacity: 1;
@@ -158,7 +158,6 @@ const PinBadge = styled(Badge)<{ $isActive?: boolean; $isNew?: boolean }>`
   color: black;
   white-space: nowrap;
 
-  opacity: ${({ $isActive }) => ($isActive ? 1 : 0.5)};
   background-color: ${({ theme: { color }, $isActive }) =>
     $isActive ? color.magenta700 : color.disabledBackground};
   border: none;
@@ -183,3 +182,12 @@ const DeleteBadge = styled(Badge)`
 
   border-radius: 50%;
 `;
+
+const SavePinBadge = styled(Badge)`
+  background-color: ${({ theme: { color } }) => color.disabled};
+  box-shadow: ${({ $isActive }) => ($isActive ? '0 0 0 1.5px inset white ' : 'none')};
+
+  &:active {
+    background-color: ${({ theme: { color } }) => color.disabledBackground};
+  }
+`;
diff --git a/frontend/src/features/killingParts/components/VideoController.tsx b/frontend/src/features/killingParts/components/VideoController.tsx
@@ -1,8 +1,8 @@
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
 import VideoBadges from '@/features/killingParts/components/VideoBadges';
 import VideoIntervalStepper from '@/features/killingParts/components/VideoIntervalStepper';
 import WaveScrubber from '@/features/killingParts/components/WaveScrubber';
-import Flex from '@/shared/components/Flex/Flex';
 
 const VideoController = () => {
   return (

diff --git a/frontend/src/features/killingParts/components/VideoIntervalStepper.tsx b/frontend/src/features/killingParts/components/VideoIntervalStepper.tsx
@@ -1,6 +1,6 @@
+import { Flex } from 'shook-layout';
 import { css, styled } from 'styled-components';
 import useCollectingPartContext from '@/features/killingParts/hooks/useCollectingPartContext';
-import Flex from '@/shared/components/Flex/Flex';
 
 const VideoIntervalStepper = () => {
   const { interval, increasePartInterval, decreasePartInterval } = useCollectingPartContext();

diff --git a/frontend/src/features/killingParts/components/WaveScrubber.tsx b/frontend/src/features/killingParts/components/WaveScrubber.tsx
@@ -1,7 +1,7 @@
+import { Flex } from 'shook-layout';
 import styled, { keyframes } from 'styled-components';
 import SoundWave from '@/features/killingParts/components/SoundWave';
 import useWave from '@/features/killingParts/hooks/useWave';
-import Flex from '@/shared/components/Flex/Flex';
 
 const WaveScrubber = () => {
   const {

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
@@ -1,8 +1,8 @@
+import { Flex } from 'shook-layout';
 import styled, { css } from 'styled-components';
 import cancelIcon from '@/assets/icon/cancel.svg';
 import backwardIcon from '@/assets/icon/left-arrow.svg';
 import searchIcon from '@/assets/icon/search.svg';
-import Flex from '@/shared/components/Flex/Flex';
 import useSearchBar from '../hooks/useSearchBar';
 import SearchPreviewSheet from './SearchPreviewSheet';
 

diff --git a/frontend/src/features/search/components/SearchPreviewSheet.tsx b/frontend/src/features/search/components/SearchPreviewSheet.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
 import Thumbnail from '@/features/songs/components/Thumbnail';
-import Flex from '@/shared/components/Flex/Flex';
 import ROUTE_PATH from '@/shared/constants/path';
 import type { SingerSearchPreview } from '../types/search.type';
 

diff --git a/frontend/src/features/singer/components/SingerBanner.tsx b/frontend/src/features/singer/components/SingerBanner.tsx
@@ -1,6 +1,6 @@
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
 import rightArrow from '@/assets/icon/right-long-arrow.svg';
-import Flex from '@/shared/components/Flex/Flex';
 import type { SingerDetail } from '@/features/singer/types/singer.type';
 
 interface SingerBannerProps

diff --git a/frontend/src/features/singer/components/SingerSongItem.tsx b/frontend/src/features/singer/components/SingerSongItem.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
-import Flex from '@/shared/components/Flex/Flex';
 import ROUTE_PATH from '@/shared/constants/path';
 import { toMinSecText } from '@/shared/utils/convertTime';
 import type { SingersSong } from '@/features/singer/types/singer.type';

diff --git a/frontend/src/features/singer/components/SingerSongList.tsx b/frontend/src/features/singer/components/SingerSongList.tsx
@@ -1,5 +1,5 @@
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
-import Flex from '@/shared/components/Flex/Flex';
 import SingerSongItem from './SingerSongItem';
 import type { SingersSong } from '../types/singer.type';
 

diff --git a/frontend/src/features/songs/components/CollectingPartProvider.tsx b/frontend/src/features/songs/components/CollectingPartProvider.tsx
@@ -59,7 +59,7 @@ export const CollectingPartProvider = ({
   };
 
   const toggleEntirePlaying = () => {
-    if (isPlayingEntire) {
+    if (isPlayingEntire || playerState === null) {
       seekTo(partStartTime);
     }
     setIsPlayingEntire(!isPlayingEntire);

diff --git a/frontend/src/features/songs/components/KillingPartInfo.tsx b/frontend/src/features/songs/components/KillingPartInfo.tsx
@@ -1,8 +1,8 @@
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 import link from '@/assets/icon/link.svg';
 import shook from '@/assets/icon/shook.svg';
 import people from '@/assets/icon/user-group.svg';
-import Flex from '@/shared/components/Flex';
 import useToastContext from '@/shared/components/Toast/hooks/useToastContext';
 import { toPlayingTimeText, secondsToMinSec } from '@/shared/utils/convertTime';
 import copyClipboard from '@/shared/utils/copyClipBoard';
@@ -29,7 +29,7 @@ const KillingPartInfo = ({ killingPart }: KillingPartInfoProps) => {
   const { minute: endMin, second: endSec } = secondsToMinSec(end);
 
   return (
-    <Wrapper>
+    <Flex $direction="column">
       <Container>
         <TimeWrapper>
           <Img src={shook} alt="" />
@@ -52,7 +52,7 @@ const KillingPartInfo = ({ killingPart }: KillingPartInfoProps) => {
           </ShareBox>
         </RestWrapper>
       </Container>
-    </Wrapper>
+    </Flex>
   );
 };
 
@@ -79,11 +79,6 @@ const TimeWrapper = styled.div`
   letter-spacing: 1px;
 `;
 
-const Wrapper = styled(Flex)`
-  flex-direction: column;
-  color: white;
-`;
-
 const Container = styled.div`
   display: flex;
   align-items: center;

diff --git a/frontend/src/features/songs/components/KillingPartInterface.tsx b/frontend/src/features/songs/components/KillingPartInterface.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 // NOTE: 댓글 기능 임시 중단
 // import CommentList from '@/features/comments/components/CommentList';
 import useVideoPlayerContext from '@/features/youtube/hooks/useVideoPlayerContext';
-import Flex from '@/shared/components/Flex/Flex';
 import Spacing from '@/shared/components/Spacing';
 import useTimerContext from '@/shared/components/Timer/hooks/useTimerContext';
 import ToggleSwitch from '@/shared/components/ToggleSwitch/ToggleSwitch';

diff --git a/frontend/src/features/songs/components/KillingPartTrack.tsx b/frontend/src/features/songs/components/KillingPartTrack.tsx
@@ -45,7 +45,7 @@ const KillingPartTrack = ({
 }: KillingPartTrackProps) => {
   const { showToast } = useToastContext();
   const { seekTo, pause, playerState, videoPlayer } = useVideoPlayerContext();
-  const { calculatedLikeCount, heartIcon, toggleKillingPartLikes } = useKillingPartLikes({
+  const { heartIcon, toggleKillingPartLikes } = useKillingPartLikes({
     likeCount,
     likeStatus,
     songId,
@@ -189,11 +189,9 @@ const KillingPartTrack = ({
               aria-label="나의 킬링파트 삭제하기"
             >
               <ButtonIcon src={trashIcon} alt="" />
-              <ButtonTitle>Delete</ButtonTitle>
             </DeleteButton>
             <ShareButton aria-label={'나의 킬링파트 유튜브 링크 공유하기'} onClick={copyMyPartUrl}>
               <ButtonIcon src={shareIcon} alt="" />
-              <ButtonTitle>Share</ButtonTitle>
             </ShareButton>
           </>
         ) : (
@@ -203,14 +201,12 @@ const KillingPartTrack = ({
               aria-label={`${rank}등 킬링파트 좋아요 하기`}
             >
               <ButtonIcon src={heartIcon} alt="" />
-              <ButtonTitle>{`${calculatedLikeCount} Likes`}</ButtonTitle>
             </LikeButton>
             <ShareButton
               aria-label={`${rank}등 킬링파트 링크 공유하기`}
               onClick={copyKillingPartUrl}
             >
               <ButtonIcon src={shareIcon} alt="" />
-              <ButtonTitle>Share</ButtonTitle>
             </ShareButton>
           </>
         )}
@@ -286,8 +282,10 @@ const ButtonWithIcon = css`
   flex-direction: column;
   gap: 2px;
   align-items: center;
+  justify-content: center;
 
-  width: 44px;
+  width: 38px;
+  height: 100%;
 `;
 
 const DeleteButton = styled.button`
@@ -302,17 +300,17 @@ const ShareButton = styled.button`
   ${ButtonWithIcon}
 `;
 
-const ButtonTitle = styled.span`
-  font-size: 8px;
-`;
+// const ButtonTitle = styled.span`
+//   font-size: 8px;
+// `;
 
 const ButtonIcon = styled.img`
   width: 22px;
   height: 22px;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
   }
 `;
 
@@ -339,6 +337,7 @@ const ProgressBar = styled.progress`
 const ButtonContainer = styled.div`
   display: flex;
   align-items: center;
+  height: 100%;
 `;
 
 const FLexContainer = styled.div`

diff --git a/frontend/src/features/songs/components/SongDetailItem.tsx b/frontend/src/features/songs/components/SongDetailItem.tsx
@@ -1,11 +1,11 @@
 import { forwardRef, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 import KillingPartInterface from '@/features/songs/components/KillingPartInterface';
 import Thumbnail from '@/features/songs/components/Thumbnail';
 import { VideoPlayerProvider } from '@/features/youtube/components/VideoPlayerProvider';
 import Youtube from '@/features/youtube/components/Youtube';
-import Flex from '@/shared/components/Flex/Flex';
 import Spacing from '@/shared/components/Spacing';
 import SRHeading from '@/shared/components/SRHeading';
 import TimerProvider from '@/shared/components/Timer/TimerProvider';
@@ -44,13 +44,8 @@ const SongDetailItem = forwardRef<HTMLDivElement, SongDetailItemProps>(
       <Container ref={ref} role="article" data-song-id={id}>
         <SRHeading>킬링파트 듣기 페이지</SRHeading>
         <VideoPlayerProvider>
-          <Flex
-            $gap={16}
-            $md={{ $direction: 'column' }}
-            $xs={{ $css: { padding: '8px' } }}
-            $css={{ padding: '16px', background: '#121212c8', borderRadius: '8px' }}
-          >
-            <Flex $direction="column" $css={{ flex: '3 1 0' }}>
+          <ItemFlex $gap={16} $md={{ $direction: 'column' }}>
+            <SongFlex $direction="column">
               <SongInfoContainer>
                 <Thumbnail src={albumCoverUrl} size="md" />
                 <Info>
@@ -60,15 +55,15 @@ const SongDetailItem = forwardRef<HTMLDivElement, SongDetailItemProps>(
               </SongInfoContainer>
               <Spacing direction="vertical" size={16} />
               <Youtube videoId={songVideoId} />
-            </Flex>
+            </SongFlex>
             <TimerProvider time={15}>
               <KillingPartInterface
                 killingParts={killingParts}
                 songId={id}
                 memberPart={memberPart}
               />
             </TimerProvider>
-          </Flex>
+          </ItemFlex>
         </VideoPlayerProvider>
         <div ref={navigateToCurrentSongId} />
       </Container>
@@ -80,16 +75,31 @@ SongDetailItem.displayName = 'SongDetailItem';
 
 export default SongDetailItem;
 
+const ItemFlex = styled(Flex)`
+  padding: 16px;
+  background: #121212c8;
+  border-radius: 8px;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
+    padding: 8px;
+  }
+`;
+
+const SongFlex = styled(Flex)`
+  flex: 3 1 0;
+`;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
 
   height: 100vh;
-  padding-top: ${({ theme: { headerHeight } }) => headerHeight.desktop};
+  padding-top: 0;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.sm}) {
     justify-content: flex-start;
+    padding-top: ${({ theme: { headerHeight } }) => headerHeight.tablet};
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {

diff --git a/frontend/src/features/songs/components/SongInformation.tsx b/frontend/src/features/songs/components/SongInformation.tsx
@@ -1,6 +1,6 @@
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 import Thumbnail from '@/features/songs/components/Thumbnail';
-import Flex from '@/shared/components/Flex/Flex';
 
 interface SongInformationProps {
   albumCoverUrl: string;

diff --git a/frontend/src/features/songs/components/SongItemList.tsx b/frontend/src/features/songs/components/SongItemList.tsx
@@ -19,7 +19,7 @@ const SongItemList = ({ genre }: SongItemListProps) => {
 
   return (
     <>
-      <Title>{`${GENRES[genre]} Top 10`}</Title>
+      <Title>{`${GENRES[genre]}`}</Title>
       <Spacing direction="vertical" size={16} />
       <SongList>
         {songs?.map(({ id, albumCoverUrl, title, singer, totalLikeCount }, i) => (