🔨 Refactor(#83): 타입 수정 Key 수정

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() {
     <>
       <S.StoreCartListWrapper>
         {testItem.map(item => (
-          <StoreItem {...item} />
+          <StoreItem key={item.id} {...item} />
         ))}
       </S.StoreCartListWrapper>
       <S.PlaceLabel>총 1500포인트</S.PlaceLabel>

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) {
     <>
       <S.ItemContainer $category={query}>
         {testItem.map(item => (
-          <StoreItem {...item} />
+          <StoreItem key={item.id} {...item} />
         ))}
       </S.ItemContainer>
       {/* 추후 하드코딩 수정 */}

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 (
-    <>
-      <S.StoreItem key={id}>
-        <S.ItemLabel>{name}</S.ItemLabel>
-        <S.ItemImage $category={category} src={getImageUrl(image)} />
-        <S.ItemLabel>{cost} Point</S.ItemLabel>
-      </S.StoreItem>
-    </>
+    <S.StoreItem>
+      <S.ItemLabel>{name}</S.ItemLabel>
+      <S.ItemImage $category={category} src={getImageUrl(image)} />
+      <S.ItemLabel>{cost} Point</S.ItemLabel>
+    </S.StoreItem>
   );
 }

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'] }>`

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<Item['category']>('clothes');
+  const [itemQuery, setItemQuery] =
+    useState<CosmeticItem['category']>('clothes');
   return (
     <>
       <globalS.Wrapper>

src/types/Item.ts → 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;