diff --git a/src/pages/CalendarView.tsx b/src/pages/CalendarView.tsx index e187650..dd7cbe6 100644 --- a/src/pages/CalendarView.tsx +++ b/src/pages/CalendarView.tsx @@ -47,7 +47,7 @@ const CalendarView = () => { const [showSideMonth, setShowSideMonth] = useState(false); const [clickedDate, setClickedDate] = useState(new Date()); - /** ---------------------- FETCH MONTH / WEEK / DAY data -------------------- */ + /** ---------------------- FETCH MONTH / WEEK / DAY data -------------------- */ const navigate = useNavigate(); diff --git a/src/pages/MainDay.tsx b/src/pages/MainDay.tsx index b1f7831..ef4cab9 100644 --- a/src/pages/MainDay.tsx +++ b/src/pages/MainDay.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import styles from "@styles/CalendarView.module.css"; import MonthSideView from "@widgets/Month/MonthSideView/MonthSideView"; @@ -7,7 +7,6 @@ import BottomNav from "@/widgets/BottomNav"; import { useEvents } from "@/contexts/EventContext"; import { useDetail } from "@/contexts/DetailContext"; import { FilterSheet } from "@/widgets/FilterSheet/FilterSheet"; -import Modal from "@/widgets/Modal"; const MOBILE_MAX_WIDTH = 576; @@ -15,8 +14,6 @@ const MainDay = () => { const navigate = useNavigate(); const { dayDate } = useEvents(); const { showDetail, clickedEventId } = useDetail(); - const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); - useEffect(() => { const checkWidth = () => { @@ -36,7 +33,7 @@ const MainDay = () => { return (
- setIsLoginModalOpen(true)} /> + {showDetail && clickedEventId !== undefined && (
@@ -45,17 +42,6 @@ const MainDay = () => {
{!showDetail && } - {isLoginModalOpen && ( - navigate("/")} - onRightClick={() => setIsLoginModalOpen(false)} - onClose={() => setIsLoginModalOpen(false)} - /> - )} -
); }; diff --git a/src/styles/DayEvent.module.css b/src/styles/DayEvent.module.css index 5d7ef97..4c81c9e 100644 --- a/src/styles/DayEvent.module.css +++ b/src/styles/DayEvent.module.css @@ -1,36 +1,43 @@ .dayEventContainer { - height: 100%; - width: 100%; - padding: 4px 8px; - border-radius: 4px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - opacity: 90%; - color: rgb(27, 27, 27); - font-size: 13px; - font-weight: 500; - line-height: 1.3; - box-sizing: border-box; + height: 100%; + width: 100%; + padding: 4px 8px; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + opacity: 90%; + color: rgb(27, 27, 27); + font-size: 13px; + font-weight: 500; + line-height: 1.3; + box-sizing: border-box; } .eventContent { - width: 100%; - height: fit-content; - word-wrap: break-word; - overflow-wrap: break-word; + width: 100%; + height: fit-content; + word-wrap: break-word; + overflow-wrap: break-word; } .eventTitle { - font-weight: 600; + font-weight: 600; } .eventMeta { - font-weight: 400; - font-size: 12px; + font-weight: 400; + font-size: 12px; } + +.blockLocation { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + /* .arrowEventContainer { display: flex; diff --git a/src/styles/DetailView.module.css b/src/styles/DetailView.module.css index 0852e8c..89208ee 100644 --- a/src/styles/DetailView.module.css +++ b/src/styles/DetailView.module.css @@ -127,3 +127,16 @@ height: auto !important; display: block !important; } + +.locationRow { + display: flex; + flex-flow: row nowrap; + margin-top: 5px; + gap: 5px; + align-items: center; +} +.locationRow > span { + font-size: 14px; + font-weight: 500; + color: #555555; +} diff --git a/src/widgets/Day/DayEvent.tsx b/src/widgets/Day/DayEvent.tsx index 7745c8d..1aabe24 100644 --- a/src/widgets/Day/DayEvent.tsx +++ b/src/widgets/Day/DayEvent.tsx @@ -13,6 +13,9 @@ const DayEvent = ({ event: calendarEvent }: { event: CalendarEvent }) => { const { event } = calendarEvent.resource; const color = CATEGORY_COLORS[event.eventTypeId] || CATEGORY_COLORS[6]; + const location = event.location?.trim(); + const shouldShowLocation = location && location !== "-"; + return (
{
{event.title}
-
+ {!calendarEvent.allDay && ( +
{formatTime(calendarEvent.start)} - {formatTime(calendarEvent.end)} +
+ )} + {shouldShowLocation && ( +
+ {location}
-
- {event.location === "-" ? "" : event.location} -
+ )}
); }; diff --git a/src/widgets/DetailView/index.tsx b/src/widgets/DetailView/index.tsx index 3ed4866..77b2a94 100644 --- a/src/widgets/DetailView/index.tsx +++ b/src/widgets/DetailView/index.tsx @@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom"; import styles from "@styles/DetailView.module.css"; import { getDDay } from "../../util/Calendar/getDday"; import { CATEGORY_COLORS, CATEGORY_LIST } from "@constants"; -import { FaAnglesRight } from "react-icons/fa6"; +import { FaAnglesRight, FaLocationDot } from "react-icons/fa6"; import type { CalendarEvent, EventDetail } from "@types"; import DOMPurify from "isomorphic-dompurify"; import parse from "html-react-parser"; @@ -157,6 +157,12 @@ const DetailView = ({ eventId }: { eventId: number }) => {

{event.title}

+ {event.location && ( +
+ + {event.location} +
+ )}
  • {getDDay(ddayTargetDate)}
  • { ) } -const CardView = ({ event, onLoginPrompt }: { event: Event; onLoginPrompt: () => void; }) => { +const CardView = ({ event, onLoginPrompt }: { event: Event; onLoginPrompt?: () => void; }) => { const ddayTargetDate = event.applyEnd; const {user} = useAuth(); @@ -72,7 +72,7 @@ const CardView = ({ event, onLoginPrompt }: { event: Event; onLoginPrompt: () => e.stopPropagation(); if (!user) { - onLoginPrompt(); + onLoginPrompt?.(); return; } diff --git a/src/widgets/Month/MonthSideView/MonthSideView.tsx b/src/widgets/Month/MonthSideView/MonthSideView.tsx index 3a68071..90c1c8a 100644 --- a/src/widgets/Month/MonthSideView/MonthSideView.tsx +++ b/src/widgets/Month/MonthSideView/MonthSideView.tsx @@ -1,4 +1,5 @@ import { useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; import { FaAngleLeft, FaAngleRight, FaAnglesRight } from "react-icons/fa6"; import styles from "@styles/MonthSideView.module.css"; import CardView from "./CardView"; @@ -12,16 +13,17 @@ import { useFilter } from "@/contexts/FilterContext"; import { useUserData } from "@/contexts/UserDataContext"; import { useDayEvents } from "@/contexts/useCalendarEvents"; import { FilterButton } from "@/widgets/Toolbar"; +import Modal from "@/widgets/Modal"; const MonthSideView = ({ day, onClose, - onLoginPrompt, }: { day: Date; onClose: () => void; - onLoginPrompt: () => void; }) => { + const navigate = useNavigate(); + const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); const { setShowDetail, setClickedEventId } = useDetail(); const [date, setDate] = useState(day); const { globalCategory, globalOrg, globalStatus, setFilterSheetShowing } = useFilter(); @@ -76,6 +78,16 @@ const MonthSideView = ({ return (
    + {isLoginModalOpen && ( + navigate("/")} + onRightClick={() => setIsLoginModalOpen(false)} + onClose={() => setIsLoginModalOpen(false)} + /> + )}
    ))}