🎨 Publish(#83): 상점페이지 퍼블리싱

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

Hide file tree

Showing 5 changed files with 100 additions and 63 deletions.
diff --git a/src/features/store/styles.ts b/src/features/store/styles.ts
@@ -1,13 +1,14 @@
+import Item from '@type/Item';
 import styled, { css } from 'styled-components';
 
-export const StoreItemWrapper = styled.div<{ $query: string }>`
+export const StoreItemWrapper = styled.div<{ $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;
-  ${({ $query }) =>
-    $query === '프로필' &&
+  ${({ $category }) =>
+    $category === 'profile' &&
     css`
       grid-template-columns: repeat(3, 180px);
       grid-template-rows: repeat(1, 217px);
@@ -48,9 +49,15 @@ export const ItemLabel = styled.label`
   line-height: 16px; /* 160% */
   letter-spacing: 0.2px;
 `;
-export const ItemImage = styled.img`
+export const ItemImage = styled.img<{ $category: Item['category'] }>`
   width: 125px;
   height: 70px;
+  ${({ $category }) =>
+    $category === 'profile' &&
+    css`
+      width: 160px;
+      height: 160px;
+    `}
 `;
 export const PaginationDiv = styled.div`
   width: 276px;
@@ -95,7 +102,7 @@ export const StoreCartListWrapper = styled.div`
 `;
 
 export const PlaceLabel = styled.label`
-  margin-bottom: 26px;
+  margin: 28px 0 26px 0;
   text-align: center;
   display: block;
   width: 142.001px;

diff --git a/src/features/store/ui/CartList.tsx b/src/features/store/ui/CartList.tsx
@@ -1,53 +1,53 @@
 import { getImageUrl } from '@utils/getImageUrl';
 import * as S from '../styles';
-const testItem = [
+import Item from '@type/Item';
+const testItem: Item[] = [
   {
     id: 1,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
+    name: '해적 베레모',
+    image: '해적-베레모.svg',
+    cost: 500,
+    category: 'accessories',
   },
   {
     id: 2,
-    label: '해적 의상',
-    img: '해적-의상.svg',
-    place: '1000',
+    name: '해적 의상',
+    image: '해적-의상.svg',
+    cost: 1000,
+    category: 'clothes',
   },
   {
     id: 3,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
+    name: '해초의 습격',
+    image: '해초의-습격.svg',
+    cost: 500,
+    category: 'profile',
   },
   {
     id: 4,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
-  },
-  {
-    id: 5,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
+    name: '해적 베레모',
+    image: '해적-베레모.svg',
+    cost: 500,
+    category: 'color',
   },
 ];
-interface CartListProps {
-  query: string;
-}
-export default function CartList({ query }: CartListProps) {
+
+export default function CartList() {
   return (
     <>
       <S.StoreCartListWrapper>
         {testItem.map(item => (
           <S.StoreItem key={item.id}>
-            <S.ItemLabel>{item.label}</S.ItemLabel>
-            <S.ItemImage src={getImageUrl(item.img)} />
-            <S.ItemLabel>{item.place} Point</S.ItemLabel>
+            <S.ItemLabel>{item.name}</S.ItemLabel>
+            <S.ItemImage
+              $category={item.category}
+              src={getImageUrl(item.image)}
+            />
+            <S.ItemLabel>{item.cost} Point</S.ItemLabel>
           </S.StoreItem>
         ))}
-        <S.PlaceLabel>총 1500포인트</S.PlaceLabel>
       </S.StoreCartListWrapper>
+      <S.PlaceLabel>총 1500포인트</S.PlaceLabel>
     </>
   );
 }
diff --git a/src/features/store/ui/ItemContainer.tsx b/src/features/store/ui/ItemContainer.tsx
@@ -1,50 +1,55 @@
 import { getImageUrl } from '@/utils/getImageUrl';
 import * as S from '../styles';
 import { useState } from 'react';
-const testItem = [
+import Item from '@type/Item';
+const testItem: Item[] = [
   {
     id: 1,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
-    category: 'hat',
+    name: '해적 베레모',
+    image: '해적-베레모.svg',
+    cost: 500,
+    category: 'accessories',
   },
   {
     id: 2,
-    label: '해적 의상',
-    img: '해적-의상.svg',
-    place: '1000',
-    category: 'top',
+    name: '해적 의상',
+    image: '해적-의상.svg',
+    cost: 1000,
+    category: 'clothes',
   },
   {
     id: 3,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
-    category: 'accessories',
+    name: '해초의 습격',
+    image: '해초의-습격.svg',
+    cost: 500,
+    category: 'profile',
   },
   {
     id: 4,
-    label: '해적 베레모',
-    img: '해적-베레모.svg',
-    place: '500',
+    name: '해적 베레모',
+    image: '해적-베레모.svg',
+    cost: 500,
     category: 'color',
   },
 ];
+
 interface ItemContainerProps {
-  query: string;
+  query: Item['category'];
 }
 export default function ItemContainer({ query }: ItemContainerProps) {
   //스타일링을 위함 추후 수정 예정
   const [currentPage, setCurrentPage] = useState<number>();
   return (
     <>
-      <S.StoreItemWrapper $query={query}>
+      <S.StoreItemWrapper $category={query}>
         {testItem.map(item => (
           <S.StoreItem key={item.id}>
-            <S.ItemLabel>{item.label}</S.ItemLabel>
-            <S.ItemImage src={getImageUrl(item.img)} />
-            <S.ItemLabel>{item.place} Point</S.ItemLabel>
+            <S.ItemLabel>{item.name}</S.ItemLabel>
+            <S.ItemImage
+              $category={item.category}
+              src={getImageUrl(item.image)}
+            />
+            <S.ItemLabel>{item.cost} Point</S.ItemLabel>
           </S.StoreItem>
         ))}
       </S.StoreItemWrapper>

diff --git a/src/pages/store/Store.tsx b/src/pages/store/Store.tsx
@@ -8,10 +8,27 @@ import ItemContainer from '@features/store/ui/ItemContainer';
 import CartList from '@features/store/ui/CartList';
 import MyCharacter from '@features/user/ui/MyCharacter';
 import ProfileImage from '@features/user/ui/ProfileImage';
-const buttonLabelList = ['의상', '악세사리', '프로필', '색상'] as const;
+import Item from '@type/Item';
+const buttonList: { label: string; name: Item['category'] }[] = [
+  {
+    label: '의상',
+    name: 'clothes',
+  },
+  {
+    label: '악세사리',
+    name: 'accessories',
+  },
+  {
+    label: '프로필',
+    name: 'profile',
+  },
+  {
+    label: '색상',
+    name: 'color',
+  },
+];
 export default function Store() {
-  const [itemQuery, setItemQuery] =
-    useState<(typeof buttonLabelList)[number]>('의상');
+  const [itemQuery, setItemQuery] = useState<Item['category']>('clothes');
   return (
     <>
       <globalS.Wrapper>
@@ -23,7 +40,7 @@ export default function Store() {
           <Header />
           <S.CartListWrapper>
             <S.Label>장바구니</S.Label>
-            <CartList query={itemQuery} />
+            <CartList />
           </S.CartListWrapper>
         </globalS.RightSection>
       </globalS.Wrapper>
@@ -33,17 +50,17 @@ export default function Store() {
             <S.Button>내가 구매한 아이템</S.Button>
             <S.Button>초기화</S.Button>
           </div>
-          {itemQuery === '프로필' ? <ProfileImage /> : <MyCharacter />}
+          {itemQuery === 'profile' ? <ProfileImage /> : <MyCharacter />}
         </S.MyCharacterSection>
         <S.StoreItemListSection>
           <S.FilterListContainer>
-            {buttonLabelList.map(label => (
+            {buttonList.map(item => (
               <S.FilterButton
-                key={label}
-                onClick={() => setItemQuery(label)}
-                $isSelect={itemQuery === label}
+                key={item.name}
+                onClick={() => setItemQuery(item.name)}
+                $isSelect={itemQuery === item.name}
               >
-                {label}
+                {item.label}
               </S.FilterButton>
             ))}
           </S.FilterListContainer>

diff --git a/src/types/Item.ts b/src/types/Item.ts
@@ -0,0 +1,8 @@
+interface Item {
+  id: number;
+  name: string;
+  cost: number;
+  image: string;
+  category: 'clothes' | 'accessories' | 'profile' | 'color';
+}
+export default Item;