refactor(Categories): 큐레이션 리스트 리팩토링 외

- map 함수로 확장성 개선 - 카테고리 이미지 div로 한번 감싸기
kakao-tech-campus-2nd-step3 · Nov 17, 2024 · 7ac7722 · 7ac7722
1 parent 807fc1b
commit 7ac7722
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 64 deletions.
diff --git a/src/constants/categories.ts b/src/constants/categories.ts
@@ -1,53 +1,56 @@
 type Category = {
-  id: number;
   src: string;
-  des: string;
+  title: string;
 };
 
 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: '동양화/한국화',
+    title: '동양화/한국화',
   },
   {
-    id: 2,
     src: 'https://images.unsplash.com/photo-1579783928621-7a13d66a62d1?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8JUVDJTg0JTlDJUVDJTk2JTkxJUVEJTk5JTk0fGVufDB8fDB8fHww',
-    des: '서양화',
+    title: '서양화',
   },
   {
-    id: 3,
     src: 'https://plus.unsplash.com/premium_photo-1672287578309-2a2115000688?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVDJUExJUIwJUVBJUIwJTgxfGVufDB8fDB8fHww',
-    des: '조각',
+    title: '조각',
   },
   {
-    id: 4,
     src: 'https://images.unsplash.com/photo-1590605105526-5c08f63f89aa?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8JUVCJThGJTg0JUVDJTk4JTg4fGVufDB8fDB8fHww',
-    des: '도예/공예',
+    title: '도예/공예',
   },
   {
-    id: 5,
     src: 'https://images.unsplash.com/photo-1682159672286-40790338349b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVCJTg5JUI0JUVCJUFGJUI4JUVCJTk0JTk0JUVDJTk2JUI0fGVufDB8fDB8fHww',
-    des: '뉴미디어',
+    title: '뉴미디어',
   },
   {
-    id: 6,
     src: 'https://plus.unsplash.com/premium_photo-1663100678842-d89cb7b084ee?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fCVFQiU5NCU5NCVFQyU5RSU5MCVFQyU5RCVCOHxlbnwwfHwwfHx8MA%3D%3D',
-    des: '디자인',
+    title: '디자인',
   },
   {
-    id: 7,
     src: 'https://plus.unsplash.com/premium_photo-1723075214781-ea091374d81c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8JUVEJThDJTkwJUVEJTk5JTk0fGVufDB8fDB8fHww',
-    des: '드로잉/판화',
+    title: '드로잉/판화',
   },
   {
-    id: 8,
     src: 'https://images.unsplash.com/photo-1506434304575-afbb92660c28?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8JUVDJTgyJUFDJUVDJUE3JTg0JUVDJTgyJUFDfGVufDB8fDB8fHww',
-    des: '사진',
+    title: '사진',
   },
   {
-    id: 9,
     src: 'https://images.unsplash.com/photo-1546638008-efbe0b62c730?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8JUVCJThGJTk5JUVDJTk2JTkxJUVBJUI3JUI4JUVCJUE2JUJDfGVufDB8fDB8fHww',
-    des: '서예/캘리그라피',
+    title: '서예/캘리그라피',
+  },
+];
+
+type Curation = { title: string; des: string };
+
+export const CURATION_LIST: Curation[] = [
+  {
+    title: '매거진',
+    des: '숨겨진 무한의 가치를 발견하고 싶다면',
+  },
+  {
+    title: '아티스트 그라운드',
+    des: '내 취향대로 작가 골라보기',
   },
 ];
diff --git a/src/pages/Categories/components/CategoryItem/index.tsx b/src/pages/Categories/components/CategoryItem/index.tsx
@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
 
 interface CategoryItemProps {
+  title: string;
   src: string;
-  des: string;
 }
 
-const CategoryItem = ({ src, des }: CategoryItemProps) => {
+const CategoryItem = ({ title, src }: CategoryItemProps) => {
   return (
     <Wrapper>
-      <CategoryThumbnail src={src} alt="Category thumbnail" />
-      <DesWrapper>{des}</DesWrapper>
+      <CategoryThumbnail>{src && <img src={src} alt="Category thumbnail" />}</CategoryThumbnail>
+      <Title>{title}</Title>
     </Wrapper>
   );
 };
@@ -23,15 +23,20 @@ const Wrapper = styled.button`
   gap: 8px;
 `;
 
-const CategoryThumbnail = styled.img`
-  aspect-ratio: 1/1;
+const CategoryThumbnail = styled.div`
   width: 64px;
-  border-radius: 100%;
-  object-fit: cover;
+  aspect-ratio: 1 / 1;
+  border-radius: 50px;
+  overflow: hidden;
   background-color: var(--color-gray-lt);
+
+  img {
+    object-fit: cover;
+    width: 64px;
+  }
 `;
 
-const DesWrapper = styled.p`
+const Title = styled.p`
   font-size: var(--font-size-sm);
   display: inline;
   white-space: pre-wrap;

diff --git a/src/pages/Categories/components/CurationItem/index.tsx b/src/pages/Categories/components/CurationItem/index.tsx
@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+
+interface CurationItemProps {
+  title: string;
+  des: string;
+}
+
+const CurationItem = ({ title, des }: CurationItemProps) => {
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      <Des>{des}</Des>
+    </Wrapper>
+  );
+};
+
+export default CurationItem;
+
+const Wrapper = styled.li`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  min-height: 54px;
+  gap: 8px;
+  cursor: pointer;
+`;
+
+const Title = styled.span`
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  line-height: 1.2;
+`;
+
+const Des = styled.span`
+  font-size: var(--font-size-sm);
+  line-height: 1.2;
+`;
diff --git a/src/pages/Categories/index.tsx b/src/pages/Categories/index.tsx
@@ -1,12 +1,12 @@
-import { Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 
 import FakeSearchBar from '@/components/common/FakeSearchBar';
 import SearchModal from '@/components/common/SearchModal';
-import { CATEGORY_LIST } from '@/constants/categories';
+import { CATEGORY_LIST, CURATION_LIST } from '@/constants/categories';
 import * as G from '@/styles/globalStyles';
 import CategoryItem from './components/CategoryItem';
+import CurationItem from './components/CurationItem';
 
 const Categories = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -21,20 +21,14 @@ const Categories = () => {
       {isModalOpen && <SearchModal modalClose={() => setIsModalOpen(false)} />}
       <G.Grid col={4}>
         {CATEGORY_LIST.map((category) => (
-          <CategoryItem key={category.id} src={category.src} des={category.des} />
+          <CategoryItem key={category.title} title={category.title} src={category.src} />
         ))}
       </G.Grid>
-      <G.Gap height={18} />
+      <G.Gap height={12} />
       <CurationWrapper>
-        <CurationItem>
-          <Title>매거진</Title>
-          <Des>숨겨진 무한의 가치를 발견하고 싶다면</Des>
-        </CurationItem>
-        <G.Gap height={2} />
-        <CurationItem>
-          <Title>아티스트 그라운드</Title>
-          <Des>내 취향대로 작가 골라보기</Des>
-        </CurationItem>
+        {CURATION_LIST.map((curation) => (
+          <CurationItem key={curation.title} title={curation.title} des={curation.des} />
+        ))}
       </CurationWrapper>
     </Wrapper>
   );
@@ -46,29 +40,12 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-const CurationItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  padding: 16px;
-  min-height: 54px;
-  gap: 8px;
-`;
-
-const Title = styled(Text)`
-  font-size: var(--font-size-md);
-  font-weight: 600;
-  line-height: 1.2;
-`;
-
-const Des = styled(Text)`
-  font-size: var(--font-size-sm);
-  line-height: 1.2;
-`;
-
-const CurationWrapper = styled.div`
+const CurationWrapper = styled.ul`
   height: auto;
   width: 100%;
   margin-bottom: 54px;
+
+  &:not(:last-child) {
+    border-bottom: 0.5px solid var(--color-gray-lt);
+  }
 `;