Dev

src/api/axios.ts

@@ -18,7 +18,7 @@ export interface ApiRequestResponse<T> {
   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({

src/components/commons/BadgeList/BadgeList.tsx

@@ -17,11 +17,13 @@ interface BadgeListProps {
 
 const BadgeList: React.FC<BadgeListProps> = ({ 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];
       }

src/components/commons/Card/Card2.tsx

@@ -62,6 +62,7 @@ const Card2: React.FC<CardProps> = ({ item, name, loading, isCourseTab, children
                 name={name}
                 title={item.title}
                 travelerCount={item.travelerCount}
+                averageRating={item.averageRating}
                 views={formatNumberWithCommas(item.views)}
                 duration={item.duration}
               />

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 {

src/components/commons/ItemBox/ItemBox.tsx

@@ -25,10 +25,25 @@ interface ItemBoxProps {
 }
 
 const ItemBox: React.FC<ItemBoxProps> = ({ 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 (
     <div className={cx("item-box")}>
       <div className={cx("title-group")}>
-        <p className={cx("item-title")}>{title}</p>
+        {titleParts.map((part, index) => (
+          <span key={index} className={cx("item-title")}>
+            {part}
+          </span>
+        ))}
+        {/* <p className={cx("item-title")}>{title}</p> */}
         {name === "코스 찾기" ? (
           <p className={cx("item-location")}>조회수 {views} 회</p>
         ) : (

src/components/commons/ItemBox/ItemBox2.tsx

@@ -63,7 +63,7 @@ const ItemBox: React.FC<ItemBoxProps> = ({
             </div>
             <div className={cx("score-item-course")}>
               <Image imageInfo={color === "white" ? IMAGES.WhiteStarIcon : IMAGES.BlackStarIcon} />
-              <span className={cx("score-text")}>{travelerCount}점</span>
+              <span className={cx("score-text")}>{averageRating}점</span>
             </div>
           </div>
         ) : (

src/components/domains/destinationRegister/TitleInputController.tsx

@@ -16,7 +16,7 @@ const TitleInputController = <ControlType extends FieldValues>({
     <Controller
       name={formFieldName}
       control={control}
-      render={({ field }) => <TitleInput placeholder="여행지 이름을 입력하세요." disabled={disabled} {...field} />}
+      render={({ field }) => <TitleInput placeholder="코스 이름을 입력하세요." disabled={disabled} {...field} />}
     />
   );
 };

src/hooks/business/useBadgeListViewModel.ts

@@ -10,7 +10,6 @@ export const useBadgeListViewModel = () => {
 
   //태그 데이터 패칭 여부 확인
   if (isTagLoading) {
-    console.log("Loading tags data...");
     return { isTagLoading, tagData: null };
   }
 

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() {
     <>
       <RecoilRoot>
         <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools initialIsOpen={false} />
+          {/* <ReactQueryDevtools initialIsOpen={false} /> */}
           <PageRouter />
         </QueryClientProvider>
       </RecoilRoot>

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;
 

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",
     },
   ],
 };

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<HTMLInputElement>) => {
@@ -69,8 +70,8 @@ const HomePage = () => {
   }, []);
 
   const handleClick = (tag: tagResponseDto) => {
-    setDestinationBadgesState([...DestinationBadges, tag]);
-    navigate(`search`, { state: { propsTagName: tag.name } });
+    setDestinationBadgesState([tag]);
+    navigate(`search`);
   };
   return (
     <div data-testid="home-page">
@@ -115,8 +116,9 @@ const HomePage = () => {
                 <div className={cx("card-image-container")}>
                   <img loading="lazy" alt={item.location} src={item.image} className={cx("card-image")} />
                   <div className={cx("card-content")}>
-                    {/* <span className={cx("card-title")}>{item.name}</span>
-                    <span className={cx("card-subtitle")}>{item.location}</span> */}
+                    <Text className={cx("txt-title")} text={item.name} />
+                    {/* <span className={cx("card-title")}>{item.name}</span> */}
+                    <span className={cx("card-subtitle")}>{item.location}</span>
                   </div>
                 </div>
               </Card>
@@ -128,10 +130,11 @@ const HomePage = () => {
       <Section title="요즘 인기있는 코스">
         <div className={cx("card_container")}>
           <Suspense fallback={<LoadingSkeleton />}>
-            {courseLikeData?.contents.map((item) => (
+            {courseLikeData?.contents.map((item, index) => (
               <Card key={item.id} name={"코스 찾기"} id={item.id}>
                 <div className={cx("card-image-container")}>
-                  <img loading="lazy" alt={item.title} src={item.pictureLink} className={cx("card-image")} />
+                  <img src={LikeMockData[index].url} className={cx("card-image")} />
+                  <Text className={cx("card-content-number")} text={index + 1} />
                   <div className={cx("card-content")}>
                     <ItemBox
                       color="white"

src/pages/SearchPage/index.tsx

@@ -1,7 +1,5 @@
 import { useState } from "react";
-// import { useLocation } from "react-router-dom";
-import styles from "./SearchPage.module.scss";
-import classNames from "classnames/bind";
+import { useRecoilState } from "recoil";
 
 import SearchBadgeLists from "@/components/commons/BadgeLists/SearchBadgeLists";
 import TabNavigation from "@/components/commons/TabNavigation/TabNavigation";
@@ -12,17 +10,19 @@ import SearchBar from "@/components/commons/SearchBar";
 import { useGetDestinationSearchQuery } from "@/hooks/destination/queries/useGetDestinationSearchQuery";
 import { useGetCourseSearchQuery } from "@/hooks/course/queries/useGetCourseSearchQuery";
 import { useBadgeListViewModel } from "@/hooks/business/useBadgeListViewModel";
+import { activeTabState } from "@/recoil/serviceAtom";
 
+import styles from "./SearchPage.module.scss";
+import classNames from "classnames/bind";
 const cx = classNames.bind(styles);
 
 const SearchPage = () => {
-  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<HTMLInputElement>) => {
     const value = e.target.value;

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);