Merge pull request #90 from TripInfoWeb/dev_informations

Design: 다크 모드 적용 시 아이콘 수정
TripInfoWeb · Jul 1, 2024 · 9cea698 · 9cea698
2 parents 698d86c + be71751
commit 9cea698
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 50 deletions.
diff --git a/public/background1.png b/public/background1.png
diff --git a/public/background1.svg b/public/background1.svg
diff --git a/public/search-icon-dark-mode.png b/public/search-icon-dark-mode.png
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -0,0 +1,18 @@
+"use client"; // Error components must be Client Components
+
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "error",
+  description: "Solitour의 error 페이지",
+};
+
+const Error = () => {
+  return (
+    <div className="flex h-96 flex-col items-center justify-center">
+      <h1>Error</h1>
+    </div>
+  );
+};
+
+export default Error;
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -2,10 +2,15 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Not Found",
+  description: "Solitour의 Not found 페이지",
 };
 
 const NotFound = () => {
-  return <h1>Not Found</h1>;
+  return (
+    <div className="flex h-96 flex-col items-center justify-center">
+      <h1>Not Found</h1>
+    </div>
+  );
 };
 
 export default NotFound;
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -23,7 +23,7 @@ const Header = ({
       {visible && <HeaderSidebar onClose={onClose} />}
       <div
         className={
-          "fixed top-0 z-40 flex w-full justify-center" +
+          "fixed top-0 z-40 flex w-full justify-center shadow" +
           ` ${transparent ? "bg-transparent" : "bg-white dark:bg-slate-800"}`
         }
       >
@@ -36,11 +36,11 @@ const Header = ({
               <MdOutlineMenu size="1.5rem" onClick={onMenuClicked} />
             </div>
             <Link
-              className="relative h-8 w-[5rem] pl-[2.375rem] font-black max-[1024px]:pl-4"
+              className="relative ml-[2.375rem] h-8 w-[5rem] font-black max-[1024px]:ml-4"
               href="/"
             >
               <Image
-                className="ml-[2.375rem] max-[1024px]:ml-4 dark:hidden"
+                className="dark:hidden"
                 src={"/Solitour-logo.svg"}
                 alt={"/background"}
                 fill={true}
@@ -49,7 +49,7 @@ const Header = ({
                 }}
               />
               <Image
-                className="ml-[2.375rem] hidden max-[1024px]:ml-4 dark:block"
+                className="hidden dark:block"
                 src={"/solitour-logo-dark-mode.png"}
                 alt={"/background"}
                 fill={true}
@@ -59,7 +59,7 @@ const Header = ({
               />
             </Link>
           </div>
-          <div className="flex flex-grow flex-row justify-between px-36 max-[1024px]:hidden">
+          <div className="flex flex-grow flex-row justify-between px-28 max-[1024px]:hidden">
             <nav>
               <ul className="font flex flex-row space-x-10">
                 <li>

diff --git a/src/components/common/MeetingItem.tsx b/src/components/common/MeetingItem.tsx
@@ -113,7 +113,7 @@ const MeetingItem = ({
               <p>{time}</p>
             </div>
             <div className="flex flex-row items-center gap-2">
-              <BsFillPeopleFill className="text-black dark:text-slate-400" />
+              <BsFillPeopleFill className="-ml-[0.125rem] text-black dark:text-slate-400" />
               <p>
                 <span className="text-main">{current}</span>
                 <span className="text-black dark:text-slate-400">{` / ${total} `}</span>

diff --git a/src/components/informations/CategoryList.tsx b/src/components/informations/CategoryList.tsx
@@ -28,7 +28,7 @@ const CategoryList = ({
         <div className="flex flex-row items-center gap-4 max-[1024px]:w-full max-[1024px]:justify-between max-[744px]:flex-col max-[744px]:items-start">
           <form className="max-[1024px]:flex-1 max-[744px]:w-full">
             <input
-              className="w-64 border-b-[0.0625rem] border-black bg-transparent bg-search-icon bg-[length:1rem] bg-[left_0rem_top_0.1rem] bg-no-repeat pb-1 pl-8 text-sm outline-none placeholder:font-medium placeholder:text-gray2 max-[1024px]:w-full dark:border-slate-200"
+              className="dark:bg-search-icon-dark-mode w-64 border-b-[0.0625rem] border-black bg-transparent bg-search-icon bg-[length:1rem] bg-[left_0rem_top_0.1rem] bg-no-repeat pb-1 pl-8 text-sm outline-none placeholder:font-medium placeholder:text-gray2 max-[1024px]:w-full dark:border-slate-200"
               type="text"
               autoComplete="search"
               name="search"

diff --git a/src/components/informations/InformationViewer.tsx b/src/components/informations/InformationViewer.tsx
@@ -4,6 +4,9 @@ import { FaRegHeart } from "react-icons/fa";
 import { TiLocation } from "react-icons/ti";
 import KakaoMapLinkContainer from "@/containers/common/KakaoMapLinkContainer";
 import ImageViewerContainer from "@/containers/informations/ImageViewerContainer";
+import { LuEye } from "react-icons/lu";
+import { GoPencil } from "react-icons/go";
+import { FaRegTrashCan } from "react-icons/fa6";
 
 // TODO
 const InformationViewer = async () => {
@@ -67,13 +70,8 @@ const InformationViewer = async () => {
                 <FaRegHeart size={"0.8rem"} />
                 <p className="text-xs">666M</p>
               </div>
-              <div className="flex flex-row items-center gap-1 text-gray2">
-                <Image
-                  src="/eyes-icon.svg"
-                  alt="eyes-icon"
-                  width={15}
-                  height={15}
-                />
+              <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
+                <LuEye />
                 <p className="text-xs">222K</p>
               </div>
             </div>
@@ -111,12 +109,7 @@ const InformationViewer = async () => {
                   <p className="text-xs">666M</p>
                 </div>
                 <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
-                  <Image
-                    src="/eyes-icon.svg"
-                    alt="eyes-icon"
-                    width={15}
-                    height={15}
-                  />
+                  <LuEye />
                   <p className="text-xs">222K</p>
                 </div>
               </div>
@@ -177,16 +170,11 @@ const InformationViewer = async () => {
       </a>
       <div className="mt-6 flex flex-row items-center justify-end gap-3">
         <button className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400">
-          <Image src="/edit-icon.svg" alt="edit-icon" width={15} height={15} />
+          <GoPencil />
           수정
         </button>
         <button className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400">
-          <Image
-            src="/delete-icon.svg"
-            alt="delete-icon.svg"
-            width={15}
-            height={15}
-          />
+          <FaRegTrashCan />
           삭제
         </button>
       </div>

diff --git a/src/components/informations/PagePath.tsx b/src/components/informations/PagePath.tsx
@@ -7,12 +7,12 @@ type MyProps = {
 
 const PagePath = ({ category }: MyProps) => {
   return (
-    <div className="flex w-[60rem] flex-row items-center space-x-1 py-10 text-xs font-medium text-gray2 max-[1024px]:w-[90%]">
+    <div className="flex w-[60rem] flex-row items-center space-x-1 py-10 text-xs font-medium text-gray2 max-[1024px]:w-[90%] dark:text-slate-400">
       <IoHome />
       <IoIosArrowForward />
       <p>정보</p>
       <IoIosArrowForward />
-      <p className="font-semibold text-gray1">{category}</p>
+      <p className="font-semibold text-gray1 dark:text-slate-200">{category}</p>
     </div>
   );
 };

diff --git a/src/components/informations/RecommendationList.tsx b/src/components/informations/RecommendationList.tsx
@@ -43,7 +43,9 @@ const RecommendationList = async () => {
 
   return (
     <div className="my-20 w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
-      <h2 className="text-2xl font-bold text-black">추천 여행 정보</h2>
+      <h2 className="text-2xl font-bold text-black dark:text-slate-200">
+        추천 여행 정보
+      </h2>
       <div className="mt-6 flex flex-wrap items-center justify-center gap-4">
         {data.map((post, index) => (
           <InformationItem

diff --git a/src/components/informations/write/PlaceModal.tsx b/src/components/informations/write/PlaceModal.tsx
@@ -98,7 +98,7 @@ const PlaceModal = ({
             </h3>
             <div className="flex h-80 flex-col rounded-3xl border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]">
               <input
-                className="h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-transparent bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
+                className="dark:bg-search-icon-dark-mode h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-transparent bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
                 type="text"
                 autoComplete="location"
                 name="location"
@@ -109,11 +109,11 @@ const PlaceModal = ({
                 {placeInfos?.map((placeInfo, index) => (
                   <button
                     key={index}
-                    className="flex w-full flex-col gap-1 hover:bg-gray-100"
+                    className="flex w-full flex-col gap-1 hover:bg-gray-100 dark:hover:bg-slate-600"
                     type="button"
                     onClick={() => onChangePlace(placeInfo)}
                   >
-                    <div className="flex flex-row items-center gap-2 text-sm text-white dark:text-slate-200">
+                    <div className="flex flex-row items-center gap-2 text-sm text-black dark:text-slate-200">
                       <TiLocation />
                       {placeInfo.place_name}
                     </div>
@@ -132,10 +132,10 @@ const PlaceModal = ({
               도로명주소 찾기
             </h3>
             <div
-              className={`${canTypePlaceName ? "h-fit" : "h-80"} flex flex-col rounded-3xl border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]`}
+              className={`${canTypePlaceName ? "h-fit" : "h-80 border-b-[0.0625rem] border-l-[0.0625rem] border-r-[0.0625rem]"} flex flex-col rounded-3xl`}
             >
               <input
-                className="h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-transparent bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
+                className="dark:bg-search-icon-dark-mode h-[3.3125rem] rounded-[21px] border-[0.0625rem] bg-transparent bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
                 type="text"
                 autoComplete="address"
                 name="address"
@@ -149,11 +149,11 @@ const PlaceModal = ({
                 {addressInfos?.map((addressInfo, index) => (
                   <button
                     key={index}
-                    className="flex w-full flex-col gap-1 hover:bg-gray-100"
+                    className="flex w-full flex-col gap-1 hover:bg-gray-100 dark:hover:bg-slate-600"
                     type="button"
                     onClick={() => onChangeAddress(addressInfo)}
                   >
-                    <div className="flex flex-row items-center gap-2 text-sm text-white dark:text-slate-200">
+                    <div className="flex flex-row items-center gap-2 text-sm text-black dark:text-slate-200">
                       <TiLocation />
                       {addressInfo.address_name}
                     </div>
@@ -165,7 +165,7 @@ const PlaceModal = ({
               className={`${canTypePlaceName ? "" : "hidden"} flex flex-row items-center justify-between gap-2`}
             >
               <input
-                className="h-[3.3125rem] w-96 rounded-[21px] border-[0.0625rem] bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
+                className="dark:bg-search-icon-dark-mode h-[3.3125rem] w-96 rounded-[21px] border-[0.0625rem] bg-transparent bg-search-icon bg-[length:1rem] bg-[left_1rem_center] bg-no-repeat pl-10 pr-6 text-sm outline-none hover:border-main focus:border-main max-[480px]:w-full"
                 type="text"
                 autoComplete="location"
                 name="location"

diff --git a/src/components/skeleton/informations/RecommendationListSkeleton.tsx b/src/components/skeleton/informations/RecommendationListSkeleton.tsx
@@ -3,7 +3,9 @@ import InformationItemSkeleton from "../common/InformationItemSkeleton";
 const RecommendationListSkeleton = () => {
   return (
     <div className="my-20 w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[21.5625rem]">
-      <h2 className="text-2xl font-bold text-black">추천 여행 정보</h2>
+      <h2 className="text-2xl font-bold text-black dark:text-slate-200">
+        추천 여행 정보
+      </h2>
       <div className="mt-6 flex flex-wrap items-center justify-center gap-4">
         {[1, 2, 3, 4, 5, 6].map((value) => (
           <InformationItemSkeleton key={value} />

diff --git a/src/containers/home/HomeCarouselContainer.tsx b/src/containers/home/HomeCarouselContainer.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 const HomeCarouselContainer = () => {
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const images = [
-    "/background1.svg",
+    "/background1.png",
     "/background2.svg",
     "/background3.svg",
     "/background4.svg",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -20,6 +20,7 @@ const config: Config = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
         "search-icon": "url('/search-icon.png')",
+        "search-icon-dark-mode": "url('/search-icon-dark-mode.png')",
       },
       keyframes: {
         sidebarFadeIn: {