From d4853124bee0797eb095e8fa128912dddbe36d5f Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 5 Oct 2023 17:56:17 +0900
Subject: [PATCH 01/69] =?UTF-8?q?chore:=20=EB=8F=8B=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/icon/search.svg | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 frontend/src/assets/icon/search.svg

diff --git a/frontend/src/assets/icon/search.svg b/frontend/src/assets/icon/search.svg
new file mode 100644
index 000000000..0c12acc64
--- /dev/null
+++ b/frontend/src/assets/icon/search.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="none">
+  <g opacity="0.5">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1886 18.3772C14.711 18.3772 18.3772 14.711 18.3772 10.1886C18.3772 5.66616 14.711 2 10.1886 2C5.66616 2 2 5.66616 2 10.1886C2 14.711 5.66616 18.3772 10.1886 18.3772Z" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.5322 16.5312L21.6791 21.6781" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
\ No newline at end of file

From efc4114c4f1dd008294600dcf5866f211da62fa6 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 5 Oct 2023 21:48:49 +0900
Subject: [PATCH 02/69] =?UTF-8?q?design:=20=EB=8F=8B=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=88=AC=EB=AA=85=EB=8F=84=20?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/icon/search.svg | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/assets/icon/search.svg b/frontend/src/assets/icon/search.svg
index 0c12acc64..45a77d91d 100644
--- a/frontend/src/assets/icon/search.svg
+++ b/frontend/src/assets/icon/search.svg
@@ -1,6 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23 23" fill="none">
-  <g opacity="0.5">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1886 18.3772C14.711 18.3772 18.3772 14.711 18.3772 10.1886C18.3772 5.66616 14.711 2 10.1886 2C5.66616 2 2 5.66616 2 10.1886C2 14.711 5.66616 18.3772 10.1886 18.3772Z" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M16.5322 16.5312L21.6791 21.6781" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
 </svg>
\ No newline at end of file

From 76ee527920f21f6330c6db2c26bde3d135626f46 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 5 Oct 2023 22:57:08 +0900
Subject: [PATCH 03/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EC=8B=9C=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A7=88=ED=81=AC=EC=97=85=20=EB=B0=8F=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artistSearch/components/ResultSheet.tsx   | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/features/artistSearch/components/ResultSheet.tsx

diff --git a/frontend/src/features/artistSearch/components/ResultSheet.tsx b/frontend/src/features/artistSearch/components/ResultSheet.tsx
new file mode 100644
index 000000000..f79bdb4fc
--- /dev/null
+++ b/frontend/src/features/artistSearch/components/ResultSheet.tsx
@@ -0,0 +1,56 @@
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+const ResultSheet = () => {
+  return createPortal(
+    <SheetContainer>
+      <SheetTitle>아티스트</SheetTitle>
+      <TestList>
+        <TestItem>1</TestItem>
+        <TestItem>2</TestItem>
+        <TestItem>3</TestItem>
+      </TestList>
+    </SheetContainer>,
+    document.body
+  );
+};
+
+export default ResultSheet;
+
+const SheetContainer = styled.div`
+  position: fixed;
+  z-index: 2000;
+  top: 70px;
+  right: 12.33%;
+
+  width: 400px;
+  min-height: auto;
+
+  color: white;
+
+  background-color: #161f18;
+  border-radius: 8px;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xxl}) {
+    right: 8.33%;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    right: 4.33%;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
+    top: 60px;
+    right: 0%;
+    width: 100%;
+    min-height: 100%;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {
+    top: 50px;
+  }
+`;
+
+const SheetTitle = styled.p``;
+const TestList = styled.ul``;
+const TestItem = styled.li``;

From a5ea87ce729a97fbc75e0907889ffdcd5ea0ef1c Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 6 Oct 2023 08:33:52 +0900
Subject: [PATCH 04/69] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=EC=97=90=20?=
 =?UTF-8?q?=EC=84=9C=EC=B9=98=EB=B0=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/shared/components/Layout/Header.tsx   | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/shared/components/Layout/Header.tsx b/frontend/src/shared/components/Layout/Header.tsx
index e3201c7f6..e3bf9a4e3 100644
--- a/frontend/src/shared/components/Layout/Header.tsx
+++ b/frontend/src/shared/components/Layout/Header.tsx
@@ -2,9 +2,11 @@ import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import logo from '@/assets/image/logo.png';
+import SearchBar from '@/features/artistSearch/components/SearchBar';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import ROUTE_PATH from '@/shared/constants/path';
 import Avatar from '../Avatar';
+import Flex from '../Flex/Flex';
 
 const Header = () => {
   const { user } = useAuthContext();
@@ -14,15 +16,18 @@ const Header = () => {
       <Link to={ROUTE_PATH.ROOT} aria-label="shook 홈으로 가기">
         <Logo src={logo} alt="logo" aria-hidden="true" />
       </Link>
-      {user ? (
-        <Link to={`/${ROUTE_PATH.MY_PAGE}`}>
-          <ProfileAvatar src={shookshook} />
-        </Link>
-      ) : (
-        <Link to={ROUTE_PATH.LOGIN}>
-          <LoginButton>로그인</LoginButton>
-        </Link>
-      )}
+      <Flex $align="center" $gap={12}>
+        <SearchBar />
+        {user ? (
+          <Link to={`/${ROUTE_PATH.MY_PAGE}`}>
+            <ProfileAvatar src={shookshook} />
+          </Link>
+        ) : (
+          <Link to={ROUTE_PATH.LOGIN}>
+            <LoginButton>로그인</LoginButton>
+          </Link>
+        )}
+      </Flex>
     </Container>
   );
 };

From b3342aa86ba49f99d54a153797e01f1bcf00197e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 6 Oct 2023 08:34:50 +0900
Subject: [PATCH 05/69] =?UTF-8?q?feat:=20=EC=84=9C=EC=B9=98=20=EB=B0=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=EB=8F=99=EC=9E=91,=20=EB=A7=88=ED=81=AC=EC=97=85=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artistSearch/components/SearchBar.tsx     | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 frontend/src/features/artistSearch/components/SearchBar.tsx

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
new file mode 100644
index 000000000..fc2376e6a
--- /dev/null
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -0,0 +1,97 @@
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+import cancelIcon from '@/assets/icon/cancel.svg';
+import searchIcon from '@/assets/icon/search.svg';
+import Flex from '@/shared/components/Flex/Flex';
+import ResultSheet from './ResultSheet';
+
+const SearchBar = () => {
+  const [search, setSearch] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const openSearchBar: React.MouseEventHandler = () => {
+    setSearch(true);
+  };
+
+  const closeSearchBar: React.FocusEventHandler = () => {
+    setSearch(false);
+  };
+
+  const changeQuery: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
+    setSearchQuery(currentTarget.value);
+  };
+
+  const resetQuery: React.MouseEventHandler = () => {
+    setSearchQuery('');
+    inputRef.current?.focus();
+  };
+
+  const isQueryFilled = searchQuery.length !== 0;
+
+  return (
+    <SearchBox $align="center">
+      {search ? (
+        <>
+          <SearchInput
+            type="text"
+            placeholder="아티스트 검색"
+            autoFocus
+            ref={inputRef}
+            value={searchQuery}
+            onChange={changeQuery}
+            onBlur={closeSearchBar}
+          />
+          {isQueryFilled && <ResetQueryButton type="button" onClick={resetQuery} />}
+          <ResultSheet />
+        </>
+      ) : (
+        <SearchButton type="button" onClick={openSearchBar} />
+      )}
+    </SearchBox>
+  );
+};
+
+export default SearchBar;
+
+const SearchBox = styled(Flex)`
+  height: 30px;
+  padding: 0 10px;
+  background-color: ${({ theme }) => theme.color.black200};
+  border-radius: 16px;
+`;
+
+const SearchButton = styled.button`
+  width: 26px;
+  height: 26px;
+  background: url(${searchIcon}) transparent no-repeat;
+  background-size: contain;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+const ResetQueryButton = styled.button`
+  width: 26px;
+  height: 26px;
+  background: url(${cancelIcon}) transparent no-repeat;
+  background-size: contain;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+const SearchInput = styled.input`
+  padding: 0 10px;
+
+  line-height: 1.6;
+  color: white;
+
+  background-color: ${({ theme }) => theme.color.black200};
+  border: none;
+  outline: none;
+`;

From e9e9282e4e4f077f0ee3586a75d4e778cd543410 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 6 Oct 2023 09:10:30 +0900
Subject: [PATCH 06/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=20=EC=9E=85=EB=A0=A5=20=EC=A0=84=EC=B2=B4=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artistSearch/components/SearchBar.tsx     | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index fc2376e6a..19c4bb3df 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -14,7 +14,9 @@ const SearchBar = () => {
     setSearch(true);
   };
 
-  const closeSearchBar: React.FocusEventHandler = () => {
+  const closeSearchBar: React.FocusEventHandler = (e) => {
+    if (e.relatedTarget?.id === 'query-reset-button') return;
+
     setSearch(false);
   };
 
@@ -42,7 +44,9 @@ const SearchBar = () => {
             onChange={changeQuery}
             onBlur={closeSearchBar}
           />
-          {isQueryFilled && <ResetQueryButton type="button" onClick={resetQuery} />}
+          {isQueryFilled && (
+            <ResetQueryButton id="query-reset-button" type="button" onClick={resetQuery} />
+          )}
           <ResultSheet />
         </>
       ) : (
@@ -55,8 +59,11 @@ const SearchBar = () => {
 export default SearchBar;
 
 const SearchBox = styled(Flex)`
+  position: relative;
+
   height: 30px;
   padding: 0 10px;
+
   background-color: ${({ theme }) => theme.color.black200};
   border-radius: 16px;
 `;
@@ -74,8 +81,14 @@ const SearchButton = styled.button`
 `;
 
 const ResetQueryButton = styled.button`
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translate(0, -50%);
+
   width: 26px;
   height: 26px;
+
   background: url(${cancelIcon}) transparent no-repeat;
   background-size: contain;
 
@@ -86,9 +99,8 @@ const ResetQueryButton = styled.button`
 `;
 
 const SearchInput = styled.input`
-  padding: 0 10px;
+  padding: 0 24px 0 10px;
 
-  line-height: 1.6;
   color: white;
 
   background-color: ${({ theme }) => theme.color.black200};

From 4cfe61cddd45cbba993fe293670035c30540880d Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 6 Oct 2023 09:17:53 +0900
Subject: [PATCH 07/69] =?UTF-8?q?design:=20=EA=B2=B0=EA=B3=BC=20=EC=8B=9C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/artistSearch/components/ResultSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/artistSearch/components/ResultSheet.tsx b/frontend/src/features/artistSearch/components/ResultSheet.tsx
index f79bdb4fc..cac601873 100644
--- a/frontend/src/features/artistSearch/components/ResultSheet.tsx
+++ b/frontend/src/features/artistSearch/components/ResultSheet.tsx
@@ -36,7 +36,7 @@ const SheetContainer = styled.div`
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    right: 4.33%;
+    right: 4.16%;
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {

From 78c62866601353ab052b978ee267c32484baf1a3 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 6 Oct 2023 10:11:43 +0900
Subject: [PATCH 08/69] =?UTF-8?q?refactor:=20Flex=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=EC=9D=84=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/shared/components/Flex/Flex.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/shared/components/Flex/Flex.tsx b/frontend/src/shared/components/Flex/Flex.tsx
index 83818cf7c..5904fc8ba 100644
--- a/frontend/src/shared/components/Flex/Flex.tsx
+++ b/frontend/src/shared/components/Flex/Flex.tsx
@@ -57,7 +57,7 @@ export default Flex;
 
 const flexCss = (flexBox?: FlexBox) => {
   if (!flexBox) return;
-  const { $align, $direction, $gap, $justify, $wrap } = flexBox;
+  const { $align, $direction, $gap, $justify, $wrap, $css } = flexBox;
 
   return css`
     flex-direction: ${$direction};
@@ -65,5 +65,6 @@ const flexCss = (flexBox?: FlexBox) => {
     gap: ${$gap && `${$gap}px`};
     align-items: ${$align};
     justify-content: ${$justify};
+    ${$css}
   `;
 };

From d03635b4a66a96752375c7a66861d17b4c07e7dc Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 6 Oct 2023 23:43:05 +0900
Subject: [PATCH 09/69] =?UTF-8?q?design:=20=ED=85=8C=EB=B8=94=EB=A6=BF=20?=
 =?UTF-8?q?=EC=9D=B4=ED=95=98=20=EC=82=AC=EC=9D=B4=EC=A6=88=EB=B6=80?=
 =?UTF-8?q?=ED=84=B0=20=EA=B2=B0=EA=B3=BC=EC=8B=9C=ED=8A=B8=EA=B0=80=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=9D=84=20=EA=B0=80=EB=93=9D=20=EC=B1=84?=
 =?UTF-8?q?=EC=9A=B0=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/artistSearch/components/ResultSheet.tsx   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/ResultSheet.tsx b/frontend/src/features/artistSearch/components/ResultSheet.tsx
index cac601873..9355546a7 100644
--- a/frontend/src/features/artistSearch/components/ResultSheet.tsx
+++ b/frontend/src/features/artistSearch/components/ResultSheet.tsx
@@ -36,14 +36,13 @@ const SheetContainer = styled.div`
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    right: 4.16%;
+    right: 0%;
+    width: 100%;
+    min-height: 100%;
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
     top: 60px;
-    right: 0%;
-    width: 100%;
-    min-height: 100%;
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {

From 0e186ebfd357eac906f1d870fc85fde18cc9d64e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sat, 7 Oct 2023 00:01:46 +0900
Subject: [PATCH 10/69] =?UTF-8?q?design:=20=ED=85=8C=EB=B8=94=EB=A6=BF=20?=
 =?UTF-8?q?=EC=9D=B4=ED=95=98=20=EC=82=AC=EC=9D=B4=EC=A6=88=EB=B6=80?=
 =?UTF-8?q?=ED=84=B0=20=EA=B2=80=EC=83=89=20=EC=8B=9C=20=ED=97=A4=EB=8D=94?=
 =?UTF-8?q?=EB=A5=BC=20=EB=8D=AE=EC=96=B4=EC=93=B0=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artistSearch/components/SearchBar.tsx     | 26 ++++++++++---------
 .../src/shared/components/Layout/Header.tsx   | 11 +++++++-
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 19c4bb3df..c00d70fe3 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -32,9 +32,10 @@ const SearchBar = () => {
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox $align="center">
+    <SearchBox $align="center" $isOpen={search}>
       {search ? (
         <>
+          <SearchButton type="submit" />
           <SearchInput
             type="text"
             placeholder="아티스트 검색"
@@ -42,11 +43,12 @@ const SearchBar = () => {
             ref={inputRef}
             value={searchQuery}
             onChange={changeQuery}
-            onBlur={closeSearchBar}
+            // onBlur={closeSearchBar}
           />
           {isQueryFilled && (
             <ResetQueryButton id="query-reset-button" type="button" onClick={resetQuery} />
           )}
+
           <ResultSheet />
         </>
       ) : (
@@ -58,26 +60,25 @@ const SearchBar = () => {
 
 export default SearchBar;
 
-const SearchBox = styled(Flex)`
+const SearchBox = styled(Flex)<{ $isOpen: boolean }>`
   position: relative;
 
-  height: 30px;
+  height: 34px;
   padding: 0 10px;
 
   background-color: ${({ theme }) => theme.color.black200};
   border-radius: 16px;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    flex: ${({ $isOpen }) => $isOpen && 1};
+  }
 `;
 
 const SearchButton = styled.button`
-  width: 26px;
-  height: 26px;
+  width: 20px;
+  height: 20px;
   background: url(${searchIcon}) transparent no-repeat;
   background-size: contain;
-
-  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    width: 20px;
-    height: 20px;
-  }
 `;
 
 const ResetQueryButton = styled.button`
@@ -99,7 +100,8 @@ const ResetQueryButton = styled.button`
 `;
 
 const SearchInput = styled.input`
-  padding: 0 24px 0 10px;
+  max-width: 100%;
+  padding: 0 26px 0 10px;
 
   color: white;
 
diff --git a/frontend/src/shared/components/Layout/Header.tsx b/frontend/src/shared/components/Layout/Header.tsx
index e3bf9a4e3..e02b2dce6 100644
--- a/frontend/src/shared/components/Layout/Header.tsx
+++ b/frontend/src/shared/components/Layout/Header.tsx
@@ -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}>
+      <Flex $align="center" $gap={12} $xs={{ $justify: 'flex-end', $css: { width: '100%' } }}>
         <SearchBar />
         {user ? (
           <Link to={`/${ROUTE_PATH.MY_PAGE}`}>
@@ -72,9 +72,18 @@ const Logo = styled.img`
   width: 180px;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    position: absolute;
+    top: 50%;
+    left: 4.16%;
+    transform: translate(0, -50%);
+
     width: 140px;
   }
 
+  @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
+    left: 16px;
+  }
+
   @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) {
     width: 120px;
   }

From 378e250918aa018c752396ad6ef0c879eefa0067 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 16:17:51 +0900
Subject: [PATCH 11/69] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=EC=B0=BD=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EB=B3=80=EA=B2=BD=EB=90=9C=20=EC=A0=95?=
 =?UTF-8?q?=EC=B1=85=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PC에서는 기본적으로 검색창이 열려있도록 청책이 변경되었음.
해당 정책을 위해 해야할 분기처리는 다음과 같다.

1. Input
pc -> 노검색: 길게 / 검색: 길게
모바일 -> 노검색: 짧게 / 검색: 길게

2. SearchButton(검색에 쓰이는 버튼)
pc -> 노검색: 표시 / 검색: 표시
모바일 -> 노검색: X / 검색: 표시

3. SearchBarExpendButton(검색 창 확장에 쓰이는 버튼)
pc -> 노검색: X / 검색: X
모바일 -> 노검색: 표시 / 검색: X

검색 상태 + 디바이스 크기에 따라 분기 처리하였음
---
 .../artistSearch/components/SearchBar.tsx     | 97 +++++++++++--------
 1 file changed, 59 insertions(+), 38 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index c00d70fe3..392463195 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import cancelIcon from '@/assets/icon/cancel.svg';
 import searchIcon from '@/assets/icon/search.svg';
 import Flex from '@/shared/components/Flex/Flex';
@@ -10,7 +10,7 @@ const SearchBar = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const openSearchBar: React.MouseEventHandler = () => {
+  const openSearchBar: React.MouseEventHandler & React.FocusEventHandler = () => {
     setSearch(true);
   };
 
@@ -32,35 +32,41 @@ const SearchBar = () => {
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox $align="center" $isOpen={search}>
-      {search ? (
-        <>
-          <SearchButton type="submit" />
-          <SearchInput
-            type="text"
-            placeholder="아티스트 검색"
-            autoFocus
-            ref={inputRef}
-            value={searchQuery}
-            onChange={changeQuery}
-            // onBlur={closeSearchBar}
-          />
-          {isQueryFilled && (
-            <ResetQueryButton id="query-reset-button" type="button" onClick={resetQuery} />
-          )}
-
-          <ResultSheet />
-        </>
-      ) : (
-        <SearchButton type="button" onClick={openSearchBar} />
+    <SearchBox $align="center" $isSearching={search}>
+      <SearchInput
+        type="text"
+        placeholder="아티스트 검색"
+        ref={inputRef}
+        value={searchQuery}
+        onChange={changeQuery}
+        onFocus={openSearchBar}
+        $isSearching={search}
+      />
+      <SearchButton $isSearching={search} />
+      <SearchBarExpendButton type="button" onClick={openSearchBar} $isSearching={search} />
+      {isQueryFilled && (
+        <ResetQueryButton id="query-reset-button" type="button" onClick={resetQuery} />
       )}
+      {search && <ResultSheet />}
     </SearchBox>
   );
 };
 
 export default SearchBar;
 
-const SearchBox = styled(Flex)<{ $isOpen: boolean }>`
+const inputCloseStyles = css`
+  width: 0px;
+  padding: 0;
+`;
+
+const searchButtonStyles = css`
+  width: 20px;
+  height: 20px;
+  background: url(${searchIcon}) transparent no-repeat;
+  background-size: contain;
+`;
+
+const SearchBox = styled(Flex)<{ $isSearching: boolean }>`
   position: relative;
 
   height: 34px;
@@ -70,21 +76,35 @@ const SearchBox = styled(Flex)<{ $isOpen: boolean }>`
   border-radius: 16px;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    flex: ${({ $isOpen }) => $isOpen && 1};
+    flex: ${({ $isSearching }) => $isSearching && 1};
   }
 `;
 
-const SearchButton = styled.button`
-  width: 20px;
-  height: 20px;
-  background: url(${searchIcon}) transparent no-repeat;
-  background-size: contain;
+const SearchButton = styled.button<{ $isSearching: boolean }>`
+  ${searchButtonStyles}
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translate(0, -50%);
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    display: ${({ $isSearching }) => !$isSearching && 'none'};
+  }
+`;
+
+const SearchBarExpendButton = styled.button<{ $isSearching: boolean }>`
+  ${searchButtonStyles}
+  display: none;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    display: ${({ $isSearching }) => !$isSearching && 'block'};
+  }
 `;
 
 const ResetQueryButton = styled.button`
   position: absolute;
   top: 50%;
-  right: 5px;
+  right: 40px;
   transform: translate(0, -50%);
 
   width: 26px;
@@ -92,20 +112,21 @@ const ResetQueryButton = styled.button`
 
   background: url(${cancelIcon}) transparent no-repeat;
   background-size: contain;
-
-  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    width: 20px;
-    height: 20px;
-  }
 `;
 
-const SearchInput = styled.input`
+const SearchInput = styled.input<{ $isSearching: boolean }>`
   max-width: 100%;
-  padding: 0 26px 0 10px;
+  padding: 0 60px 0 10px;
 
   color: white;
 
   background-color: ${({ theme }) => theme.color.black200};
   border: none;
   outline: none;
+
+  transition: all 0.2s ease;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    ${({ $isSearching }) => !$isSearching && inputCloseStyles}
+  }
 `;

From d05a5d5c64968b0077269cb4c4daecf575758f09 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 16:24:42 +0900
Subject: [PATCH 12/69] =?UTF-8?q?refactor:=20=EC=83=81=ED=83=9C=EB=AA=85?=
 =?UTF-8?q?=20=EB=B0=8F=20=ED=95=B8=EB=93=A4=EB=9F=AC=EB=AA=85=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=98=EB=AF=B8=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

검색중 or 검색중 X 의 의미를 가지도록 상태명 개선
검색 상태를 변경하는 의미를 가지도록 핸들러 명  개선
---
 .../artistSearch/components/SearchBar.tsx     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 392463195..cea7ca660 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -6,18 +6,18 @@ import Flex from '@/shared/components/Flex/Flex';
 import ResultSheet from './ResultSheet';
 
 const SearchBar = () => {
-  const [search, setSearch] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const openSearchBar: React.MouseEventHandler & React.FocusEventHandler = () => {
-    setSearch(true);
+  const startSearch: React.MouseEventHandler & React.FocusEventHandler = () => {
+    setIsSearching(true);
   };
 
-  const closeSearchBar: React.FocusEventHandler = (e) => {
+  const endSearch: React.FocusEventHandler = (e) => {
     if (e.relatedTarget?.id === 'query-reset-button') return;
 
-    setSearch(false);
+    setIsSearching(false);
   };
 
   const changeQuery: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
@@ -32,22 +32,22 @@ const SearchBar = () => {
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox $align="center" $isSearching={search}>
+    <SearchBox $align="center" $isSearching={isSearching}>
       <SearchInput
         type="text"
         placeholder="아티스트 검색"
         ref={inputRef}
         value={searchQuery}
         onChange={changeQuery}
-        onFocus={openSearchBar}
-        $isSearching={search}
+        onFocus={startSearch}
+        $isSearching={isSearching}
       />
-      <SearchButton $isSearching={search} />
-      <SearchBarExpendButton type="button" onClick={openSearchBar} $isSearching={search} />
+      <SearchButton $isSearching={isSearching} />
+      <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isQueryFilled && (
         <ResetQueryButton id="query-reset-button" type="button" onClick={resetQuery} />
       )}
-      {search && <ResultSheet />}
+      {isSearching && <ResultSheet />}
     </SearchBox>
   );
 };

From 1448498c775ebbf33375a0c36fb557c808b9a24e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 18:16:19 +0900
Subject: [PATCH 13/69] =?UTF-8?q?chore:=20=EB=92=A4=EB=A1=9C=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/icon/left-arrow.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 frontend/src/assets/icon/left-arrow.svg

diff --git a/frontend/src/assets/icon/left-arrow.svg b/frontend/src/assets/icon/left-arrow.svg
new file mode 100644
index 000000000..5e7026763
--- /dev/null
+++ b/frontend/src/assets/icon/left-arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="white" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+</svg>

From d570d64feabf335df2a08a013cf8a3a1d815fdf8 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 18:18:21 +0900
Subject: [PATCH 14/69] =?UTF-8?q?feat:=20=ED=85=8C=EB=B8=94=EB=A6=BF=20?=
 =?UTF-8?q?=EC=9D=B4=ED=95=98=20=EC=82=AC=EC=9D=B4=EC=A6=88=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EA=B2=80=EC=83=89=EC=B0=BD=EC=9D=84=20=EC=B0=BE?=
 =?UTF-8?q?=EB=8A=94=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A0=9C=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artistSearch/components/SearchBar.tsx     | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index cea7ca660..2fef74670 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 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 ResultSheet from './ResultSheet';
@@ -14,12 +15,16 @@ const SearchBar = () => {
     setIsSearching(true);
   };
 
-  const endSearch: React.FocusEventHandler = (e) => {
+  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     if (e.relatedTarget?.id === 'query-reset-button') return;
 
     setIsSearching(false);
   };
 
+  const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+    setIsSearching(false);
+  };
+
   const changeQuery: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
     setSearchQuery(currentTarget.value);
   };
@@ -33,6 +38,7 @@ const SearchBar = () => {
 
   return (
     <SearchBox $align="center" $isSearching={isSearching}>
+      <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
       <SearchInput
         type="text"
         placeholder="아티스트 검색"
@@ -40,6 +46,7 @@ const SearchBar = () => {
         value={searchQuery}
         onChange={changeQuery}
         onFocus={startSearch}
+        onBlur={endSearchOnBlur}
         $isSearching={isSearching}
       />
       <SearchButton $isSearching={isSearching} />
@@ -80,6 +87,25 @@ const SearchBox = styled(Flex)<{ $isSearching: boolean }>`
   }
 `;
 
+const BackwardButton = styled.button<{ $isSearching: boolean }>`
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translate(0, -50%);
+
+  display: none;
+
+  width: 20px;
+  height: 20px;
+
+  background: url(${backwardIcon}) transparent no-repeat;
+  background-size: contain;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    display: ${({ $isSearching }) => $isSearching && 'block'};
+  }
+`;
+
 const SearchButton = styled.button<{ $isSearching: boolean }>`
   ${searchButtonStyles}
   position: absolute;
@@ -115,8 +141,8 @@ const ResetQueryButton = styled.button`
 `;
 
 const SearchInput = styled.input<{ $isSearching: boolean }>`
-  max-width: 100%;
-  padding: 0 60px 0 10px;
+  width: 240px;
+  padding: 0 68px 0 8px;
 
   color: white;
 
@@ -127,6 +153,7 @@ const SearchInput = styled.input<{ $isSearching: boolean }>`
   transition: all 0.2s ease;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    padding: 0 68px 0 28px;
     ${({ $isSearching }) => !$isSearching && inputCloseStyles}
   }
 `;

From b5c897fbe0fbd641a11302624738aa58e9a45fa4 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 18:21:00 +0900
Subject: [PATCH 15/69] =?UTF-8?q?design:=20=EC=BF=BC=EB=A6=AC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=85=8B=20=EB=B2=84=ED=8A=BC=20=EA=B4=80=EB=A0=A8=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

테블릿 이하 사이즈에서 검색중이 아니라면, 쿼리 리셋 버튼이 표시되지 않도록 함
---
 .../features/artistSearch/components/SearchBar.tsx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 2fef74670..261cc4c52 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -52,7 +52,12 @@ const SearchBar = () => {
       <SearchButton $isSearching={isSearching} />
       <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isQueryFilled && (
-        <ResetQueryButton id="query-reset-button" type="button" onClick={resetQuery} />
+        <ResetQueryButton
+          id="query-reset-button"
+          type="button"
+          onClick={resetQuery}
+          $isSearching={isSearching}
+        />
       )}
       {isSearching && <ResultSheet />}
     </SearchBox>
@@ -127,7 +132,7 @@ const SearchBarExpendButton = styled.button<{ $isSearching: boolean }>`
   }
 `;
 
-const ResetQueryButton = styled.button`
+const ResetQueryButton = styled.button<{ $isSearching: boolean }>`
   position: absolute;
   top: 50%;
   right: 40px;
@@ -138,6 +143,10 @@ const ResetQueryButton = styled.button`
 
   background: url(${cancelIcon}) transparent no-repeat;
   background-size: contain;
+
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    display: ${({ $isSearching }) => !$isSearching && 'none'};
+  }
 `;
 
 const SearchInput = styled.input<{ $isSearching: boolean }>`

From 5151d5a77d4bfb971beec23acbb1ab4b5819ca89 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 19:54:37 +0900
Subject: [PATCH 16/69] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=EC=B0=BD=20?=
 =?UTF-8?q?=EC=97=B4=EA=B3=A0=20=EB=8B=AB=ED=9E=98=20=ED=8A=B8=EB=A0=8C?=
 =?UTF-8?q?=EC=A7=80=EC=85=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/artistSearch/components/SearchBar.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 261cc4c52..6da37ecff 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -37,7 +37,7 @@ const SearchBar = () => {
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox $align="center" $isSearching={isSearching}>
+    <SearchBox $align="center" $justify="space-between" $isSearching={isSearching}>
       <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
       <SearchInput
         type="text"
@@ -87,6 +87,8 @@ const SearchBox = styled(Flex)<{ $isSearching: boolean }>`
   background-color: ${({ theme }) => theme.color.black200};
   border-radius: 16px;
 
+  transition: flex 0.2s ease;
+
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
     flex: ${({ $isSearching }) => $isSearching && 1};
   }
@@ -113,10 +115,6 @@ const BackwardButton = styled.button<{ $isSearching: boolean }>`
 
 const SearchButton = styled.button<{ $isSearching: boolean }>`
   ${searchButtonStyles}
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translate(0, -50%);
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
     display: ${({ $isSearching }) => !$isSearching && 'none'};
@@ -150,8 +148,8 @@ const ResetQueryButton = styled.button<{ $isSearching: boolean }>`
 `;
 
 const SearchInput = styled.input<{ $isSearching: boolean }>`
-  width: 240px;
-  padding: 0 68px 0 8px;
+  width: 220px;
+  padding: 0 40px 0 8px;
 
   color: white;
 
@@ -162,7 +160,7 @@ const SearchInput = styled.input<{ $isSearching: boolean }>`
   transition: all 0.2s ease;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    padding: 0 68px 0 28px;
+    padding: 0 40px 0 28px;
     ${({ $isSearching }) => !$isSearching && inputCloseStyles}
   }
 `;

From a6441d5470ea983b3c441b6dba9647b2897558af Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 19:59:42 +0900
Subject: [PATCH 17/69] =?UTF-8?q?refactor:=20=EC=9B=B9=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

웹 접근성을 위해 기존 div 태그를 form 태그로, 검색중이 아닐때 input disable 처리를 하였음.
---
 frontend/src/features/artistSearch/components/SearchBar.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 6da37ecff..c879a6703 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -37,7 +37,7 @@ const SearchBar = () => {
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox $align="center" $justify="space-between" $isSearching={isSearching}>
+    <SearchBox as="form" $align="center" $justify="space-between" $isSearching={isSearching}>
       <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
       <SearchInput
         type="text"
@@ -48,8 +48,9 @@ const SearchBar = () => {
         onFocus={startSearch}
         onBlur={endSearchOnBlur}
         $isSearching={isSearching}
+        disabled={!isSearching}
       />
-      <SearchButton $isSearching={isSearching} />
+      <SearchButton type="submit" $isSearching={isSearching} />
       <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isQueryFilled && (
         <ResetQueryButton

From 0e91005dd5ec78e59feae46d0f33c755fa1142fd Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 20:04:12 +0900
Subject: [PATCH 18/69] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20css=ED=95=A8=EC=88=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/artistSearch/components/SearchBar.tsx   | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index c879a6703..1feee188e 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -67,11 +67,6 @@ const SearchBar = () => {
 
 export default SearchBar;
 
-const inputCloseStyles = css`
-  width: 0px;
-  padding: 0;
-`;
-
 const searchButtonStyles = css`
   width: 20px;
   height: 20px;
@@ -161,7 +156,7 @@ const SearchInput = styled.input<{ $isSearching: boolean }>`
   transition: all 0.2s ease;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    padding: 0 40px 0 28px;
-    ${({ $isSearching }) => !$isSearching && inputCloseStyles}
+    width: ${({ $isSearching }) => !$isSearching && '0px'};
+    padding: ${({ $isSearching }) => ($isSearching ? '0 40px 0 28px' : 0)};
   }
 `;

From 0991a57fc49fa971f9ff5fefd71d91c8b32377f9 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 8 Oct 2023 20:33:12 +0900
Subject: [PATCH 19/69] =?UTF-8?q?fix:=20disable=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20visibility=20=EB=8C=80?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

디바이스 별로 검색중이 아닐때 보여줄 ui가 달라 disable 속성을 사용할 수 없었음.
트랜지션을 위해 input의 width를 0px로 변경하는 전략을 유지하면서
tab을 불가능하게 하여 접근성을 챙길 수 있는 visibility 속성을 적용하였음.
---
 frontend/src/features/artistSearch/components/SearchBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 1feee188e..0043199b3 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -48,7 +48,6 @@ const SearchBar = () => {
         onFocus={startSearch}
         onBlur={endSearchOnBlur}
         $isSearching={isSearching}
-        disabled={!isSearching}
       />
       <SearchButton type="submit" $isSearching={isSearching} />
       <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
@@ -158,5 +157,6 @@ const SearchInput = styled.input<{ $isSearching: boolean }>`
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
     width: ${({ $isSearching }) => !$isSearching && '0px'};
     padding: ${({ $isSearching }) => ($isSearching ? '0 40px 0 28px' : 0)};
+    visibility: ${({ $isSearching }) => !$isSearching && 'hidden'};
   }
 `;

From a401565fbee670d6efe1fddc29b6429fbe978733 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Mon, 9 Oct 2023 14:12:08 +0900
Subject: [PATCH 20/69] =?UTF-8?q?refactor:=20jsx=EB=A5=BC=20=EC=98=AC?=
 =?UTF-8?q?=EB=B0=94=EB=A5=B8=20DOM=20=EC=88=9C=EC=84=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95=ED=95=98=EC=97=AC=20tab=20=EC=88=9C=EC=84=9C?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A0=95=EB=A0=AC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/artistSearch/components/SearchBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/artistSearch/components/SearchBar.tsx
index 0043199b3..6c8fbf6d1 100644
--- a/frontend/src/features/artistSearch/components/SearchBar.tsx
+++ b/frontend/src/features/artistSearch/components/SearchBar.tsx
@@ -49,8 +49,6 @@ const SearchBar = () => {
         onBlur={endSearchOnBlur}
         $isSearching={isSearching}
       />
-      <SearchButton type="submit" $isSearching={isSearching} />
-      <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isQueryFilled && (
         <ResetQueryButton
           id="query-reset-button"
@@ -59,6 +57,8 @@ const SearchBar = () => {
           $isSearching={isSearching}
         />
       )}
+      <SearchButton type="submit" $isSearching={isSearching} />
+      <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isSearching && <ResultSheet />}
     </SearchBox>
   );

From 20c68422734b9694fe2716b870aa1198e5ace64d Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Mon, 9 Oct 2023 14:16:29 +0900
Subject: [PATCH 21/69] =?UTF-8?q?chore:=20=EB=94=94=EB=A0=89=ED=84=B0?=
 =?UTF-8?q?=EB=A6=AC=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

artistSearch -> search 로 변경하여 추후 검색 기능 확장을 용이하게 하였음.
---
 .../{artistSearch => search}/components/ResultSheet.tsx         | 0
 .../features/{artistSearch => search}/components/SearchBar.tsx  | 0
 frontend/src/shared/components/Layout/Header.tsx                | 2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/features/{artistSearch => search}/components/ResultSheet.tsx (100%)
 rename frontend/src/features/{artistSearch => search}/components/SearchBar.tsx (100%)

diff --git a/frontend/src/features/artistSearch/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
similarity index 100%
rename from frontend/src/features/artistSearch/components/ResultSheet.tsx
rename to frontend/src/features/search/components/ResultSheet.tsx
diff --git a/frontend/src/features/artistSearch/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
similarity index 100%
rename from frontend/src/features/artistSearch/components/SearchBar.tsx
rename to frontend/src/features/search/components/SearchBar.tsx
diff --git a/frontend/src/shared/components/Layout/Header.tsx b/frontend/src/shared/components/Layout/Header.tsx
index e02b2dce6..8bad5a7d8 100644
--- a/frontend/src/shared/components/Layout/Header.tsx
+++ b/frontend/src/shared/components/Layout/Header.tsx
@@ -2,8 +2,8 @@ import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import logo from '@/assets/image/logo.png';
-import SearchBar from '@/features/artistSearch/components/SearchBar';
 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';

From 71d35a0eb443e927dc0a3c9389e72ebe27724b54 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Mon, 9 Oct 2023 15:36:23 +0900
Subject: [PATCH 22/69] =?UTF-8?q?feat:=20isSearching=20true=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=9D=BC=20=EB=95=8C=20input=20focus=20=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20effect=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

비동기적으로 동작하는 setState 특성상 핸들러 함수 내부에서 focus() 하는 방식을 사용할 수 없었음.
때문에 상태와 DOM의 동기화를 위해 effect를 사용함.

또한 visibility의 transition은 애니메이션이 다 적용된 후에 변경하려던 속성을 가지므로
transition 속성을 width에만 적용하도록 변경하였음.
---
 frontend/src/features/search/components/SearchBar.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index 6c8fbf6d1..e9aaac9ca 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import cancelIcon from '@/assets/icon/cancel.svg';
 import backwardIcon from '@/assets/icon/left-arrow.svg';
@@ -36,6 +36,11 @@ const SearchBar = () => {
 
   const isQueryFilled = searchQuery.length !== 0;
 
+  useEffect(() => {
+    if (!isSearching) return;
+    inputRef.current?.focus();
+  }, [isSearching]);
+
   return (
     <SearchBox as="form" $align="center" $justify="space-between" $isSearching={isSearching}>
       <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
@@ -148,11 +153,11 @@ const SearchInput = styled.input<{ $isSearching: boolean }>`
 
   color: white;
 
-  background-color: ${({ theme }) => theme.color.black200};
+  background-color: transparent;
   border: none;
   outline: none;
 
-  transition: all 0.2s ease;
+  transition: width 0.3s ease;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
     width: ${({ $isSearching }) => !$isSearching && '0px'};

From 973b3e38e9f9804012cb41c1746debdd5824376e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Mon, 9 Oct 2023 15:48:26 +0900
Subject: [PATCH 23/69] =?UTF-8?q?refactor:=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/search/components/SearchBar.tsx  | 43 +++++------------
 .../src/features/search/hooks/useSearchBar.ts | 48 +++++++++++++++++++
 2 files changed, 59 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/features/search/hooks/useSearchBar.ts

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index e9aaac9ca..7fd6eaecd 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -1,46 +1,25 @@
-import { useEffect, useRef, useState } from 'react';
 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 ResultSheet from './ResultSheet';
 
 const SearchBar = () => {
-  const [isSearching, setIsSearching] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const startSearch: React.MouseEventHandler & React.FocusEventHandler = () => {
-    setIsSearching(true);
-  };
-
-  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    if (e.relatedTarget?.id === 'query-reset-button') return;
-
-    setIsSearching(false);
-  };
-
-  const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = () => {
-    setIsSearching(false);
-  };
-
-  const changeQuery: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
-    setSearchQuery(currentTarget.value);
-  };
-
-  const resetQuery: React.MouseEventHandler = () => {
-    setSearchQuery('');
-    inputRef.current?.focus();
-  };
+  const {
+    isSearching,
+    searchQuery,
+    inputRef,
+    startSearch,
+    endSearchOnBlur,
+    endSearchOnClick,
+    changeQuery,
+    resetQuery,
+  } = useSearchBar();
 
   const isQueryFilled = searchQuery.length !== 0;
 
-  useEffect(() => {
-    if (!isSearching) return;
-    inputRef.current?.focus();
-  }, [isSearching]);
-
   return (
     <SearchBox as="form" $align="center" $justify="space-between" $isSearching={isSearching}>
       <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
new file mode 100644
index 000000000..33ec9e54c
--- /dev/null
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useSearchBar = () => {
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const startSearch: React.MouseEventHandler & React.FocusEventHandler = () => {
+    setIsSearching(true);
+  };
+
+  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (e.relatedTarget?.id === 'query-reset-button') return;
+
+    setIsSearching(false);
+  };
+
+  const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+    setIsSearching(false);
+  };
+
+  const changeQuery: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
+    setSearchQuery(currentTarget.value);
+  };
+
+  const resetQuery: React.MouseEventHandler = () => {
+    setSearchQuery('');
+    inputRef.current?.focus();
+  };
+
+  useEffect(() => {
+    if (!isSearching) return;
+    inputRef.current?.focus();
+  }, [isSearching]);
+
+  return {
+    isSearching,
+    searchQuery,
+    inputRef,
+    startSearch,
+    endSearchOnBlur,
+    endSearchOnClick,
+    changeQuery,
+    resetQuery,
+  };
+};
+
+export default useSearchBar;

From b007896babc63407042c456a9678889abbbd01bd Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Mon, 9 Oct 2023 15:48:57 +0900
Subject: [PATCH 24/69] =?UTF-8?q?refactor:=20DOM=20=EC=88=9C=EC=84=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9E=AC=EB=B0=B0=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/search/components/SearchBar.tsx  | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index 7fd6eaecd..f0d344cd6 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -92,20 +92,22 @@ const BackwardButton = styled.button<{ $isSearching: boolean }>`
   }
 `;
 
-const SearchButton = styled.button<{ $isSearching: boolean }>`
-  ${searchButtonStyles}
+const SearchInput = styled.input<{ $isSearching: boolean }>`
+  width: 220px;
+  padding: 0 40px 0 8px;
 
-  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    display: ${({ $isSearching }) => !$isSearching && 'none'};
-  }
-`;
+  color: white;
 
-const SearchBarExpendButton = styled.button<{ $isSearching: boolean }>`
-  ${searchButtonStyles}
-  display: none;
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  transition: width 0.3s ease;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    display: ${({ $isSearching }) => !$isSearching && 'block'};
+    width: ${({ $isSearching }) => !$isSearching && '0px'};
+    padding: ${({ $isSearching }) => ($isSearching ? '0 40px 0 28px' : 0)};
+    visibility: ${({ $isSearching }) => !$isSearching && 'hidden'};
   }
 `;
 
@@ -126,21 +128,19 @@ const ResetQueryButton = styled.button<{ $isSearching: boolean }>`
   }
 `;
 
-const SearchInput = styled.input<{ $isSearching: boolean }>`
-  width: 220px;
-  padding: 0 40px 0 8px;
-
-  color: white;
+const SearchButton = styled.button<{ $isSearching: boolean }>`
+  ${searchButtonStyles}
 
-  background-color: transparent;
-  border: none;
-  outline: none;
+  @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
+    display: ${({ $isSearching }) => !$isSearching && 'none'};
+  }
+`;
 
-  transition: width 0.3s ease;
+const SearchBarExpendButton = styled.button<{ $isSearching: boolean }>`
+  ${searchButtonStyles}
+  display: none;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    width: ${({ $isSearching }) => !$isSearching && '0px'};
-    padding: ${({ $isSearching }) => ($isSearching ? '0 40px 0 28px' : 0)};
-    visibility: ${({ $isSearching }) => !$isSearching && 'hidden'};
+    display: ${({ $isSearching }) => !$isSearching && 'block'};
   }
 `;

From 9a4c61ca66bef6c31595bc66bd1746b2ab6176d8 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 08:53:40 +0900
Subject: [PATCH 25/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B4=80=EB=A0=A8=20remote=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EB=B0=8F=20type=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/remotes/search.ts | 12 ++++++++++++
 frontend/src/features/search/types/search.ts   |  9 +++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 frontend/src/features/search/remotes/search.ts
 create mode 100644 frontend/src/features/search/types/search.ts

diff --git a/frontend/src/features/search/remotes/search.ts b/frontend/src/features/search/remotes/search.ts
new file mode 100644
index 000000000..2eb27ce36
--- /dev/null
+++ b/frontend/src/features/search/remotes/search.ts
@@ -0,0 +1,12 @@
+import fetcher from '@/shared/remotes';
+import type { ArtistSearchPreview, ArtistSearchResult } from '../types/search';
+
+export const getArtistSearchPreview = async (query: string): Promise<ArtistSearchPreview[]> => {
+  const encodedQuery = encodeURIComponent(query);
+  return await fetcher(`/artists?name=${encodedQuery}&search=artist`, 'GET');
+};
+
+export const getArtistSearch = async (query: string): Promise<ArtistSearchResult[]> => {
+  const encodedQuery = encodeURIComponent(query);
+  return await fetcher(`/artists?name=${encodedQuery}&search=artist,song`, 'GET');
+};
diff --git a/frontend/src/features/search/types/search.ts b/frontend/src/features/search/types/search.ts
new file mode 100644
index 000000000..bff2b2a28
--- /dev/null
+++ b/frontend/src/features/search/types/search.ts
@@ -0,0 +1,9 @@
+export interface ArtistSearchPreview {
+  singer: string;
+  singerImageUrl: string;
+}
+
+export interface ArtistSearchResult {
+  singer: string;
+  singerImageUrl: string;
+}

From 9660d05962a0e7218f389c85766d3764bc3f6599 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 08:54:32 +0900
Subject: [PATCH 26/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B4=80=EB=A0=A8=20msw=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EB=B0=8F=20fixture=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/browser.ts                 |  3 ++-
 .../mocks/fixtures/searchedArtistPreview.json | 14 +++++++++++
 frontend/src/mocks/handlers/searchHandlers.ts | 23 +++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/mocks/fixtures/searchedArtistPreview.json
 create mode 100644 frontend/src/mocks/handlers/searchHandlers.ts

diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts
index 9d862b0b3..a645aacff 100644
--- a/frontend/src/mocks/browser.ts
+++ b/frontend/src/mocks/browser.ts
@@ -1,5 +1,6 @@
 import { setupWorker } from 'msw';
 import { memberHandlers } from './handlers/memberHandlers';
+import { searchHandlers } from './handlers/searchHandlers';
 import { songsHandlers } from './handlers/songsHandlers';
 
-export const worker = setupWorker(...songsHandlers, ...memberHandlers);
+export const worker = setupWorker(...songsHandlers, ...memberHandlers, ...searchHandlers);
diff --git a/frontend/src/mocks/fixtures/searchedArtistPreview.json b/frontend/src/mocks/fixtures/searchedArtistPreview.json
new file mode 100644
index 000000000..950cca26d
--- /dev/null
+++ b/frontend/src/mocks/fixtures/searchedArtistPreview.json
@@ -0,0 +1,14 @@
+[
+  {
+    "singer": "악동뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "악동",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  }
+]
diff --git a/frontend/src/mocks/handlers/searchHandlers.ts b/frontend/src/mocks/handlers/searchHandlers.ts
new file mode 100644
index 000000000..da7d4a73f
--- /dev/null
+++ b/frontend/src/mocks/handlers/searchHandlers.ts
@@ -0,0 +1,23 @@
+import { rest } from 'msw';
+import searchedArtistPreview from '@/mocks/fixtures/searchedArtistPreview.json';
+
+const { BASE_URL } = process.env;
+
+export const searchHandlers = [
+  rest.get(`${BASE_URL}/artists`, (req, res, ctx) => {
+    const query = req.url.searchParams.get('name') ?? '';
+    const search = req.url.searchParams.get('search');
+    const testQueries = ['악동뮤지션', '악동', '뮤지션'];
+
+    const isPreviewRequest = search === 'artist';
+    const isInTestQueries = testQueries.some(
+      (testQuery) => encodeURIComponent(testQuery) === encodeURIComponent(query)
+    );
+
+    if (isPreviewRequest && isInTestQueries) {
+      return res(ctx.status(200), ctx.json(searchedArtistPreview));
+    }
+
+    return res(ctx.status(200), ctx.json([]));
+  }),
+];

From 073954583484a6e6ca31000ec461dc5eb15ded1a Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 08:58:04 +0900
Subject: [PATCH 27/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=94=94=EB=B0=94?=
 =?UTF-8?q?=EC=9A=B4=EC=8A=A4=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/SearchBar.tsx |  3 ++-
 frontend/src/features/search/hooks/useSearchBar.ts    | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index f0d344cd6..34267b965 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -11,6 +11,7 @@ const SearchBar = () => {
     isSearching,
     searchQuery,
     inputRef,
+    artistSearchPreview,
     startSearch,
     endSearchOnBlur,
     endSearchOnClick,
@@ -43,7 +44,7 @@ const SearchBar = () => {
       )}
       <SearchButton type="submit" $isSearching={isSearching} />
       <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
-      {isSearching && <ResultSheet />}
+      {isSearching && <ResultSheet result={artistSearchPreview ?? []} />}
     </SearchBox>
   );
 };
diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 33ec9e54c..4a80fc195 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -1,10 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
+import useDebounceEffect from '@/shared/hooks/useDebounceEffect';
+import useFetch from '@/shared/hooks/useFetch';
+import { getArtistSearchPreview } from '../remotes/search';
 
 const useSearchBar = () => {
   const [isSearching, setIsSearching] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const { data: artistSearchPreview, fetchData: fetchArtistSearchPreview } = useFetch(
+    () => getArtistSearchPreview(searchQuery),
+    false
+  );
+
+  useDebounceEffect(fetchArtistSearchPreview, searchQuery, 300);
+
   const startSearch: React.MouseEventHandler & React.FocusEventHandler = () => {
     setIsSearching(true);
   };
@@ -37,6 +47,7 @@ const useSearchBar = () => {
     isSearching,
     searchQuery,
     inputRef,
+    artistSearchPreview,
     startSearch,
     endSearchOnBlur,
     endSearchOnClick,

From 8f1f06693af59c095584788e357bd114c6076c38 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 14:08:02 +0900
Subject: [PATCH 28/69] =?UTF-8?q?refactor:=20msw=20fixture=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mocks/fixtures/searchedArtistPreview.json | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/src/mocks/fixtures/searchedArtistPreview.json b/frontend/src/mocks/fixtures/searchedArtistPreview.json
index 950cca26d..2ecf6b4a8 100644
--- a/frontend/src/mocks/fixtures/searchedArtistPreview.json
+++ b/frontend/src/mocks/fixtures/searchedArtistPreview.json
@@ -7,6 +7,30 @@
     "singer": "악동",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
+  {
+    "singer": "뮤지션",
+    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+  },
   {
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"

From e6cb8c496980bfef94ed1ae4b226e4fecd181402 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 14:16:09 +0900
Subject: [PATCH 29/69] =?UTF-8?q?refactor:=20=EC=8D=B8=EB=84=A4=EC=9D=BC?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=A6=88=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/songs/components/Thumbnail.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/features/songs/components/Thumbnail.tsx b/frontend/src/features/songs/components/Thumbnail.tsx
index 9a90e106a..28082b28c 100644
--- a/frontend/src/features/songs/components/Thumbnail.tsx
+++ b/frontend/src/features/songs/components/Thumbnail.tsx
@@ -28,6 +28,11 @@ const Wrapper = styled.div<{ $size: Size; $borderRadius: number }>`
 `;
 
 const SIZE_VARIANTS = {
+  sm: css`
+    width: 50px;
+    height: 50px;
+  `,
+
   md: css`
     width: 60px;
     height: 60px;

From 36ba66cd18ea9edc7df90e4b478d01ad74531361 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 14:25:10 +0900
Subject: [PATCH 30/69] =?UTF-8?q?refactor:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B0=80=EC=88=98=20type=EC=97=90=20id=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/types/search.ts           | 1 +
 frontend/src/mocks/fixtures/searchedArtistPreview.json | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/frontend/src/features/search/types/search.ts b/frontend/src/features/search/types/search.ts
index bff2b2a28..60e7d988a 100644
--- a/frontend/src/features/search/types/search.ts
+++ b/frontend/src/features/search/types/search.ts
@@ -1,4 +1,5 @@
 export interface ArtistSearchPreview {
+  id: number;
   singer: string;
   singerImageUrl: string;
 }
diff --git a/frontend/src/mocks/fixtures/searchedArtistPreview.json b/frontend/src/mocks/fixtures/searchedArtistPreview.json
index 2ecf6b4a8..01b67f62b 100644
--- a/frontend/src/mocks/fixtures/searchedArtistPreview.json
+++ b/frontend/src/mocks/fixtures/searchedArtistPreview.json
@@ -1,37 +1,46 @@
 [
   {
+    "id": 1,
     "singer": "악동뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 2,
     "singer": "악동",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 3,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 4,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 5,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 6,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 7,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 8,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
+    "id": 9,
     "singer": "뮤지션",
     "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   }

From ef420157753c810358b9e509b651d47c7414c893 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 14:26:07 +0900
Subject: [PATCH 31/69] =?UTF-8?q?feat:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=8B=9C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=94=EC=9D=B8?=
 =?UTF-8?q?=EB=94=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search/components/ResultSheet.tsx         | 76 +++++++++++++++----
 1 file changed, 63 insertions(+), 13 deletions(-)

diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
index 9355546a7..dad712ac2 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/ResultSheet.tsx
@@ -1,15 +1,28 @@
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
+import Thumbnail from '@/features/songs/components/Thumbnail';
+import Flex from '@/shared/components/Flex/Flex';
+import type { ArtistSearchPreview } from '../types/search';
+
+interface ResultSheetProps {
+  result: ArtistSearchPreview[];
+}
+
+const ResultSheet = ({ result }: ResultSheetProps) => {
+  const hasResult = result.length > 0;
 
-const ResultSheet = () => {
   return createPortal(
     <SheetContainer>
-      <SheetTitle>아티스트</SheetTitle>
-      <TestList>
-        <TestItem>1</TestItem>
-        <TestItem>2</TestItem>
-        <TestItem>3</TestItem>
-      </TestList>
+      <SheetTitle $align="center">아티스트</SheetTitle>
+      <PreviewItemList as="ul" $direction="column" $gap={16} aria-label="검색 결과 미리보기">
+        {result.map(({ id, singer, singerImageUrl }, idx) => (
+          <PreviewItem key={id} as="li" $align="center" $gap={16} aria-label={`${idx}번 ${singer}`}>
+            <Thumbnail src={singerImageUrl} alt="" size="sm" />
+            <Singer aria-disabled>{singer}</Singer>
+          </PreviewItem>
+        ))}
+      </PreviewItemList>
+      {!hasResult && <DefaultMessage>검색 결과가 없습니다</DefaultMessage>}
     </SheetContainer>,
     document.body
   );
@@ -23,13 +36,18 @@ const SheetContainer = styled.div`
   top: 70px;
   right: 12.33%;
 
-  width: 400px;
-  min-height: auto;
+  overflow-y: scroll;
+
+  width: 340px;
+  height: auto;
+  max-height: 320px;
+  padding: 0 16px 16px 16px;
 
   color: white;
 
-  background-color: #161f18;
+  background-color: #121212;
   border-radius: 8px;
+  box-shadow: 0px 0px 10px #ffffff49;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xxl}) {
     right: 8.33%;
@@ -50,6 +68,38 @@ const SheetContainer = styled.div`
   }
 `;
 
-const SheetTitle = styled.p``;
-const TestList = styled.ul``;
-const TestItem = styled.li``;
+const SheetTitle = styled(Flex)`
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  height: 50px;
+
+  font-weight: 700;
+  letter-spacing: 2px;
+
+  background-color: #121212;
+`;
+
+const PreviewItemList = styled(Flex)``;
+
+const PreviewItem = styled(Flex)`
+  cursor: pointer;
+
+  width: 100%;
+  height: 64px;
+  padding: 8px;
+
+  background-color: ${({ theme: { color } }) => color.black400};
+  border-radius: 4px;
+
+  &:hover {
+    background-color: ${({ theme: { color } }) => color.secondary};
+  }
+`;
+
+const Singer = styled.p`
+  font-weight: 700;
+  letter-spacing: 1px;
+`;
+const DefaultMessage = styled.p``;

From e592ff590a5695c636d8a72573c1d265e82cc39f Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:14:35 +0900
Subject: [PATCH 32/69] =?UTF-8?q?feat:=20useValidSearchParams=20=ED=9B=85?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/shared/hooks/useValidSearchParams.ts     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 frontend/src/shared/hooks/useValidSearchParams.ts

diff --git a/frontend/src/shared/hooks/useValidSearchParams.ts b/frontend/src/shared/hooks/useValidSearchParams.ts
new file mode 100644
index 000000000..0786417d6
--- /dev/null
+++ b/frontend/src/shared/hooks/useValidSearchParams.ts
@@ -0,0 +1,16 @@
+import { useSearchParams } from 'react-router-dom';
+
+const useValidSearchParams = (...params: string[]) => {
+  const [searchParams] = useSearchParams();
+
+  const validParams = params.map((param) => {
+    const validParam = searchParams.get(param);
+    if (validParam === null) throw new Error('Invalid search parameters');
+
+    return validParam;
+  });
+
+  return validParams;
+};
+
+export default useValidSearchParams;

From d4e39cc3809910586dc288c387a0589f7a7df0c7 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:15:38 +0900
Subject: [PATCH 33/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/SearchResultPage.tsx | 9 +++++++++
 frontend/src/router.tsx                 | 5 +++++
 frontend/src/shared/constants/path.ts   | 1 +
 3 files changed, 15 insertions(+)
 create mode 100644 frontend/src/pages/SearchResultPage.tsx

diff --git a/frontend/src/pages/SearchResultPage.tsx b/frontend/src/pages/SearchResultPage.tsx
new file mode 100644
index 000000000..3d3ba4235
--- /dev/null
+++ b/frontend/src/pages/SearchResultPage.tsx
@@ -0,0 +1,9 @@
+import useValidSearchParams from '@/shared/hooks/useValidSearchParams';
+
+const SearchResultPage = () => {
+  const [name] = useValidSearchParams('name');
+
+  return <div>{name}</div>;
+};
+
+export default SearchResultPage;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 99e9b8af7..98984c4e1 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -6,6 +6,7 @@ import LoginPage from './pages/LoginPage';
 import MainPage from './pages/MainPage';
 import MyPage from './pages/MyPage';
 import PartCollectingPage from './pages/PartCollectingPage';
+import SearchResultPage from './pages/SearchResultPage';
 import SongDetailListPage from './pages/SongDetailListPage';
 import AuthLayout from './shared/components/Layout/AuthLayout';
 import Layout from './shared/components/Layout/Layout';
@@ -52,6 +53,10 @@ const router = createBrowserRouter([
           </AuthLayout>
         ),
       },
+      {
+        path: `${ROUTE_PATH.SEARCH_RESULT}`,
+        element: <SearchResultPage />,
+      },
     ],
   },
   {
diff --git a/frontend/src/shared/constants/path.ts b/frontend/src/shared/constants/path.ts
index b885585c0..03c146e15 100644
--- a/frontend/src/shared/constants/path.ts
+++ b/frontend/src/shared/constants/path.ts
@@ -7,6 +7,7 @@ const ROUTE_PATH = {
   KAKAO_REDIRECT: 'kakao/redirect',
   MY_PAGE: 'my-page',
   EDIT_PROFILE: 'my-page/edit',
+  SEARCH_RESULT: 'search',
 } as const;
 
 export default ROUTE_PATH;

From 04bff5278a59fae73b7110d0b32ab1ab9770fb3d Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:16:22 +0900
Subject: [PATCH 34/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EB=B0=94=EC=9D=B8?=
 =?UTF-8?q?=EB=94=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/SearchBar.tsx | 9 ++++++++-
 frontend/src/features/search/hooks/useSearchBar.ts    | 9 +++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index 34267b965..ad7c86dc8 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -17,12 +17,19 @@ const SearchBar = () => {
     endSearchOnClick,
     changeQuery,
     resetQuery,
+    search,
   } = useSearchBar();
 
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox as="form" $align="center" $justify="space-between" $isSearching={isSearching}>
+    <SearchBox
+      as="form"
+      $align="center"
+      $justify="space-between"
+      onSubmit={search}
+      $isSearching={isSearching}
+    >
       <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
       <SearchInput
         type="text"
diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 4a80fc195..785c9f365 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/shared/constants/path';
 import useDebounceEffect from '@/shared/hooks/useDebounceEffect';
 import useFetch from '@/shared/hooks/useFetch';
 import { getArtistSearchPreview } from '../remotes/search';
@@ -7,6 +9,12 @@ const useSearchBar = () => {
   const [isSearching, setIsSearching] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const navigate = useNavigate();
+
+  const search: React.FormEventHandler = (e) => {
+    e.preventDefault();
+    navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
+  };
 
   const { data: artistSearchPreview, fetchData: fetchArtistSearchPreview } = useFetch(
     () => getArtistSearchPreview(searchQuery),
@@ -53,6 +61,7 @@ const useSearchBar = () => {
     endSearchOnClick,
     changeQuery,
     resetQuery,
+    search,
   };
 };
 

From 7d238a081fe7aa5937be7d8828302e331efb6aa7 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:17:38 +0900
Subject: [PATCH 35/69] =?UTF-8?q?style:=20=ED=95=A8=EC=88=98=20=EC=88=9C?=
 =?UTF-8?q?=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/hooks/useSearchBar.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 785c9f365..4e0561c1b 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -11,11 +11,6 @@ const useSearchBar = () => {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const navigate = useNavigate();
 
-  const search: React.FormEventHandler = (e) => {
-    e.preventDefault();
-    navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
-  };
-
   const { data: artistSearchPreview, fetchData: fetchArtistSearchPreview } = useFetch(
     () => getArtistSearchPreview(searchQuery),
     false
@@ -23,6 +18,11 @@ const useSearchBar = () => {
 
   useDebounceEffect(fetchArtistSearchPreview, searchQuery, 300);
 
+  const search: React.FormEventHandler = (e) => {
+    e.preventDefault();
+    navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
+  };
+
   const startSearch: React.MouseEventHandler & React.FocusEventHandler = () => {
     setIsSearching(true);
   };

From bc49b86a6a13b97c1c4e1f89db2daf27c07612bb Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:22:00 +0900
Subject: [PATCH 36/69] =?UTF-8?q?feat:=20=EA=B0=80=EC=88=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=EC=A0=95=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/SingerDetailPage.tsx | 9 +++++++++
 frontend/src/router.tsx                 | 5 +++++
 frontend/src/shared/constants/path.ts   | 1 +
 3 files changed, 15 insertions(+)
 create mode 100644 frontend/src/pages/SingerDetailPage.tsx

diff --git a/frontend/src/pages/SingerDetailPage.tsx b/frontend/src/pages/SingerDetailPage.tsx
new file mode 100644
index 000000000..ef49145a5
--- /dev/null
+++ b/frontend/src/pages/SingerDetailPage.tsx
@@ -0,0 +1,9 @@
+import useValidParams from '@/shared/hooks/useValidParams';
+
+const SingerDetailPage = () => {
+  const { singerId } = useValidParams();
+
+  return <div>SingerDetailPage</div>;
+};
+
+export default SingerDetailPage;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 98984c4e1..101b076c2 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -7,6 +7,7 @@ import MainPage from './pages/MainPage';
 import MyPage from './pages/MyPage';
 import PartCollectingPage from './pages/PartCollectingPage';
 import SearchResultPage from './pages/SearchResultPage';
+import SingerDetailPage from './pages/SingerDetailPage';
 import SongDetailListPage from './pages/SongDetailListPage';
 import AuthLayout from './shared/components/Layout/AuthLayout';
 import Layout from './shared/components/Layout/Layout';
@@ -57,6 +58,10 @@ const router = createBrowserRouter([
         path: `${ROUTE_PATH.SEARCH_RESULT}`,
         element: <SearchResultPage />,
       },
+      {
+        path: `${ROUTE_PATH.SINGER_DETAIL}/:singerId`,
+        element: <SingerDetailPage />,
+      },
     ],
   },
   {
diff --git a/frontend/src/shared/constants/path.ts b/frontend/src/shared/constants/path.ts
index 03c146e15..cf70a9a42 100644
--- a/frontend/src/shared/constants/path.ts
+++ b/frontend/src/shared/constants/path.ts
@@ -8,6 +8,7 @@ const ROUTE_PATH = {
   MY_PAGE: 'my-page',
   EDIT_PROFILE: 'my-page/edit',
   SEARCH_RESULT: 'search',
+  SINGER_DETAIL: 'singer',
 } as const;
 
 export default ROUTE_PATH;

From f295f6861b71742e5dba027a09356b1669f932a7 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:31:54 +0900
Subject: [PATCH 37/69] =?UTF-8?q?refactor:=20useValidSearchParams=20return?=
 =?UTF-8?q?=20=EA=B0=92=20=EA=B0=9D=EC=B2=B4=EB=A1=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사용처에서 순서에 상관없이 사용할 수 있도록 개선
---
 frontend/src/pages/SearchResultPage.tsx           | 2 +-
 frontend/src/shared/hooks/useValidSearchParams.ts | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/SearchResultPage.tsx b/frontend/src/pages/SearchResultPage.tsx
index 3d3ba4235..4a9084166 100644
--- a/frontend/src/pages/SearchResultPage.tsx
+++ b/frontend/src/pages/SearchResultPage.tsx
@@ -1,7 +1,7 @@
 import useValidSearchParams from '@/shared/hooks/useValidSearchParams';
 
 const SearchResultPage = () => {
-  const [name] = useValidSearchParams('name');
+  const { name } = useValidSearchParams('name');
 
   return <div>{name}</div>;
 };
diff --git a/frontend/src/shared/hooks/useValidSearchParams.ts b/frontend/src/shared/hooks/useValidSearchParams.ts
index 0786417d6..21f1d3269 100644
--- a/frontend/src/shared/hooks/useValidSearchParams.ts
+++ b/frontend/src/shared/hooks/useValidSearchParams.ts
@@ -3,11 +3,13 @@ import { useSearchParams } from 'react-router-dom';
 const useValidSearchParams = (...params: string[]) => {
   const [searchParams] = useSearchParams();
 
-  const validParams = params.map((param) => {
+  const validParams: Record<string, string> = {};
+
+  params.forEach((param) => {
     const validParam = searchParams.get(param);
     if (validParam === null) throw new Error('Invalid search parameters');
 
-    return validParam;
+    validParams[param] = validParam;
   });
 
   return validParams;

From eb0cff67d121cf798f0d4f70646d092e9713a84d Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 15:46:59 +0900
Subject: [PATCH 38/69] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=8B=9C=20input=20blur=20=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/hooks/useSearchBar.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 4e0561c1b..8c3556af0 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -20,6 +20,7 @@ const useSearchBar = () => {
 
   const search: React.FormEventHandler = (e) => {
     e.preventDefault();
+    setIsSearching(false);
     navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
   };
 
@@ -47,8 +48,11 @@ const useSearchBar = () => {
   };
 
   useEffect(() => {
-    if (!isSearching) return;
-    inputRef.current?.focus();
+    if (isSearching) {
+      inputRef.current?.focus();
+    } else {
+      inputRef.current?.blur();
+    }
   }, [isSearching]);
 
   return {

From b04045722a218e47198cbf02efa5637fee2a7ea3 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 18:08:51 +0900
Subject: [PATCH 39/69] =?UTF-8?q?refactor:=20=EB=B3=80=EA=B2=BD=EB=90=9C?=
 =?UTF-8?q?=20api=20=EB=AA=85=EC=84=B8=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/search/components/ResultSheet.tsx |  4 ++--
 frontend/src/features/search/remotes/search.ts |  4 ++--
 frontend/src/features/search/types/search.ts   | 14 ++++++++++++--
 .../mocks/fixtures/searchedArtistPreview.json  | 18 +++++++++---------
 frontend/src/mocks/handlers/searchHandlers.ts  |  4 ++--
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
index dad712ac2..c1a66d4e4 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/ResultSheet.tsx
@@ -15,9 +15,9 @@ const ResultSheet = ({ result }: ResultSheetProps) => {
     <SheetContainer>
       <SheetTitle $align="center">아티스트</SheetTitle>
       <PreviewItemList as="ul" $direction="column" $gap={16} aria-label="검색 결과 미리보기">
-        {result.map(({ id, singer, singerImageUrl }, idx) => (
+        {result.map(({ id, singer, profileImageUrl }, idx) => (
           <PreviewItem key={id} as="li" $align="center" $gap={16} aria-label={`${idx}번 ${singer}`}>
-            <Thumbnail src={singerImageUrl} alt="" size="sm" />
+            <Thumbnail src={profileImageUrl} alt="" size="sm" />
             <Singer aria-disabled>{singer}</Singer>
           </PreviewItem>
         ))}
diff --git a/frontend/src/features/search/remotes/search.ts b/frontend/src/features/search/remotes/search.ts
index 2eb27ce36..1cefec434 100644
--- a/frontend/src/features/search/remotes/search.ts
+++ b/frontend/src/features/search/remotes/search.ts
@@ -3,10 +3,10 @@ import type { ArtistSearchPreview, ArtistSearchResult } from '../types/search';
 
 export const getArtistSearchPreview = async (query: string): Promise<ArtistSearchPreview[]> => {
   const encodedQuery = encodeURIComponent(query);
-  return await fetcher(`/artists?name=${encodedQuery}&search=artist`, 'GET');
+  return await fetcher(`/singers?name=${encodedQuery}&search=singer`, 'GET');
 };
 
 export const getArtistSearch = async (query: string): Promise<ArtistSearchResult[]> => {
   const encodedQuery = encodeURIComponent(query);
-  return await fetcher(`/artists?name=${encodedQuery}&search=artist,song`, 'GET');
+  return await fetcher(`/singers?name=${encodedQuery}&search=singer,song`, 'GET');
 };
diff --git a/frontend/src/features/search/types/search.ts b/frontend/src/features/search/types/search.ts
index 60e7d988a..3545d8c9a 100644
--- a/frontend/src/features/search/types/search.ts
+++ b/frontend/src/features/search/types/search.ts
@@ -1,10 +1,20 @@
+interface ArtistsSong {
+  id: number;
+  title: string;
+  albumCoverUrl: string;
+  videoLength: number;
+}
+
 export interface ArtistSearchPreview {
   id: number;
   singer: string;
-  singerImageUrl: string;
+  profileImageUrl: string;
 }
 
 export interface ArtistSearchResult {
+  id: number;
   singer: string;
-  singerImageUrl: string;
+  profileImageUrl: string;
+  totalSongCount: number;
+  songs: ArtistsSong[];
 }
diff --git a/frontend/src/mocks/fixtures/searchedArtistPreview.json b/frontend/src/mocks/fixtures/searchedArtistPreview.json
index 01b67f62b..3f9979bfe 100644
--- a/frontend/src/mocks/fixtures/searchedArtistPreview.json
+++ b/frontend/src/mocks/fixtures/searchedArtistPreview.json
@@ -2,46 +2,46 @@
   {
     "id": 1,
     "singer": "악동뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 2,
     "singer": "악동",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 3,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 4,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 5,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 6,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 7,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 8,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   },
   {
     "id": 9,
     "singer": "뮤지션",
-    "singerImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   }
 ]
diff --git a/frontend/src/mocks/handlers/searchHandlers.ts b/frontend/src/mocks/handlers/searchHandlers.ts
index da7d4a73f..72dfabcf9 100644
--- a/frontend/src/mocks/handlers/searchHandlers.ts
+++ b/frontend/src/mocks/handlers/searchHandlers.ts
@@ -4,12 +4,12 @@ import searchedArtistPreview from '@/mocks/fixtures/searchedArtistPreview.json';
 const { BASE_URL } = process.env;
 
 export const searchHandlers = [
-  rest.get(`${BASE_URL}/artists`, (req, res, ctx) => {
+  rest.get(`${BASE_URL}/singers`, (req, res, ctx) => {
     const query = req.url.searchParams.get('name') ?? '';
     const search = req.url.searchParams.get('search');
     const testQueries = ['악동뮤지션', '악동', '뮤지션'];
 
-    const isPreviewRequest = search === 'artist';
+    const isPreviewRequest = search === 'singer';
     const isInTestQueries = testQueries.some(
       (testQuery) => encodeURIComponent(testQuery) === encodeURIComponent(query)
     );

From 6c1186accb093fde29b11aec5ae58a2fcb0d5e56 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 18:34:29 +0900
Subject: [PATCH 40/69] =?UTF-8?q?refactor:=20Artist=20->=20singer=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/types/search.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/search/types/search.ts b/frontend/src/features/search/types/search.ts
index 3545d8c9a..133dad1b7 100644
--- a/frontend/src/features/search/types/search.ts
+++ b/frontend/src/features/search/types/search.ts
@@ -1,20 +1,20 @@
-interface ArtistsSong {
+interface SingersSong {
   id: number;
   title: string;
   albumCoverUrl: string;
   videoLength: number;
 }
 
-export interface ArtistSearchPreview {
+export interface SingerSearchPreview {
   id: number;
   singer: string;
   profileImageUrl: string;
 }
 
-export interface ArtistSearchResult {
+export interface SingerSearchResult {
   id: number;
   singer: string;
   profileImageUrl: string;
   totalSongCount: number;
-  songs: ArtistsSong[];
+  songs: SingersSong[];
 }

From 4f1ce892c465f647847780370672f3905db448c1 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 19:26:38 +0900
Subject: [PATCH 41/69] =?UTF-8?q?refactor:=20Artist=20->=20singer=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/search/components/ResultSheet.tsx     |  4 ++--
 frontend/src/features/search/components/SearchBar.tsx  |  4 ++--
 frontend/src/features/search/hooks/useSearchBar.ts     | 10 +++++-----
 frontend/src/features/search/remotes/search.ts         |  6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
index c1a66d4e4..13442f3e8 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/ResultSheet.tsx
@@ -2,10 +2,10 @@ import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import Thumbnail from '@/features/songs/components/Thumbnail';
 import Flex from '@/shared/components/Flex/Flex';
-import type { ArtistSearchPreview } from '../types/search';
+import type { SingerSearchPreview } from '../types/search';
 
 interface ResultSheetProps {
-  result: ArtistSearchPreview[];
+  result: SingerSearchPreview[];
 }
 
 const ResultSheet = ({ result }: ResultSheetProps) => {
diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index ad7c86dc8..e9f8b45ad 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -11,7 +11,7 @@ const SearchBar = () => {
     isSearching,
     searchQuery,
     inputRef,
-    artistSearchPreview,
+    singerSearchPreview,
     startSearch,
     endSearchOnBlur,
     endSearchOnClick,
@@ -51,7 +51,7 @@ const SearchBar = () => {
       )}
       <SearchButton type="submit" $isSearching={isSearching} />
       <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
-      {isSearching && <ResultSheet result={artistSearchPreview ?? []} />}
+      {isSearching && <ResultSheet result={singerSearchPreview ?? []} />}
     </SearchBox>
   );
 };
diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 8c3556af0..1829dd325 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/shared/constants/path';
 import useDebounceEffect from '@/shared/hooks/useDebounceEffect';
 import useFetch from '@/shared/hooks/useFetch';
-import { getArtistSearchPreview } from '../remotes/search';
+import { getSingerSearchPreview } from '../remotes/search';
 
 const useSearchBar = () => {
   const [isSearching, setIsSearching] = useState(false);
@@ -11,12 +11,12 @@ const useSearchBar = () => {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const navigate = useNavigate();
 
-  const { data: artistSearchPreview, fetchData: fetchArtistSearchPreview } = useFetch(
-    () => getArtistSearchPreview(searchQuery),
+  const { data: singerSearchPreview, fetchData: fetchSingerSearchPreview } = useFetch(
+    () => getSingerSearchPreview(searchQuery),
     false
   );
 
-  useDebounceEffect(fetchArtistSearchPreview, searchQuery, 300);
+  useDebounceEffect(fetchSingerSearchPreview, searchQuery, 300);
 
   const search: React.FormEventHandler = (e) => {
     e.preventDefault();
@@ -59,7 +59,7 @@ const useSearchBar = () => {
     isSearching,
     searchQuery,
     inputRef,
-    artistSearchPreview,
+    singerSearchPreview,
     startSearch,
     endSearchOnBlur,
     endSearchOnClick,
diff --git a/frontend/src/features/search/remotes/search.ts b/frontend/src/features/search/remotes/search.ts
index 1cefec434..34a9ba13c 100644
--- a/frontend/src/features/search/remotes/search.ts
+++ b/frontend/src/features/search/remotes/search.ts
@@ -1,12 +1,12 @@
 import fetcher from '@/shared/remotes';
-import type { ArtistSearchPreview, ArtistSearchResult } from '../types/search';
+import type { SingerSearchPreview, SingerSearchResult } from '../types/search';
 
-export const getArtistSearchPreview = async (query: string): Promise<ArtistSearchPreview[]> => {
+export const getSingerSearchPreview = async (query: string): Promise<SingerSearchPreview[]> => {
   const encodedQuery = encodeURIComponent(query);
   return await fetcher(`/singers?name=${encodedQuery}&search=singer`, 'GET');
 };
 
-export const getArtistSearch = async (query: string): Promise<ArtistSearchResult[]> => {
+export const getSingerSearch = async (query: string): Promise<SingerSearchResult[]> => {
   const encodedQuery = encodeURIComponent(query);
   return await fetcher(`/singers?name=${encodedQuery}&search=singer,song`, 'GET');
 };

From 3a45d8f3032a6b92e49fcaf2c6f8b6a7f266708e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 20:46:53 +0900
Subject: [PATCH 42/69] =?UTF-8?q?refactor:=20=ED=95=B8=EB=93=A4=EB=9F=AC?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=20useCallback=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/search/hooks/useSearchBar.ts | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 1829dd325..3bdb46701 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/shared/constants/path';
 import useDebounceEffect from '@/shared/hooks/useDebounceEffect';
@@ -18,34 +18,40 @@ const useSearchBar = () => {
 
   useDebounceEffect(fetchSingerSearchPreview, searchQuery, 300);
 
-  const search: React.FormEventHandler = (e) => {
-    e.preventDefault();
-    setIsSearching(false);
-    navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
-  };
+  const search: React.FormEventHandler = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsSearching(false);
+      navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
+    },
+    [searchQuery, navigate]
+  );
 
-  const startSearch: React.MouseEventHandler & React.FocusEventHandler = () => {
+  const startSearch: React.MouseEventHandler & React.FocusEventHandler = useCallback(() => {
     setIsSearching(true);
-  };
+  }, []);
 
-  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback((e) => {
     if (e.relatedTarget?.id === 'query-reset-button') return;
 
     setIsSearching(false);
-  };
+  }, []);
 
-  const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+  const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(() => {
     setIsSearching(false);
-  };
+  }, []);
 
-  const changeQuery: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
-    setSearchQuery(currentTarget.value);
-  };
+  const changeQuery: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    ({ currentTarget }) => {
+      setSearchQuery(currentTarget.value);
+    },
+    []
+  );
 
-  const resetQuery: React.MouseEventHandler = () => {
+  const resetQuery: React.MouseEventHandler = useCallback(() => {
     setSearchQuery('');
     inputRef.current?.focus();
-  };
+  }, []);
 
   useEffect(() => {
     if (isSearching) {

From 8597f53bcfbfcdd71a941f2b9ff3574ece9033e8 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 21:51:21 +0900
Subject: [PATCH 43/69] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EA=B2=B0=EA=B3=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=EA=B0=80=EC=88=98=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

input의 onBlur 이벤트에 우선순위가 있기 때문에 onMouseDown 이벤트 사용
---
 .../search/components/ResultSheet.tsx         | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
index 13442f3e8..a8b3e3a34 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/ResultSheet.tsx
@@ -1,7 +1,9 @@
 import { createPortal } from 'react-dom';
+import { Link, useNavigate } from 'react-router-dom';
 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';
 
 interface ResultSheetProps {
@@ -9,14 +11,25 @@ interface ResultSheetProps {
 }
 
 const ResultSheet = ({ result }: ResultSheetProps) => {
+  const navigate = useNavigate();
+
   const hasResult = result.length > 0;
 
   return createPortal(
     <SheetContainer>
-      <SheetTitle $align="center">아티스트</SheetTitle>
-      <PreviewItemList as="ul" $direction="column" $gap={16} aria-label="검색 결과 미리보기">
-        {result.map(({ id, singer, profileImageUrl }, idx) => (
-          <PreviewItem key={id} as="li" $align="center" $gap={16} aria-label={`${idx}번 ${singer}`}>
+      <SheetTitle $align="center" aria-disabled>
+        아티스트
+      </SheetTitle>
+      <PreviewItemList as="ul" $direction="column" $gap={16} aria-label="아티스트 검색 결과">
+        {result.map(({ id, singer, profileImageUrl }) => (
+          <PreviewItem
+            key={id}
+            onMouseDown={() => navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`)}
+            aria-label={`${singer} 상세 페이지 바로가기`}
+            as="li"
+            $align="center"
+            $gap={16}
+          >
             <Thumbnail src={profileImageUrl} alt="" size="sm" />
             <Singer aria-disabled>{singer}</Singer>
           </PreviewItem>
@@ -87,7 +100,7 @@ const PreviewItem = styled(Flex)`
   cursor: pointer;
 
   width: 100%;
-  height: 64px;
+  height: 66px;
   padding: 8px;
 
   background-color: ${({ theme: { color } }) => color.black400};

From ff2b3499a462fa75a257d1f7b344555793405bd1 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 21:51:52 +0900
Subject: [PATCH 44/69] =?UTF-8?q?feat:=20=EA=B0=80=EC=88=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20remote=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/remotes/search.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/features/search/remotes/search.ts b/frontend/src/features/search/remotes/search.ts
index 34a9ba13c..db00530e5 100644
--- a/frontend/src/features/search/remotes/search.ts
+++ b/frontend/src/features/search/remotes/search.ts
@@ -10,3 +10,7 @@ export const getSingerSearch = async (query: string): Promise<SingerSearchResult
   const encodedQuery = encodeURIComponent(query);
   return await fetcher(`/singers?name=${encodedQuery}&search=singer,song`, 'GET');
 };
+
+export const getSingerDetail = async (singerId: number): Promise<SingerSearchResult> => {
+  return await fetcher(`/singers/${singerId}`, 'GET');
+};

From 134a10a9eee78e459b4005a6ec28b2b5bb23a82e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Wed, 11 Oct 2023 22:48:44 +0900
Subject: [PATCH 45/69] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9B=B9=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0=20create=20portal=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20?=
 =?UTF-8?q?item=EC=9D=84=20button=EC=9C=BC=EB=A1=9C=20=EB=9E=98=ED=95=91?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20tabable=20=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EC=9E=98=EB=AA=BB=EB=90=9C=20disabled=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20hidden=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search/components/ResultSheet.tsx         | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
index a8b3e3a34..84ac0b6d5 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/ResultSheet.tsx
@@ -1,5 +1,4 @@
-import { createPortal } from 'react-dom';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import Thumbnail from '@/features/songs/components/Thumbnail';
 import Flex from '@/shared/components/Flex/Flex';
@@ -15,35 +14,36 @@ const ResultSheet = ({ result }: ResultSheetProps) => {
 
   const hasResult = result.length > 0;
 
-  return createPortal(
-    <SheetContainer>
-      <SheetTitle $align="center" aria-disabled>
+  return (
+    <SheetContainer aria-label="아티스트 검색 결과 미리보기">
+      <SheetTitle $align="center" aria-hidden>
         아티스트
       </SheetTitle>
-      <PreviewItemList as="ul" $direction="column" $gap={16} aria-label="아티스트 검색 결과">
+      <PreviewItemList as="ul" $direction="column" $gap={16}>
         {result.map(({ id, singer, profileImageUrl }) => (
-          <PreviewItem
-            key={id}
-            onMouseDown={() => navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`)}
-            aria-label={`${singer} 상세 페이지 바로가기`}
-            as="li"
-            $align="center"
-            $gap={16}
-          >
-            <Thumbnail src={profileImageUrl} alt="" size="sm" />
-            <Singer aria-disabled>{singer}</Singer>
+          <PreviewItem key={id} as="li">
+            <GoToDetail
+              as="button"
+              type="button"
+              onMouseDown={() => navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`)}
+              aria-label={`${singer} 상세 페이지 바로가기`}
+              $gap={16}
+              $align="center"
+            >
+              <Thumbnail src={profileImageUrl} alt="" size="sm" />
+              <Singer aria-hidden>{singer}</Singer>
+            </GoToDetail>
           </PreviewItem>
         ))}
       </PreviewItemList>
       {!hasResult && <DefaultMessage>검색 결과가 없습니다</DefaultMessage>}
-    </SheetContainer>,
-    document.body
+    </SheetContainer>
   );
 };
 
 export default ResultSheet;
 
-const SheetContainer = styled.div`
+const SheetContainer = styled.section`
   position: fixed;
   z-index: 2000;
   top: 70px;
@@ -116,3 +116,7 @@ const Singer = styled.p`
   letter-spacing: 1px;
 `;
 const DefaultMessage = styled.p``;
+
+const GoToDetail = styled(Flex)`
+  width: 100%;
+`;

From a50055f659e5172fcdd0f357269d5e1845788aa2 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 09:54:45 +0900
Subject: [PATCH 46/69] =?UTF-8?q?refactor:=20=EA=B5=AC=EC=A1=B0=EB=B6=84?=
 =?UTF-8?q?=ED=95=B4=20=ED=95=A0=EB=8B=B9=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/hooks/useSearchBar.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 3bdb46701..62b4aef74 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -31,11 +31,14 @@ const useSearchBar = () => {
     setIsSearching(true);
   }, []);
 
-  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback((e) => {
-    if (e.relatedTarget?.id === 'query-reset-button') return;
+  const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
+    ({ relatedTarget }) => {
+      if (relatedTarget?.id === 'query-reset-button') return;
 
-    setIsSearching(false);
-  }, []);
+      setIsSearching(false);
+    },
+    []
+  );
 
   const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(() => {
     setIsSearching(false);

From ec2a9773f42a56be7836a87256ee81f829345f84 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 11:18:51 +0900
Subject: [PATCH 47/69] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=B0=A9=EC=A7=80=20effect=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/hooks/useSearchBar.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 62b4aef74..8632d4286 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -64,6 +64,16 @@ const useSearchBar = () => {
     }
   }, [isSearching]);
 
+  useEffect(() => {
+    if (isSearching) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [isSearching]);
+
   return {
     isSearching,
     searchQuery,

From dcf0b82c9c43e354a508256b53df05ab513adb8b Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 14:42:31 +0900
Subject: [PATCH 48/69] =?UTF-8?q?design:=20Header=20left=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EB=AA=85=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/shared/components/Layout/Header.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/shared/components/Layout/Header.tsx b/frontend/src/shared/components/Layout/Header.tsx
index 8bad5a7d8..57a884a95 100644
--- a/frontend/src/shared/components/Layout/Header.tsx
+++ b/frontend/src/shared/components/Layout/Header.tsx
@@ -37,7 +37,8 @@ export default Header;
 const Container = styled.header`
   position: fixed;
   z-index: 1000;
-  top: 0px;
+  top: 0;
+  left: 0;
 
   display: flex;
   align-items: center;

From 9b835fc3b5b1c4557f671f659923f4d1af7e964e Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 15:05:40 +0900
Subject: [PATCH 49/69] =?UTF-8?q?config:=20storybook-addon-react-router-v6?=
 =?UTF-8?q?=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json | 37 +++++++++++++++++++++++++++++++++++++
 frontend/package.json      |  1 +
 2 files changed, 38 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 99379959b..15357c2bc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -59,6 +59,7 @@
         "prettier": "^3.0.0",
         "react-refresh": "^0.14.0",
         "storybook": "^7.0.27",
+        "storybook-addon-react-router-v6": "^2.0.7",
         "stylelint": "^15.10.2",
         "stylelint-config-clean-order": "^5.0.1",
         "ts-jest": "^29.1.1",
@@ -9096,6 +9097,12 @@
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "dev": true
     },
+    "node_modules/compare-versions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.0.tgz",
+      "integrity": "sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==",
+      "dev": true
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -19808,6 +19815,36 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/storybook-addon-react-router-v6": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/storybook-addon-react-router-v6/-/storybook-addon-react-router-v6-2.0.7.tgz",
+      "integrity": "sha512-vky9WXG84fQjwx55KKFQdhyUC5AnfsGJSoYx/yaJi2q/oTDcCTkcwpxlcrSKpTpNtVjsFNnaS3cuWXX+Sfc8Vw==",
+      "dev": true,
+      "dependencies": {
+        "compare-versions": "^6.0.0",
+        "react-inspector": "6.0.2"
+      },
+      "peerDependencies": {
+        "@storybook/blocks": "^7.0.0",
+        "@storybook/channels": "^7.0.0",
+        "@storybook/components": "^7.0.0",
+        "@storybook/core-events": "^7.0.0",
+        "@storybook/manager-api": "^7.0.0",
+        "@storybook/preview-api": "^7.0.0",
+        "@storybook/theming": "^7.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-router-dom": "^6.4.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stream-shift": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 12bf77102..fb78ea3af 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,6 +63,7 @@
     "prettier": "^3.0.0",
     "react-refresh": "^0.14.0",
     "storybook": "^7.0.27",
+    "storybook-addon-react-router-v6": "^2.0.7",
     "stylelint": "^15.10.2",
     "stylelint-config-clean-order": "^5.0.1",
     "ts-jest": "^29.1.1",

From 03207674f2a8525a2ed4f6ec1e3e02ed20addc82 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 15:08:02 +0900
Subject: [PATCH 50/69] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=A0=95=EC=83=81=20=ED=91=9C=EC=8B=9C=EB=A5=BC=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20provider,=20router=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F?=
 =?UTF-8?q?=20viewport=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useFetch, useMutaion내에서 사용하는 context로 인해 스토리북 표시되지 않는 오류 해결
---
 frontend/.storybook/main.ts     |  1 +
 frontend/.storybook/preview.tsx | 77 +++++++++++++++++++++++++++++++--
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index 629d5a808..b7317b040 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    'storybook-addon-react-router-v6',
   ],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 75edec7d1..037012424 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -2,10 +2,72 @@ import type { Preview } from '@storybook/react';
 import GlobalStyles from '../src/shared/styles/GlobalStyles';
 import { ThemeProvider } from 'styled-components';
 import theme from '../src/shared/styles/theme';
+import { BrowserRouter } from 'react-router-dom';
+import AuthProvider from '@/features/auth/components/AuthProvider';
+import LoginPopupProvider from '@/features/auth/hooks/LoginPopUpContext';
+
+const customViewport = {
+  xxl: {
+    name: 'xxl',
+    styles: {
+      width: '1440px',
+      height: '1080px',
+    },
+  },
+
+  xl: {
+    name: 'xl',
+    styles: {
+      width: '1280px',
+      height: '720px',
+    },
+  },
+
+  lg: {
+    name: 'lg',
+    styles: {
+      width: '1024px',
+      height: '720px',
+    },
+  },
+
+  md: {
+    name: 'md',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    },
+  },
+
+  sm: {
+    name: 'sm',
+    styles: {
+      width: '640px',
+      height: '768px',
+    },
+  },
+
+  xs: {
+    name: 'xs',
+    styles: {
+      width: '420px',
+      height: '768px',
+    },
+  },
+
+  xxs: {
+    name: 'xxs',
+    styles: {
+      width: '380px',
+      height: '768px',
+    },
+  },
+};
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    viewport: { viewports: customViewport, defaultViewport: 'xs' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -13,12 +75,19 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [
     (Story) => (
-      <ThemeProvider theme={theme}>
-        <GlobalStyles />
-        <Story />
-      </ThemeProvider>
+      <AuthProvider>
+        <LoginPopupProvider>
+          <ThemeProvider theme={theme}>
+            <BrowserRouter>
+              <GlobalStyles />
+              <Story />
+            </BrowserRouter>
+          </ThemeProvider>
+        </LoginPopupProvider>
+      </AuthProvider>
     ),
   ],
 };

From 706f34f39eb5a07d27b39908e0a7aa56b1ee14d0 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 15:09:00 +0900
Subject: [PATCH 51/69] =?UTF-8?q?refactor:=20=ED=8C=9D=EC=97=85=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=BB=A8=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EC=97=90=20=20=EC=9E=98=EB=AA=BB=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=EB=90=9C=20error=20=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20prop=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AuthProvider 하위에 단일 children을 받지 못하는 type 수정
---
 frontend/src/features/auth/components/AuthProvider.tsx | 3 ++-
 frontend/src/features/auth/hooks/LoginPopUpContext.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/auth/components/AuthProvider.tsx b/frontend/src/features/auth/components/AuthProvider.tsx
index 005e4befd..60184918d 100644
--- a/frontend/src/features/auth/components/AuthProvider.tsx
+++ b/frontend/src/features/auth/components/AuthProvider.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext, useMemo, useState } from 'react';
 import accessTokenStorage from '@/shared/utils/accessTokenStorage';
 import parseJWT from '../utils/parseJWT';
+import type { PropsWithChildren } from 'react';
 
 interface User {
   memberId: number;
@@ -23,7 +24,7 @@ export const useAuthContext = () => {
 
 const AuthContext = createContext<AuthContextProps | null>(null);
 
-const AuthProvider = ({ children }: { children: React.ReactElement[] }) => {
+const AuthProvider = ({ children }: PropsWithChildren) => {
   const [accessToken, setAccessToken] = useState(accessTokenStorage.getToken() || '');
 
   const user: User | null = useMemo(() => {
diff --git a/frontend/src/features/auth/hooks/LoginPopUpContext.tsx b/frontend/src/features/auth/hooks/LoginPopUpContext.tsx
index 3bec92351..16172bb82 100644
--- a/frontend/src/features/auth/hooks/LoginPopUpContext.tsx
+++ b/frontend/src/features/auth/hooks/LoginPopUpContext.tsx
@@ -12,7 +12,7 @@ const LoginPopUpContext = createContext<LoginPopUpContextProps | null>(null);
 export const useLoginPopup = () => {
   const contextValue = useContext(LoginPopUpContext);
 
-  if (contextValue === null) throw new Error('AuthContext가 null입니다.');
+  if (contextValue === null) throw new Error('LoginPopUpContext에 값이 제공되지 않았습니다.');
 
   return contextValue;
 };

From b54f41f402df3832828ab1b7bef8f946f3c98bb7 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 15:09:35 +0900
Subject: [PATCH 52/69] =?UTF-8?q?test:=20=EC=84=9C=EC=B9=98=20=EB=B0=94=20?=
 =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

단일 컴포넌트로 동작할 수 없는 특성 상 Header 컴포넌트로 대체
---
 .../search/components/SearchBar.stories.tsx       | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 frontend/src/features/search/components/SearchBar.stories.tsx

diff --git a/frontend/src/features/search/components/SearchBar.stories.tsx b/frontend/src/features/search/components/SearchBar.stories.tsx
new file mode 100644
index 000000000..3b22a0237
--- /dev/null
+++ b/frontend/src/features/search/components/SearchBar.stories.tsx
@@ -0,0 +1,15 @@
+import Header from '@/shared/components/Layout/Header';
+import SearchBar from './SearchBar';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: SearchBar,
+  title: 'SearchBar',
+} satisfies Meta<typeof SearchBar>;
+
+export default meta;
+type Story = StoryObj<typeof SearchBar>;
+
+export const Default: Story = {
+  render: () => <Header />,
+};

From 1eb138499eccfde7e724cb50be4075f80d5ed7a5 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 16:13:32 +0900
Subject: [PATCH 53/69] =?UTF-8?q?refactor:=20handler=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

스토리북에 핸들러를 가져오는 과정에서, 여러개의 핸들러를 개별로 가져와야 하는 불편함을 느낌
이에 모든 핸들러를 하나의 배열로 묶어 관리하도록 개선하였음
---
 frontend/src/mocks/browser.ts                 | 6 ++----
 frontend/src/mocks/handlers/index.ts          | 7 +++++++
 frontend/src/mocks/handlers/memberHandlers.ts | 4 +++-
 frontend/src/mocks/handlers/searchHandlers.ts | 4 +++-
 frontend/src/mocks/handlers/songsHandlers.ts  | 4 +++-
 5 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/mocks/handlers/index.ts

diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts
index a645aacff..bd0b93421 100644
--- a/frontend/src/mocks/browser.ts
+++ b/frontend/src/mocks/browser.ts
@@ -1,6 +1,4 @@
 import { setupWorker } from 'msw';
-import { memberHandlers } from './handlers/memberHandlers';
-import { searchHandlers } from './handlers/searchHandlers';
-import { songsHandlers } from './handlers/songsHandlers';
+import handlers from './handlers';
 
-export const worker = setupWorker(...songsHandlers, ...memberHandlers, ...searchHandlers);
+export const worker = setupWorker(...handlers);
diff --git a/frontend/src/mocks/handlers/index.ts b/frontend/src/mocks/handlers/index.ts
new file mode 100644
index 000000000..4189b9d25
--- /dev/null
+++ b/frontend/src/mocks/handlers/index.ts
@@ -0,0 +1,7 @@
+import memberHandlers from './memberHandlers';
+import searchHandlers from './searchHandlers';
+import songsHandlers from './songsHandlers';
+
+const handlers = [...memberHandlers, ...searchHandlers, ...songsHandlers];
+
+export default handlers;
diff --git a/frontend/src/mocks/handlers/memberHandlers.ts b/frontend/src/mocks/handlers/memberHandlers.ts
index 4cf177928..c74897856 100644
--- a/frontend/src/mocks/handlers/memberHandlers.ts
+++ b/frontend/src/mocks/handlers/memberHandlers.ts
@@ -2,7 +2,7 @@ import { rest } from 'msw';
 
 const { BASE_URL } = process.env;
 
-export const memberHandlers = [
+const memberHandlers = [
   rest.get(`${BASE_URL}/my-page`, (req, res, ctx) => {
     return res(
       ctx.json([
@@ -72,3 +72,5 @@ export const memberHandlers = [
     );
   }),
 ];
+
+export default memberHandlers;
diff --git a/frontend/src/mocks/handlers/searchHandlers.ts b/frontend/src/mocks/handlers/searchHandlers.ts
index 72dfabcf9..4a13037ad 100644
--- a/frontend/src/mocks/handlers/searchHandlers.ts
+++ b/frontend/src/mocks/handlers/searchHandlers.ts
@@ -3,7 +3,7 @@ import searchedArtistPreview from '@/mocks/fixtures/searchedArtistPreview.json';
 
 const { BASE_URL } = process.env;
 
-export const searchHandlers = [
+const searchHandlers = [
   rest.get(`${BASE_URL}/singers`, (req, res, ctx) => {
     const query = req.url.searchParams.get('name') ?? '';
     const search = req.url.searchParams.get('search');
@@ -21,3 +21,5 @@ export const searchHandlers = [
     return res(ctx.status(200), ctx.json([]));
   }),
 ];
+
+export default searchHandlers;
diff --git a/frontend/src/mocks/handlers/songsHandlers.ts b/frontend/src/mocks/handlers/songsHandlers.ts
index 882f13936..769762387 100644
--- a/frontend/src/mocks/handlers/songsHandlers.ts
+++ b/frontend/src/mocks/handlers/songsHandlers.ts
@@ -9,7 +9,7 @@ import type { KillingPartPostRequest } from '@/shared/types/killingPart';
 
 const { BASE_URL } = process.env;
 
-export const songsHandlers = [
+const songsHandlers = [
   rest.get(`${BASE_URL}/songs/high-liked`, (req, res, ctx) => {
     // const genre = req.url.searchParams.get('genre')
     return res(ctx.status(200), ctx.json(popularSongs));
@@ -58,3 +58,5 @@ export const songsHandlers = [
     return res(ctx.status(200), ctx.json(votingSongs));
   }),
 ];
+
+export default songsHandlers;

From d10405794409aaa8594f9de6e74d39c6e563b8ce Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 16:14:09 +0900
Subject: [PATCH 54/69] =?UTF-8?q?config:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20msw=20=EC=A0=81=EC=9A=A9=EC=9D=84=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json | 13 +++++++++++++
 frontend/package.json      |  1 +
 2 files changed, 14 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 15357c2bc..4cab444db 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -55,6 +55,7 @@
         "jest": "^29.6.1",
         "jest-environment-jsdom": "^29.6.1",
         "msw": "^1.2.3",
+        "msw-storybook-addon": "^1.9.0",
         "postcss-styled-syntax": "^0.4.0",
         "prettier": "^3.0.0",
         "react-refresh": "^0.14.0",
@@ -16935,6 +16936,18 @@
         }
       }
     },
+    "node_modules/msw-storybook-addon": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.9.0.tgz",
+      "integrity": "sha512-+5ki9SZYF0+IEMW9n4fzkuRa02o5lf9Xf6nfAvWqYvwdLtcpmcwdBRkkFTh+wLTZv010+Ui+P6ZYEVJ0e8wMyw==",
+      "dev": true,
+      "dependencies": {
+        "is-node-process": "^1.0.1"
+      },
+      "peerDependencies": {
+        "msw": ">=0.35.0 <2.0.0"
+      }
+    },
     "node_modules/msw/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index fb78ea3af..47ff45288 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -59,6 +59,7 @@
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "msw": "^1.2.3",
+    "msw-storybook-addon": "^1.9.0",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^3.0.0",
     "react-refresh": "^0.14.0",

From 5f80ba01c45bd46f5527c6eb1f547ae81c395a50 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 16:14:46 +0900
Subject: [PATCH 55/69] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=EC=97=90=20msw=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

service worker 파일 경로 설정 및 handler 적용
---
 frontend/.storybook/main.ts     | 3 +++
 frontend/.storybook/preview.tsx | 8 ++++++++
 2 files changed, 11 insertions(+)

diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index b7317b040..20ef1ef8a 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -16,6 +16,9 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+
+  staticDirs: ['../public'],
+
   webpackFinal: async (config) => {
     if (config.resolve) {
       config.resolve.plugins = [
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 037012424..4f5adb4dc 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -1,3 +1,4 @@
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import type { Preview } from '@storybook/react';
 import GlobalStyles from '../src/shared/styles/GlobalStyles';
 import { ThemeProvider } from 'styled-components';
@@ -5,6 +6,7 @@ import theme from '../src/shared/styles/theme';
 import { BrowserRouter } from 'react-router-dom';
 import AuthProvider from '@/features/auth/components/AuthProvider';
 import LoginPopupProvider from '@/features/auth/hooks/LoginPopUpContext';
+import handlers from '@/mocks/handlers';
 
 const customViewport = {
   xxl: {
@@ -64,6 +66,8 @@ const customViewport = {
   },
 };
 
+initialize();
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -74,7 +78,11 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    msw: {
+      handlers: [...handlers],
+    },
   },
+  loaders: [mswLoader],
 
   decorators: [
     (Story) => (

From 58ecc44c8cc4f376478956bcbdb6f73683be7d8f Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Thu, 12 Oct 2023 16:37:13 +0900
Subject: [PATCH 56/69] fix: ci unused error fix

---
 frontend/src/pages/SingerDetailPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/SingerDetailPage.tsx b/frontend/src/pages/SingerDetailPage.tsx
index ef49145a5..3c977f7e0 100644
--- a/frontend/src/pages/SingerDetailPage.tsx
+++ b/frontend/src/pages/SingerDetailPage.tsx
@@ -3,7 +3,7 @@ import useValidParams from '@/shared/hooks/useValidParams';
 const SingerDetailPage = () => {
   const { singerId } = useValidParams();
 
-  return <div>SingerDetailPage</div>;
+  return <div>{singerId}</div>;
 };
 
 export default SingerDetailPage;

From 99cc599c0b7aea3be2d92fe6dab0bc762659d878 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 15:42:07 +0900
Subject: [PATCH 57/69] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=EC=96=B4?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EC=97=86=EC=9D=B4=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=97=86=EB=8F=84=EB=A1=9D=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 search 함수 실행되지 않도록 변경
---
 frontend/src/features/search/hooks/useSearchBar.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 8632d4286..f5e511823 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -21,6 +21,9 @@ const useSearchBar = () => {
   const search: React.FormEventHandler = useCallback(
     (e) => {
       e.preventDefault();
+
+      if (searchQuery.length === 0) return;
+
       setIsSearching(false);
       navigate(`${ROUTE_PATH.SEARCH_RESULT}?name=${searchQuery}`);
     },

From 36033b3ac8c73e2b5d2bb42b51f7772d857406ef Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 16:03:51 +0900
Subject: [PATCH 58/69] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=99=98=EA=B2=BD=EC=97=90=EC=84=9C=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=84=20=ED=86=B5=ED=95=9C=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=EC=9D=B4=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/SearchBar.tsx | 2 +-
 frontend/src/features/search/hooks/useSearchBar.ts    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index e9f8b45ad..e809bde39 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -49,7 +49,7 @@ const SearchBar = () => {
           $isSearching={isSearching}
         />
       )}
-      <SearchButton type="submit" $isSearching={isSearching} />
+      <SearchButton id="search-button" type="submit" $isSearching={isSearching} />
       <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isSearching && <ResultSheet result={singerSearchPreview ?? []} />}
     </SearchBox>
diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index f5e511823..5b30a0e20 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -37,6 +37,7 @@ const useSearchBar = () => {
   const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
     ({ relatedTarget }) => {
       if (relatedTarget?.id === 'query-reset-button') return;
+      if (relatedTarget?.id === 'search-button') return;
 
       setIsSearching(false);
     },

From 3a23ef52bb06a47c98397d9b552304377127ec73 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 16:12:29 +0900
Subject: [PATCH 59/69] =?UTF-8?q?chore:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/SearchBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index e809bde39..1254ee32e 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -50,7 +50,7 @@ const SearchBar = () => {
         />
       )}
       <SearchButton id="search-button" type="submit" $isSearching={isSearching} />
-      <SearchBarExpendButton type="button" onClick={startSearch} $isSearching={isSearching} />
+      <SearchBarExpandButton type="button" onClick={startSearch} $isSearching={isSearching} />
       {isSearching && <ResultSheet result={singerSearchPreview ?? []} />}
     </SearchBox>
   );
@@ -144,7 +144,7 @@ const SearchButton = styled.button<{ $isSearching: boolean }>`
   }
 `;
 
-const SearchBarExpendButton = styled.button<{ $isSearching: boolean }>`
+const SearchBarExpandButton = styled.button<{ $isSearching: boolean }>`
   ${searchButtonStyles}
   display: none;
 

From fdf0e29ca46ac7ec515d4fef0a70aecdc38ba4ab Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 18:46:02 +0900
Subject: [PATCH 60/69] =?UTF-8?q?design:=20px=20=EB=8B=A8=EC=9C=84=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/ResultSheet.tsx | 6 +++---
 frontend/src/features/search/components/SearchBar.tsx   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/ResultSheet.tsx
index 84ac0b6d5..2a3724416 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/ResultSheet.tsx
@@ -60,14 +60,14 @@ const SheetContainer = styled.section`
 
   background-color: #121212;
   border-radius: 8px;
-  box-shadow: 0px 0px 10px #ffffff49;
+  box-shadow: 0 0 10px #ffffff49;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xxl}) {
     right: 8.33%;
   }
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    right: 0%;
+    right: 0;
     width: 100%;
     min-height: 100%;
   }
@@ -88,8 +88,8 @@ const SheetTitle = styled(Flex)`
 
   height: 50px;
 
+  font-size: 18px;
   font-weight: 700;
-  letter-spacing: 2px;
 
   background-color: #121212;
 `;
diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index 1254ee32e..2886d9e70 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -113,7 +113,7 @@ const SearchInput = styled.input<{ $isSearching: boolean }>`
   transition: width 0.3s ease;
 
   @media (max-width: ${({ theme }) => theme.breakPoints.md}) {
-    width: ${({ $isSearching }) => !$isSearching && '0px'};
+    width: ${({ $isSearching }) => !$isSearching && 0};
     padding: ${({ $isSearching }) => ($isSearching ? '0 40px 0 28px' : 0)};
     visibility: ${({ $isSearching }) => !$isSearching && 'hidden'};
   }

From b2b6734fb86844f18ea4f910047e700c0a37c746 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 19:17:42 +0900
Subject: [PATCH 61/69] =?UTF-8?q?chore:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8,=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Flex prefix 추가, 미리보기의 의미를 담아 컴포넌트 명 변경
---
 .../features/search/components/SearchBar.tsx  | 10 +++----
 ...ResultSheet.tsx => SearchPreviewSheet.tsx} | 28 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)
 rename frontend/src/features/search/components/{ResultSheet.tsx => SearchPreviewSheet.tsx} (80%)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index 2886d9e70..b8dac867d 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -4,7 +4,7 @@ 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 ResultSheet from './ResultSheet';
+import SearchPreviewSheet from './SearchPreviewSheet';
 
 const SearchBar = () => {
   const {
@@ -23,7 +23,7 @@ const SearchBar = () => {
   const isQueryFilled = searchQuery.length !== 0;
 
   return (
-    <SearchBox
+    <FlexSearchBox
       as="form"
       $align="center"
       $justify="space-between"
@@ -51,8 +51,8 @@ const SearchBar = () => {
       )}
       <SearchButton id="search-button" type="submit" $isSearching={isSearching} />
       <SearchBarExpandButton type="button" onClick={startSearch} $isSearching={isSearching} />
-      {isSearching && <ResultSheet result={singerSearchPreview ?? []} />}
-    </SearchBox>
+      {isSearching && <SearchPreviewSheet result={singerSearchPreview ?? []} />}
+    </FlexSearchBox>
   );
 };
 
@@ -65,7 +65,7 @@ const searchButtonStyles = css`
   background-size: contain;
 `;
 
-const SearchBox = styled(Flex)<{ $isSearching: boolean }>`
+const FlexSearchBox = styled(Flex)<{ $isSearching: boolean }>`
   position: relative;
 
   height: 34px;
diff --git a/frontend/src/features/search/components/ResultSheet.tsx b/frontend/src/features/search/components/SearchPreviewSheet.tsx
similarity index 80%
rename from frontend/src/features/search/components/ResultSheet.tsx
rename to frontend/src/features/search/components/SearchPreviewSheet.tsx
index 2a3724416..f38764d2d 100644
--- a/frontend/src/features/search/components/ResultSheet.tsx
+++ b/frontend/src/features/search/components/SearchPreviewSheet.tsx
@@ -9,20 +9,20 @@ interface ResultSheetProps {
   result: SingerSearchPreview[];
 }
 
-const ResultSheet = ({ result }: ResultSheetProps) => {
+const SearchPreviewSheet = ({ result }: ResultSheetProps) => {
   const navigate = useNavigate();
 
   const hasResult = result.length > 0;
 
   return (
     <SheetContainer aria-label="아티스트 검색 결과 미리보기">
-      <SheetTitle $align="center" aria-hidden>
+      <FlexSheetTitle $align="center" aria-hidden>
         아티스트
-      </SheetTitle>
-      <PreviewItemList as="ul" $direction="column" $gap={16}>
+      </FlexSheetTitle>
+      <FlexPreviewItemList as="ul" $direction="column" $gap={16}>
         {result.map(({ id, singer, profileImageUrl }) => (
-          <PreviewItem key={id} as="li">
-            <GoToDetail
+          <FlexPreviewItem key={id} as="li">
+            <FlexGoToDetail
               as="button"
               type="button"
               onMouseDown={() => navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`)}
@@ -32,16 +32,16 @@ const ResultSheet = ({ result }: ResultSheetProps) => {
             >
               <Thumbnail src={profileImageUrl} alt="" size="sm" />
               <Singer aria-hidden>{singer}</Singer>
-            </GoToDetail>
-          </PreviewItem>
+            </FlexGoToDetail>
+          </FlexPreviewItem>
         ))}
-      </PreviewItemList>
+      </FlexPreviewItemList>
       {!hasResult && <DefaultMessage>검색 결과가 없습니다</DefaultMessage>}
     </SheetContainer>
   );
 };
 
-export default ResultSheet;
+export default SearchPreviewSheet;
 
 const SheetContainer = styled.section`
   position: fixed;
@@ -81,7 +81,7 @@ const SheetContainer = styled.section`
   }
 `;
 
-const SheetTitle = styled(Flex)`
+const FlexSheetTitle = styled(Flex)`
   position: sticky;
   top: 0;
   left: 0;
@@ -94,9 +94,9 @@ const SheetTitle = styled(Flex)`
   background-color: #121212;
 `;
 
-const PreviewItemList = styled(Flex)``;
+const FlexPreviewItemList = styled(Flex)``;
 
-const PreviewItem = styled(Flex)`
+const FlexPreviewItem = styled(Flex)`
   cursor: pointer;
 
   width: 100%;
@@ -117,6 +117,6 @@ const Singer = styled.p`
 `;
 const DefaultMessage = styled.p``;
 
-const GoToDetail = styled(Flex)`
+const FlexGoToDetail = styled(Flex)`
   width: 100%;
 `;

From 1bc5f89a42d3a6506d15e1ece5817406430d7aae Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 21:06:45 +0900
Subject: [PATCH 62/69] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=99=B8=EC=9D=98=20?=
 =?UTF-8?q?=EB=B9=88=EA=B3=B3=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EC=A2=85=EB=A3=8C=EB=90=98=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 미리보기 시트에 tabIndex={-1} 부여
2. onBlur 핸들러의 검색 종료 제외 요소로 추가
3. FlexPreviewItem mouseDown 핸들러에 검색 종료 함수 추가
---
 .../src/features/search/components/SearchBar.tsx |  8 +++++---
 .../search/components/SearchPreviewSheet.tsx     | 16 +++++++++++++---
 .../src/features/search/hooks/useSearchBar.ts    |  7 ++++---
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index b8dac867d..6b588bc3f 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -14,7 +14,7 @@ const SearchBar = () => {
     singerSearchPreview,
     startSearch,
     endSearchOnBlur,
-    endSearchOnClick,
+    endSearch,
     changeQuery,
     resetQuery,
     search,
@@ -30,7 +30,7 @@ const SearchBar = () => {
       onSubmit={search}
       $isSearching={isSearching}
     >
-      <BackwardButton type="button" onClick={endSearchOnClick} $isSearching={isSearching} />
+      <BackwardButton type="button" onClick={endSearch} $isSearching={isSearching} />
       <SearchInput
         type="text"
         placeholder="아티스트 검색"
@@ -51,7 +51,9 @@ const SearchBar = () => {
       )}
       <SearchButton id="search-button" type="submit" $isSearching={isSearching} />
       <SearchBarExpandButton type="button" onClick={startSearch} $isSearching={isSearching} />
-      {isSearching && <SearchPreviewSheet result={singerSearchPreview ?? []} />}
+      {isSearching && (
+        <SearchPreviewSheet result={singerSearchPreview ?? []} endSearch={endSearch} />
+      )}
     </FlexSearchBox>
   );
 };
diff --git a/frontend/src/features/search/components/SearchPreviewSheet.tsx b/frontend/src/features/search/components/SearchPreviewSheet.tsx
index f38764d2d..14f0d4fd4 100644
--- a/frontend/src/features/search/components/SearchPreviewSheet.tsx
+++ b/frontend/src/features/search/components/SearchPreviewSheet.tsx
@@ -7,15 +7,25 @@ import type { SingerSearchPreview } from '../types/search';
 
 interface ResultSheetProps {
   result: SingerSearchPreview[];
+  endSearch: () => void;
 }
 
-const SearchPreviewSheet = ({ result }: ResultSheetProps) => {
+const SearchPreviewSheet = ({ result, endSearch }: ResultSheetProps) => {
   const navigate = useNavigate();
 
   const hasResult = result.length > 0;
 
+  const goToSingerDetailPage = (id: number) => {
+    endSearch();
+    navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`);
+  };
+
   return (
-    <SheetContainer aria-label="아티스트 검색 결과 미리보기">
+    <SheetContainer
+      id="search-preview-sheet"
+      tabIndex={-1}
+      aria-label="아티스트 검색 결과 미리보기"
+    >
       <FlexSheetTitle $align="center" aria-hidden>
         아티스트
       </FlexSheetTitle>
@@ -25,7 +35,7 @@ const SearchPreviewSheet = ({ result }: ResultSheetProps) => {
             <FlexGoToDetail
               as="button"
               type="button"
-              onMouseDown={() => navigate(`${ROUTE_PATH.SINGER_DETAIL}/${id}`)}
+              onMouseDown={() => goToSingerDetailPage(id)}
               aria-label={`${singer} 상세 페이지 바로가기`}
               $gap={16}
               $align="center"
diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 5b30a0e20..534b92790 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -30,12 +30,13 @@ const useSearchBar = () => {
     [searchQuery, navigate]
   );
 
-  const startSearch: React.MouseEventHandler & React.FocusEventHandler = useCallback(() => {
+  const startSearch = useCallback(() => {
     setIsSearching(true);
   }, []);
 
   const endSearchOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
     ({ relatedTarget }) => {
+      if (relatedTarget?.id === 'search-preview-sheet') return;
       if (relatedTarget?.id === 'query-reset-button') return;
       if (relatedTarget?.id === 'search-button') return;
 
@@ -44,7 +45,7 @@ const useSearchBar = () => {
     []
   );
 
-  const endSearchOnClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(() => {
+  const endSearch = useCallback(() => {
     setIsSearching(false);
   }, []);
 
@@ -85,7 +86,7 @@ const useSearchBar = () => {
     singerSearchPreview,
     startSearch,
     endSearchOnBlur,
-    endSearchOnClick,
+    endSearch,
     changeQuery,
     resetQuery,
     search,

From 80079d460d558a243e584e115f354eee6cb696a7 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 21:20:43 +0900
Subject: [PATCH 63/69] =?UTF-8?q?feat:=20=EB=B0=B1=EB=93=9C=EB=A1=AD=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search/components/SearchPreviewSheet.tsx  | 72 +++++++++++--------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/frontend/src/features/search/components/SearchPreviewSheet.tsx b/frontend/src/features/search/components/SearchPreviewSheet.tsx
index 14f0d4fd4..e39a69420 100644
--- a/frontend/src/features/search/components/SearchPreviewSheet.tsx
+++ b/frontend/src/features/search/components/SearchPreviewSheet.tsx
@@ -21,38 +21,52 @@ const SearchPreviewSheet = ({ result, endSearch }: ResultSheetProps) => {
   };
 
   return (
-    <SheetContainer
-      id="search-preview-sheet"
-      tabIndex={-1}
-      aria-label="아티스트 검색 결과 미리보기"
-    >
-      <FlexSheetTitle $align="center" aria-hidden>
-        아티스트
-      </FlexSheetTitle>
-      <FlexPreviewItemList as="ul" $direction="column" $gap={16}>
-        {result.map(({ id, singer, profileImageUrl }) => (
-          <FlexPreviewItem key={id} as="li">
-            <FlexGoToDetail
-              as="button"
-              type="button"
-              onMouseDown={() => goToSingerDetailPage(id)}
-              aria-label={`${singer} 상세 페이지 바로가기`}
-              $gap={16}
-              $align="center"
-            >
-              <Thumbnail src={profileImageUrl} alt="" size="sm" />
-              <Singer aria-hidden>{singer}</Singer>
-            </FlexGoToDetail>
-          </FlexPreviewItem>
-        ))}
-      </FlexPreviewItemList>
-      {!hasResult && <DefaultMessage>검색 결과가 없습니다</DefaultMessage>}
-    </SheetContainer>
+    <>
+      <Backdrop />
+      <SheetContainer
+        id="search-preview-sheet"
+        tabIndex={-1}
+        aria-label="아티스트 검색 결과 미리보기"
+      >
+        <FlexSheetTitle $align="center" aria-hidden>
+          아티스트
+        </FlexSheetTitle>
+        <FlexPreviewItemList as="ul" $direction="column" $gap={16}>
+          {result.map(({ id, singer, profileImageUrl }) => (
+            <FlexPreviewItem key={id} as="li">
+              <FlexGoToDetail
+                as="button"
+                type="button"
+                onMouseDown={() => goToSingerDetailPage(id)}
+                aria-label={`${singer} 상세 페이지 바로가기`}
+                $gap={16}
+                $align="center"
+              >
+                <Thumbnail src={profileImageUrl} alt="" size="sm" />
+                <Singer aria-hidden>{singer}</Singer>
+              </FlexGoToDetail>
+            </FlexPreviewItem>
+          ))}
+        </FlexPreviewItemList>
+        {!hasResult && <DefaultMessage>검색 결과가 없습니다</DefaultMessage>}
+      </SheetContainer>
+    </>
   );
 };
 
 export default SearchPreviewSheet;
 
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 80px;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(0, 0, 0, 0.5);
+`;
+
 const SheetContainer = styled.section`
   position: fixed;
   z-index: 2000;
@@ -125,7 +139,9 @@ const Singer = styled.p`
   font-weight: 700;
   letter-spacing: 1px;
 `;
-const DefaultMessage = styled.p``;
+const DefaultMessage = styled.p`
+  font-size: 14px;
+`;
 
 const FlexGoToDetail = styled(Flex)`
   width: 100%;

From 0b08c70f1e4a2b3af5d96c668327a178892038d1 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 21:39:45 +0900
Subject: [PATCH 64/69] =?UTF-8?q?feat:=20esc=20=EA=B2=80=EC=83=89=EC=A2=85?=
 =?UTF-8?q?=EB=A3=8C=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/hooks/useSearchBar.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/search/hooks/useSearchBar.ts b/frontend/src/features/search/hooks/useSearchBar.ts
index 534b92790..28062f14e 100644
--- a/frontend/src/features/search/hooks/useSearchBar.ts
+++ b/frontend/src/features/search/hooks/useSearchBar.ts
@@ -61,6 +61,15 @@ const useSearchBar = () => {
     inputRef.current?.focus();
   }, []);
 
+  const endSearchByEsc = useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === 'Escape') {
+        endSearch();
+      }
+    },
+    [endSearch]
+  );
+
   useEffect(() => {
     if (isSearching) {
       inputRef.current?.focus();
@@ -72,12 +81,14 @@ const useSearchBar = () => {
   useEffect(() => {
     if (isSearching) {
       document.body.style.overflow = 'hidden';
+      document.addEventListener('keydown', endSearchByEsc);
     }
 
     return () => {
       document.body.style.overflow = 'auto';
+      document.addEventListener('keydown', endSearchByEsc);
     };
-  }, [isSearching]);
+  }, [isSearching, endSearchByEsc]);
 
   return {
     isSearching,

From 8ca98d4079475aba1ce560bec71de8024b05704b Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Sun, 15 Oct 2023 21:41:47 +0900
Subject: [PATCH 65/69] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=EC=B0=BD=20e?=
 =?UTF-8?q?xpand=20=EC=8B=9C=20=EB=A1=9C=EA=B3=A0=20=EC=99=84=EC=A0=84?=
 =?UTF-8?q?=ED=9E=88=20=EB=8D=AE=ED=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/SearchBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/search/components/SearchBar.tsx b/frontend/src/features/search/components/SearchBar.tsx
index 6b588bc3f..cc3e3f7b1 100644
--- a/frontend/src/features/search/components/SearchBar.tsx
+++ b/frontend/src/features/search/components/SearchBar.tsx
@@ -74,7 +74,7 @@ const FlexSearchBox = styled(Flex)<{ $isSearching: boolean }>`
   padding: 0 10px;
 
   background-color: ${({ theme }) => theme.color.black200};
-  border-radius: 16px;
+  border-radius: 14px;
 
   transition: flex 0.2s ease;
 

From 2152aa35dd751f6f39fb5c2260e944673feb7548 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Tue, 17 Oct 2023 02:59:36 +0900
Subject: [PATCH 66/69] =?UTF-8?q?feat:=20=EB=B0=B1=EB=93=9C=EB=A1=AD=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EA=B2=80=EC=83=89=EC=A2=85?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/components/SearchPreviewSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/search/components/SearchPreviewSheet.tsx b/frontend/src/features/search/components/SearchPreviewSheet.tsx
index e39a69420..4c515738a 100644
--- a/frontend/src/features/search/components/SearchPreviewSheet.tsx
+++ b/frontend/src/features/search/components/SearchPreviewSheet.tsx
@@ -22,7 +22,7 @@ const SearchPreviewSheet = ({ result, endSearch }: ResultSheetProps) => {
 
   return (
     <>
-      <Backdrop />
+      <Backdrop onClick={endSearch} />
       <SheetContainer
         id="search-preview-sheet"
         tabIndex={-1}

From 7365915e393dd7abd7ed17b5c0eaca7522ea833f Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Tue, 17 Oct 2023 14:13:45 +0900
Subject: [PATCH 67/69] =?UTF-8?q?refactor:=20api=20url=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/search/remotes/search.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/search/remotes/search.ts b/frontend/src/features/search/remotes/search.ts
index db00530e5..486a71ec8 100644
--- a/frontend/src/features/search/remotes/search.ts
+++ b/frontend/src/features/search/remotes/search.ts
@@ -8,7 +8,7 @@ export const getSingerSearchPreview = async (query: string): Promise<SingerSearc
 
 export const getSingerSearch = async (query: string): Promise<SingerSearchResult[]> => {
   const encodedQuery = encodeURIComponent(query);
-  return await fetcher(`/singers?name=${encodedQuery}&search=singer,song`, 'GET');
+  return await fetcher(`/singers?name=${encodedQuery}&search=singer&search=song`, 'GET');
 };
 
 export const getSingerDetail = async (singerId: number): Promise<SingerSearchResult> => {

From 19c9bea72d9de0d7247a95ca23740f10e4d52129 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Tue, 17 Oct 2023 14:36:44 +0900
Subject: [PATCH 68/69] =?UTF-8?q?refactor:=20msw=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EA=B3=A0=EB=8F=84=ED=99=94=20=EB=B0=8F=20=ED=94=BD?=
 =?UTF-8?q?=EC=8A=A4=EC=B3=90=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

검색 완료 페이지에서 쓰이는 api 요청을 처리할 수 있도록 개선
---
 .../src/mocks/fixtures/searchedSinger.json    | 80 +++++++++++++++++++
 ...review.json => searchedSingerPreview.json} |  0
 frontend/src/mocks/handlers/searchHandlers.ts | 19 +++--
 3 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/mocks/fixtures/searchedSinger.json
 rename frontend/src/mocks/fixtures/{searchedArtistPreview.json => searchedSingerPreview.json} (100%)

diff --git a/frontend/src/mocks/fixtures/searchedSinger.json b/frontend/src/mocks/fixtures/searchedSinger.json
new file mode 100644
index 000000000..d7e00ffcb
--- /dev/null
+++ b/frontend/src/mocks/fixtures/searchedSinger.json
@@ -0,0 +1,80 @@
+[
+  {
+    "id": 1,
+    "singer": "악동뮤지션",
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+    "totalSongCount": 6,
+    "songs": [
+      {
+        "id": 1,
+        "title": "계란찜의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 111
+      },
+      {
+        "id": 2,
+        "title": "수란의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 222
+      },
+      {
+        "id": 3,
+        "title": "서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 333
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "singer": "악동",
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+    "totalSongCount": 12,
+    "songs": [
+      {
+        "id": 4,
+        "title": "계란찜의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 111
+      },
+      {
+        "id": 5,
+        "title": "수란의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 222
+      },
+      {
+        "id": 6,
+        "title": "서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 333
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "singer": "악동뮤지션",
+    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+    "totalSongCount": 18,
+    "songs": [
+      {
+        "id": 7,
+        "title": "계란찜의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 111
+      },
+      {
+        "id": 8,
+        "title": "수란의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 222
+      },
+      {
+        "id": 9,
+        "title": "서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 서니사이드업의 꿈",
+        "albumCoverUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
+        "videoLength": 333
+      }
+    ]
+  }
+]
diff --git a/frontend/src/mocks/fixtures/searchedArtistPreview.json b/frontend/src/mocks/fixtures/searchedSingerPreview.json
similarity index 100%
rename from frontend/src/mocks/fixtures/searchedArtistPreview.json
rename to frontend/src/mocks/fixtures/searchedSingerPreview.json
diff --git a/frontend/src/mocks/handlers/searchHandlers.ts b/frontend/src/mocks/handlers/searchHandlers.ts
index 4a13037ad..9f07dd8e9 100644
--- a/frontend/src/mocks/handlers/searchHandlers.ts
+++ b/frontend/src/mocks/handlers/searchHandlers.ts
@@ -1,24 +1,33 @@
 import { rest } from 'msw';
-import searchedArtistPreview from '@/mocks/fixtures/searchedArtistPreview.json';
+import searchedSinger from '@/mocks/fixtures/searchedSinger.json';
+import searchedSingerPreview from '@/mocks/fixtures/searchedSingerPreview.json';
 
 const { BASE_URL } = process.env;
 
 const searchHandlers = [
   rest.get(`${BASE_URL}/singers`, (req, res, ctx) => {
     const query = req.url.searchParams.get('name') ?? '';
-    const search = req.url.searchParams.get('search');
+    const [singer, song] = req.url.searchParams.getAll('search');
     const testQueries = ['악동뮤지션', '악동', '뮤지션'];
 
-    const isPreviewRequest = search === 'singer';
+    const isPreviewRequest = singer !== undefined && song === undefined;
+    const isSearchRequest = song !== undefined;
+
     const isInTestQueries = testQueries.some(
       (testQuery) => encodeURIComponent(testQuery) === encodeURIComponent(query)
     );
 
     if (isPreviewRequest && isInTestQueries) {
-      return res(ctx.status(200), ctx.json(searchedArtistPreview));
+      return res(ctx.status(200), ctx.json(searchedSingerPreview));
+    }
+
+    if (isSearchRequest && isInTestQueries) {
+      return res(ctx.status(200), ctx.json(searchedSinger));
     }
 
-    return res(ctx.status(200), ctx.json([]));
+    if (!isInTestQueries) {
+      return res(ctx.status(200), ctx.json([]));
+    }
   }),
 ];
 

From 2f418a1aa1e6f62c9895bf573eb12c6d6e952d50 Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Tue, 17 Oct 2023 14:55:59 +0900
Subject: [PATCH 69/69] =?UTF-8?q?refactor:=20msw=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EA=B3=A0=EB=8F=84=ED=99=94=20=EB=B0=8F=20=ED=94=BD?=
 =?UTF-8?q?=EC=8A=A4=EC=B3=90=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

가수 상세 페이지에서 쓰이는 api 요청을 처리할 수 있도록 개선
---
 .../mocks/fixtures/searchedSingerPreview.json | 30 -------------------
 ...archedSinger.json => searchedSingers.json} |  2 +-
 frontend/src/mocks/handlers/searchHandlers.ts | 17 +++++++++--
 3 files changed, 16 insertions(+), 33 deletions(-)
 rename frontend/src/mocks/fixtures/{searchedSinger.json => searchedSingers.json} (99%)

diff --git a/frontend/src/mocks/fixtures/searchedSingerPreview.json b/frontend/src/mocks/fixtures/searchedSingerPreview.json
index 3f9979bfe..ec9654fad 100644
--- a/frontend/src/mocks/fixtures/searchedSingerPreview.json
+++ b/frontend/src/mocks/fixtures/searchedSingerPreview.json
@@ -13,35 +13,5 @@
     "id": 3,
     "singer": "뮤지션",
     "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
-  },
-  {
-    "id": 4,
-    "singer": "뮤지션",
-    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
-  },
-  {
-    "id": 5,
-    "singer": "뮤지션",
-    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
-  },
-  {
-    "id": 6,
-    "singer": "뮤지션",
-    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
-  },
-  {
-    "id": 7,
-    "singer": "뮤지션",
-    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
-  },
-  {
-    "id": 8,
-    "singer": "뮤지션",
-    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
-  },
-  {
-    "id": 9,
-    "singer": "뮤지션",
-    "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize"
   }
 ]
diff --git a/frontend/src/mocks/fixtures/searchedSinger.json b/frontend/src/mocks/fixtures/searchedSingers.json
similarity index 99%
rename from frontend/src/mocks/fixtures/searchedSinger.json
rename to frontend/src/mocks/fixtures/searchedSingers.json
index d7e00ffcb..73583d623 100644
--- a/frontend/src/mocks/fixtures/searchedSinger.json
+++ b/frontend/src/mocks/fixtures/searchedSingers.json
@@ -53,7 +53,7 @@
   },
   {
     "id": 3,
-    "singer": "악동뮤지션",
+    "singer": "뮤지션",
     "profileImageUrl": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/007/12/452/712452_20230821182358_500.jpg?f9ab949ec336274795e07b2719addab6/melon/resize/416/quality/80/optimize",
     "totalSongCount": 18,
     "songs": [
diff --git a/frontend/src/mocks/handlers/searchHandlers.ts b/frontend/src/mocks/handlers/searchHandlers.ts
index 9f07dd8e9..56d1fdf4b 100644
--- a/frontend/src/mocks/handlers/searchHandlers.ts
+++ b/frontend/src/mocks/handlers/searchHandlers.ts
@@ -1,6 +1,6 @@
 import { rest } from 'msw';
-import searchedSinger from '@/mocks/fixtures/searchedSinger.json';
 import searchedSingerPreview from '@/mocks/fixtures/searchedSingerPreview.json';
+import searchedSingers from '@/mocks/fixtures/searchedSingers.json';
 
 const { BASE_URL } = process.env;
 
@@ -22,13 +22,26 @@ const searchHandlers = [
     }
 
     if (isSearchRequest && isInTestQueries) {
-      return res(ctx.status(200), ctx.json(searchedSinger));
+      return res(ctx.status(200), ctx.json(searchedSingers));
     }
 
     if (!isInTestQueries) {
       return res(ctx.status(200), ctx.json([]));
     }
   }),
+
+  rest.get(`${BASE_URL}/singers/:singerId`, (req, res, ctx) => {
+    const { singerId } = req.params;
+
+    const numberSingerId = Number(singerId as string);
+    const searchedSinger = searchedSingers[numberSingerId];
+
+    if (searchedSinger !== undefined) {
+      return res(ctx.status(200), ctx.json(searchedSinger));
+    }
+
+    return res(ctx.status(400), ctx.json({}));
+  }),
 ];
 
 export default searchHandlers;