Feat/#534 Shook Layout (Flex 컴포넌트) 적용 (#535)

* config: shook-layout 설치

* refactor: shook layout Flex 적용

* refactor: 공용 컴포넌트 Flex를 shook layout 라이브러리로 대체

* chore: 기존에 있던 Flex 컴포넌트 삭제

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"
   },

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 = () => {

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 (

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();

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 {

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';
 

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';
 

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

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';

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';
 

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;

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';

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,6 +75,20 @@ 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;

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;

frontend/src/pages/MyPage.tsx

@@ -1,10 +1,10 @@
 import { useNavigate } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import MyPartList from '@/features/member/components/MyPartList';
 import getRandomIntroduction from '@/features/member/utils/getRandomIntroduction';
-import Flex from '@/shared/components/Flex/Flex';
 import Spacing from '@/shared/components/Spacing';
 import SRHeading from '@/shared/components/SRHeading';
 import { GA_ACTIONS, GA_CATEGORIES } from '@/shared/constants/GAEventName';

frontend/src/pages/PartCollectingPage.tsx

@@ -1,12 +1,12 @@
 import { useParams } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 import RegisterPart from '@/features/killingParts/components/RegisterPart';
 import VideoController from '@/features/killingParts/components/VideoController';
 import { CollectingPartProvider } from '@/features/songs/components/CollectingPartProvider';
 import SongInformation from '@/features/songs/components/SongInformation';
 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 useFetch from '@/shared/hooks/useFetch';

frontend/src/pages/SearchResultPage.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
 import { getSingerSearch } from '@/features/search/remotes/search';
 import SingerBanner from '@/features/singer/components/SingerBanner';
 import SingerSongList from '@/features/singer/components/SingerSongList';
-import Flex from '@/shared/components/Flex/Flex';
 import Spacing from '@/shared/components/Spacing';
 import ROUTE_PATH from '@/shared/constants/path';
 import useFetch from '@/shared/hooks/useFetch';

frontend/src/pages/SingerDetailPage.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
+import { Flex } from 'shook-layout';
 import styled from 'styled-components';
 import SingerBanner from '@/features/singer/components/SingerBanner';
 import SingerSongList from '@/features/singer/components/SingerSongList';
 import { getSingerDetail } from '@/features/singer/remotes/singer';
-import Flex from '@/shared/components/Flex/Flex';
 import Spacing from '@/shared/components/Spacing';
 import useFetch from '@/shared/hooks/useFetch';
 import useValidParams from '@/shared/hooks/useValidParams';

frontend/src/shared/components/Layout/Header.tsx

@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom';
+import { Flex } from 'shook-layout';
 import { styled } from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import logo from '@/assets/image/logo.png';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import SearchBar from '@/features/search/components/SearchBar';
 import ROUTE_PATH from '@/shared/constants/path';
 import Avatar from '../Avatar';
-import Flex from '../Flex/Flex';
 
 const Header = () => {
   const { user } = useAuthContext();
@@ -16,7 +16,7 @@ const Header = () => {
       <Link to={ROUTE_PATH.ROOT} aria-label="shook 홈으로 가기">
         <Logo src={logo} alt="logo" aria-hidden="true" />
       </Link>
-      <Flex $align="center" $gap={12} $xs={{ $justify: 'flex-end', $css: { width: '100%' } }}>
+      <SearchFlex $align="center" $gap={12} $xs={{ $justify: 'flex-end' }}>
         <SearchBar />
         {user ? (
           <Link to={`/${ROUTE_PATH.MY_PAGE}`}>
@@ -27,7 +27,7 @@ const Header = () => {
             <LoginButton>로그인</LoginButton>
           </Link>
         )}
-      </Flex>
+      </SearchFlex>
     </Container>
   );
 };
@@ -68,6 +68,12 @@ const Container = styled.header`
   }
 `;
 
+const SearchFlex = styled(Flex)`
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
+    width: 100%;
+  }
+`;
+
 const Logo = styled.img`
   aspect-ratio: 177 / 40;
   width: 180px;