diff --git a/public/banner-image1.png b/public/banner-image1.png new file mode 100644 index 00000000..73cada2f Binary files /dev/null and b/public/banner-image1.png differ diff --git a/public/banner-image2.png b/public/banner-image2.png new file mode 100644 index 00000000..746993b3 Binary files /dev/null and b/public/banner-image2.png differ diff --git a/public/banner-image3.png b/public/banner-image3.png new file mode 100644 index 00000000..c6a4100d Binary files /dev/null and b/public/banner-image3.png differ diff --git a/public/journal-image1.svg b/public/journal-image1.svg new file mode 100644 index 00000000..44685c62 --- /dev/null +++ b/public/journal-image1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/journals/list/page.tsx b/src/app/journals/list/page.tsx new file mode 100644 index 00000000..99afb653 --- /dev/null +++ b/src/app/journals/list/page.tsx @@ -0,0 +1,15 @@ +import JournalList from "@/components/journals/JournalList"; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "여행일기", + description: "Solitour 여행일기 페이지", +}; + +export default function page() { + return ( +
+ +
+ ); +} diff --git a/src/components/common/Banner.tsx b/src/components/common/Banner.tsx index 012dbc40..ba43c63e 100644 --- a/src/components/common/Banner.tsx +++ b/src/components/common/Banner.tsx @@ -43,16 +43,56 @@ const Banner = ({ content, buttonText, category }: MyProps) => { className={`relative flex items-center justify-end max-[744px]:justify-center max-[480px]:w-[95%] ${category == "모임" ? "h-[18rem] w-[29rem]" : "h-[14rem] w-[27rem]"} ${category === "모임" ? "max-[744px]:h-[15rem]" : "max-[1024px]:h-[12rem]"}`} >
- {"banner-image"} + {category === "정보" && ( +
+
+
+ banner-image1 +
+
+
+ banner-image2 +
+
+
+ banner-image3 +
+
+
+ )} + {category === "모임" && ( + {"banner-image"} + )}
diff --git a/src/components/common/FloatingButton.tsx b/src/components/common/FloatingButton.tsx index 1006ab82..e890861d 100644 --- a/src/components/common/FloatingButton.tsx +++ b/src/components/common/FloatingButton.tsx @@ -1,7 +1,7 @@ import Image from "next/image"; import Link from "next/link"; import { IoIosArrowUp } from "react-icons/io"; -import { MdAdd, MdClose } from "react-icons/md"; +import { MdClose } from "react-icons/md"; type MyProps = { visible: boolean; @@ -11,25 +11,35 @@ type MyProps = { const FloatingButton = ({ visible, onClick, onScrollToTop }: MyProps) => { return ( -
+
{visible && ( -
- -

모임

-

등록하기

- - -

여행정보

-

등록하기

- +
+
+ +

일기

+

등록하기

+ + +

모임

+

등록하기

+ + +

여행정보

+

등록하기

+ +
diff --git a/src/components/common/InformationItem.tsx b/src/components/common/InformationItem.tsx index 1aafdf94..85138118 100644 --- a/src/components/common/InformationItem.tsx +++ b/src/components/common/InformationItem.tsx @@ -50,7 +50,7 @@ const InformationItem = ({ id, category, title, image }: MyProps) => {
-
+
{ return (
-

+

{`${title} 정보 `} Top 5

diff --git a/src/components/journals/JournalCard.tsx b/src/components/journals/JournalCard.tsx new file mode 100644 index 00000000..1ed692e3 --- /dev/null +++ b/src/components/journals/JournalCard.tsx @@ -0,0 +1,21 @@ +import Image from "next/image"; + +const JournalCard = () => { + return ( +
+ journal-image +
+

나 홀로 제주여행

+

2024.06.07-2024.06.10

+
+
+ ); +}; + +export default JournalCard; diff --git a/src/components/journals/JournalList.tsx b/src/components/journals/JournalList.tsx new file mode 100644 index 00000000..a88b5e1c --- /dev/null +++ b/src/components/journals/JournalList.tsx @@ -0,0 +1,21 @@ +import JournalCard from "./JournalCard"; + +const JournalList = () => { + return ( +
+

여행 일기

+
+ +
+
+ {[1, 2, 3, 4].map((value) => ( + + ))} +
+
+ ); +}; + +export default JournalList; diff --git a/tailwind.config.ts b/tailwind.config.ts index 58d93ae3..634f563f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -35,16 +35,19 @@ const config: Config = { from: { opacity: "0" }, to: { opacity: "1" }, }, - fadeOut: { - from: { opacity: "1" }, - to: { opacity: "0" }, + bannerImage: { + "0%": { bottom: "-20px", opacity: "0.5" }, + "50%": { bottom: "0px", opacity: "1" }, + "100%": { bottom: "20px", opacity: "0" }, }, }, animation: { sidebarFadeIn: "sidebarFadeIn 0.3s", buttonRotation: "buttonRotation 0.3s", fadeIn: "fadeIn 0.5s", - fadeOut: "fadeOut 0.5s", + bannerImage1: "bannerImage 2s linear infinite", + bannerImage2: "bannerImage 2.5s linear infinite", + bannerImage3: "bannerImage 3s linear infinite", }, }, },