diff --git a/src/features/store/ui/CartList.tsx b/src/features/store/ui/CartList.tsx index 38fdbc8..eee5707 100644 --- a/src/features/store/ui/CartList.tsx +++ b/src/features/store/ui/CartList.tsx @@ -1,7 +1,7 @@ import * as S from './styles'; -import type Item from '@type/Item'; +import type CosmeticItem from '@/types/CosmeticItem '; import StoreItem from './StoreItem'; -const testItem: Item[] = [ +const testItem: CosmeticItem[] = [ { id: 1, name: '해적 베레모', @@ -37,7 +37,7 @@ export default function CartList() { <> {testItem.map(item => ( - + ))} 총 1500포인트 diff --git a/src/features/store/ui/ItemContainer.tsx b/src/features/store/ui/ItemContainer.tsx index 4cc83ba..481b213 100644 --- a/src/features/store/ui/ItemContainer.tsx +++ b/src/features/store/ui/ItemContainer.tsx @@ -1,8 +1,8 @@ import * as S from './styles'; import { useState } from 'react'; -import type Item from '@type/Item'; +import type CosmeticItem from '@/types/CosmeticItem '; import StoreItem from './StoreItem'; -const testItem: Item[] = [ +const testItem: CosmeticItem[] = [ { id: 1, name: '해적 베레모', @@ -34,7 +34,7 @@ const testItem: Item[] = [ ]; interface ItemContainerProps { - query: Item['category']; + query: CosmeticItem['category']; } export default function ItemContainer({ query }: ItemContainerProps) { //스타일링을 위함 추후 수정 예정 @@ -43,7 +43,7 @@ export default function ItemContainer({ query }: ItemContainerProps) { <> {testItem.map(item => ( - + ))} {/* 추후 하드코딩 수정 */} diff --git a/src/features/store/ui/StoreItem.tsx b/src/features/store/ui/StoreItem.tsx index 2f0cb4d..dde4848 100644 --- a/src/features/store/ui/StoreItem.tsx +++ b/src/features/store/ui/StoreItem.tsx @@ -1,15 +1,13 @@ -import type Item from '@type/Item'; +import type Item from '@/types/CosmeticItem '; import * as S from './styles'; import { getImageUrl } from '@utils/getImageUrl'; -export default function StoreItem({ id, name, image, category, cost }: Item) { +export default function StoreItem({ name, image, category, cost }: Item) { return ( - <> - - {name} - - {cost} Point - - + + {name} + + {cost} Point + ); } diff --git a/src/features/store/ui/styles.ts b/src/features/store/ui/styles.ts index 4f8267f..0c81632 100644 --- a/src/features/store/ui/styles.ts +++ b/src/features/store/ui/styles.ts @@ -1,4 +1,4 @@ -import Item from '@type/Item'; +import Item from '@/types/CosmeticItem '; import styled, { css } from 'styled-components'; export const ItemContainer = styled.ul<{ $category: Item['category'] }>` diff --git a/src/pages/store/Store.tsx b/src/pages/store/Store.tsx index 9ed01d0..6fd5579 100644 --- a/src/pages/store/Store.tsx +++ b/src/pages/store/Store.tsx @@ -8,8 +8,8 @@ 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'; -import Item from '@type/Item'; -const buttonList: { label: string; name: Item['category'] }[] = [ +import CosmeticItem from '@/types/CosmeticItem '; +const buttonList: { label: string; name: CosmeticItem['category'] }[] = [ { label: '의상', name: 'clothes', @@ -26,9 +26,10 @@ const buttonList: { label: string; name: Item['category'] }[] = [ label: '색상', name: 'color', }, -]; +] as const; export default function Store() { - const [itemQuery, setItemQuery] = useState('clothes'); + const [itemQuery, setItemQuery] = + useState('clothes'); return ( <> diff --git a/src/types/Item.ts b/src/types/CosmeticItem .ts similarity index 70% rename from src/types/Item.ts rename to src/types/CosmeticItem .ts index e59ac5b..fe31342 100644 --- a/src/types/Item.ts +++ b/src/types/CosmeticItem .ts @@ -1,8 +1,8 @@ -interface Item { +interface CosmeticItem { id: number; name: string; cost: number; image: string; category: 'clothes' | 'accessories' | 'profile' | 'color'; } -export default Item; +export default CosmeticItem;