Style: 메인화면 스타일 수정 및 다크모드 토글 버튼 레이아웃 적용

ssumai-kr · Jul 17, 2024 · 8b63471 · 8b63471
1 parent 45699e4
commit 8b63471
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 10 deletions.
diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
@@ -33,7 +33,7 @@ export function AllActivity({
   return (
     <div onClick={handleClick} className="cursor-pointer">
       <div
-        className="w-[286px] t:w-[223px] m:w-[170px] h-[286px] t:h-[223px] m:h-[170px] rounded-xl bg-[url('/image/Testimage.jpg')] bg-cover"
+        className="w-[276px] t:w-[206px] m:w-[146px] h-[276px] t:h-[206px] m:h-[146px] rounded-xl bg-[url('/image/Testimage.jpg')] bg-cover transition-transform duration-300 hover:scale-110 m:hover:scale-105"
         style={{
           backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.10) 20.33%, rgba(0, 0, 0, 0.60) 100%),url(${backgroundImage})`,
         }}
@@ -53,7 +53,7 @@ export function AllActivity({
             </span>
           </div>
         </div>
-        <div className="h-[70px] t:h-[30px] m:h-[20px] m:w-[160px] font-sans text-[24px] m:text-[16px] font-[600] mt-[10px] overfolow-hidden t:truncate ... m:truncate ...">
+        <div className="h-[70px] t:h-[30px] m:h-[20px] m:w-[146px] font-sans text-[24px] m:text-[16px] font-[600] mt-[10px] overfolow-hidden t:truncate ... m:truncate ...">
           {title}
         </div>
         <div className="font-sans text-[28px] text-[20px] m:text-[18px] font-[700] p:mt-[0px] mt-[10px]">
@@ -174,7 +174,7 @@ function AllActivities() {
           <Spinner />
         </div>
       ) : (
-        <div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[6px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide">
+        <div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[8px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide px-[20px] pt-[20px]">
           {allActivitiesData?.activities.map((data) => (
             <AllActivity
               key={data.id}
@@ -188,7 +188,7 @@ function AllActivities() {
           ))}
         </div>
       )}
-      <div className="text-[30px] font-[700] flex justify-center mb-[342px] mt-[70px]">
+      <div className="text-[30px] font-[700] flex justify-center mb-[342px] m:mb-[160px] mt-[70px]">
         {allActivitiesData && allActivitiesData.totalCount > 0 && (
           <Pagination
             totalItems={allActivitiesData?.totalCount}

diff --git a/components/Lander/Main.tsx b/components/Lander/Main.tsx
@@ -56,7 +56,7 @@ function Main() {
       ></section>
       <div className="z-10 t:w-[696px] m:w-[343px]">
         <div className=" mt-[160px] m:mt-[74px] flex flex-col gap-[20px]">
-          <h1 className="w-[600px] t:w-[450px] m:w-[200px] text-white font-sans text-[68px] t:text-[54px] m:text-[24px] font-[700] leading-[1.2]">
+          <h1 className="w-[800px] t:w-[620px] m:w-[300px] h-[162px] m:h-[58px] text-white font-sans text-[68px] t:text-[54px] m:text-[24px] font-[700] leading-[1.2] overflow-hidden">
             {BestOfmonth?.activities[0].title}
           </h1>
           <span className="text-white font-sans test-[24px] m:text-[14px] font-[700]">

diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Logo from '@/public/icon/logo_small.svg';
 import notificationIcon from '@/public/icon/icon_notification.svg';
 import { useUserData } from '@/hooks/useUserData';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import NavigationDropdown from '../NavigationDropdown/NavigationDropdown';
 import useClickOutside from '@/hooks/useClickOutside';
 import useGetNotification from '@/hooks/useGetNotification';
@@ -13,6 +13,22 @@ import Spinner from '../Spinner/Spinner';
 import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
 
 export default function NavigationBar() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Check if dark mode is already enabled in the user's preference
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setIsDarkMode(isDark);
+    if (isDark) {
+      document.body.classList.add('dark');
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    document.body.classList.toggle('dark');
+    setIsDarkMode(!isDarkMode);
+  };
+
   const { userData, isLoading } = useUserData();
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const { isLoggedIn } = useLoginState();
@@ -54,6 +70,34 @@ export default function NavigationBar() {
       </div>
       {isLoggedIn ? (
         <div className="flex items-center gap-[15px]">
+          <div className="flex items-center">
+            <button
+              onClick={toggleDarkMode}
+              className="h-10 w-10 rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-300"
+            >
+              {isDarkMode ? (
+                <svg
+                  className="fill-yellow-500 block"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+              ) : (
+                <svg
+                  className="fill-violet-700 block"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                </svg>
+              )}
+            </button>
+          </div>
           <button onClick={toggleNotifyDropdown}>
             <div className="relative">
               <Image src={notificationIcon} alt="알림 아이콘" />

diff --git a/components/PriceFilterBtn/PriceFilterBtn.tsx b/components/PriceFilterBtn/PriceFilterBtn.tsx
@@ -12,10 +12,6 @@ export default function PriceFilterBtn() {
   );
   const [isClient, setIsClient] = useState(false);
 
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
   const [MainPageState, setMainPageState] = useRecoilState(mainPageState);
   const { selectedSorted: selectedPriceSorted, sortedName } =
     useRecoilValue(mainPageState);
@@ -28,6 +24,10 @@ export default function PriceFilterBtn() {
     setShowMenuList(false);
   };
 
+  useEffect(() => {
+    setIsClient(true);
+  }, [sortedName]);
+
   return (
     <div className="relative" ref={dropDownElement}>
       <button