Hotfix/#74/minha

src/apis/favorite.ts

@@ -21,9 +21,7 @@ export const useGetMyFavorite = (filterData: FilterType | null) => {
     () => FavoriteAPI.getMyFavorite(filterData),
     {
       enabled: false,
-      onSuccess: data => {
-        console.log(data);
-      },
+      onSuccess: () => {},
       onError: () => {},
     },
   );

src/apis/like/index.ts

@@ -5,14 +5,18 @@ export const postLike = async (
   type: string,
   id: number,
   setIsLike: React.Dispatch<React.SetStateAction<boolean>>,
+  handleLikeCount?: () => void,
 ) => {
   try {
     const res = await Axios.post(`/favorite/${type}`, null, {
       params: {
         [`${type}Id`]: id,
       },
     });
-    if (res?.data?.code === 200) setIsLike(prev => !prev);
+    if (res?.data?.code === 200) {
+      setIsLike(prev => !prev);
+      handleLikeCount && handleLikeCount();
+    }
     return;
   } catch (e) {
     console.error(e);

src/apis/manager.ts

@@ -63,7 +63,7 @@ export const ManagerAPI = {
         'Content-Type': 'multipart/form-data',
       },
     });
-    return response.data.result;
+    return response.data;
   },
 
   postEditProgram: async (formData: FormData) => {
@@ -72,7 +72,7 @@ export const ManagerAPI = {
         'Content-Type': 'multipart/form-data',
       },
     });
-    return response.data.result;
+    return response.data;
   },
 
   deleteTempProgram: async (id: number) => {
@@ -94,8 +94,6 @@ export const useFindTempProgram = (id: number | null) => {
     () => ManagerAPI.getFindTempProgram(),
     {
       enabled: id === null,
-      cacheTime: 500000,
-      staleTime: 500005,
       onSuccess: () => {},
       onError: () => {},
     },
@@ -147,9 +145,7 @@ export const useGetExistingProgram = (programId: number) => {
     {
       cacheTime: 500000,
       staleTime: 500005,
-      onSuccess: data => {
-        console.log(data);
-      },
+      onSuccess: () => {},
       onError: () => {},
     },
   );

src/apis/program.ts

@@ -51,9 +51,7 @@ export const useGetProgramDetailInfo = (programId: number) => {
     ['getProgramDetailInfo', programId],
     () => ProgramAPI.getProgramDetailInfo(programId),
     {
-      onSuccess: data => {
-        console.log(data);
-      },
+      onSuccess: () => {},
       onError: () => {},
     },
   );
@@ -87,9 +85,7 @@ export const useGetSimilarRecommend = ({
       enabled: writerVersion === null ? false : !writerVersion,
       cacheTime: 500000,
       staleTime: 500005,
-      onSuccess: data => {
-        console.log(data);
-      },
+      onSuccess: () => {},
       onError: () => {},
     },
   );
@@ -109,9 +105,7 @@ export const useGetRegionTour = ({
       enabled: writerVersion === null ? false : !writerVersion,
       cacheTime: 500000,
       staleTime: 500005,
-      onSuccess: data => {
-        console.log(data);
-      },
+      onSuccess: () => {},
       onError: () => {},
     },
   );
@@ -129,9 +123,7 @@ export const useGetRegionLodgment = ({
     {
       enabled: writerVersion === null ? false : !writerVersion,
       staleTime: 500005,
-      onSuccess: data => {
-        console.log(data);
-      },
+      onSuccess: () => {},
       onError: () => {},
     },
   );

src/components/Button/TranslucentLikeButton.tsx

@@ -9,14 +9,20 @@ interface Props {
   id: number;
   isLike: boolean;
   setIsLike: React.Dispatch<React.SetStateAction<boolean>>;
+  handleLikeCount: () => void;
 }
 
-const TranslucentLikeButton: React.FC<Props> = ({ id, isLike, setIsLike }) => {
+const TranslucentLikeButton: React.FC<Props> = ({
+  id,
+  isLike,
+  setIsLike,
+  handleLikeCount,
+}) => {
   // Todo: 인자로 id 전달받아서 서버에 찜 목록에 등록하는 API 연결
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      postLike('program', id, setIsLike);
+      postLike('program', id, setIsLike, handleLikeCount);
     },
     [isLike],
   );

src/components/Default/DefaultProgram.tsx

@@ -1,12 +1,14 @@
 import styled from 'styled-components';
 
-const DefaultProgram = () => {
+const DefaultProgram = ({ detail }: { detail?: boolean }) => {
   return (
     <Container>
-      <div className="text">
-        <span>이미지가 없어요!</span>
-        <span>클릭하여 상세내용을 확인해보세요!</span>
-      </div>
+      {detail && (
+        <div className="text">
+          <span>이미지가 없어요!</span>
+          <span>클릭하여 상세내용을 확인해보세요!</span>
+        </div>
+      )}
     </Container>
   );
 };

src/components/Header/Header.tsx

@@ -70,9 +70,16 @@ const Header = () => {
           >
             <img src={Logo} alt="character" />
           </LogoWrapper>
-          {HeaderData.map(({ main, dropDowns }) => (
+          {HeaderData.map(({ main, mainLink, dropDowns }) => (
             <NavBar key={main}>
-              <H3 $fontColor="#15191D">{main}</H3>
+              <H3
+                $fontColor="#15191D"
+                onClick={() =>
+                  navigate(mainLink, { state: { filter: '전체' } })
+                }
+              >
+                {main}
+              </H3>
               <Dropdown>
                 {dropDowns.map(({ title, link }, index) => (
                   <li key={index}>

src/components/Header/Layout.tsx

@@ -5,7 +5,7 @@ const Layout = () => {
   return (
     <>
       <Header />
-      <Outlet />;
+      <Outlet />
     </>
   );
 };

src/components/ProgramCard/ProgramCardItem.tsx

@@ -10,27 +10,51 @@ import { useEffect, useState } from 'react';
 const ProgramCardItem = ({ program }: { program: ProgramMainInfoType }) => {
   const navigate = useNavigate();
   const [isLike, setIsLike] = useState(false);
+  const [likeCount, setLikeCount] = useState(program.like);
+  const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
     setIsLike(program.userLikeCheck);
   }, [program]);
 
+  const handleLikeCount = () => {
+    if (program.userLikeCheck && likeCount === program.like) {
+      setLikeCount(likeCount - 1);
+    } else if (program.userLikeCheck && likeCount < program.like) {
+      setLikeCount(likeCount + 1);
+    } else if (!program.userLikeCheck && likeCount === program.like) {
+      setLikeCount(likeCount + 1);
+    } else if (!program.userLikeCheck && likeCount > program.like) {
+      setLikeCount(likeCount - 1);
+    }
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
   return (
     <Container
       onClick={() =>
         navigate(`/detailProgram/${program.programName}/${program.id}`)
       }
     >
-      {program.photoUrl === null || program.photoUrl === '' ? (
+      {program.photoUrl === null || program.photoUrl === '' || imageError ? (
         <DefaultProgramPreview />
       ) : (
-        <img className="poster" alt="program-poster" src={program.photoUrl} />
+        <img
+          className="poster"
+          alt="program-poster"
+          src={program.photoUrl}
+          onError={handleImageError}
+        />
       )}
       <LikeButtonWrapper>
         <TranslucentLikeButton
           id={program.id}
           isLike={isLike}
           setIsLike={setIsLike}
+          handleLikeCount={handleLikeCount}
         />
       </LikeButtonWrapper>
       <ProgramInfoContainer>
@@ -49,7 +73,7 @@ const ProgramCardItem = ({ program }: { program: ProgramMainInfoType }) => {
         </div>
         <div className="favorite-container">
           <img alt="favorite-icon" src={FavoriteIcon} />
-          <B3Bold $fontColor="var(--color_gray600)">{program.like}</B3Bold>
+          <B3Bold $fontColor="var(--color_gray600)">{likeCount}</B3Bold>
         </div>
       </ProgramInfoContainer>
     </Container>
@@ -71,12 +95,20 @@ const Container = styled.div`
 `;
 
 const ProgramInfoContainer = styled.div`
+  width: inherit;
   display: flex;
   flex-direction: column;
   align-items: start;
   padding-top: 16px;
   gap: 4px;
 
+  ${H3} {
+    width: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .hashTag-container {
     display: flex;
     flex-direction: row;

src/components/RecommendCard/RecommendCardItem.tsx

@@ -6,7 +6,6 @@ const RecommendCardItem = ({ result }: { result: RecommendDataType }) => {
   return (
     <Container>
       <img className="image" alt="image" src={result.photoUrl} />
-
       <CardInfoContainer>
         <H3 $fontColor="var(--color_gray900)">{result.title}</H3>
       </CardInfoContainer>
@@ -24,7 +23,7 @@ const Container = styled.div`
     width: 323px;
     height: 323px;
     border-radius: 20px;
-    //object-fit: cover;
+    object-fit: cover;
   }
 `;
 
@@ -34,6 +33,14 @@ const CardInfoContainer = styled.div`
   align-items: start;
   padding-top: 16px;
   gap: 4px;
+  width: inherit;
+
+  ${H3} {
+    width: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 export default RecommendCardItem;

src/constants/Register/index.ts

@@ -17,6 +17,7 @@ export const DEFAULT_REQUIRED_CONTENT: ProgramRegisterInfoType = {
 };
 
 export const LOCATION_LIST = [
+  '전국',
   '서울',
   '인천',
   '대전',
@@ -80,7 +81,7 @@ export const INPUT_FIELD: ProgramRegisterFieldType = {
   contact: {
     title: '문의처',
     placeholder: '문의처명을 입력해주세요.',
-    alertMessage: '문의처명을 입력해주세요.',
+    alertMessage: '문의처을 입력해주세요.',
   },
   contactPhone: {
     title: '',

src/constants/Search/index.ts

@@ -5,42 +5,42 @@ export const FILTER_LIST: FilterListType[] = [
   {
     title: '정렬',
     enTitle: 'orderCriteria',
-    buttonSize: 'small',
+    buttonSize: 'xs',
     calendar: false,
     items: ['최신순', '인기순', '빠른 마감 순', '늦은 마감 순'],
   },
   {
     title: '지역',
     enTitle: 'location',
-    buttonSize: 'small',
+    buttonSize: 's',
     calendar: false,
     items: LOCATION_LIST,
   },
   {
     title: '여행 프로그램',
     enTitle: 'programType',
-    buttonSize: 'large',
+    buttonSize: 'm',
     calendar: false,
     items: ['전체', '여행 지원사업', '여행 공모전', '여행 대외활동'],
   },
   {
     title: '세부 카테고리',
     enTitle: 'detailType',
-    buttonSize: 'medium',
+    buttonSize: 'm',
     calendar: false,
     items: [],
   },
   {
     title: '모집 기간',
     enTitle: 'recruitDate',
-    buttonSize: 'medium',
+    buttonSize: 'l',
     calendar: true,
     items: [],
   },
   {
     title: '여행 기간',
     enTitle: 'activeDate',
-    buttonSize: 'medium',
+    buttonSize: 'l',
     calendar: true,
     items: [],
   },

src/pages/DetailPosting/index.tsx

@@ -37,6 +37,10 @@ const Container = styled.div`
 
   width: 1440px;
   margin: 229px auto 0;
+
+  body:not(&) {
+    background-color: white;
+  }
 `;
 
 const Title = styled.pre`

src/pages/DetailProgram/HoneyTipButton.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import HoneyTipIcon from '@/assets/icons/honey_tip_icon.png';
+import HoneyTipIcon from '@/assets/icons/icon-honey-tip.png';
 import RoundedButton from '@/components/Button/RoundedButton';
 import { HiOutlineChevronRight } from 'react-icons/hi';
 import { B1Bold } from '@/style/fonts/StyledFonts';