diff --git a/src/components/MyFavoritesList.js b/src/components/MyFavoritesList.js index 8e64af4987473f3e5b96f2b9fd08dae07797f986..7c4570adda920f99d03c187c21fc06636de36e33 100644 --- a/src/components/MyFavoritesList.js +++ b/src/components/MyFavoritesList.js @@ -66,7 +66,7 @@ const MyFavoritesList = ({ userId, username }) => { return ( <div className="my-favorites-container"> - <h2>{username}님의 즐겨찾기 목록</h2> + <h2>{username}</h2> <div className="favorites-list"> {favorites.length === 0 ? ( <p className="no-favorites">즐겨찾기한 장소가 없습니다.</p> diff --git a/src/pages/MyPage.js b/src/pages/MyPage.js index 2ca8d8b84edc74795ddbb1ef406bb1f9889a006a..7b40014b7a4e740a0c1bfd3254a3022df88d5652 100644 --- a/src/pages/MyPage.js +++ b/src/pages/MyPage.js @@ -5,7 +5,7 @@ import axios from 'axios'; import { toast } from 'react-toastify'; import MyFavoritesList from '../components/MyFavoritesList'; import MyReviewsList from '../components/MyReviewsList'; -import '../styles/MyPage.css'; +import '../styles/MyFavoritesList.css'; import { FaPen } from 'react-icons/fa'; const API_URL = process.env.REACT_APP_SERVER_URL; diff --git a/src/styles/MyFavoritesList.css b/src/styles/MyFavoritesList.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1178b11ba1c72e7cd0a3b45c10fa227098ddb977 100644 --- a/src/styles/MyFavoritesList.css +++ b/src/styles/MyFavoritesList.css @@ -0,0 +1,112 @@ +.my-favorites-container { + max-width: 800px; + margin: 2rem auto; + padding: 0 1rem; +} + +.my-favorites-container h2 { + color: #333; + font-size: 1.8rem; + margin-bottom: 2rem; + text-align: center; +} + +.favorites-list { + display: grid; + gap: 1.5rem; +} + +.favorite-item { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + padding: 1.5rem; + transition: transform 0.2s ease; +} + +.favorite-item:hover { + transform: translateY(-3px); +} + +.favorite-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.favorite-header h3 { + color: #333; + font-size: 1.2rem; + margin: 0; +} + +.delete-favorite-btn { + background-color: #ff4757; + color: white; + border: none; + border-radius: 4px; + padding: 0.3rem 0.7rem; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s ease; +} + +.delete-favorite-btn:hover { + background-color: #ff6b81; + transform: scale(0.95); +} + +.favorite-content { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.favorite-info { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.favorite-type { + color: #666; + font-size: 0.9rem; + background-color: #f1f2f6; + padding: 0.2rem 0.8rem; + border-radius: 15px; +} + +.favorite-address { + color: #666; + font-size: 0.9rem; + margin: 0; +} + +.no-favorites { + text-align: center; + color: #666; + padding: 2rem; + background-color: #f8f9fa; + border-radius: 10px; +} + +.loading, .error { + text-align: center; + padding: 2rem; + color: #666; +} + +@media (max-width: 600px) { + .my-favorites-container { + margin: 1rem auto; + } + + .favorite-item { + padding: 1rem; + } + + .favorite-header h3 { + font-size: 1.1rem; + } +}