Merge pull request #195 from TEAM-FLASH/Feat/#179

[S4] 버튼 공통 컴포넌트의 스타일을 추가한다
TEAM-FLASH · Dec 30, 2024 · 75940f6 · 75940f6
2 parents c7078d1 + f2d01b4
commit 75940f6
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 15 deletions.
diff --git 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;
     `}
   `;
 

diff --git 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"

diff --git 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 */
   }
 `;
 

diff --git 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>