-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
[feat/#6] 마이페이지 찜 목록 구현
- Loading branch information
Showing
10 changed files
with
224 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from "react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import "./css/WishBox.css" | ||
|
|
||
| const WishBox = (props) => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const clickPopup = (item) => { | ||
| navigate(`/PopupDetail/${item.popupId}`); // 백틱(`)을 사용하여 변수 삽입 | ||
| } | ||
|
|
||
| return ( | ||
| <div className="wish-box" onClick={() => clickPopup(props)}> | ||
| <div className="wish-box-content"> | ||
| <div className="wish-box-basic-info"> | ||
| <img className="wish-box-ic-liked" src={require('../../assets/images/heartColor.png')} alt="heart_ic" /> | ||
| <span className="wish-box-name">{props.name}</span> | ||
| </div> | ||
| <img className="wish-box-img" src={props.image} alt="popup_image"/> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| export default WishBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,69 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import React, { useEffect, useState } from "react"; | ||
| import { useSelector } from 'react-redux'; | ||
| import WishBox from "./WishBox.js"; | ||
| import axios from "axios"; | ||
| import apiURLs from "../../apiURL.js"; | ||
| import "./css/WishList.css" | ||
| import SidebarComponent from './module/sidebarComponent'; | ||
|
|
||
| export default function WishList() { | ||
| const WishList = () => { | ||
| const loginInfo = useSelector(state => state.loginSlice); | ||
| const [wish, setWish] = useState([]); | ||
|
|
||
| // 찜 목록 가져오는 함수 | ||
| const getWish = async (userId) => { | ||
| try { | ||
| // const url = `${apiURLs.wishlist}?find=${userId}`; | ||
| const url = `http://localhost:8080/v1/popup/wishlist?find=${userId}`; | ||
| console.log("Fetching URL:", url); | ||
| const response = await axios.get(url); | ||
| setWish(response.data.data); | ||
| console.log(response.data.data); | ||
| } catch (error) { | ||
| console.error("Error: fetching wishlist data", error); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const userId = loginInfo.id; | ||
| console.log('User ID:', userId); | ||
| if (userId) { | ||
| getWish(userId); // userId를 전달하여 getWish 함수 호출 | ||
| } | ||
| }, [loginInfo]); | ||
|
|
||
| useEffect(() => { | ||
| if (wish.length === 0) { | ||
| console.log("No wish list"); | ||
| } | ||
| }, [wish]); | ||
|
|
||
| return ( | ||
| <div> | ||
| {/* 나머지 UI 구성 요소 */} | ||
| <div className="wishlist-page"> | ||
| <SidebarComponent /> | ||
| <div className="main-content" style={{textAlign: 'left'}}> | ||
| <strong className="wish-list-title" style={{ fontSize: '30px' , textAlign: 'left'}}>나의 찜 목록</strong> | ||
|
|
||
| {/* wishlist */} | ||
| <div className="wish-list"> | ||
| <div className="list-space"> | ||
| <div className="list-container"> | ||
| {wish.map((popup) => ( | ||
| <div className="wish-box"> | ||
| <WishBox | ||
| popupId={popup.popupId} | ||
| image={popup.popupImage} | ||
| name={popup.popupName} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/* WishList */} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default WishList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| .wish-box { | ||
| display: flex; | ||
| direction: row; | ||
| gap: 36px; | ||
| width: 256px; | ||
| height: 256px; | ||
| position: relative; | ||
| background: #FFFFFF; | ||
| box-shadow: 0 0 5px rgba(177, 181, 196, 0.5); | ||
| margin: 10px; | ||
|
|
||
| font-family: 'Pretendard-Regular'; | ||
| font-style: normal; | ||
| transition: transform 0.6s ease, box-shadow 0.6s ease; | ||
| } | ||
|
|
||
| .wish-box-img { | ||
| width: 236px; | ||
| height: 210px; | ||
| border-radius: 30px; | ||
| } | ||
|
|
||
| /* 창 크기에 따라 나열 */ | ||
| @media (min-width: 768px) { /* 화면 폭이 768px 이상인 경우 */ | ||
| .wish-box-content { | ||
| flex-direction: row; | ||
| } | ||
| } | ||
|
|
||
| .wish-box-name { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; /* 텍스트가 한 줄에 표시되도록 설정 */ | ||
| } | ||
|
|
||
| .wish-box-ic-liked { | ||
| width: 17px; | ||
| margin-top: 9px; | ||
| } | ||
|
|
||
| .wish-box-basic-info { | ||
| display: flex; /* 요소를 가로로 배열 */ | ||
| align-items: center; /* 수직 가운데 정렬 */ | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .wish-box-ic-liked { | ||
| width: 17px; /* 원하는 너비로 조정 */ | ||
| height: auto; /* 세로 비율 유지 */ | ||
| margin-right: 5px; /* 오른쪽 여백 추가 */ | ||
| } | ||
|
|
||
| .wish-box-name { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| color: #333; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; /* 텍스트가 한 줄에 표시되도록 설정 */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| .wishlist-page { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| background-color: #FCFCFD; | ||
| padding-left: 60px; | ||
| padding-right: 60px; | ||
| margin-bottom: 250px; | ||
| } | ||
|
|
||
| .sidebar { | ||
| flex: 0 0 auto; /* 사이드바가 컨테이너 크기를 넘지 않도록 설정 */ | ||
| margin-right: 30px; | ||
| } | ||
|
|
||
| .main-content { | ||
| flex-shrink: 0; | ||
| width: 736px; | ||
| height: 802px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| margin: auto; /* 수평 중앙 정렬 */ | ||
| } | ||
|
|
||
| .wish-list-title { | ||
| width: 100%; | ||
| height: auto; | ||
| flex-shrink: 0; | ||
| text-align: left; | ||
| display: flex; | ||
| margin-top: 70px; | ||
| margin-left: 30px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .wish-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 20px; /* 박스 사이의 간격 설정 */ | ||
| } | ||
|
|
||
| .wish-box { | ||
| width: 260px; /* 원하는 가로 크기 */ | ||
| height: 30%; /* 원하는 세로 크기 */ | ||
| border-radius: 10px; /* 모서리 둥글게 */ | ||
| overflow: hidden; /* 내부 요소가 모서리를 넘어가면 숨김 */ | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */ | ||
| transition: transform 0.3s ease; /* 호버 효과 시 부드럽게 변환 */ | ||
| } | ||
|
|
||
| .wish-box:hover { | ||
| transform: translateY(-5px); /* 호버 시 약간 위로 이동 */ | ||
| } | ||
|
|
||
| .wish-box-name { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| color: #333; | ||
| margin-top: 10px; /* 이름과 이미지 사이에 간격 추가 */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters