Merge branch 'develop' into develop

src/pages/BoothNFoodList/Card/index.css.ts

@@ -0,0 +1,64 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "../../../shared/styles/vars.css";
+
+export const container = style({
+  display: "flex",
+  padding: "8px",
+  marginBottom: "7px",
+  height: "114px",
+  borderRadius: "20px",
+  backgroundColor: vars.color.white,
+});
+export const contentContainer = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  padding: "8px",
+  width: "100%",
+});
+export const contentDiv13 = style({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+});
+
+export const contentDiv2 = style({
+  display: "flex",
+  marginBottom: "8px",
+  alignItems: "center",
+});
+
+export const image = style({
+  aspectRatio: "1 / 1",
+  borderRadius: "16px 0px 0px 16px",
+  marginRight: "16px",
+});
+export const title = style({
+  fontFamily: vars.font.pyeongChangBold,
+  fontSize: "18px",
+  lineHeight: "22px",
+});
+export const icon = style({
+  color: vars.color.blue1,
+  fontSize: "30px",
+});
+export const category = style({
+  border: "1.5px solid #000",
+  borderRadius: "14px",
+  marginRight: "8px",
+  lineHeight: "20px",
+  padding: "2px 8px",
+});
+export const detailBtn = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "7px 10px",
+  cursor: "pointer",
+  borderRadius: "99px",
+  background: vars.color.blue2,
+  color: vars.color.white,
+});
+export const detailBtnIcon = style({
+  fontSize: "18px",
+});

src/pages/BoothNFoodList/Card/index.tsx

@@ -0,0 +1,40 @@
+import { Link } from "react-router-dom";
+
+import { booths_icon, foodtruck_icon } from "../../../shared/types/booth_foodtruck";
+import * as styles from "./index.css.ts";
+
+const icon_map = { ...booths_icon, ...foodtruck_icon };
+
+interface Props {
+  id: number;
+  title: string;
+  description: string;
+  type: "booth" | "foodtruck";
+  category: keyof typeof icon_map;
+  imgURL: string;
+}
+
+export default function Card({ id, title, description, category, type, imgURL }: Props) {
+  return (
+    <Link to={`/${type}/${id}`} className={styles.container}>
+      <img src={imgURL} alt={`${title} 부스/푸드트럭 이미지`} className={styles.image} />
+      <div className={styles.contentContainer}>
+        <div className={styles.contentDiv13}>
+          <h3 className={styles.title}>{title}</h3>
+          <span className={`material-symbols-outlined ${styles.icon}`}>{icon_map[category]}</span>
+        </div>
+        <div className={styles.contentDiv2}>
+          <p className={styles.category}>{category}</p>
+          <p>{description}</p>
+        </div>
+        <div className={styles.contentDiv13}>
+          <div />
+          <div className={styles.detailBtn}>
+            <span className={`material-symbols-outlined ${styles.detailBtnIcon}`}>info</span>
+            <span>더보기</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/pages/BoothNFoodList/TabBtns/indes.css.ts

@@ -0,0 +1,38 @@
+import { keyframes, style } from "@vanilla-extract/css";
+import { vars } from "../../../shared/styles/vars.css";
+
+export const tabBtns = style({
+  display: "flex",
+  justifyContent: "space-between",
+  margin: "10px 30px",
+  padding: "4px",
+  borderRadius: "40px",
+  backgroundColor: vars.color.white,
+});
+
+export const tabBtn = style({
+  flexGrow: 1,
+  fontWeight: "bold",
+  fontSize: "17px",
+  padding: "10px 4px",
+  borderRadius: "40px",
+});
+
+const slideIn = keyframes({
+  "0%": {
+    backgroundPosition: "left",
+  },
+  "100%": {
+    backgroundPosition: "right",
+  },
+});
+export const activeTabBtn = style({
+  color: vars.color.white,
+  animation: `.5s ease 0s ${slideIn}`,
+  background: `linear-gradient(90deg, ${vars.color.white}, ${vars.color.white}, ${vars.color.white}, ${vars.color.green3}, ${vars.color.green1}, ${vars.color.blue2})`,
+  backgroundSize: "200% 100%",
+  backgroundPosition: "right",
+});
+export const inactiveTabBtn = style({
+  color: vars.color.blue1,
+});

src/pages/BoothNFoodList/TabBtns/index.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import * as styles from "./indes.css";
+
+/**
+ * 탭 버튼 컴포넌트를 사용하기 위한 커스텀 훅
+ * 활용 예시: const { activeTab, TabBtns } = useTabBtns(["탭1", "탭2", "탭3"]);
+ * @param tabNames 탭 버튼 상태 배열
+ * @returns activeTab: 현재 선택된 탭 상태, TabBtns: 탭 버튼 컴포넌트
+ */
+export default function useTabBtns(tabNames: string[], queryKey: string) {
+  const [activeTab, setActiveTab] = useState(tabNames[0]);
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    // 처음 접속했을 떄 query에 값이 없으면 첫 번째 탭으로 설정
+    const queryValue = searchParams.get(queryKey);
+    if (queryValue && tabNames.includes(queryValue)) {
+      setActiveTab(queryValue);
+    } else {
+      searchParams.set(queryKey, activeTab);
+      setSearchParams(searchParams);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const changeTab = (tabName: string) => {
+    searchParams.set(queryKey, tabName);
+    setSearchParams(searchParams);
+    setActiveTab(tabName);
+  };
+
+  const TabBtns = ({ tabBtnNames }: { tabBtnNames?: string[] }) => {
+    return (
+      <div className={styles.tabBtns}>
+        {tabNames.map((tabName, index) => (
+          <button
+            key={tabName}
+            className={`${styles.tabBtn} ${activeTab === tabName ? styles.activeTabBtn : styles.inactiveTabBtn}`}
+            onClick={() => changeTab(tabName)}
+          >
+            {tabBtnNames ? tabBtnNames[index] : tabName}
+          </button>
+        ))}
+      </div>
+    );
+  };
+  return { activeTab, TabBtns };
+}

src/pages/BoothNFoodList/index.css.ts

@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const cardContainer = style({
+  margin: "30px",
+});

src/pages/BoothNFoodList/index.tsx

@@ -1,7 +1,39 @@
+import BOOTHS from "../../resources/BOOTHS";
+import FOODTRUCKS from "../../resources/FOODTRUCKS";
+import { BOOTH_PLACE, FOODTRUCKS_PLACE } from "../../shared/types/booth_foodtruck";
+
+import Card from "./Card";
+import useTabBtns from "./TabBtns";
+import { cardContainer } from "./index.css";
+
 export default function BoothNFoodList() {
+  const { activeTab: typeTab, TabBtns: TypeTabBtns } = useTabBtns(["booth", "foodtruck"], "type");
+  const { activeTab: placeTab, TabBtns: PlaceTabBtns } = useTabBtns(
+    [...(typeTab == "booth" ? BOOTH_PLACE : FOODTRUCKS_PLACE)],
+    "place",
+  );
+
   return (
     <div>
-      <h1>BoothList</h1>
+      <section>
+        <TypeTabBtns tabBtnNames={["부스", "푸드트럭"]} />
+        <PlaceTabBtns />
+      </section>
+      <section className={cardContainer}>
+        {(typeTab == "booth" ? BOOTHS : FOODTRUCKS).map((item) =>
+          placeTab === item.place ? (
+            <Card
+              key={item.id}
+              id={item.id}
+              title={item.title}
+              description={item.description}
+              category={item.category}
+              type={typeTab as "booth" | "foodtruck"}
+              imgURL={item.imgURL}
+            />
+          ) : null,
+        )}
+      </section>
     </div>
   );
 }

src/resources/BOOTHS.ts

@@ -0,0 +1,97 @@
+import { Booth } from "../shared/types/booth_foodtruck";
+
+const BOOTHS: Readonly<Booth[]> = [
+  {
+    id: 1,
+    title: "올해도 돌아온 떡삼",
+    place: "미래광장",
+    category: "식음료",
+    imgURL: "https://sussexbylines.co.uk/wp-content/uploads/2024/03/cat-out-hunting-750x536.jpg",
+    description: "떡꼬치삼겹살 판매",
+    description2: "오직 강원대 대동제에서 합리적인 가격에 만나보세요",
+    hours: "11:00 ~ 16:00",
+    keyword: ["핫 닭꼬치", "주요음식2"],
+    contents: [
+      {
+        h3: "메인요리",
+        list: [
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "올해도 돌아온 떡삼",
+    place: "미래광장",
+    category: "식음료",
+    imgURL: "",
+    description: "떡꼬치삼겹살 판매",
+    description2: "오직 강원대 대동제에서 합리적인 가격에 만나보세요",
+    hours: "11:00 ~ 16:00",
+    keyword: ["핫 닭꼬치", "주요음식2"],
+    contents: [
+      {
+        h3: "메인요리",
+        list: [
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+        ],
+      },
+      {
+        h3: "음료",
+        list: [
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: "올해도 돌아온 떡삼",
+    place: "함인섭광장",
+    category: "쇼핑",
+    imgURL: "",
+    description: "떡꼬치삼겹살 판매",
+    description2: "오직 강원대 대동제에서 합리적인 가격에 만나보세요",
+    hours: "11:00 ~ 16:00",
+    keyword: ["핫 닭꼬치", "주요음식2"],
+    contents: [
+      {
+        h3: "메인요리",
+        list: [
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default BOOTHS;

src/resources/FOODTRUCKS.ts

@@ -0,0 +1,58 @@
+import { FoodTruck } from "../shared/types/booth_foodtruck";
+
+const FOODTRUCKS: Readonly<FoodTruck[]> = [
+  {
+    id: 1,
+    title: "올해도 돌아온 떡삼",
+    category: "한식",
+    imgURL: "",
+    description: "떡꼬치삼겹살 판매",
+    description2: "오직 강원대 대동제에서 합리적인 가격에 만나보세요",
+    hours: "11:00 ~ 16:00",
+    place: "대운동장",
+    keyword: ["핫 닭꼬치", "주요음식2"],
+    contents: [
+      {
+        h3: "메인요리",
+        list: [
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "올해도 돌아온 떡삼",
+    category: "한식",
+    imgURL: "",
+    description: "떡꼬치삼겹살 판매",
+    description2: "오직 강원대 대동제에서 합리적인 가격에 만나보세요",
+    hours: "11:00 ~ 16:00",
+    place: "60주년기념관",
+    keyword: ["핫 닭꼬치", "주요음식2"],
+    contents: [
+      {
+        h3: "메인요리",
+        list: [
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+          {
+            title: "음식 이름",
+            price: 0,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default FOODTRUCKS;