From f97bd83a152d448b97ea2ff7982f15a88d51e3d8 Mon Sep 17 00:00:00 2001
From: pjookim <pjookim@naver.com>
Date: Sat, 7 Dec 2024 20:57:17 +0900
Subject: [PATCH] feat: add additional information for festivals in AddPlace
component
---
src/components/AddPlace.js | 17 ++++++++++-------
src/styles/AddPlace.css | 31 +++++++++++++++++++++++++++++++
2 files changed, 41 insertions(+), 7 deletions(-)
diff --git a/src/components/AddPlace.js b/src/components/AddPlace.js
index a603e7b..f7fac8b 100644
--- a/src/components/AddPlace.js
+++ b/src/components/AddPlace.js
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import '../styles/AddPlace.css';
-import { FaStar, FaPlus, FaCalendarAlt, FaUser, FaTicketAlt } from 'react-icons/fa';
+import { FaPhoneAlt, FaStar, FaPlus, FaCalendarAlt, FaUser, FaTicketAlt } from 'react-icons/fa';
import axios from 'axios';
import { toast } from 'react-toastify';
import { AREA_CODE } from '../constants/areaCode';
@@ -87,7 +87,7 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
console.log('로딩 상태:', currentState.loading);
console.log('더 불러올 데이터 여부:', currentState.hasMore);
console.log('현재 탭:', activeTab);
- console.log('현재 탭의 데이터 ���수:', currentState.places.length);
+ console.log('현재 탭의 데이터 개수:', currentState.places.length);
}, [tabStates, activeTab]);
useEffect(() => {
@@ -316,7 +316,7 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
const areaCode = getAreaCode(location);
if (!areaCode) {
- toast.error('올바른 지�� 정보가 아닙니다.');
+ toast.error('올바른 지역 정보가 아닙니다.');
return;
}
@@ -405,6 +405,7 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
if (festivalEnd >= formattedTripStartDate && festivalStart <= formattedTripEndDate) {
console.log(festivalInfo.sponsor1);
console.log(festivalInfo.usetimefestival);
+ console.log(festivalInfo);
return {
...item,
eventStartDate: festivalStart,
@@ -435,7 +436,9 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
tel: item.tel,
dist: item.dist,
eventStartDate: item.eventStartDate,
- eventEndDate: item.eventEndDate
+ eventEndDate: item.eventEndDate,
+ sponsor: item.sponsor,
+ usetimefestival: item.usetimefestival
}));
updateTabState('festivals', {
@@ -577,7 +580,7 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
<div className="place-info">
<h3>{place.name}</h3>
<p className="location">{place.location}</p>
- {place.tel && <p className="tel">{place.tel}</p>}
+ {place.tel && <p className="tel"><FaPhoneAlt className="tel-icon" />{place.tel}</p>}
{activeTab === 'festivals' && (
<>
{place.eventStartDate && place.eventEndDate && (
@@ -589,13 +592,13 @@ const AddPlace = ({ tripId, day, onBack, onPlaceSelect, tripStartDate, tripEndDa
{place.sponsor && (
<p className="festival-sponsor">
<FaUser className="sponsor-icon" />
- 주최: {place.sponsor}
+ {place.sponsor}
</p>
)}
{place.usetimefestival && (
<p className="festival-fee">
<FaTicketAlt className="fee-icon" />
- 요금: {place.usetimefestival}
+ <span dangerouslySetInnerHTML={{ __html: place.usetimefestival }} />
</p>
)}
</>
diff --git a/src/styles/AddPlace.css b/src/styles/AddPlace.css
index 228c587..d7cbca7 100644
--- a/src/styles/AddPlace.css
+++ b/src/styles/AddPlace.css
@@ -187,4 +187,35 @@
.add-button:hover {
color: var(--primary-color-dark);
+}
+
+.place-info .location {
+ margin-bottom: 10px;
+}
+
+.place-info p {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 6px 0;
+ line-height: 1.25;
+}
+
+.place-info .tel-icon,
+.place-info .calendar-icon,
+.place-info .sponsor-icon,
+.place-info .fee-icon {
+ min-width: 16px;
+ color: var(--primary-color);
+}
+
+.place-info h3 {
+ margin-bottom: 8px;
+}
+
+.festival-period,
+.festival-sponsor,
+.festival-fee {
+ font-size: 0.9rem;
+ color: #555;
}
\ No newline at end of file
--
GitLab