From 807fc1b06cf71b192bf323a7a47ec2b1f51fe43d Mon Sep 17 00:00:00 2001
From: joojjang <itchu999@naver.com>
Date: Mon, 18 Nov 2024 03:19:53 +0900
Subject: [PATCH] =?UTF-8?q?refactor(Categories):=20=ED=8C=A8=EB=94=A9,=20?=
 =?UTF-8?q?=EA=B0=AD=20=EB=93=B1=20=EB=B0=94=EB=A1=9C=EC=9E=A1=EA=B3=A0=20?=
 =?UTF-8?q?=EC=95=BD=EA=B0=84=EC=9D=98=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/categories.ts                      |  2 +-
 .../Categories/components/CategoryItem/index.tsx | 16 ++++++----------
 src/pages/Categories/index.tsx                   |  4 ++--
 src/styles/globalStyles.ts                       |  6 +++---
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/constants/categories.ts b/src/constants/categories.ts
index 3d50e37..ab00852 100644
--- a/src/constants/categories.ts
+++ b/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,
diff --git a/src/pages/Categories/components/CategoryItem/index.tsx b/src/pages/Categories/components/CategoryItem/index.tsx
index 07172d9..2f16c72 100644
--- a/src/pages/Categories/components/CategoryItem/index.tsx
+++ b/src/pages/Categories/components/CategoryItem/index.tsx
@@ -1,17 +1,14 @@
-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>
   );
@@ -19,17 +16,16 @@ const CategoryItem = ({ des, src }: CategoryItemProps) => {
 
 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);
diff --git a/src/pages/Categories/index.tsx b/src/pages/Categories/index.tsx
index 83c3737..cd50ee3 100644
--- a/src/pages/Categories/index.tsx
+++ b/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} />
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
index 889c206..96df705 100644
--- a/src/styles/globalStyles.ts
+++ b/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')};
 `;