Merge pull request #210 from COW-dev/feat/DDING-63

새해 에디션 디자인 적용

package.json

@@ -28,6 +28,7 @@
     "clsx": "^2.1.0",
     "embla-carousel-autoplay": "^8.0.0-rc22",
     "embla-carousel-react": "^8.0.0-rc22",
+    "framer-motion": "^11.16.4",
     "hls.js": "^1.5.15",
     "lucide-react": "^0.331.0",
     "next": "13.2.4",

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-christmas-green px-6 text-lg font-bold">
+          <header className="flex w-full items-center justify-between bg-new-year px-6 text-lg font-bold">
             <Image
-              src={'/m_christmas_logo.png'}
+              src={'/m_new-year-logo.png'}
               width={1500}
               height={700}
               priority
               alt="ddingdong"
-              className="w-32"
+              className="mb-2 w-32"
             />
             <button
               className=""

src/components/common/NewYear.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image';
+import { motion as m } from 'framer-motion';
+import { SLIDER_ANIMATION } from '@/utils/motions';
+
+export default function NewYear() {
+  const IMG = ['/cloud-1.png', '/cloud-2.png'];
+  return (
+    <div className="relative w-20">
+      <div className="absolute -top-1 left-1/2 md:-top-2.5">
+        <Image src={'/sun.png'} width={40} height={40} alt={'해'} />
+      </div>
+
+      <div className="relative pt-10">
+        {IMG.map((src, idx) => (
+          <m.div
+            key={idx}
+            initial={SLIDER_ANIMATION.initial}
+            animate={SLIDER_ANIMATION.animate}
+            className={`absolute ${
+              idx === 0 ? 'left-0 top-0' : 'left-5 top-4'
+            }`}
+          >
+            <Image src={src} width={25} height={25} alt={'구름'} />
+          </m.div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/feed/ClubFeed.tsx

@@ -41,18 +41,20 @@ export default function ClubFeed({ feeds }: ClubFeedProps) {
           className="relative flex aspect-square w-full cursor-pointer"
         >
           {!loadedImages[item.id] && renderSkeleton()}
-          <Image
-            src={item.thumbnailUrl}
-            alt={`image-${index + 1}`}
-            width={350}
-            height={350}
-            onLoad={() => handleImageLoad(item.id)}
-            style={{ objectFit: 'cover' }}
-            className={`aspect-square ${
-              loadedImages[item.id] ? 'visible' : 'invisible'
-            }`}
-            onClick={() => handleClick(item.id)}
-          />
+          {item.thumbnailUrl && (
+            <Image
+              src={item.thumbnailUrl}
+              alt={`image-${index + 1}`}
+              width={350}
+              height={350}
+              onLoad={() => handleImageLoad(item.id)}
+              style={{ objectFit: 'cover' }}
+              className={`aspect-square ${
+                loadedImages[item.id] ? 'visible' : 'invisible'
+              }`}
+              onClick={() => handleClick(item.id)}
+            />
+          )}
           {item.feedType == 'VIDEO' && (
             <Image
               width={20}

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-christmas-red text-christmas-red'
-                       : 'border-transparent text-gray-500 hover:border-christmas-red hover:text-christmas-red'
+                       ? ' border-new-year text-new-year'
+                       : 'border-transparent text-gray-500 hover:border-new-year hover:text-new-year'
                    }`}
                 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-christmas-red'
+          option.category.length === 0 && 'text-new-year'
         }`}
         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-christmas-red'
+            option.category.includes(category.title) && 'text-new-year'
           }`}
           key={`category${index}`}
         >

src/components/layout/AdminHeader.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { removeToken } from '@/apis';
 import { useAuthStore } from '@/store/auth';
+import NewYear from '../common/NewYear';
 
 export default function AdminHeader() {
   const router = useRouter();
@@ -18,7 +19,7 @@ export default function AdminHeader() {
           className="-ml-3 inline-block pb-2"
         >
           <Image
-            src={'/christmas_logo.png'}
+            src={'/new-year-logo.png'}
             width={1544}
             height={380}
             priority
@@ -31,22 +32,7 @@ export default function AdminHeader() {
             <ul className="flex">
               <li>
                 <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"
-                  />
+                  <NewYear />
                   <button
                     className="rounded-xl p-3 font-semibold text-gray-500 hover:text-blue-500"
                     onClick={() => {

src/components/layout/UserHeader.tsx

@@ -10,6 +10,7 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import { navItems } from '@/constants/navItems';
+import NewYear from '../common/NewYear';
 
 export default function UserHeader() {
   const [hydrated, setHydrated] = useState(false);
@@ -60,7 +61,7 @@ export default function UserHeader() {
       <div className="flex w-full items-center justify-between px-6">
         <Link href="/" className="inline-block pb-2">
           <Image
-            src={'/christmas_logo.png'}
+            src={'/new-year-logo.png'}
             width={1544}
             height={380}
             priority
@@ -69,23 +70,8 @@ export default function UserHeader() {
           />
         </Link>
         <div className="flex items-center space-x-2">
-          <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"
-            />
+          <div className="flex items-end">
+            <NewYear />
           </div>
           <button className="p-1" onClick={() => handleOpenDrawer()}>
             <Image
@@ -131,7 +117,7 @@ export default function UserHeader() {
                               target={category === 'SNS' ? '_blank' : '_self'}
                               rel="noopener noreferrer"
                               onClick={() => setIsOpen(false)}
-                              className="text-md flex items-center font-semibold text-gray-500 hover:text-christmas-green"
+                              className="text-md flex items-center font-semibold text-gray-500 hover:text-new-year"
                             >
                               {item.image && (
                                 <Image
@@ -165,9 +151,9 @@ export default function UserHeader() {
           className="flex w-full max-w-6xl items-center px-6 md:px-16"
           ref={dropdownRef}
         >
-          <Link href="/" className="-ml-3 inline-block pb-2">
+          <Link href="/" className="inline-block pb-2">
             <Image
-              src={'/christmas_logo.png'}
+              src={'/new-year-logo.png'}
               width={1544}
               height={380}
               priority
@@ -182,15 +168,15 @@ export default function UserHeader() {
                   {category === '동아리피드' ? (
                     <Link
                       href={navItems[category][0].href}
-                      className="inline-block p-3 font-semibold text-gray-500 transition-colors hover:text-christmas-red focus:outline-none"
+                      className="inline-block p-3 font-semibold text-gray-500 transition-colors hover:text-new-year focus:outline-none"
                     >
                       {category}
                     </Link>
                   ) : (
                     <div>
                       <button
                         onClick={() => handleDropdownToggle(category)}
-                        className="inline-block p-3 font-semibold text-gray-500 transition-colors hover:text-christmas-red focus:outline-none"
+                        className="inline-block p-3 font-semibold text-gray-500 transition-colors hover:text-new-year focus:outline-none"
                       >
                         {category}
                       </button>
@@ -225,22 +211,7 @@ export default function UserHeader() {
               ))}
             </ul>
             <div className="flex 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"
-              />
+              <NewYear />
             </div>
           </div>
         </div>

src/components/modal/FilterOption.tsx

@@ -93,7 +93,7 @@ export default function FilterOption({
             key={`filter-${item}`}
             onClick={() => handleOption(item)}
             className={`mb-1.5 cursor-pointer font-semibold  md:mb-2 ${
-              item === active ? `border-b text-christmas-red` : `text-gray-500`
+              item === active ? `border-b text-new-year` : `text-gray-500`
             } ${item === '카테고리' && 'md:hidden'}`}
           >
             <span>{item}</span>