2024.09.23 2차배포

src/components/ImageModal/index.css.ts

@@ -1,13 +1,15 @@
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
+  position: "relative",
   width: "100%",
   height: "100%",
 });
 export const zoomInBtn = style({
   position: "absolute",
+  top: "5px",
+  left: "5px",
   cursor: "pointer",
-  margin: "5px",
   padding: "3px",
   borderRadius: "5px",
   backgroundColor: "rgba(255, 255, 255, 0.3)",
@@ -17,3 +19,13 @@ export const image = style({
   height: "100%",
   objectFit: "cover",
 });
+
+export const placeBtn = style({
+  position: "absolute",
+  top: "5px",
+  right: "5px",
+  cursor: "pointer",
+  padding: "3px",
+  borderRadius: "5px",
+  backgroundColor: "rgba(255, 255, 255, 0.3)",
+});

src/components/ImageModal/index.tsx

@@ -1,6 +1,31 @@
 import * as styles from "./index.css.ts";
 
-export default function ImageModal({ src, alt }: { src: string; alt: string }) {
+interface ImageModalProps {
+  src: string;
+  alt: string;
+  activePlace?: "60주년기념관" | "함인섭광장" | "대운동장";
+}
+
+export default function ImageModal({ src, alt, activePlace }: ImageModalProps) {
+  const placeLinks: { [key: string]: string } = {
+    "60주년기념관": "https://kko.to/hKoJW3SEaa",
+    함인섭광장: "https://kko.to/KvvTprkn8T",
+    대운동장: "https://kko.to/MkBZQvfuH0",
+  };
+
+  const handlePlaceButtonClick = () => {
+    if (activePlace) {
+      const link = placeLinks[activePlace];
+      if (link) {
+        window.location.href = link;
+      } else {
+        console.error(`Link for ${activePlace} is not defined.`);
+      }
+    } else {
+      console.error("activePlace is not provided.");
+    }
+  };
+
   return (
     <div className={styles.container}>
       <span
@@ -9,6 +34,14 @@ export default function ImageModal({ src, alt }: { src: string; alt: string }) {
       >
         zoom_in
       </span>
+      {alt === "layout" && (
+        <span
+          className={`material-symbols-outlined ${styles.placeBtn}`}
+          onClick={handlePlaceButtonClick}
+        >
+          map
+        </span>
+      )}
       <img src={src} alt={alt} className={styles.image} />
     </div>
   );

src/pages/BoothNFoodDetail/Overview/index.tsx

@@ -1,12 +1,13 @@
 import ImageModal from "../../../components/ImageModal/index.tsx";
+import { BoothPlaceType } from "../../../shared/types/asset_types.ts";
 import * as styles from "./index.css.ts";
 
 type OverviewProps = {
   title: string;
   date: number[];
   imgURL: string;
   order: number;
-  place: string;
+  place: BoothPlaceType;
 };
 
 export default function Overview({ title, date, imgURL, order, place }: OverviewProps) {
@@ -20,7 +21,13 @@ export default function Overview({ title, date, imgURL, order, place }: Overview
           <div className={styles.hoursContainer}>
             <div className={styles.hoursLabel}>
               <span className="material-symbols-outlined">schedule</span>
-              <span>{title.includes("주점") ? "18:00 ~ 01:00" : "11:00 ~ 17:00"}</span>
+              <span>
+                {title === "주점"
+                  ? place === "미래광장"
+                    ? "18:00 ~ 00:00"
+                    : "18:00 ~ 01:00"
+                  : "11:00 ~ 17:00"}
+              </span>
             </div>
             <div className={styles.hoursLabel}>
               <span className="material-symbols-outlined">date_range</span>

src/pages/BoothNFoodList/index.tsx

@@ -29,15 +29,15 @@ export default function BoothNFoodList() {
         <div className={styles.imgContainer2}>
           {activePlace !== "미래광장" && (
             <ImageModal
-              {...{
-                src:
-                  activePlace === "함인섭광장"
-                    ? haminseop_layout
-                    : activePlace === "대운동장"
-                      ? playground_layout
-                      : sixty_anniv_layout,
-                alt: "layout",
-              }}
+              src={
+                activePlace === "함인섭광장"
+                  ? haminseop_layout
+                  : activePlace === "대운동장"
+                    ? playground_layout
+                    : sixty_anniv_layout
+              }
+              alt="layout"
+              activePlace={activePlace}
             />
           )}
         </div>

src/pages/Notice/index.tsx

@@ -101,19 +101,25 @@ function Notice() {
           ) : (
             currentNotices.map((noticeItem, index) => (
               <div className={noticeContainer} key={noticeItem.id}>
-                <div className={notice}>
+                <div onClick={() => toggleNotice(noticeItem.id)} className={notice}>
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <p className={noticeNumber}>{index + 1 + (currentPage - 1) * itemsPerPage}</p>
                     {/* 공지사항의 renewal이 true일 경우 'New' 배지를 표시 */}
                     {noticeItem.renewal && <span className={newBadge}>중요</span>}
                   </div>
 
-                  <div onClick={() => toggleNotice(noticeItem.id)} className={noticeContentWrapper}>
+                  <div className={noticeContentWrapper}>
                     <p className={noticeTitle}>{noticeItem.title}</p>
                   </div>
 
                   {/* downbtn을 클릭하면 토글 */}
-                  <button onClick={() => toggleNotice(noticeItem.id)} className={arrowButton}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation(); // 이벤트 전파 방지
+                      toggleNotice(noticeItem.id);
+                    }}
+                    className={arrowButton}
+                  >
                     <span className="material-symbols-outlined">
                       {expandedNoticeId === noticeItem.id ? "arrow_drop_up" : "arrow_drop_down"}
                     </span>

src/pages/Notice/notice.css.ts

@@ -95,6 +95,7 @@ export const notice = style({
   alignItems: "center",
   flexDirection: "row",
   position: "relative",
+  cursor: "pointer",
   "@media": {
     "(max-width: 375px)": {
       //Iphone SE 같은 소형폰
@@ -115,7 +116,6 @@ export const noticeContentWrapper = style({
   overflow: "hidden", // 넘치는 부분을 숨김
   position: "relative",
   marginLeft: 10,
-  cursor: "pointer",
 });
 
 export const noticeTitle = style({

src/pages/QnA/index.tsx

@@ -121,19 +121,23 @@ function QnA() {
           ) : (
             currentNotices.map((QnaItem, index) => (
               <div className={qnaContainer} key={QnaItem.id}>
-                <div className={qna}>
+                <div onClick={() => toggleQna(QnaItem.id)} className={qna}>
                   {/* 번호와 제목 표시 */}
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <p className={qnaNumber}>{index + 1 + (currentPage - 1) * itemsPerPage}</p>
                   </div>
 
-                  <div onClick={() => toggleQna(QnaItem.id)} className={qnaContentWrapper}>
+                  <div className={qnaContentWrapper}>
                     <p className={qnaContent}>{QnaItem.title}</p>
                   </div>
+
                   {/* downbtn을 클릭하면 토글 */}
                   <button
-                    onClick={() => toggleQna(QnaItem.id)}
-                    className={arrowButton} // 스타일 추가
+                    onClick={(e) => {
+                      e.stopPropagation(); // 이벤트 버블링을 막음
+                      toggleQna(QnaItem.id);
+                    }}
+                    className={arrowButton}
                   >
                     <span className="material-symbols-outlined">
                       {expandedQna.includes(QnaItem.id) ? "arrow_drop_up" : "arrow_drop_down"}

src/pages/QnA/qna.css.ts

@@ -63,6 +63,7 @@ export const qna = style({
   alignItems: "center",
   flexDirection: "row",
   position: "relative",
+  cursor: "pointer",
   "@media": {
     "(max-width: 375px)": {
       //Iphone SE 같은 소형폰
@@ -83,7 +84,6 @@ export const qnaContentWrapper = style({
   overflow: "hidden", // 넘치는 부분을 숨김
   position: "relative",
   marginLeft: 10,
-  cursor: "pointer",
 });
 
 export const qnaContent = style({

src/pages/Timetable/.css.ts

@@ -17,13 +17,27 @@ export const section = style({
 });
 
 const baseFilterButton = style({
+  position: "relative",
   padding: "10px 15px",
   margin: "0 5px 10px 0",
   border: "none",
   borderRadius: "20px",
   cursor: "pointer",
-  transition: "background-color 0.3s ease",
-  backgroundColor: "rgba(79, 205, 197, 0.5)",
+  transition: "all 0.3s ease",
+  overflow: "hidden",
+
+  "::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(255, 255, 255, 0.5)",
+    transition: "background-color 0.3s ease",
+    zIndex: -1,
+  },
+
   "@media": {
     "screen and (max-width: 768px)": {
       padding: "8px 12px",
@@ -37,18 +51,26 @@ export const filterButton = styleVariants({
     baseFilterButton,
     {
       color: vars.color.white,
-      ":hover": {
+
+      ":hover::before": {
         backgroundColor: "rgba(255, 255, 255, 0.2)",
       },
     },
   ],
   active: [
     baseFilterButton,
     {
+      backgroundImage: "linear-gradient(to top left, #04D1C3, #009efd, #FFFFFF)",
       fontWeight: "bold",
-      backgroundColor: "rgba(255, 255, 255, 0.3)",
-      color: vars.color.white,
-      ":hover": {
+      WebkitBackgroundClip: "text",
+      backgroundClip: "text",
+      color: "transparent",
+
+      "::before": {
+        backgroundColor: "rgba(255, 255, 255, 0.5)",
+      },
+
+      ":hover::before": {
         backgroundColor: "rgba(255, 255, 255, 0.4)",
       },
     },
@@ -70,13 +92,13 @@ export const timeTableItem = style({
 });
 
 export const timeTableTitle = style({
-  fontSize: "1.2rem",
+  fontSize: "1.3rem",
   fontWeight: "bold",
   marginBottom: "10px",
   fontFamily: vars.font.pyeongChangBold,
   "@media": {
     "screen and (max-width: 768px)": {
-      fontSize: "1rem",
+      fontSize: "1.3rem",
       marginBottom: "8px",
     },
   },
@@ -85,7 +107,7 @@ export const timeTableTitle = style({
 export const timeTableDescription = style({
   fontSize: "0.9rem",
   color: "#6c757d",
-  marginBottom: "10px",
+  marginBottom: "20px",
   fontFamily: vars.font.pretendardRegular,
   "@media": {
     "screen and (max-width: 768px)": {
@@ -94,14 +116,21 @@ export const timeTableDescription = style({
   },
 });
 
+export const timeTableLink = style({
+  color: vars.color.blue2,
+  textDecoration: "none",
+  marginLeft: "5px",
+  fontFamily: vars.font.pretendardRegular,
+});
+
 export const timeTableTime = style({
   fontSize: "0.9rem",
   fontWeight: "bold",
   color: vars.color.blue1,
   fontFamily: vars.font.pretendardRegular,
   "@media": {
     "screen and (max-width: 768px)": {
-      fontSize: "0.8rem",
+      fontSize: "1rem",
     },
   },
 });
@@ -145,20 +174,22 @@ export const artistImage = style({
   height: "100px",
   marginRight: "10px",
   objectFit: "cover",
+
   "@media": {
     "screen and (max-width: 768px)": {
-      width: "80px",
-      height: "80px",
+      width: "150px",
+      height: "150px",
     },
   },
 });
 
 export const artistName = style({
-  fontSize: "2rem",
+  fontSize: "1.7rem",
   fontFamily: vars.font.pyeongChangLight,
+  wordBreak: "keep-all",
   "@media": {
     "screen and (max-width: 768px)": {
-      fontSize: "2rem",
+      fontSize: "1.7rem",
     },
   },
 });