Merge pull request #201 from COW-dev/feat/DDING-58

겨울 에디션 디자인 적용

package.json

@@ -36,6 +36,7 @@
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-lottie-player": "^1.5.4",
+    "react-snowfall": "^2.2.0",
     "react-tailwindcss-datepicker": "^1.6.5",
     "react-textarea-autosize": "^8.4.1",
     "tailwind-merge": "^2.2.1",

src/components/common/Drawer.tsx

@@ -25,14 +25,14 @@ export default function Drawer({ children, isOpen, setIsOpen }: DrawerProps) {
         }
       >
         <article className="relative flex h-16 w-full justify-between">
-          <header className="flex w-full items-center justify-between bg-blue-600 px-6 text-lg font-bold">
+          <header className="flex w-full items-center justify-between bg-christmas-green px-6 text-lg font-bold">
             <Image
-              src={'/m_logo.png'}
+              src={'/m_christmas_logo.png'}
               width={1500}
               height={700}
               priority
               alt="ddingdong"
-              className="w-30 md:w-34"
+              className="w-32"
             />
             <button
               className=""

src/components/feed/Tabs.tsx

@@ -41,8 +41,8 @@ export default function Tabs({ TabMenus, tabContext }: Props) {
                 } shrink-0 border-b-2 pb-4 text-base font-medium md:text-xl md:font-semibold
                    ${
                      activeTab === tab.label
-                       ? 'border-blue-500 text-blue-500'
-                       : 'border-transparent text-gray-500 hover:border-blue-500 hover:text-blue-500'
+                       ? 'border-christmas-red text-christmas-red'
+                       : 'border-transparent text-gray-500 hover:border-christmas-red hover:text-christmas-red'
                    }`}
                 aria-current={activeTab === tab.label ? 'page' : undefined}
               >

src/components/home/FilterCategory.tsx

@@ -20,7 +20,7 @@ function FilterCategory({ option, setOption }: Props) {
     <div className="my-2 hidden w-full rounded-xl bg-gray-50 p-2 px-4 font-semibold text-gray-500 md:flex">
       <span
         className={`cursor-pointer ${
-          option.category.length === 0 && 'text-blue-500'
+          option.category.length === 0 && 'text-christmas-red'
         }`}
         onClick={() => setOption((prev) => ({ ...prev, category: [] }))}
       >
@@ -30,7 +30,7 @@ function FilterCategory({ option, setOption }: Props) {
         <div
           onClick={() => filterCategory(category.title)}
           className={`cursor-pointer before:p-2 before:text-gray-300 before:content-['|'] ${
-            option.category.includes(category.title) && 'text-blue-500'
+            option.category.includes(category.title) && 'text-christmas-red'
           }`}
           key={`category${index}`}
         >

src/components/layout/AdminHeader.tsx

@@ -15,31 +15,49 @@ export default function AdminHeader() {
       <div className="flex w-full max-w-6xl items-center justify-between px-6 md:px-16">
         <Link
           href={isLoginPage ? '/login' : '/'}
-          className="-ml-3 inline-block p-3"
+          className="-ml-3 inline-block pb-2"
         >
           <Image
-            src={'/logo.png'}
+            src={'/christmas_logo.png'}
             width={1544}
             height={380}
             priority
             alt="ddingdong"
-            className="w-30 md:w-34"
+            className="w-36"
           />
         </Link>
         {!isLoginPage && (
           <nav className="-mr-4 md:block">
             <ul className="flex">
               <li>
-                <button
-                  className="rounded-xl p-3 font-semibold text-gray-500 hover:text-blue-500"
-                  onClick={() => {
-                    removeToken();
-                    resetAuth();
-                    router.push('/login');
-                  }}
-                >
-                  로그아웃
-                </button>
+                <div className="flex w-full items-end">
+                  <Image
+                    src={'/snowman.png'}
+                    width={450}
+                    height={450}
+                    priority
+                    className="w-8"
+                    alt="snowman"
+                  />
+                  <Image
+                    src={'/tree.png'}
+                    width={450}
+                    height={450}
+                    priority
+                    className="w-12 md:w-14"
+                    alt="tree"
+                  />
+                  <button
+                    className="rounded-xl p-3 font-semibold text-gray-500 hover:text-blue-500"
+                    onClick={() => {
+                      removeToken();
+                      resetAuth();
+                      router.push('/login');
+                    }}
+                  >
+                    로그아웃
+                  </button>
+                </div>
               </li>
             </ul>
           </nav>