From 3d52d68ca33b12723202393fa31d8cae6b69d7b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=ED=9D=AC=EC=84=A0?= <designh2sun@gmail.com>
Date: Sat, 28 Dec 2024 23:54:03 +0900
Subject: [PATCH 1/4] =?UTF-8?q?Style:=20=EB=B2=84=ED=8A=BC=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20xsamll=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=8A=A4=ED=83=80=EC=9D=BC=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

---
 src/components/Button/Button.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 2d4b278..e72b1e6 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -14,7 +14,7 @@ interface ButtonProps {
   active?: boolean;
   onClick?: () => void;
   type?: 'button' | 'submit' | 'reset';
-  size?: 'small' | 'medium' | 'large';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
   fixed?: boolean;
   width?: 'fit' | 'max';
   iconPosition?: 'non' | 'left' | 'right';
@@ -54,7 +54,8 @@ const Button = ({
 }: ButtonProps) => {
   const widthStyles = {
     fit: css`
-      width: fit-content;
+      min-width: fit-content;
+      max-width: fit-content;
     `,
     max: css`
       width: 100%;
@@ -73,14 +74,20 @@ const Button = ({
   `;
 
   const sizeStyles = {
-    small: css`
+    xsmall: css`
       font-size: ${TypoCapSmM};
-      height: 3rem;
+      height: 2.8rem;
+      padding: 0 1rem;
+    `,
+
+    small: css`
+      font-size: ${TypoBodyMdM};
+      height: 2.8rem;
       padding: 0 1rem;
     `,
     medium: css`
       font-size: ${TypoBodyMdM};
-      height: 3.6rem;
+      height: 3.4rem;
       padding: 0 1rem;
     `,
     large: css`
@@ -148,7 +155,7 @@ ${type === 'reset' &&
 ${width === 'fit' &&
     (size === 'medium' || size === 'large') &&
     `
-      padding: 0 2rem;
+      padding: 0 1.4rem;
     `}
   `;
 

From cc188e8d62135e187a73b7afc49e3a667e65f9eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=ED=9D=AC=EC=84=A0?= <designh2sun@gmail.com>
Date: Sat, 28 Dec 2024 23:54:27 +0900
Subject: [PATCH 2/4] =?UTF-8?q?Style:=20Filter=20Button=20size=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

---
 src/components/Filter/Filter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index eb2105c..d67bd65 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -37,7 +37,7 @@ const Filter = ({ text, onClick, params, paramsKeyword, paramsName }: FilterProp
       type="button"
       text={activeText}
       variant="white"
-      size="small"
+      size="xsmall"
       width="fit"
       icon={<img src="/img/icon-select-arrow.svg" alt="닫기 아이콘" />}
       iconSizeWidth="1rem"

From e63ac76727fef9187d90d639118009f0c163ba1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=ED=9D=AC=EC=84=A0?= <designh2sun@gmail.com>
Date: Sat, 28 Dec 2024 23:55:05 +0900
Subject: [PATCH 3/4] =?UTF-8?q?Fix:=20=ED=95=84=ED=84=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EA=B9=A8=EC=A7=90=20=ED=98=84=EC=83=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EA=B0=80=EB=A1=9C=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/Home.tsx | 48 +++++++++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index f6e19e9..5322a06 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -89,9 +89,11 @@ const Home = () => {
           <ThemeNavigator />
           <FilterBox>
             <Button text="" type="reset" variant="gray" icon={<img src="/img/icon-reset.svg" alt="필터 초기화" />} onClick={handleReset} />
-            <Filter params={window.location.search} text="인기순" paramsKeyword={sortBy} paramsName="sortBy" onClick={handleFilterByPopularity} />
-            <Filter params={window.location.search} paramsName={'minPrice'} text="가격대" onClick={handleFilterByPriceRange} />
-            <Filter params={window.location.search} text="매장정보" paramsKeyword={options} paramsName="options" onClick={handleFilterByStoreInfo} />
+            <div className="filterScroll">
+              <Filter params={window.location.search} text="인기순" paramsKeyword={sortBy} paramsName="sortBy" onClick={handleFilterByPopularity} />
+              <Filter params={window.location.search} paramsName={'minPrice'} text="가격대" onClick={handleFilterByPriceRange} />
+              <Filter params={window.location.search} text="매장정보" paramsKeyword={options} paramsName="options" onClick={handleFilterByStoreInfo} />
+            </div>
           </FilterBox>
         </NavigatorStyle>
 
@@ -105,7 +107,6 @@ const Home = () => {
 };
 
 const NavigatorStyle = styled.div<IFixedProps>`
-  width: 100%;
   position: ${(props) => (props.isFixed ? 'fixed' : 'absolute')};
   top: ${(props) => (props.isFixed ? '0' : '11.8rem')};
   left: 0;
@@ -114,14 +115,47 @@ const NavigatorStyle = styled.div<IFixedProps>`
 `;
 
 const FilterBox = styled.div`
+  width: 100%;
   padding: 1.2rem 0rem 1.2rem 1.6rem;
   display: flex;
   gap: 0.6rem;
   box-shadow: 0 0 2px ${variables.colors.gray500};
-  background-color: ${variables.colors.white};
+  position: relative;
+
+  & ::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  & > Button {
+    flex-shrink: 0;
+    margin: auto 0;
+  }
+
+  .filterScroll {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; /* 모바일 스크롤 */
+    scrollbar-width: thin; /* 크롬, 파이어폭스에서 스크롤바 스타일 */
+    white-space: nowrap;
+    display: flex;
+    gap: 0.8rem;
+    position: relative;
+  }
+
+  /* 크롬, 사파리 */
+  .filterScroll::-webkit-scrollbar {
+    display: none;
+  }
 
-  button:first-of-type {
-    margin-right: 1rem;
+  .filterScroll {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE, Edge */
   }
 `;
 

From f2d01b400a1b342f4c1fbfe4db1dbbf97741f0b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=ED=9D=AC=EC=84=A0?= <designh2sun@gmail.com>
Date: Sat, 28 Dec 2024 23:56:22 +0900
Subject: [PATCH 4/4] =?UTF-8?q?Fix:=20=EC=8A=A4=ED=8A=9C=EB=94=94=EC=98=A4?=
 =?UTF-8?q?=20=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20=EC=8A=A4=ED=8A=9C?=
 =?UTF-8?q?=EB=94=94=EC=98=A4=20=EC=98=B5=EC=85=98=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Studio/StudioMain/StudioMain.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/Studio/StudioMain/StudioMain.tsx b/src/pages/Studio/StudioMain/StudioMain.tsx
index dbf66ff..69d509c 100644
--- a/src/pages/Studio/StudioMain/StudioMain.tsx
+++ b/src/pages/Studio/StudioMain/StudioMain.tsx
@@ -198,7 +198,16 @@ const StudioMain = () => {
           {data.options.length === 0
             ? '수집중'
             : data.options.map((optionItem) => (
-                <Button key={optionItem} text={option[optionItem]} size="small" width="fit" variant="white" icon={<img src={optionIcon[optionItem]} alt="필터 초기화" />} />
+                <Button
+                  key={optionItem}
+                  text={option[optionItem]}
+                  size="xsmall"
+                  width="fit"
+                  variant="white"
+                  iconSizeWidth="1.5rem"
+                  iconSizeHeight="1.5rem"
+                  icon={<img src={optionIcon[optionItem]} alt="매장정보" />}
+                />
               ))}
         </div>
       </div>