Skip to content

Commit

Permalink
메인 병합
Browse files Browse the repository at this point in the history
  • Loading branch information
@kdh990315
kdh990315 committed Feb 7, 2025
2 parents a5d918c + 34912f7 commit f85d374
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 88 deletions.
23 changes: 11 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
# 🍊 Jeju Month

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


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

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

---

## 📅 프로젝트 기간: **2025년 1월 6일 ~ 2025년 2월 7일**

# 🛠️ 프로젝트 타임라인

### 📅 프로젝트 기간: **2025년 1월 6일 ~ 2025년 2월 7일**
| 단계 | 기간 | 주요 작업 |
|--------------|-----------------------|---------------------------------------|
| **1. 기획** | 1월 6일 ~ 1월 10일 | - 프로젝트 아이디어 구상<br>- 요구사항 분석<br>- 초기 와이어프레임 작성 |
Expand Down Expand Up @@ -83,27 +79,30 @@

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

![여행 일정 관리]<img width="1464" alt="mainImg" src="https://github.com/user-attachments/assets/5974ff66-2734-4fb0-8cf8-46e375932c1e" />
<img width="1303" alt="일정 관리 페이지" src="https://github.com/user-attachments/assets/14d713ff-0f37-4a66-9055-838b7ffe02cd" />



- **캘린더 기반 일정 관리:** 날짜별로 일정을 추가/편집할 수 있음.
- **추천 명소와 일정 연동:** 사용자가 원하는 장소를 일정에 쉽게 추가 가능.
- **여행 일정 시각화:** 한눈에 여행 계획을 확인할 수 있도록 UI 최적화.

---

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


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


---

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

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

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

- **내가 작성한 게시글 및 좋아요한 게시글을 한눈에 확인 가능.**
- **팔로우/팔로워 목록 관리 기능 지원.**
Expand Down
7 changes: 4 additions & 3 deletions src/pages/SearchPage/components/DetailCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import WishListButton from './WishListButton';

const DetailCard = ({ title, city, street, description, img, contentid }) => {
const DetailCard = ({ onClick, title, city, street, description, img, contentid }) => {
return (
<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 ">
<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">
<div className="flex-1 content-center text-left">
<div className="flex justify-between">
<div>
Expand All @@ -26,10 +26,11 @@ const DetailCard = ({ title, city, street, description, img, contentid }) => {
export default DetailCard;

DetailCard.propTypes = {
onClick: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
street: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
contentid: PropTypes.string.isRequired,
contentid: PropTypes.object.isRequired,
};
7 changes: 4 additions & 3 deletions src/pages/SearchPage/components/DetailMediumCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import WishListButton from './WishListButton';

const DetailMediumCard = ({ title, city, street, img, contentid }) => {
const DetailMediumCard = ({ onClick, title, city, street, img, contentid }) => {
return (
<div className="border-solid border border-[#E9E9E9] rounded-8 shadow-lg mb-32 w-313 overflow-hidden hover:border-[#ffd3be] border-2">
<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">
<img className="h-209 w-full" src={img} alt="상세 사진" />
<div className="p-20 text-left">
<div className="flex justify-between mb-13">
Expand All @@ -19,11 +19,12 @@ const DetailMediumCard = ({ title, city, street, img, contentid }) => {
export default DetailMediumCard;

DetailMediumCard.propTypes = {
onClick: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
street: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
contentid: PropTypes.string.isRequired,
contentid: PropTypes.object.isRequired,
};
7 changes: 4 additions & 3 deletions src/pages/SearchPage/components/DetailSmallCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';
import WishListButton from './WishListButton';

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

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

DetailSmallCard.propTypes = {
onClick: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
city: PropTypes.string.isRequired,
street: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
contentid: PropTypes.string.isRequired,
contentid: PropTypes.object.isRequired,
};
116 changes: 49 additions & 67 deletions src/pages/SearchPage/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useQuery } from '@tanstack/react-query';
import Category from './components/Category';
import DetailMediumCard from './components/DetailMediumCard';
import DetailSmallCard from './components/DetailSmallCard';
import SkeletonLayout from './components/skeletonLayout';
import SkeletonLayout from './components/SkeletonLayout';

const SearchPage = () => {
const [searchData, setSearchData] = useState([]);
Expand Down Expand Up @@ -158,82 +158,64 @@ const SearchPage = () => {
setLayout(layouticon);
};

const handleCardClick = contentId => {
navigate(`/detail/${contentId}`); // 상세 페이지로 이동
window.scrollTo(0, 0);
};

const renderCard = item => {
switch (layout) {
case 'large-layout':
return (
<button
className="w-full"
onClick={() => {
const contentId = item.contentsid;
window.location.href = `/detail/${contentId}`;
}}
key={item.contentsid}
>
<DetailCard
key={item.id}
title={item.title || '제목이 없습니다'}
city={item.region1cd?.label || '도시'}
street={
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
? '제주시내'
: item.region2cd?.label
}
description={item.introduction || '설명이 없습니다.'}
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
contentid={item?.contentsid}
/>
</button>
<DetailCard
key={item.id}
onClick={() => handleCardClick(item.contentsid)}
title={item.title || '제목이 없습니다'}
city={item.region1cd?.label || '도시'}
street={
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
? '제주시내'
: item.region2cd?.label
}
description={item.introduction || '설명이 없습니다.'}
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
contentid={item}
/>
);
case 'medium-layout':
return (
<button
className=" mr-10 [&:nth-child(3n)]:mr-0"
onClick={() => {
const contentId = item.contentsid;
window.location.href = `/detail/${contentId}`;
}}
key={item.contentsid}
>
<DetailMediumCard
key={item.id}
title={item.title || '제목이 없습니다'}
city={item.region1cd?.label || '도시'}
street={
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
? '제주시내'
: item.region2cd?.label
}
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
category={item.contentscd?.value}
contentid={item?.contentsid}
/>
</button>
<DetailMediumCard
key={item.id}
onClick={() => handleCardClick(item.contentsid)}
title={item.title || '제목이 없습니다'}
city={item.region1cd?.label || '도시'}
street={
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
? '제주시내'
: item.region2cd?.label
}
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
category={item.contentscd?.value}
contentid={item}
/>
);
case 'small-layout':
return (
<button
onClick={() => {
const contentId = item.contentsid;
window.location.href = `/detail/${contentId}`;
}}
key={item.contentsid || ''}
>
<DetailSmallCard
key={item.id}
title={item.title || '제목이 없습니다'}
city={item.region1cd?.label || '도시'}
street={
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
? '제주시내'
: item.region2cd?.label
}
description={item.introduction || '설명이 없습니다.'}
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
category={item.contentscd?.value}
contentid={item?.contentsid}
/>
</button>
<DetailSmallCard
key={item.id}
onClick={() => handleCardClick(item.contentsid)}
title={item.title || '제목이 없습니다'}
city={item.region1cd?.label || '도시'}
street={
item.region2cd?.label == 'region>' || item.region2cd?.label == undefined
? '제주시내'
: item.region2cd?.label
}
description={item.introduction || '설명이 없습니다.'}
img={item.repPhoto?.photoid?.thumbnailpath || '/images/no_image.svg'}
category={item.contentscd?.value}
contentid={item}
/>
);
default:
return null;
Expand Down

0 comments on commit f85d374

Please sign in to comment.