design) MainProfile/items 레이아웃 간격 조정

Do-it-Together-DoTo · Jun 3, 2024 · c39c5c1 · c39c5c1
1 parent 443621d
commit c39c5c1
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 10 deletions.
diff --git a/src/components/store/StoreMainProfile.tsx b/src/components/store/StoreMainProfile.tsx
@@ -12,11 +12,13 @@ const profileExample = Array.from({ length: 1 }, () => ({
 
 const StoreMainProfile = () => {
   return (
-    <div className="rounded-[0.9375rem] flex items-center justify-center w-[49.8125rem] h-[9.375rem] bg-Light_Layout-100 dark:bg-Dark_Layout-200">
+    <div className="rounded-[0.9375rem] flex items-center justify-center w-full h-[9.375rem] gap-x-80 bg-Light_Layout-100 dark:bg-Dark_Layout-200">
+      {/* <div className="rounded-[0.9375rem] flex items-center justify-center w-[49.8125rem] h-[9.375rem] bg-Light_Layout-100 dark:bg-Dark_Layout-200"> */}
       <div className="flex">
         <MyBlob className="w-[6.8137rem] h-[4.1563rem] mr-4" />
+
         <div className="flex flex-col justify-end gap-y-[0.625rem]">
-          <div className="flex w-[27.1875rem] gap-x-[0.625rem] mb-[0.625rem]">
+          <div className="flex gap-x-[0.625rem]">
             <div className="text-Light_Text_Name dark:text-Dark_Text_Name font-bold text-[1.8125rem]">
               {profileExample[0].username}
             </div>
@@ -39,7 +41,7 @@ const StoreMainProfile = () => {
         </div>
       </div>
       <div className="flex items-center h-[1.875rem]">
-        <Coin className="w-[1.875rem] h-[1.875rem]" />
+        <Coin className="w-[1.875rem] h-[1.875rem] mr-2" />
         <div className="font-nico text-Light_Text_Name dark:text-Dark_Text_Contents text-[1.75rem]">
           {profileExample[0].coin}
         </div>

diff --git a/src/pages/store/InventoryCharacterPage.tsx b/src/pages/store/InventoryCharacterPage.tsx
@@ -9,7 +9,13 @@ const InventoryCharacterPage = () => {
       </div>
       <div className="px-[1.875rem]">
         <StoreMainProfile />
-        <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-[49.1875rem] py-[2.3125rem]">
+        <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-full py-[2.3125rem]">
+          <InventoryCharacter />
+          <InventoryCharacter />
+          <InventoryCharacter />
+          <InventoryCharacter />
+          <InventoryCharacter />
+          <InventoryCharacter />
           <InventoryCharacter />
           <InventoryCharacter />
           <InventoryCharacter />

diff --git a/src/pages/store/InventoryItemPage.tsx b/src/pages/store/InventoryItemPage.tsx
@@ -7,11 +7,26 @@ const InventoryItemPage = () => {
       <div className="h-[5.625rem] flex items-center justify-center text-[1.625rem] text-Light_CategoryText_Icon_Contents">
         보관함
       </div>
-      <div className="px-[1.875rem]">
+      <div className="px-[1.875rem] w-full">
         <StoreMainProfile />
-        <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-[49.1875rem] py-[2.3125rem]">
+        <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-full py-[2.3125rem]">
           <InventoryItem itemName={'특 성장 물약'} isRare={true} itemValue={8} />
           <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
+          <InventoryItem itemName={'성장 물약'} isRare={false} itemValue={3} />
         </div>
       </div>
     </div>

diff --git a/src/pages/store/ShopCharacterPage.tsx b/src/pages/store/ShopCharacterPage.tsx
@@ -1,23 +1,37 @@
 import ShopCharacter from '@/components/store/ShopCharacter';
 
 import StoreMainProfile from '../../components/store/StoreMainProfile';
-import StoreDetailModal from '@/modal/StoreDetailModal';
+// import StoreDetailModal from '@/modal/StoreDetailModal';
 
 const ShopItemPage = () => {
   return (
     <div className="h-[calc(100vh-3.1875rem)] bg-Light_Layout-200 dark:bg-Dark_Layout-300 grow">
       <div className="h-[5.625rem] flex items-center justify-center text-[1.625rem] text-Light_CategoryText_Icon_Contents">
         스토어
       </div>
+      {/* <div className="flex flex-col items-center px-[1.875rem]"> */}
       <div className="px-[1.875rem]">
         <StoreMainProfile />
-        <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-[49.1875rem] py-[2.3125rem]">
+        <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-full py-[2.3125rem]">
+          {/* <div className="flex flex-wrap gap-x-[1.75rem] gap-y-[1.25rem] w-[49.1875rem] py-[2.3125rem]"> */}
           <ShopCharacter characterName={'캐릭터1'} coinValue={200} />
           <ShopCharacter characterName={'캐릭터2'} coinValue={300} />
           <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
+          <ShopCharacter characterName={'캐릭터3'} coinValue={400} />
         </div>
-        <h3>Modal UI Test</h3>
-        <StoreDetailModal />
+        {/* <h3>Modal UI Test</h3>
+        <StoreDetailModal /> */}
       </div>
     </div>
   );

diff --git a/src/pages/store/ShopItemPage.tsx b/src/pages/store/ShopItemPage.tsx
@@ -13,6 +13,18 @@ const ShopCharacterPage = () => {
           <ShopItem itemName={'AAA'} coinValue={100} isRare={true} />
           <ShopItem itemName={'BBB'} coinValue={200} isRare={true} />
           <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
+          <ShopItem itemName={'CCC'} coinValue={300} isRare={false} />
         </div>
       </div>
     </div>