feat: 커뮤니티 선택 탭 모바일 사이즈 대응

Author: Virtuso1225

package.json

@@ -29,6 +29,7 @@
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.6.8",
+    "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.2.0",

src/features/Community/CommunitySelectTab/index.tsx

@@ -1,6 +1,7 @@
 import * as s from './style.css'
 
 import { Button } from '@/ui/Button'
+import { useMediaQueryByName } from '@/util/hooks/useMediaQueryByName'
 import { useQueryParams } from '@/util/hooks/useQueryParams'
 
 const boardConfig = [
@@ -34,12 +35,14 @@ export type BoardQueryParam = {
 
 const CommunitySelectTab = () => {
   const [queryParam, setQueryParam] = useQueryParams<BoardQueryParam>()
-
+  const isMobile = useMediaQueryByName('smDown')
   return (
     <div className={s.Wrapper}>
       {boardConfig.map(board => (
         <Button
+          key={board.boardId}
           variant="default"
+          size={isMobile ? 'sm' : 'default'}
           isActive={queryParam.board === board.board}
           onClick={() => setQueryParam({ board: board.board, boardId: board.boardId })}
         >

src/features/Community/CommunitySelectTab/style.css.ts

@@ -8,4 +8,15 @@ export const Wrapper = style([
   f.alignCenter,
   f.background.lightGray2,
   { width: '44.5625rem', padding: '0.625rem', borderRadius: '6px' },
+  f.smDown({
+    width: '100%',
+    overflowX: 'auto',
+    gap: '0.875rem',
+    borderRadius: '0px',
+    selectors: {
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    },
+  }),
 ])

src/features/Community/HotPostPreview/style.css.ts

@@ -2,7 +2,13 @@ import { style } from '@vanilla-extract/css'
 
 import { f } from '@/style'
 
-export const Wrapper = style([f.flex, f.directionColumn, f.alignStart, { width: '22.4375rem', gap: '3rem' }])
+export const Wrapper = style([
+  f.flex,
+  f.directionColumn,
+  f.alignStart,
+  { width: '22.4375rem', gap: '3rem' },
+  f.smDown({ display: 'none' }),
+])
 
 export const TitleWrapper = style([f.flex, f.justifyBetween, f.wFull, f.alignEnd])
 

src/features/Community/PostSearch/style.css.ts

@@ -2,7 +2,13 @@ import { style } from '@vanilla-extract/css'
 
 import { f } from '@/style'
 
-export const SearchWrapper = style([f.flex, f.directionColumn, f.wFull, { gap: '1.875rem' }])
+export const SearchWrapper = style([
+  f.flex,
+  f.directionColumn,
+  f.wFull,
+  { gap: '1.875rem' },
+  f.smDown({ display: 'none' }),
+])
 
 export const Header = style([f.flex, f.alignCenter, f.justifyBetween, f.wFull])
 

src/pages/Community/All/style.css.ts

@@ -4,4 +4,4 @@ import { f } from '@/style'
 
 export const Wrapper = style([f.flex, f.directionColumn, f.alignCenter, { marginTop: '2.5rem', gap: '2.5rem' }])
 
-export const SelectTabWrapper = style([f.flex, f.alignStart, { width: '70.75rem' }])
+export const SelectTabWrapper = style([f.flex, f.alignStart, { width: '70.75rem' }, f.smDown({ width: '100%' })])

src/ui/Button/index.tsx

@@ -1,4 +1,5 @@
 import { Slot } from '@radix-ui/react-slot'
+import clsx from 'clsx'
 import { forwardRef } from 'react'
 
 import * as s from './style.css'
@@ -9,19 +10,31 @@ type Props = {
   children: React.ReactNode
   asChild?: boolean
   style?: React.CSSProperties
-  variant?: s.ButtonVariants
+  variant?: s.ButtonStyleVariants
+  size?: s.ButtonSizeVariants
   isActive?: boolean
 } & React.ButtonHTMLAttributes<HTMLButtonElement>
 
 export const Button = forwardRef<HTMLButtonElement, Props>(
-  ({ suffixIcon, prefixIcon, children, asChild, onClick, variant = 'default', isActive, ...props }, ref) => {
+  (
+    { suffixIcon, prefixIcon, children, asChild, onClick, variant = 'default', size = 'default', isActive, ...props },
+    ref,
+  ) => {
     const Component = asChild ? Slot : 'button'
 
     return (
-      <Component ref={ref} onClick={onClick} {...props} className={s.Button[variant]} data-active={isActive}>
+      <Component
+        ref={ref}
+        onClick={onClick}
+        {...props}
+        className={clsx(s.ButtonStyle[variant], s.ButtonSize[size])}
+        data-active={isActive}
+      >
         <div data-part="content">
           {prefixIcon && <span data-part="prefix">{prefixIcon}</span>}
-          <span data-part="text">{children}</span>
+          <span data-part="text" style={{ whiteSpace: 'nowrap' }}>
+            {children}
+          </span>
           {suffixIcon && <span data-part="suffix">{suffixIcon}</span>}
         </div>
       </Component>

src/ui/Button/style.css.ts

@@ -10,15 +10,13 @@ export const Base = style([
   f.color.static.darkGray2,
   f.background.lightGray2,
   {
-    height: '2.875rem',
-    padding: '0rem 1.875rem',
     borderRadius: '6px',
     transition: 'all 0.2s ease-in-out',
     outline: 'none',
   },
 ])
 
-export const Button = styleVariants({
+export const ButtonStyle = styleVariants({
   default: [
     Base,
     {
@@ -66,4 +64,10 @@ export const Button = styleVariants({
   gray: [Base, { ':hover': { boxShadow: vars.shadow.p25 }, ':focus': { boxShadow: vars.shadow.p25 } }],
 })
 
-export type ButtonVariants = keyof typeof Button
+export const ButtonSize = styleVariants({
+  default: [{ height: '2.875rem', padding: '0rem 1.875rem', ...vars.typography.desktop.body1M }],
+  sm: [{ height: '1.75rem', padding: '0.5rem 0.625rem', ...vars.typography.mobile.bodyM, flex: '1 0 0' }],
+})
+
+export type ButtonStyleVariants = keyof typeof ButtonStyle
+export type ButtonSizeVariants = keyof typeof ButtonSize

yarn.lock

@@ -3485,6 +3485,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "code-block-writer@npm:^12.0.0":
   version: 12.0.0
   resolution: "code-block-writer@npm:12.0.0"
@@ -6035,6 +6042,7 @@ __metadata:
     "@vanilla-extract/vite-plugin": "npm:^4.0.19"
     "@vitejs/plugin-react-swc": "npm:^3.5.0"
     axios: "npm:^1.6.8"
+    clsx: "npm:^2.1.1"
     country-flag-icons: "npm:^1.5.13"
     date-fns: "npm:^3.6.0"
     embla-carousel-autoplay: "npm:^8.2.0"