Merge pull request #95 from TripInfoWeb/dev_informations

Design: Floating 버튼 디자인 수정 & 정보 이미지 애니메이션 추가

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 (
+    <div className="flex flex-col items-center">
+      <JournalList />
+    </div>
+  );
+}

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]"}`}
         >
           <div
-            className={`absolute h-full w-full ${category == "모임" ? "top-[2.75rem] max-[1024px]:top-[4rem]" : "0px"} max-[1024px]:h-[85%] max-[1024px]:w-[85%]`}
+            className={`absolute h-full w-full ${category == "모임" ? "top-[2.75rem] max-[1024px]:top-[4rem]" : "0px"} flex flex-row justify-center max-[1024px]:h-[85%] max-[1024px]:w-[85%]`}
           >
-            <Image
-              src={bannerImage[category]}
-              alt={"banner-image"}
-              fill={true}
-              style={{
-                objectFit: "contain",
-              }}
-            />
+            {category === "정보" && (
+              <div className="flex h-[13.4375rem] w-[24.8125rem] flex-col max-[1024px]:h-[10.6875rem] max-[1024px]:w-[19.8125rem]">
+                <div className="flex justify-end pr-6">
+                  <div className="animate-bannerImage1 relative h-[5.8125rem] w-[11.75rem] max-[1024px]:h-[5.0625rem] max-[1024px]:w-[10.1875rem]">
+                    <Image
+                      src="/banner-image1.png"
+                      alt="banner-image1"
+                      fill={true}
+                      style={{
+                        objectFit: "cover",
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="animate-bannerImage2 relative z-10 -mt-[1.875rem] h-[5.75rem] w-[14.375rem] max-[1024px]:h-[4.5625rem] max-[1024px]:w-[11.5rem]">
+                  <Image
+                    src="/banner-image2.png"
+                    alt="banner-image2"
+                    fill={true}
+                    style={{
+                      objectFit: "cover",
+                    }}
+                  />
+                </div>
+                <div className="-mt-8 flex justify-end">
+                  <div className="animate-bannerImage3 relative h-[5.8125rem] w-[14.75rem] max-[1024px]:h-[4.625rem] max-[1024px]:w-[11.75rem]">
+                    <Image
+                      src="/banner-image3.png"
+                      alt="banner-image3"
+                      fill={true}
+                      style={{
+                        objectFit: "cover",
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+            {category === "모임" && (
+              <Image
+                src={bannerImage[category]}
+                alt={"banner-image"}
+                fill={true}
+                style={{
+                  objectFit: "contain",
+                }}
+              />
+            )}
           </div>
         </div>
       </div>

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 (
-    <div className="fixed bottom-8 right-0 z-40 flex w-24 flex-col items-center gap-6">
+    <div className="fixed bottom-8 right-0 z-40 flex w-24 flex-col items-center gap-3">
       {visible && (
-        <div className="-mb-4 flex flex-col items-center gap-6 rounded-full bg-[#F2FAF7] px-4 pb-4 pt-[1.875rem] dark:bg-slate-500">
-          <Link
-            className="flex animate-fadeIn flex-col items-center text-sm hover:text-main"
-            href="/meetings/write"
-            onClick={onClick}
-          >
-            <p>모임</p>
-            <p>등록하기</p>
-          </Link>
-          <Link
-            className="flex animate-fadeIn flex-col items-center text-sm hover:text-main"
-            href="/informations/write"
-            onClick={onClick}
-          >
-            <p>여행정보</p>
-            <p>등록하기</p>
-          </Link>
+        <div className="flex flex-col items-center gap-3">
+          <div className="flex animate-fadeIn flex-col items-center gap-6 rounded-full bg-[#F2FAF7] px-4 py-[1.875rem] dark:bg-slate-500">
+            <Link
+              className="flex flex-col items-center text-sm hover:text-main"
+              href="/journals/write"
+              onClick={onClick}
+            >
+              <p>일기</p>
+              <p>등록하기</p>
+            </Link>
+            <Link
+              className="flex flex-col items-center text-sm hover:text-main"
+              href="/meetings/write"
+              onClick={onClick}
+            >
+              <p>모임</p>
+              <p>등록하기</p>
+            </Link>
+            <Link
+              className="flex flex-col items-center text-sm hover:text-main"
+              href="/informations/write"
+              onClick={onClick}
+            >
+              <p>여행정보</p>
+              <p>등록하기</p>
+            </Link>
+          </div>
           <button
             className="flex h-12 w-12 animate-buttonRotation flex-row items-center justify-center rounded-full bg-main text-white shadow-md hover:scale-105"
             onClick={onClick}

src/components/common/Header.tsx

@@ -101,6 +101,20 @@ const Header = ({
                     모임
                   </Link>
                 </li>
+                <li>
+                  <Link
+                    className={
+                      `${
+                        pathname.includes("/journal")
+                          ? "font-bold text-black dark:text-slate-200"
+                          : "font-medium text-gray1 dark:text-slate-400"
+                      } ` + "text-sm hover:text-main"
+                    }
+                    href="/journals/list"
+                  >
+                    여행일기
+                  </Link>
+                </li>
               </ul>
             </nav>
           </div>

src/components/common/InformationItem.tsx

@@ -50,7 +50,7 @@ const InformationItem = ({ id, category, title, image }: MyProps) => {
           <CiBookmark size={"2rem"} />
         </div>
       </div>
-      <div className="flex h-28 flex-col justify-between rounded-b-2xl bg-white px-5 py-4 dark:bg-slate-800">
+      <div className="flex h-28 flex-col justify-between rounded-b-xl bg-white px-5 py-4 dark:bg-slate-800">
         <Link
           className="p-1 font-bold hover:text-main dark:text-slate-200"
           href={`/informations/${category}/${id}`}

src/components/common/TopList.tsx

@@ -26,7 +26,7 @@ const TopList = async ({ title }: MyProps) => {
 
   return (
     <div className="z-10 -mt-28 flex h-fit w-[60rem] flex-col justify-center rounded-2xl bg-white px-24 py-16 shadow shadow-[#CCECE2] max-[1024px]:w-[39.75rem] max-[1024px]:px-8 max-[1024px]:py-12 max-[744px]:-mt-24 max-[744px]:w-[calc(100%_-_48px)] dark:bg-slate-800">
-      <h2 className="mb-9 border-b-2 border-gray3 pb-3 text-2xl font-semibold text-black dark:border-slate-200 dark:text-slate-200">
+      <h2 className="mb-9 border-b-[0.0625rem] border-gray3 pb-3 text-2xl font-semibold text-black dark:border-slate-200 dark:text-slate-200">
         {`${title} 정보 `}
         <span className="font-bold text-main">Top 5</span>
       </h2>

src/components/journals/JournalCard.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+const JournalCard = () => {
+  return (
+    <div className="relative h-[38.9375rem] w-[29.375rem] rounded-2xl border-[0.0625rem] border-gray3 hover:border-main">
+      <Image
+        className="-z-10"
+        src="/journal-image1.svg"
+        alt="journal-image"
+        fill={true}
+        style={{ objectFit: "cover" }}
+      />
+      <div className="absolute bottom-9 left-9 flex flex-col gap-1 text-white">
+        <h2 className="text-2xl font-bold">나 홀로 제주여행</h2>
+        <p className="text-lg">2024.06.07-2024.06.10</p>
+      </div>
+    </div>
+  );
+};
+
+export default JournalCard;

src/components/journals/JournalList.tsx

@@ -0,0 +1,21 @@
+import JournalCard from "./JournalCard";
+
+const JournalList = () => {
+  return (
+    <div className="w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
+      <h1 className="py-[2.375rem] text-[1.75rem] font-bold">여행 일기</h1>
+      <div className="flex flex-row justify-end pb-4">
+        <button className="h-[2.625rem] w-[7.6875rem] rounded-full bg-black text-white hover:scale-105">
+          일기 쓰기
+        </button>
+      </div>
+      <div className="flex flex-wrap justify-center gap-5">
+        {[1, 2, 3, 4].map((value) => (
+          <JournalCard key={value} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default JournalList;

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",
       },
     },
   },