diff --git a/components/atoms/logo/Logo.tsx b/components/atoms/logo/Logo.tsx
index 5136492..79913cf 100644
--- a/components/atoms/logo/Logo.tsx
+++ b/components/atoms/logo/Logo.tsx
@@ -10,8 +10,8 @@ interface ILogo {
}
const LogoSrc = {
- main: "/assets/logo/vertical.png",
- header: "/assets/logo/horizontal.png",
+ main: "/assets/logo/vertical.svg",
+ header: "/assets/logo/horizontal.svg",
}
const Logo = ({ width, height, alt, type, padding }: ILogo) => {
return (
diff --git a/components/atoms/slide/index.tsx b/components/atoms/slide/index.tsx
index c641d5b..137d4dd 100644
--- a/components/atoms/slide/index.tsx
+++ b/components/atoms/slide/index.tsx
@@ -25,8 +25,8 @@ const Slide = ({ id }: { id: ItemIdProps }) => {
)
diff --git a/components/drag/draggable.tsx b/components/drag/draggable.tsx
index f67da08..4f07429 100644
--- a/components/drag/draggable.tsx
+++ b/components/drag/draggable.tsx
@@ -36,6 +36,7 @@ const DragItem = ({
y,
z,
title,
+
width,
height,
}: DraggableItem) => {
diff --git a/components/molecules/LandDrag.tsx b/components/molecules/LandDrag.tsx
index 909aacc..c2306ab 100644
--- a/components/molecules/LandDrag.tsx
+++ b/components/molecules/LandDrag.tsx
@@ -54,19 +54,21 @@ const LandContent = ({ isOwner }: { isOwner: boolean }) => {
/>
{items.length > 0 &&
- items.map((item: LocationProps) => (
-
+ items.map((item: LocationProps, index: number) => (
+
+
+
))}
@@ -77,11 +79,6 @@ const LandContent = ({ isOwner }: { isOwner: boolean }) => {
export default LandContent
-const DragField = styled.div`
- width: 100%;
- height: 100%;
-`
-
const IslandContainer = styled.div`
width: 43rem;
height: 78rem;
@@ -94,3 +91,9 @@ const ItemsContainer = styled.div`
left: 0;
height: inherit;
`
+
+const DragWrapper = styled.div<{ isFirst: boolean }>`
+ position: ${({ isFirst }) => (isFirst ? `static` : "absolute")};
+ top: 0;
+ left: 0;
+`
diff --git a/components/molecules/LandLoading.tsx b/components/molecules/LandLoading.tsx
index 745465f..3151649 100644
--- a/components/molecules/LandLoading.tsx
+++ b/components/molecules/LandLoading.tsx
@@ -21,6 +21,7 @@ const LandLoading = () => {
width="240"
height="320"
alt="loading"
+ priority
/>
diff --git a/constants/island.tsx b/constants/island.tsx
index 6a5bfbc..86d349b 100644
--- a/constants/island.tsx
+++ b/constants/island.tsx
@@ -70,31 +70,31 @@ const ITEM_CHOICE: ILandItemChoice = {
0: {
id: 0,
title: "Item_0",
- thumbImgSrc: "@/public/assets/item/original/item_0.svg",
- mainImgSrc: "@/public/assets/item/original/item_0.svg",
+ thumbImgSrc: "/assets/item/original/item_0.svg",
+ mainImgSrc: "/assets/item/original/item_0.svg",
...ITEM_SIZE,
},
1: {
id: 1,
title: "Item_1",
- thumbImgSrc: "@/public/assets/item/original/item_1.svg",
- mainImgSrc: "@/public/assets/item/original/item_1.svg",
+ thumbImgSrc: "/assets/item/original/item_1.svg",
+ mainImgSrc: "/assets/item/original/item_1.svg",
...ITEM_SIZE,
},
2: {
id: 2,
title: "Item_2",
- thumbImgSrc: "@/public/assets/item/original/item_2.svg",
- mainImgSrc: "@/public/assets/item/original/item_2.svg",
+ thumbImgSrc: "/assets/item/original/item_2.svg",
+ mainImgSrc: "/assets/item/original/item_2.svg",
...ITEM_SIZE,
},
3: {
id: 3,
title: "Item_3",
- thumbImgSrc: "@/public/assets/item/original/item_3.svg",
+ thumbImgSrc: "/assets/item/original/item_3.svg",
mainImgSrc: "@/public/assets/item/original/item_3.svg",
...ITEM_SIZE,
@@ -102,16 +102,16 @@ const ITEM_CHOICE: ILandItemChoice = {
4: {
id: 4,
title: "Item_4",
- thumbImgSrc: "@/public/assets/item/original/item_4.svg",
- mainImgSrc: "@/public/assets/item/original/item_4.svg",
+ thumbImgSrc: "/assets/item/original/item_4.svg",
+ mainImgSrc: "/assets/item/original/item_4.svg",
...ITEM_SIZE,
},
5: {
id: 5,
title: "Item_5",
- thumbImgSrc: "@/publicassets/item/original/item_5.svg",
- mainImgSrc: "@/public/assets/item/original/item_5.svg",
+ thumbImgSrc: "/assets/item/original/item_5.svg",
+ mainImgSrc: "/assets/item/original/item_5.svg",
...ITEM_SIZE,
},
@@ -126,144 +126,144 @@ const ITEM_CHOICE: ILandItemChoice = {
7: {
id: 7,
title: "Item_7",
- thumbImgSrc: "@/public/assets/item/original/item_7.svg",
- mainImgSrc: "@/public/assets/item/original/item_7.svg",
+ thumbImgSrc: "/assets/item/original/item_7.svg",
+ mainImgSrc: "/assets/item/original/item_7.svg",
...ITEM_SIZE,
},
8: {
id: 8,
title: "Item_8",
- thumbImgSrc: "@/public/assets/item/original/item_8.svg",
- mainImgSrc: "@/public/assets/item/original/item_8.svg",
+ thumbImgSrc: "/assets/item/original/item_8.svg",
+ mainImgSrc: "/assets/item/original/item_8.svg",
...ITEM_SIZE,
},
9: {
id: 9,
title: "Item_9",
- thumbImgSrc: "@/public/assets/item/original/item_9.svg",
- mainImgSrc: "@/public/assets/item/original/item_9.svg",
+ thumbImgSrc: "/assets/item/original/item_9.svg",
+ mainImgSrc: "/assets/item/original/item_9.svg",
...ITEM_SIZE,
},
10: {
id: 10,
title: "Item_10",
- thumbImgSrc: "@/public/assets/item/original/item_10.svg",
- mainImgSrc: "@/public/assets/item/original/item_10.svg",
+ thumbImgSrc: "/assets/item/original/item_10.svg",
+ mainImgSrc: "/assets/item/original/item_10.svg",
...ITEM_SIZE,
},
11: {
id: 11,
title: "Item_11",
- thumbImgSrc: "@/public/assets/item/original/item_11.svg",
- mainImgSrc: "@/public/assets/item/original/item_11.svg",
+ thumbImgSrc: "/assets/item/original/item_11.svg",
+ mainImgSrc: "/assets/item/original/item_11.svg",
...ITEM_SIZE,
},
12: {
id: 12,
title: "Item_12",
- thumbImgSrc: "@/public/assets/item/original/item_12.svg",
- mainImgSrc: "@/public/assets/item/original/item_12.svg",
+ thumbImgSrc: "/assets/item/original/item_12.svg",
+ mainImgSrc: "/assets/item/original/item_12.svg",
...ITEM_SIZE,
},
13: {
id: 13,
title: "Item_13",
- thumbImgSrc: "@/public/assets/item/original/item_13.svg",
- mainImgSrc: "@/public/assets/item/original/item_13.svg",
+ thumbImgSrc: "/assets/item/original/item_13.svg",
+ mainImgSrc: "/assets/item/original/item_13.svg",
...ITEM_SIZE,
},
14: {
id: 14,
title: "Item_14",
- thumbImgSrc: "@/public/assets/item/original/item_14.svg",
- mainImgSrc: "@/public/assets/item/original/item_14.svg",
+ thumbImgSrc: "/assets/item/original/item_14.svg",
+ mainImgSrc: "/assets/item/original/item_14.svg",
...ITEM_SIZE,
},
15: {
id: 15,
title: "Item_15",
- thumbImgSrc: "@/public/assets/item/original/item_15.svg",
- mainImgSrc: "@/public/assets/item/original/item_15.svg",
+ thumbImgSrc: "/assets/item/original/item_14.svg",
+ mainImgSrc: "/assets/item/original/item_14.svg",
...ITEM_SIZE,
},
16: {
id: 16,
title: "Item_16",
- thumbImgSrc: "@/public/assets/item/original/item_16.svg",
- mainImgSrc: "@/public/assets/item/original/item_16.svg",
+ thumbImgSrc: "/assets/item/original/item_16.svg",
+ mainImgSrc: "/assets/item/original/item_16.svg",
...ITEM_SIZE,
},
17: {
id: 17,
title: "Item_17",
- thumbImgSrc: "@/public/assets/item/original/item_17.svg",
- mainImgSrc: "@/public/assets/item/original/item_17.svg",
+ thumbImgSrc: "/assets/item/original/item_17.svg",
+ mainImgSrc: "/assets/item/original/item_17.svg",
...ITEM_SIZE,
},
18: {
id: 18,
title: "Item_18",
- thumbImgSrc: "@/public/assets/item/original/item_18.svg",
- mainImgSrc: "@/public/assets/item/original/item_18.svg",
+ thumbImgSrc: "/assets/item/original/item_18.svg",
+ mainImgSrc: "/assets/item/original/item_18.svg",
...ITEM_SIZE,
},
19: {
id: 19,
title: "Item_19",
- thumbImgSrc: "@/public/assets/item/original/item_19.svg",
- mainImgSrc: "@/public/assets/item/original/item_19.svg",
+ thumbImgSrc: "/assets/item/original/item_19.svg",
+ mainImgSrc: "/assets/item/original/item_19.svg",
...ITEM_SIZE,
},
20: {
id: 20,
title: "Item_20",
- thumbImgSrc: "@/public/assets/item/original/item_20.svg",
- mainImgSrc: "@/public/assets/item/original/item_20.svg",
+ thumbImgSrc: "/assets/item/original/item_20.svg",
+ mainImgSrc: "/assets/item/original/item_20.svg",
...ITEM_SIZE,
},
21: {
id: 21,
title: "Item_21",
- thumbImgSrc: "@/public/assets/item/original/item_21.svg",
- mainImgSrc: "@/public/assets/item/original/item_21.svg",
+ thumbImgSrc: "/assets/item/original/item_21.svg",
+ mainImgSrc: "/assets/item/original/item_21.svg",
...ITEM_SIZE,
},
22: {
id: 22,
title: "Item_22",
- thumbImgSrc: "@/public/assets/item/original/item_22.svg",
- mainImgSrc: "@/public/assets/item/original/item_22.svg",
+ thumbImgSrc: "/assets/item/original/item_22.svg",
+ mainImgSrc: "/assets/item/original/item_22.svg",
...ITEM_SIZE,
},
23: {
id: 21,
title: "Item_23",
- thumbImgSrc: "@/public/assets/item/original/item_23.svg",
- mainImgSrc: "@/public/assets/item/original/item_23.svg",
+ thumbImgSrc: "/assets/item/original/item_23.svg",
+ mainImgSrc: "/assets/item/original/item_23.svg",
...ITEM_SIZE,
},
24: {
id: 22,
title: "Item_24",
- thumbImgSrc: "@/public/assets/item/original/item_24.svg",
- mainImgSrc: "@/public/assets/item/original/item_24.svg",
+ thumbImgSrc: "/assets/item/original/item_24.svg",
+ mainImgSrc: "/assets/item/original/item_24.svg",
...ITEM_SIZE,
},
diff --git a/public/assets/logo/horizontal.png b/public/assets/logo/horizontal.png
deleted file mode 100644
index 0c545df..0000000
Binary files a/public/assets/logo/horizontal.png and /dev/null differ
diff --git a/public/assets/logo/horizontal.svg b/public/assets/logo/horizontal.svg
new file mode 100644
index 0000000..29c6063
--- /dev/null
+++ b/public/assets/logo/horizontal.svg
@@ -0,0 +1,21 @@
+
diff --git a/public/assets/logo/vertical.png b/public/assets/logo/vertical.png
deleted file mode 100644
index 445b6ba..0000000
Binary files a/public/assets/logo/vertical.png and /dev/null differ
diff --git a/public/assets/logo/vertical.svg b/public/assets/logo/vertical.svg
new file mode 100644
index 0000000..13cb811
--- /dev/null
+++ b/public/assets/logo/vertical.svg
@@ -0,0 +1,22 @@
+