feat: date selector 추가

app/[locale]/(back-with-logo)/festival/[id]/page.tsx

@@ -2,7 +2,7 @@ import { TileHeader, TileInfo } from '@/app/components/common';
 import formatDate from '@/app/lib/utils/parser/format-date';
 import { Hero } from '@components/common';
 import { MenuTiles } from '@components/common';
-import { TopCard } from '@components/festival';
+import { LineUp, TopCard } from '@components/festival';
 import { Locale, type Params } from '@lib/types';
 import Image from 'next/image';
 import { BsBellFill } from 'react-icons/bs';
@@ -31,7 +31,7 @@ const tiles: TileInfo[] = [
     title: <TileHeader>라인업</TileHeader>,
     link: '/notice',
     icon: <BsBellFill size={17} />,
-    bgColor: 'bg-white',
+    bgColor: 'bg-white text-black',
   },
 ];
 
@@ -59,6 +59,7 @@ export default async function FestivalHomePage({
           )}
         />
         <MenuTiles tiles={tiles} />
+        <LineUp />
       </main>
     </div>
   );

app/components/common/menu-tiles/index.tsx

@@ -19,7 +19,7 @@ export const TileHeader = ({ children }: PropsWithChildren) => (
 
 export default function MenuTiles({ tiles }: { tiles: TileInfo[] }) {
   return (
-    <div className="w-full grid grid-cols-2 grid-rows-2 gap-4 aspect-square lg:flex lg:max-w-full lg:aspect-auto lg:gap-8">
+    <div className="w-full grid grid-cols-2 gap-4 lg:flex lg:max-w-full lg:aspect-auto lg:gap-8">
       {tiles.map((tile) => (
         <Link key={tile.id} href={tile.link}>
           <Tile {...tile} />

app/components/common/menu-tiles/tile.tsx

@@ -12,7 +12,7 @@ export default function Tile({
   return (
     <div
       className={cn(
-        'rounded-xl h-full w-full border-[1px] border-neutral-300 dark:border-neutral-800 p-4 flex flex-col justify-between shadow-xl dark:shadow-none active:scale-[0.98] transition-transform duration-200 ease-in-out aspect-square lg:p-6 lg:text-2xl',
+        'rounded-xl h-full w-full border-[1px] border-neutral-300 dark:border-neutral-800 p-4 flex flex-col justify-between shadow-xl dark:shadow-none active:scale-[0.98] transition-transform duration-200 ease-in-out aspect-square',
         bgColor,
         textColor,
       )}

app/components/festival/index.ts

@@ -1 +1,2 @@
 export { default as TopCard } from './top-card';
+export { default as LineUp } from './line-up';

app/components/festival/line-up/date-selector/date-block.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter } from '@lib/navigation';
+import { cn } from '@lib/utils';
+import { Dayjs } from 'dayjs';
+import 'dayjs/locale/ko';
+import { motion } from 'framer-motion';
+import { useLocale } from 'next-intl';
+
+type DateBlockProps = {
+  date: Dayjs;
+  className?: string;
+  disabled?: boolean;
+  selected?: boolean;
+};
+
+export default function DateBlock({
+  date,
+  className,
+  disabled,
+  selected,
+}: DateBlockProps) {
+  const locale = useLocale();
+  const router = useRouter();
+
+  const onClick = () => {
+    if (disabled) return;
+    router.replace(`/lineup?day=`);
+  };
+
+  return (
+    <motion.div
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled}
+      onClick={onClick}
+      whileTap={{ scale: disabled ? 1 : 0.95 }}
+      className={cn(
+        'flex flex-col h-full justify-center items-center rounded-lg flex-1 relative gap-2',
+        disabled &&
+          'text-neutral-400 dark:text-neutral-700 pointer-events-none',
+        selected && 'text-white bg-primary',
+        className,
+      )}
+    >
+      <div className="text-xl font-bold z-10">{date.date()}</div>
+      <div className="text-xs font-medium z-10">
+        {date.locale(locale).format('ddd')}
+      </div>
+    </motion.div>
+  );
+}

app/components/festival/line-up/date-selector/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import dayjs from 'dayjs';
+
+import DateBlock from './date-block';
+
+type DateSelectorProps = {
+  availableDays: string[];
+};
+
+export default function DateSelector({ availableDays }: DateSelectorProps) {
+  const selectedDate = dayjs(availableDays[0]);
+  const daysArr = Array.from({ length: 5 }, (_, i) =>
+    selectedDate.add(i - 2, 'day'),
+  );
+
+  return (
+    <div className="w-full h-[70px] flex items-center justify-between relative">
+      {daysArr.map((date, index) => (
+        <DateBlock key={index} date={date} />
+      ))}
+      <div className="bg-primary rounded-xl h-full w-[20%] absolute left-1/2 -translate-x-1/2" />
+    </div>
+  );
+}

app/components/festival/line-up/index.tsx

@@ -0,0 +1,10 @@
+import DateSelector from './date-selector';
+
+export default function LineUp() {
+  return (
+    <section className="flex flex-col gap-5">
+      <h1 className="w-full text-center text-xl font-bold">라인업</h1>
+      <DateSelector availableDays={['2024-05-16', '2024-05-17']} />
+    </section>
+  );
+}

app/globals.css

@@ -164,9 +164,12 @@
 }
 
 :root {
-  --foreground-rgb: 0, 0, 0;
+  /* --foreground-rgb: 0, 0, 0;
   --background-rgb: 255, 255, 255;
-  --input-shadow: 229, 229, 229;
+  --input-shadow: 229, 229, 229; */
+  --foreground-rgb: 255, 255, 255;
+  --background-rgb: 12, 12, 12;
+  --input-shadow: 64, 64, 64;
   -webkit-tap-highlight-color: transparent;
 }
 

app/layout.tsx

@@ -41,7 +41,7 @@ export default function RootLayout({
 }: PropsWithChildren<Params<{ locale: string }>>) {
   return (
     <html lang={locale ?? 'ko'}>
-      <body className="font-Pretendard bg-bgBlack">
+      <body className="font-Pretendard">
         <Providers>{children}</Providers>
       </body>
     </html>