Skip to content

Commit f85d374

Browse files
kdh990315kdh990315
committed
메인 병합
2 parents a5d918c + 34912f7 commit f85d374

File tree

5 files changed

+72
-88
lines changed

5 files changed

+72
-88
lines changed

‎README.md‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
# 🍊 Jeju Month
22

33
## 제주 한달살이를 위한 웹 서비스
4+
![screencapture-localhost-5173-2025-02-06-14_19_19](https://github.com/user-attachments/assets/ff37edb9-8ae1-45c8-8796-45930f297b64)
5+
46

5-
<img width="1464" alt="mainImg" src="https://github.com/user-attachments/assets/dd24941a-eaa2-48c8-966b-c4d45e02a1f3" />
6-
<p style="text-align: center;">Jeju Month Main</p>
77

88
## **제주 한달살이를 위한 맞춤형 웹 서비스**
99
**Jeju Month**는 제주 한달살이를 계획하는 사람들을 위한 **맞춤형 여행 정보 제공 플랫폼**입니다.
1010
관광, 숙박, 음식, 쇼핑, 축제 등 다양한 정보를 제공하며,
1111
사용자가 직접 **여행 일정을 추가/관리**하고, 커뮤니티를 통해 서로의 경험을 공유할 수 있는 공간을 제공합니다.
1212

13-
---
14-
15-
## 📅 프로젝트 기간: **2025년 1월 6일 ~ 2025년 2월 7일**
16-
1713
# 🛠️ 프로젝트 타임라인
18-
14+
### 📅 프로젝트 기간: **2025년 1월 6일 ~ 2025년 2월 7일**
1915
| 단계 | 기간 | 주요 작업 |
2016
|--------------|-----------------------|---------------------------------------|
2117
| **1. 기획** | 1월 6일 ~ 1월 10일 | - 프로젝트 아이디어 구상<br>- 요구사항 분석<br>- 초기 와이어프레임 작성 |
@@ -83,27 +79,30 @@
8379

8480
### 1️⃣ **여행 일정 관리**
8581

86-
![여행 일정 관리]<img width="1464" alt="mainImg" src="https://github.com/user-attachments/assets/5974ff66-2734-4fb0-8cf8-46e375932c1e" />
82+
<img width="1303" alt="일정 관리 페이지" src="https://github.com/user-attachments/assets/14d713ff-0f37-4a66-9055-838b7ffe02cd" />
83+
84+
85+
8786
- **캘린더 기반 일정 관리:** 날짜별로 일정을 추가/편집할 수 있음.
8887
- **추천 명소와 일정 연동:** 사용자가 원하는 장소를 일정에 쉽게 추가 가능.
8988
- **여행 일정 시각화:** 한눈에 여행 계획을 확인할 수 있도록 UI 최적화.
9089

9190
---
9291

9392
### 2️⃣ **카테고리별 주요 행사 검색 및 상세 페이지 이동**
94-
![행사 검색 및 상세 페이지] <img width="1367" alt="tour-info" src="https://github.com/user-attachments/assets/2b9b241e-e392-4c4c-b26e-d96364a1acf1" />
93+
<img width="1367" alt="tour-info" src="https://github.com/user-attachments/assets/2b9b241e-e392-4c4c-b26e-d96364a1acf1" />
9594

9695

9796
- **카테고리별 주요 행사 검색:** 제주에서 열리는 다양한 행사 및 이벤트를 탐색 가능.
9897
- **태그(#) 검색 지원:** 특정 주제나 관심사에 맞는 행사를 쉽게 찾을 수 있음.
9998
- **상세 페이지 이동:** 각 행사 또는 관광지의 상세 정보 및 위치, 사진 등을 볼 수 있음.
100-
![상세 페이지 이동]<img width="1190" alt="tour-info2" src="https://github.com/user-attachments/assets/b39cb364-10ac-4398-8fa9-c58545f2608f" />
99+
<img width="1190" alt="tour-info2" src="https://github.com/user-attachments/assets/b39cb364-10ac-4398-8fa9-c58545f2608f" />
101100

102101

103102
---
104103

105104
### 3️⃣ **커뮤니티 공간 제공**
106-
![커뮤니티 공간 제공] <img width="1279" alt="community" src="https://github.com/user-attachments/assets/89bf220c-9473-4aee-b632-2af259006cfc" />
105+
<img width="1279" alt="community" src="https://github.com/user-attachments/assets/89bf220c-9473-4aee-b632-2af259006cfc" />
107106

108107
- 여행 후기를 공유하거나 다른 사용자와 댓글로 소통 가능.
109108
- **좋아요 기능**을 통해 인기 게시물을 확인할 수 있음.
@@ -112,7 +111,7 @@
112111
---
113112

114113
### 4️⃣ **마이페이지**
115-
![마이페이지] <img width="1221" alt="mypage" src="https://github.com/user-attachments/assets/4747f939-7aae-4fc3-915b-ceedef4e2b8e" />
114+
<img width="1221" alt="mypage" src="https://github.com/user-attachments/assets/4747f939-7aae-4fc3-915b-ceedef4e2b8e" />
116115

117116
- **내가 작성한 게시글 및 좋아요한 게시글을 한눈에 확인 가능.**
118117
- **팔로우/팔로워 목록 관리 기능 지원.**

‎src/pages/SearchPage/components/DetailCard.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import PropTypes from 'prop-types';
22
import WishListButton from './WishListButton';
33

4-
const DetailCard = ({ title, city, street, description, img, contentid }) => {
4+
const DetailCard = ({ onClick, title, city, street, description, img, contentid }) => {
55
return (
6-
<div className="p-20 border-solid border border-[#E9E9E9] rounded-8 shadow-lg flex mb-13 hover:border-[#ffd3be] border-2 hover:bg-[#f5f5f5]/50 ">
6+
<div onClick={onClick} className="p-20 border-solid border border-[#E9E9E9] rounded-8 shadow-lg flex mb-13 hover:border-[#ffd3be] border-2 hover:bg-[#f5f5f5]/50 cursor-pointer">
77
<div className="flex-1 content-center text-left">
88
<div className="flex justify-between">
99
<div>
@@ -26,10 +26,11 @@ const DetailCard = ({ title, city, street, description, img, contentid }) => {
2626
export default DetailCard;
2727

2828
DetailCard.propTypes = {
29+
onClick: PropTypes.func.isRequired,
2930
title: PropTypes.string.isRequired,
3031
city: PropTypes.string.isRequired,
3132
street: PropTypes.string.isRequired,
3233
description: PropTypes.string.isRequired,
3334
img: PropTypes.string.isRequired,
34-
contentid: PropTypes.string.isRequired,
35+
contentid: PropTypes.object.isRequired,
3536
};

‎src/pages/SearchPage/components/DetailMediumCard.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import PropTypes from 'prop-types';
22
import WishListButton from './WishListButton';
33

4-
const DetailMediumCard = ({ title, city, street, img, contentid }) => {
4+
const DetailMediumCard = ({ onClick, title, city, street, img, contentid }) => {
55
return (
6-
<div className="border-solid border border-[#E9E9E9] rounded-8 shadow-lg mb-32 w-313 overflow-hidden hover:border-[#ffd3be] border-2">
6+
<div onClick={onClick} className="border-solid border border-[#E9E9E9] rounded-8 shadow-lg mb-32 w-313 overflow-hidden hover:border-[#ffd3be] border-2 cursor-pointer">
77
<img className="h-209 w-full" src={img} alt="상세 사진" />
88
<div className="p-20 text-left">
99
<div className="flex justify-between mb-13">
@@ -19,11 +19,12 @@ const DetailMediumCard = ({ title, city, street, img, contentid }) => {
1919
export default DetailMediumCard;
2020

2121
DetailMediumCard.propTypes = {
22+
onClick: PropTypes.func.isRequired,
2223
title: PropTypes.string.isRequired,
2324
city: PropTypes.string.isRequired,
2425
street: PropTypes.string.isRequired,
2526
description: PropTypes.string.isRequired,
2627
img: PropTypes.string.isRequired,
2728
category: PropTypes.string.isRequired,
28-
contentid: PropTypes.string.isRequired,
29+
contentid: PropTypes.object.isRequired,
2930
};

‎src/pages/SearchPage/components/DetailSmallCard.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
22
import { useEffect, useState } from 'react';
33
import WishListButton from './WishListButton';
44

5-
const DetailSmallCard = ({ title, city, street, description, category, contentid }) => {
5+
const DetailSmallCard = ({ onClick, title, city, street, description, category, contentid }) => {
66
const [color, setColor] = useState('');
77
const [categoryName, setCategoryName] = useState('');
88

@@ -31,7 +31,7 @@ const DetailSmallCard = ({ title, city, street, description, category, contentid
3131
<col style={{ width: '53%' }}></col>
3232
<col style={{ width: '5%' }}></col>
3333
</colgroup>
34-
<tr className="border-b border-solid border-[#EEEEEE] cursor-pointer">
34+
<tr onClick={onClick} className="border-b border-solid border-[#EEEEEE] cursor-pointer">
3535
<td className="py-14 px-8">
3636
<div
3737
className={`rounded-6 flex justify-center items-center w-48 h-22 text-12 text-white line-clamp-1 ${color}`}
@@ -55,11 +55,12 @@ const DetailSmallCard = ({ title, city, street, description, category, contentid
5555
export default DetailSmallCard;
5656

5757
DetailSmallCard.propTypes = {
58+
onClick: PropTypes.func.isRequired,
5859
title: PropTypes.string.isRequired,
5960
city: PropTypes.string.isRequired,
6061
street: PropTypes.string.isRequired,
6162
description: PropTypes.string.isRequired,
6263
img: PropTypes.string.isRequired,
6364
category: PropTypes.string.isRequired,
64-
contentid: PropTypes.string.isRequired,
65+
contentid: PropTypes.object.isRequired,
6566
};

‎src/pages/SearchPage/index.jsx‎

Lines changed: 49 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useQuery } from '@tanstack/react-query';
88
import Category from './components/Category';
99
import DetailMediumCard from './components/DetailMediumCard';
1010
import DetailSmallCard from './components/DetailSmallCard';
11-
import SkeletonLayout from './components/skeletonLayout';
11+
import SkeletonLayout from './components/SkeletonLayout';
1212

1313
const SearchPage = () => {
1414
const [searchData, setSearchData] = useState([]);
@@ -158,82 +158,64 @@ const SearchPage = () => {
158158
setLayout(layouticon);
159159
};
160160

161+
const handleCardClick = contentId => {
162+
navigate(`/detail/${contentId}`); // 상세 페이지로 이동
163+
window.scrollTo(0, 0);
164+
};
165+
161166
const renderCard = item => {
162167
switch (layout) {
163168
case 'large-layout':
164169
return (
165-
<button
166-
className="w-full"
167-
onClick={() => {
168-
const contentId = item.contentsid;
169-
window.location.href = `/detail/${contentId}`;
170-
}}
171-
key={item.contentsid}
172-
>
173-
<DetailCard
174-
key={item.id}
175-
title={item.title || '제목이 없습니다'}
176-
city={item.region1cd?.label || '도시'}
177-
street={
178-
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
179-
? '제주시내'
180-
: item.region2cd?.label
181-
}
182-
description={item.introduction || '설명이 없습니다.'}
183-
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
184-
contentid={item?.contentsid}
185-
/>
186-
</button>
170+
<DetailCard
171+
key={item.id}
172+
onClick={() => handleCardClick(item.contentsid)}
173+
title={item.title || '제목이 없습니다'}
174+
city={item.region1cd?.label || '도시'}
175+
street={
176+
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
177+
? '제주시내'
178+
: item.region2cd?.label
179+
}
180+
description={item.introduction || '설명이 없습니다.'}
181+
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
182+
contentid={item}
183+
/>
187184
);
188185
case 'medium-layout':
189186
return (
190-
<button
191-
className=" mr-10 [&:nth-child(3n)]:mr-0"
192-
onClick={() => {
193-
const contentId = item.contentsid;
194-
window.location.href = `/detail/${contentId}`;
195-
}}
196-
key={item.contentsid}
197-
>
198-
<DetailMediumCard
199-
key={item.id}
200-
title={item.title || '제목이 없습니다'}
201-
city={item.region1cd?.label || '도시'}
202-
street={
203-
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
204-
? '제주시내'
205-
: item.region2cd?.label
206-
}
207-
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
208-
category={item.contentscd?.value}
209-
contentid={item?.contentsid}
210-
/>
211-
</button>
187+
<DetailMediumCard
188+
key={item.id}
189+
onClick={() => handleCardClick(item.contentsid)}
190+
title={item.title || '제목이 없습니다'}
191+
city={item.region1cd?.label || '도시'}
192+
street={
193+
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
194+
? '제주시내'
195+
: item.region2cd?.label
196+
}
197+
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
198+
category={item.contentscd?.value}
199+
contentid={item}
200+
/>
212201
);
213202
case 'small-layout':
214203
return (
215-
<button
216-
onClick={() => {
217-
const contentId = item.contentsid;
218-
window.location.href = `/detail/${contentId}`;
219-
}}
220-
key={item.contentsid || ''}
221-
>
222-
<DetailSmallCard
223-
key={item.id}
224-
title={item.title || '제목이 없습니다'}
225-
city={item.region1cd?.label || '도시'}
226-
street={
227-
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
228-
? '제주시내'
229-
: item.region2cd?.label
230-
}
231-
description={item.introduction || '설명이 없습니다.'}
232-
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
233-
category={item.contentscd?.value}
234-
contentid={item?.contentsid}
235-
/>
236-
</button>
204+
<DetailSmallCard
205+
key={item.id}
206+
onClick={() => handleCardClick(item.contentsid)}
207+
title={item.title || '제목이 없습니다'}
208+
city={item.region1cd?.label || '도시'}
209+
street={
210+
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
211+
? '제주시내'
212+
: item.region2cd?.label
213+
}
214+
description={item.introduction || '설명이 없습니다.'}
215+
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
216+
category={item.contentscd?.value}
217+
contentid={item}
218+
/>
237219
);
238220
default:
239221
return null;

0 commit comments

Comments
 (0)