🎨 Publish(#83): css 상속으로 변경, Item 컴포넌트 생성

modern-agile-team · Dec 8, 2024 · 89335fa · 89335fa
1 parent 64ee2c0
commit 89335fa
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 52 deletions.
diff --git a/src/features/store/styles.ts b/src/features/store/styles.ts
@@ -1,27 +1,39 @@
 import Item from '@type/Item';
 import styled, { css } from 'styled-components';
 
-export const StoreItemWrapper = styled.div<{ $category: Item['category'] }>`
+export const ItemContainer = styled.ul<{ $category: Item['category'] }>`
   margin: 18px 0 27px 0;
   display: grid;
   grid-template-columns: repeat(4, 144px);
   grid-template-rows: repeat(2, 125px);
   gap: 21px 19px;
+  color: #a5ecf0;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
   ${({ $category }) =>
     $category === 'profile' &&
     css`
       grid-template-columns: repeat(3, 180px);
       grid-template-rows: repeat(1, 217px);
     `}
 `;
-export const StoreItem = styled.div`
+
+export const StoreItem = styled.li`
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 8px;
   border: 2px solid #a5ecf0;
   background: #f4f4f4;
   padding: 10px 0;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.2px;
   cursor: pointer;
   &:hover {
     border-radius: 8px;
@@ -34,6 +46,7 @@ export const StoreItem = styled.div`
     }
   }
 `;
+
 export const ItemLabel = styled.label`
   text-align: center;
   display: block;
@@ -42,13 +55,10 @@ export const ItemLabel = styled.label`
   border-radius: 15px;
   border: 2px solid #a5ecf0;
   background: #00d9e9;
-  color: #fff;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 16px; /* 160% */
-  letter-spacing: 0.2px;
+  color: inherit;
+  font: inherit;
 `;
+
 export const ItemImage = styled.img<{ $category: Item['category'] }>`
   width: 125px;
   height: 70px;
@@ -59,32 +69,43 @@ export const ItemImage = styled.img<{ $category: Item['category'] }>`
       height: 160px;
     `}
 `;
+
 export const PaginationDiv = styled.div`
   width: 276px;
   display: flex;
   gap: 57px;
-`;
-export const PaginationButton = styled.button<{ $isSelect: boolean }>`
-  border: 0;
-  background-color: transparent;
   color: #a5ecf0;
   font-size: 15px;
   font-style: normal;
   font-weight: 700;
   line-height: 24px; /* 160% */
+`;
+
+export const PaginationButton = styled.button<{ $isSelect: boolean }>`
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+
   ${({ $isSelect }) =>
     $isSelect &&
     css`
       color: #00d9e9;
     `}
 `;
-export const StoreCartListWrapper = styled.div`
+
+export const StoreCartListWrapper = styled.ul`
   display: flex;
   overflow-y: auto;
   margin: 26px 0 0 0;
   flex-direction: column;
   gap: 28px;
   padding-right: 8px;
+  color: #a5ecf0;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
   &::-webkit-scrollbar {
     padding-left: 5px;
     width: 8px;
@@ -115,5 +136,5 @@ export const PlaceLabel = styled.label`
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
-  line-height: 24px; /* 171.429% */
+  line-height: 24px;
 `;
diff --git a/src/features/store/ui/CartList.tsx b/src/features/store/ui/CartList.tsx
@@ -1,6 +1,6 @@
-import { getImageUrl } from '@utils/getImageUrl';
 import * as S from '../styles';
-import Item from '@type/Item';
+import type Item from '@type/Item';
+import StoreItem from './StoreItem';
 const testItem: Item[] = [
   {
     id: 1,
@@ -37,14 +37,7 @@ export default function CartList() {
     <>
       <S.StoreCartListWrapper>
         {testItem.map(item => (
-          <S.StoreItem key={item.id}>
-            <S.ItemLabel>{item.name}</S.ItemLabel>
-            <S.ItemImage
-              $category={item.category}
-              src={getImageUrl(item.image)}
-            />
-            <S.ItemLabel>{item.cost} Point</S.ItemLabel>
-          </S.StoreItem>
+          <StoreItem {...item} />
         ))}
       </S.StoreCartListWrapper>
       <S.PlaceLabel>총 1500포인트</S.PlaceLabel>

diff --git a/src/features/store/ui/ItemContainer.tsx b/src/features/store/ui/ItemContainer.tsx
@@ -1,7 +1,7 @@
-import { getImageUrl } from '@/utils/getImageUrl';
 import * as S from '../styles';
 import { useState } from 'react';
-import Item from '@type/Item';
+import type Item from '@type/Item';
+import StoreItem from './StoreItem';
 const testItem: Item[] = [
   {
     id: 1,
@@ -41,18 +41,11 @@ export default function ItemContainer({ query }: ItemContainerProps) {
   const [currentPage, setCurrentPage] = useState<number>();
   return (
     <>
-      <S.StoreItemWrapper $category={query}>
+      <S.ItemContainer $category={query}>
         {testItem.map(item => (
-          <S.StoreItem key={item.id}>
-            <S.ItemLabel>{item.name}</S.ItemLabel>
-            <S.ItemImage
-              $category={item.category}
-              src={getImageUrl(item.image)}
-            />
-            <S.ItemLabel>{item.cost} Point</S.ItemLabel>
-          </S.StoreItem>
+          <StoreItem {...item} />
         ))}
-      </S.StoreItemWrapper>
+      </S.ItemContainer>
       {/* 추후 하드코딩 수정 */}
       <S.PaginationDiv>
         {[1, 2, 3, 4, 5].map(page => (

diff --git a/src/features/store/ui/StoreItem.tsx b/src/features/store/ui/StoreItem.tsx
@@ -0,0 +1,15 @@
+import type Item from '@type/Item';
+import * as S from '../styles';
+import { getImageUrl } from '@utils/getImageUrl';
+
+export default function StoreItem({ id, name, image, category, cost }: Item) {
+  return (
+    <>
+      <S.StoreItem key={id}>
+        <S.ItemLabel>{name}</S.ItemLabel>
+        <S.ItemImage $category={category} src={getImageUrl(image)} />
+        <S.ItemLabel>{cost} Point</S.ItemLabel>
+      </S.StoreItem>
+    </>
+  );
+}
diff --git a/src/pages/store/Store.tsx b/src/pages/store/Store.tsx
@@ -39,7 +39,7 @@ export default function Store() {
         <globalS.RightSection>
           <Header />
           <S.CartListWrapper>
-            <S.Label>장바구니</S.Label>
+            <S.CartLabel>장바구니</S.CartLabel>
             <CartList />
           </S.CartListWrapper>
         </globalS.RightSection>

diff --git a/src/pages/store/styles.ts b/src/pages/store/styles.ts
@@ -11,8 +11,14 @@ export const CartListWrapper = styled.section`
   background: #fff;
   box-shadow: 0 3px #e5e5e5;
   margin: 84px 47px 0 0;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.2px;
 `;
-export const Label = styled.label`
+export const CartLabel = styled.label`
   margin: 18px 0 0 0;
   display: block;
   width: 147.003px;
@@ -37,7 +43,11 @@ export const MyCharacterSection = styled.section`
   gap: 119px;
   box-shadow: 0 3px #e5e5e5;
   padding: 12px 0 0 24px;
-
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  text-transform: lowercase;
   > div:nth-child(1) {
     display: flex;
     flex-direction: column;
@@ -64,27 +74,28 @@ export const FilterListContainer = styled.div`
   align-items: center;
   justify-content: flex-end;
   padding: 18px 40px 19px 0;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  color: #ff4949;
+  text-transform: lowercase;
 `;
 export const FilterButton = styled.button<{ $isSelect: boolean }>`
   width: 79px;
   height: 23px;
   border-radius: 15px;
   border: 2px solid #ff4949;
   background: #f4f4f4;
-  color: #ff4949;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 20px; /* 166.667% */
-  text-transform: lowercase;
+  font: inherit;
+  color: inherit;
   ${({ $isSelect }) =>
     $isSelect &&
     css`
       color: #fff;
       border-radius: 15px;
       border: 2px solid #e8080c;
       background: #ff4949;
-    `}
+    `};
 `;
 export const RedLine = styled.hr`
   width: 632px;
@@ -98,10 +109,6 @@ export const Button = styled.button`
   border-radius: 15px;
   border: 2px solid #e8080c;
   background: #ff4949;
-  color: #fff;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 20px; /* 166.667% */
-  text-transform: lowercase;
+  color: inherit;
+  font: inherit;
 `;