develop => main

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+.cursor

.husky/pre-push

@@ -1,4 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint 
+echo "🔍 Running lint..."
+pnpm lint || exit 1
+
+echo "🛠 Building project..."
+pnpm build || exit 1

.vscode/settings.json

@@ -27,7 +27,7 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.stylelint": "explicit"
     },
-    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[sass]": {
     "editor.codeActionsOnSave": {

apps/ticket/next.config.ts

@@ -4,13 +4,48 @@ import { withSentryConfig } from "@sentry/nextjs";
 const nextConfig: NextConfig = {
   async rewrites() {
     // 요청 경로를 다른 경로에 매핑
+    // TODO: 확인
     return [
       {
         source: "/sample",
         destination: "/404",
       },
     ];
   },
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fileLoaderRule = config.module.rules.find((rule: any) => rule.test?.test?.(".svg"));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
+  // FIXME: 이미지 cdn 도메인으로 수정
+  images: {
+    domains: [
+      "avatars.githubusercontent.com",
+      "scontent-icn2-1.cdninstagram.com",
+      "images.unsplash.com",
+    ],
+  },
 };
 
 export default withSentryConfig(nextConfig, {

apps/ticket/package.json

@@ -12,6 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@permit/design-system": "workspace:*",
     "@sentry/nextjs": "^9.33.0",
     "@tanstack/react-query": "^5.80.10",
     "@tanstack/react-query-devtools": "^5.80.10",
@@ -27,6 +28,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@permit/eslint-config": "workspace:*",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

apps/ticket/src/app/(pages)/(home)/_clientBoundary/EventCardClient/index.module.scss

@@ -0,0 +1,110 @@
+@use "@permit/design-system/styles/variables" as theme;
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
+  cursor: pointer;
+
+  transition: all 0.3s ease-in-out;
+
+  @media (min-width: 768px) {
+    max-width: 93px;
+
+    &.hovered {
+      .hovered_content {
+        opacity: 1;
+
+        pointer-events: auto;
+      }
+    }
+
+    &.dimmed {
+      .image_wrapper {
+        opacity: 0.5;
+      }
+
+      .display_number {
+        opacity: 0.5;
+      }
+    }
+
+    .mobile_title {
+      display: none;
+    }
+  }
+
+  @media (max-width: 768px) {
+    max-width: 375px;
+    margin: 0 auto;
+
+    .display_number {
+      display: none;
+    }
+
+    .hovered_content {
+      display: none;
+    }
+  }
+}
+
+.hovered_content {
+  display: none;
+
+  text-align: right;
+
+  @media (min-width: 768px) and (max-width: 1335px) {
+    position: fixed;
+    top: 110px;
+    right: 40px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 33.33vw;
+
+    opacity: 0;
+
+    transition: opacity 0.3s ease-in-out;
+
+    pointer-events: none;
+  }
+
+  @media (min-width: 1336px) {
+    position: fixed;
+    top: 110px;
+    right: 40px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    opacity: 0;
+
+    transition: opacity 0.3s ease-in-out;
+
+    pointer-events: none;
+
+    .image_wrapper {
+      position: relative;
+      width: 447px;
+    }
+  }
+}
+
+.image_wrapper {
+  position: relative;
+  width: 100%;
+
+  transition: all 0.3s ease-in-out;
+  aspect-ratio: 93/125;
+}
+
+.display_number {
+  color: theme.$white;
+
+  transition: opacity 0.3s ease-in-out;
+}

apps/ticket/src/app/(pages)/(home)/_clientBoundary/EventCardClient/index.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import classNames from "classnames/bind";
+
+import { Flex, Typography } from "@permit/design-system";
+
+import styles from "./index.module.scss";
+
+const cx = classNames.bind(styles);
+
+type EventCardProps = {
+  eventId: number;
+  imageUrl: string;
+  title: string;
+  displayNumber: string;
+  category: string;
+  onHover: (isHovered: boolean) => void;
+  isDimmed: boolean;
+};
+
+export const EventCardClient = ({
+  eventId,
+  imageUrl,
+  title,
+  displayNumber,
+  category,
+  onHover,
+  isDimmed,
+}: EventCardProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    onHover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    onHover(false);
+  };
+
+  return (
+    <Link href={`/event/${eventId}`}>
+      <div
+        className={cx("container", { hovered: isHovered, dimmed: isDimmed })}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <Typography type="body16" weight="bold" className={cx("display_number")}>
+          {displayNumber}
+        </Typography>
+        <div className={cx("image_wrapper")}>
+          <Image src={imageUrl} alt={title} fill />
+        </div>
+        <Typography type="body14" weight="bold" className={cx("mobile_title")}>
+          {title}
+        </Typography>
+        <div className={cx("hovered_content")}>
+          <Flex gap={16}>
+            <Flex direction="column" gap={4}>
+              <Typography className={cx("category_name")} type="body14" weight="bold">
+                {category}
+              </Typography>
+              <Typography type="body14" weight="bold">
+                {title}
+              </Typography>
+            </Flex>
+            <div className={cx("image_wrapper")}>
+              <Image
+                className={cx("image")}
+                src={imageUrl}
+                alt={title}
+                fill
+                sizes="(min-width: 1336px) 447px, (min-width: 768px) 33.33vw, 100vw"
+              />
+            </div>
+          </Flex>
+        </div>
+      </div>
+    </Link>
+  );
+};

apps/ticket/src/app/(pages)/(home)/_clientBoundary/EventListClient/index.module.scss

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  flex-direction: column;
+
+  // Header 와 Footer 의 높이 합을 뺀 나머지 높이
+  min-height: calc(100vh - 102px - 80px);
+  padding: 0 40px;
+
+  @media (max-width: 768px) {
+    gap: 20px;
+    padding: 0 16px 20px;
+  }
+}
+
+.event_list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 93px);
+  gap: 30px;
+  width: 100%;
+  margin-top: 240px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-top: 0;
+  }
+}

apps/ticket/src/app/(pages)/(home)/_clientBoundary/EventListClient/index.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import classNames from "classnames/bind";
+
+import { CategoryList } from "../../_components/CategoryList";
+import { EventWithCategory } from "../../_utils/types";
+import { CATEGORIES, CATEGORY_LABELS, CategoryType } from "../../constants/category";
+import { mockEventData } from "../../constants/mock";
+import { useEventHover } from "../../hooks/useEventHover";
+import { EventCardClient } from "../EventCardClient";
+import styles from "./index.module.scss";
+
+const cx = classNames.bind(styles);
+
+export const EventListClient = () => {
+  const [selectedCategory, setSelectedCategory] = useState<CategoryType>(CATEGORIES.ALL);
+  const { handleEventHover, isEventDimmed } = useEventHover();
+
+  const handleCategoryClick = (category: CategoryType) => {
+    setSelectedCategory(category);
+  };
+
+  const getEventsWithCategory = (): EventWithCategory[] => {
+    if (selectedCategory === CATEGORIES.ALL) {
+      return Object.entries(mockEventData).flatMap(([category, events]) =>
+        events.map((event) => ({
+          ...event,
+          category: category as CategoryType,
+        })),
+      );
+    }
+
+    return (
+      mockEventData[selectedCategory]?.map((event) => ({
+        ...event,
+        category: selectedCategory,
+      })) ?? []
+    );
+  };
+
+  const filteredEvents = getEventsWithCategory();
+
+  return (
+    <div className={cx("container")}>
+      <CategoryList selectedCategory={selectedCategory} onClickCategory={handleCategoryClick} />
+      <div className={cx("event_list")}>
+        {filteredEvents.map((event: EventWithCategory, index: number) => {
+          const { eventId, eventName, thumbnailImageUrl, category } = event;
+          const displayNumber = String(index + 1).padStart(2, "0");
+
+          return (
+            <EventCardClient
+              key={eventId}
+              eventId={eventId}
+              imageUrl={thumbnailImageUrl}
+              title={eventName}
+              displayNumber={displayNumber}
+              category={CATEGORY_LABELS[category]}
+              onHover={(isHovered) => handleEventHover(eventId, isHovered)}
+              isDimmed={isEventDimmed(eventId)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};