diff --git a/src/api/axios.ts b/src/api/axios.ts index 535bb1f..a35ed2d 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -18,7 +18,7 @@ export interface ApiRequestResponse { errorMessage?: string | null; } -export const BASE_URL = import.meta.env.VITE_APP_BASE_URL || "http://api.course-maker.net:8080"; +export const BASE_URL = import.meta.env.VITE_APP_BASE_URL || "https://api.course-maker.net:9090"; // 기본 Axios 설정 export const api = axios.create({ diff --git a/src/assets/images/main/2.svg b/src/assets/images/main/2.svg index 886ec80..0ce9306 100644 --- a/src/assets/images/main/2.svg +++ b/src/assets/images/main/2.svg @@ -3,7 +3,7 @@ - + diff --git a/src/assets/images/main/4.svg b/src/assets/images/main/4.svg index 4285c2d..dee0e65 100644 --- a/src/assets/images/main/4.svg +++ b/src/assets/images/main/4.svg @@ -3,7 +3,7 @@ - + diff --git a/src/components/commons/BadgeList/BadgeList.tsx b/src/components/commons/BadgeList/BadgeList.tsx index 5b48e9d..2e1851b 100644 --- a/src/components/commons/BadgeList/BadgeList.tsx +++ b/src/components/commons/BadgeList/BadgeList.tsx @@ -17,11 +17,13 @@ interface BadgeListProps { const BadgeList: React.FC = ({ title, tags, selectedBadges = [], setSelectedBadges, onToggle }) => { const toggleBadge = (badge: tagResponseDto) => { - if (!setSelectedBadges) return; + if (!setSelectedBadges) { + return; + } setSelectedBadges((prevSelected) => { if (prevSelected.some((prev) => prev.id === badge.id)) { - return prevSelected.filter((item) => item !== badge); + return prevSelected.filter((item) => item.id !== badge.id); } else { return [...prevSelected, badge]; } diff --git a/src/components/commons/Card/Card2.tsx b/src/components/commons/Card/Card2.tsx index 5341844..33e9410 100644 --- a/src/components/commons/Card/Card2.tsx +++ b/src/components/commons/Card/Card2.tsx @@ -62,6 +62,7 @@ const Card2: React.FC = ({ item, name, loading, isCourseTab, children name={name} title={item.title} travelerCount={item.travelerCount} + averageRating={item.averageRating} views={formatNumberWithCommas(item.views)} duration={item.duration} /> diff --git a/src/components/commons/ItemBox/ItemBox.module.scss b/src/components/commons/ItemBox/ItemBox.module.scss index 87cf2ac..75809e3 100644 --- a/src/components/commons/ItemBox/ItemBox.module.scss +++ b/src/components/commons/ItemBox/ItemBox.module.scss @@ -17,6 +17,8 @@ // color: $Black; font-size: 1.8rem; font-weight: 700; + text-align: left !important; + line-height: 12px; } .item-location { diff --git a/src/components/commons/ItemBox/ItemBox.tsx b/src/components/commons/ItemBox/ItemBox.tsx index b17d42b..caa9f4e 100644 --- a/src/components/commons/ItemBox/ItemBox.tsx +++ b/src/components/commons/ItemBox/ItemBox.tsx @@ -25,10 +25,25 @@ interface ItemBoxProps { } const ItemBox: React.FC = ({ location, title, tags, name, travelerCount, views, duration, color }) => { + const splitTitle = (title: string) => { + const parts = []; + for (let i = 0; i < title.length; i += 10) { + parts.push(title.slice(i, i + 10)); + } + return parts; + }; + + const titleParts = typeof title === "string" ? splitTitle(title) : []; + return (
-

{title}

+ {titleParts.map((part, index) => ( + + {part} + + ))} + {/*

{title}

*/} {name === "코스 찾기" ? (

조회수 {views} 회

) : ( diff --git a/src/components/commons/ItemBox/ItemBox2.tsx b/src/components/commons/ItemBox/ItemBox2.tsx index 8776557..6a29260 100644 --- a/src/components/commons/ItemBox/ItemBox2.tsx +++ b/src/components/commons/ItemBox/ItemBox2.tsx @@ -63,7 +63,7 @@ const ItemBox: React.FC = ({
- {travelerCount}점 + {averageRating}점
) : ( diff --git a/src/components/domains/destinationRegister/TitleInputController.tsx b/src/components/domains/destinationRegister/TitleInputController.tsx index 8c215e4..57153f5 100644 --- a/src/components/domains/destinationRegister/TitleInputController.tsx +++ b/src/components/domains/destinationRegister/TitleInputController.tsx @@ -16,7 +16,7 @@ const TitleInputController = ({ } + render={({ field }) => } /> ); }; diff --git a/src/hooks/business/useBadgeListViewModel.ts b/src/hooks/business/useBadgeListViewModel.ts index fa310cc..4471702 100644 --- a/src/hooks/business/useBadgeListViewModel.ts +++ b/src/hooks/business/useBadgeListViewModel.ts @@ -10,7 +10,6 @@ export const useBadgeListViewModel = () => { //태그 데이터 패칭 여부 확인 if (isTagLoading) { - console.log("Loading tags data..."); return { isTagLoading, tagData: null }; } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index cbec961..9662f25 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -1,5 +1,5 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +// import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { RecoilRoot } from "recoil"; import PageRouter from "./PageRouter"; @@ -16,7 +16,7 @@ function App() { <> - + {/* */} diff --git a/src/pages/HomePage/HomePage.module.scss b/src/pages/HomePage/HomePage.module.scss index a1c5979..e89a4d6 100644 --- a/src/pages/HomePage/HomePage.module.scss +++ b/src/pages/HomePage/HomePage.module.scss @@ -23,6 +23,15 @@ position: relative; } + .card-content-number { + position: absolute; + top: 16px; + color: white; + left: 16px; + font-size: 30px; + font-weight: 700; + } + .card-image { height: 28rem; width: 100%; @@ -49,6 +58,18 @@ font-weight: bold; } + .txt-title { + p { + font-size: 16px; + font-weight: 700; + text-align: left; + + @media (max-width: 375px) { + font-size: 10px; + } + } + } + .card-title { font-size: 16px; diff --git a/src/pages/HomePage/data.ts b/src/pages/HomePage/data.ts index 76b7b28..062905d 100644 --- a/src/pages/HomePage/data.ts +++ b/src/pages/HomePage/data.ts @@ -1,5 +1,12 @@ import { IMAGES } from "@/constants/images"; +export const LikeMockData = [ + { id: 0, url: "http://tong.visitkorea.or.kr/cms/resource/37/3029337_image2_1.jpg" }, + { id: 1, url: "http://tong.visitkorea.or.kr/cms/resource/90/2795790_image2_1.jpg" }, + { id: 2, url: "http://tong.visitkorea.or.kr/cms/resource/82/3345882_image2_1.jpg" }, + { id: 3, url: "http://tong.visitkorea.or.kr/cms/resource/71/2795871_image2_1.jpg" }, +]; + export const bannerData = [ { id: 0, @@ -21,25 +28,25 @@ export const bannerData = [ export const busanData = [ { - id: 3, - name: "마음이 평화로워지는 역사 탐방", - location: "박물관 여행", - image: IMAGES.One.src, + id: 36, + name: "잊지 못할 부산/n즐거움이 가득한", + location: "체험학습 추천 코스", + image: "http://tong.visitkorea.or.kr/cms/resource/37/2781837_image2_1.jpg", icons: { - calendar: 2, - member: 2, - blackStar: 2, + calendar: 22, + member: 27, + blackStar: 12, }, tags: [ { id: 0, name: "자연", description: "바다" }, - { id: 1, name: "자연", description: "둘레길" }, + { id: 1, name: "날씨", description: "실내공간" }, ], }, { - id: 27, - name: "부산의 숨은 명소 한국의 산토리니", - location: "영도", - image: IMAGES.Two.src, + id: 37, + name: "부산의 숨은 명소/n쉬면서 즐기는", + location: "피크닉 투어", + image: "http://tong.visitkorea.or.kr/cms/resource/52/2961452_image2_1.jpeg", icons: { calendar: 102, member: 21, @@ -51,25 +58,25 @@ export const busanData = [ ], }, { - id: 13, - name: "마음의 양식을 채우는 시간", - location: "문화공간투어", - image: IMAGES.Three.src, + id: 23, + name: "마음이 평화로워지는/n역사 탐방", + location: "박물관 여행", + image: "https://myawsbucket0154.s3.ap-northeast-2.amazonaws.com/28a8d5d2-98a1-4b2d-adc3-a45d302f1259.jfif", icons: { - calendar: 22, - member: 27, - blackStar: 12, + calendar: 2, + member: 2, + blackStar: 2, }, tags: [ { id: 0, name: "자연", description: "바다" }, - { id: 1, name: "날씨", description: "실내공간" }, + { id: 1, name: "자연", description: "둘레길" }, ], }, { - id: 2, - name: "가슴이 뻥뚫리는 바다 위를 건너가는", - location: "송도 케이블카", - image: IMAGES.Four.src, + id: 34, + name: "가슴이 뻥뚫리는/n바다 위를 건너가는", + location: "바다사진 촬영스팟", + image: " http://tong.visitkorea.or.kr/cms/resource/48/2832648_image2_1.jpg", icons: { calendar: 72, member: 827, @@ -138,7 +145,7 @@ export const bannerItemsData = { subtitle: "해운대 그린레일웨이", title: "바다를 따라 다니며\n육지와는 다른 풍경을 즐기세요", size: "large", - url: "destination/1091", + url: "destination/1092", }, { id: 1, @@ -150,7 +157,7 @@ export const bannerItemsData = { subtitle: "부산 필수코스", title: "부산이 처음이라면\n여기부터 가보셔야죠", size: "large", - url: "course/18", + url: "course/38", }, ], }; diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx index 97eded4..b68a6b9 100644 --- a/src/pages/HomePage/index.tsx +++ b/src/pages/HomePage/index.tsx @@ -9,6 +9,7 @@ import ItemBox from "@/components/commons/ItemBox/ItemBox"; import Banner from "@/components/commons/Banner/Banner"; import SearchBar from "@/components/commons/SearchBar"; import Image from "@/components/commons/Image"; +import Text from "@/components/commons/Text"; import styles from "./HomePage.module.scss"; import classNames from "classnames/bind"; @@ -19,7 +20,7 @@ import { useGetCourseSearchQuery } from "@/hooks/course/queries/useGetCourseSear import { useGetCourseQuery } from "@/hooks/course/queries/useGetCourseQuery"; import { DestinationBadgesState } from "@/recoil/serviceAtom"; import { tagResponseDto } from "@/api/tag/type"; -import { bannerItemsData, busanData } from "./data.js"; +import { bannerItemsData, busanData, LikeMockData } from "./data.js"; const Card = lazy(() => import("@/components/commons/Card/Card")); const bannerItems = bannerItemsData; @@ -36,7 +37,7 @@ const HomePage = () => { const { courseSearchData } = useGetCourseSearchQuery(1, inputValue); // const { courseData: coursePopularData } = useGetCourseQuery("record=4&page=1&orderBy=POPULAR"); const { courseData: courseLikeData } = useGetCourseQuery("record=4&page=2&orderBy=LIKE"); - const [DestinationBadges, setDestinationBadgesState] = useRecoilState(DestinationBadgesState); + const [, setDestinationBadgesState] = useRecoilState(DestinationBadgesState); const navigate = useNavigate(); const handleInputChange = (e: React.ChangeEvent) => { @@ -69,8 +70,8 @@ const HomePage = () => { }, []); const handleClick = (tag: tagResponseDto) => { - setDestinationBadgesState([...DestinationBadges, tag]); - navigate(`search`, { state: { propsTagName: tag.name } }); + setDestinationBadgesState([tag]); + navigate(`search`); }; return (
@@ -115,8 +116,9 @@ const HomePage = () => {
{item.location}
- {/* {item.name} - {item.location} */} + + {/* {item.name} */} + {item.location}
@@ -128,10 +130,11 @@ const HomePage = () => {
}> - {courseLikeData?.contents.map((item) => ( + {courseLikeData?.contents.map((item, index) => (
- {item.title} + +
{ - const [activeTab, setActiveTab] = useState("여행지 찾기"); + const [activeTab, setActiveTab] = useRecoilState(activeTabState); const [inputValue, setInputValue] = useState(""); - const { isTagLoading, DestinationBadges, CourseBadges } = useBadgeListViewModel(); + const { DestinationBadges, CourseBadges } = useBadgeListViewModel(); const { destinationSearchData } = useGetDestinationSearchQuery(1, inputValue); const { courseSearchData } = useGetCourseSearchQuery(1, inputValue); const isCourseTab = activeTab === "코스 찾기"; - console.log(isTagLoading); const handleInputChange = (e: React.ChangeEvent) => { const value = e.target.value; diff --git a/src/utils/manageTokenInfo.ts b/src/utils/manageTokenInfo.ts index f185a20..ce2e019 100644 --- a/src/utils/manageTokenInfo.ts +++ b/src/utils/manageTokenInfo.ts @@ -37,7 +37,7 @@ export const refreshAccessToken = async () => { const refreshToken = getRefreshToken(); if (refreshToken) { try { - const response = await axios.post("http://api.course-maker.net:8080/v1/auth/reissue", { refreshToken }); + const response = await axios.post("https://api.course-maker.net:9090/v1/auth/reissue", { refreshToken }); return response.data.accessToken; } catch (error) { console.error("Failed to refresh access token", error);