refactor(Categories): 패딩, 갭 등 바로잡고 약간의 리팩토링

src/constants/categories.ts

@@ -8,7 +8,7 @@ export const CATEGORY_LIST: Category[] = [
   {
     id: 1,
     src: 'https://images.unsplash.com/photo-1580136608079-72029d0de130?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8JUVCJThGJTk5JUVDJTk2JTkxJUVBJUI3JUI4JUVCJUE2JUJDfGVufDB8fDB8fHww',
-    des: '동양화/ 한국화',
+    des: '동양화/한국화',
   },
   {
     id: 2,

src/pages/Categories/components/CategoryItem/index.tsx

@@ -1,35 +1,31 @@
-import { Image } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 interface CategoryItemProps {
-  des: string;
   src: string;
+  des: string;
 }
 
-const CategoryItem = ({ des, src }: CategoryItemProps) => {
-  des = des.replace('/', '/\n');
-
+const CategoryItem = ({ src, des }: CategoryItemProps) => {
   return (
     <Wrapper>
-      <RoundImage src={src} alt="CategoryImage" />
+      <CategoryThumbnail src={src} alt="Category thumbnail" />
       <DesWrapper>{des}</DesWrapper>
     </Wrapper>
   );
 };
 
 export default CategoryItem;
 
-const Wrapper = styled.div`
+const Wrapper = styled.button`
   display: flex;
   flex-direction: column;
   align-items: center;
-  cursor: pointer;
   gap: 8px;
 `;
 
-const RoundImage = styled(Image)`
+const CategoryThumbnail = styled.img`
   aspect-ratio: 1/1;
-  width: 80%;
+  width: 64px;
   border-radius: 100%;
   object-fit: cover;
   background-color: var(--color-gray-lt);

src/pages/Categories/index.tsx

@@ -6,7 +6,7 @@ import FakeSearchBar from '@/components/common/FakeSearchBar';
 import SearchModal from '@/components/common/SearchModal';
 import { CATEGORY_LIST } from '@/constants/categories';
 import * as G from '@/styles/globalStyles';
-import Category from './components/CategoryItem';
+import CategoryItem from './components/CategoryItem';
 
 const Categories = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -21,7 +21,7 @@ const Categories = () => {
       {isModalOpen && <SearchModal modalClose={() => setIsModalOpen(false)} />}
       <G.Grid col={4}>
         {CATEGORY_LIST.map((category) => (
-          <Category key={category.id} src={category.src} des={category.des} />
+          <CategoryItem key={category.id} src={category.src} des={category.des} />
         ))}
       </G.Grid>
       <G.Gap height={18} />

src/styles/globalStyles.ts

@@ -13,8 +13,8 @@ export const HorizontalLine = styled.hr`
 
 export const Grid = styled.div<{ col: number; justifyItems?: string }>`
   display: grid;
-  grid-template-columns: ${({ col }) => (col === 2 ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)')};
+  grid-template-columns: ${({ col }) => `repeat(${col}, 1fr)`};
   justify-items: ${({ justifyItems }) => justifyItems || 'center'};
-  padding: ${({ col }) => (col === 2 ? '16px' : '24px 16px 32px 16px;')};
-  gap: ${({ col }) => (col === 2 ? '8px' : '40px 12px')};
+  padding: ${({ col }) => (col === 2 ? '16px' : '16px 16px 32px 16px;')};
+  gap: ${({ col }) => (col === 2 ? '8px' : '24px')};
 `;