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;