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 }) => { {ITEM_CHOICE[id].id.toString()} ) 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 @@ + + + + + + + + + + + + + + + + + + + + + +