feat: CategoryItem 및 RowCategories 컴포넌트 추가

Author: leeleeleeleejun

apps/web/app/categories/[id]/_components/RowCategories/CategoryItem.tsx

@@ -0,0 +1,37 @@
+import { Column } from '@repo/ui/components/Layout'
+import { Icon } from '@repo/ui/components/Icon'
+import { Text } from '@repo/ui/components/Text'
+import { cn } from '@repo/ui/utils/cn'
+import type { Category } from '@/_apis/schemas/category'
+
+type Props = {
+  category: Category
+  isActive: boolean
+  onClick: VoidFunction
+}
+
+export const CategoryItem = ({ category, isActive, onClick }: Props) => {
+  const { iconKey, name } = category
+
+  return (
+    <Column
+      as={'button'}
+      onClick={onClick}
+      className={'w-10 items-center gap-1'}
+    >
+      <Icon type={iconKey} size={26} />
+      <Text
+        fontSize={'xs'}
+        fontWeight={isActive ? 'semibold' : 'light'}
+        className={'text-nowrap'}
+      >
+        {name}
+      </Text>
+      <hr
+        className={cn('border-main w-full rounded-full border-2', {
+          invisible: !isActive,
+        })}
+      />
+    </Column>
+  )
+}

apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx

@@ -0,0 +1,42 @@
+import type { Category } from '@/_apis/schemas/category'
+import { Flex } from '@repo/ui/components/Layout'
+import { CategoryItem } from './CategoryItem'
+import { cn } from '@repo/ui/utils/cn'
+
+type Props = {
+  categories: Category[]
+  id: string
+  setIdFunc: (id: string) => void
+}
+
+export const RowCategories = ({ id, categories, setIdFunc }: Props) => {
+  return (
+    <div className={'relative'}>
+      <Flex className={'scrollbar-hide gap-4 overflow-x-auto'}>
+        {categories.map((category) => (
+          <CategoryItem
+            key={category.id}
+            category={category}
+            isActive={id === category.id}
+            onClick={() => {
+              setIdFunc(category.id)
+            }}
+          />
+        ))}
+      </Flex>
+      <ScrollHintGradient />
+    </div>
+  )
+}
+
+const ScrollHintGradient = () => (
+  <div
+    className={cn(
+      'absolute',
+      'right-[-1px] top-0',
+      'h-full w-10',
+      'z-10',
+      'bg-gradient-to-l from-white to-transparent',
+    )}
+  />
+)

apps/web/app/categories/[id]/_components/RowCategories/index.tsx

@@ -0,0 +1 @@
+export { RowCategories } from './RowCategories'