Merge pull request #197 from SOPT-all/develop

[DEPLOY] dev to main
SOPT-all · Jan 23, 2025 · 667f370 · 667f370
2 parents 7e180f1 + a8d4ca7
commit 667f370
Show file tree

Hide file tree

Showing 28 changed files with 240 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -19,6 +19,6 @@
     <script type="module" src="/src/main.tsx"></script>
     <script
       type="text/javascript"
-      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xflkwfbdso"></script>
+      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=%VITE_NAVER_API_KEY%"></script>
   </body>
 </html>
diff --git a/src/assets/images/img_gray_light_leaf_medium.png b/src/assets/images/img_gray_light_leaf_medium.png
diff --git a/src/assets/images/img_gray_light_leaf_small.png b/src/assets/images/img_gray_light_leaf_small.png
diff --git a/src/components/card/popularCard/PopularCard.tsx b/src/components/card/popularCard/PopularCard.tsx
@@ -29,6 +29,13 @@ const PopularCard = ({
 
   const handleLikeClick = (e: React.MouseEvent) => {
     e.stopPropagation();
+
+    const userId = Number(localStorage.getItem('userId'));
+    if (!userId) {
+      onLikeToggle(liked);
+      return;
+    }
+
     setLiked((prev) => !prev);
     onLikeToggle(liked);
   };

diff --git a/src/components/card/reviewCard/reviewCard/ReviewCard.tsx b/src/components/card/reviewCard/reviewCard/ReviewCard.tsx
@@ -1,4 +1,5 @@
-import Icon from '@assets/svgs';
+import emptyMediumImage from '@assets/images/img_gray_light_leaf_medium.png';
+import emptySmallImage from '@assets/images/img_gray_light_leaf_small.png';
 
 import * as styles from './reviewCard.css';
 import CardInfo from '../cardInfo/CardInfo';
@@ -25,14 +26,15 @@ const ReviewCard = ({
   const handleButtonClick = () => {
     window.open(reviewLink, '_blank');
   };
+  const emptyImage = size === 'small' ? emptyMediumImage : emptySmallImage;
 
   return (
     <button className={styles.cardContainer({ size })} onClick={handleButtonClick}>
       {blogImage ? (
         <img className={styles.cardImage({ size })} src={blogImage} alt="thumbnail" />
       ) : (
         <div className={styles.emptyImage({ size })}>
-          <Icon.IcnEmptyImage />
+          <img src={emptyImage} alt="빈 이미지"></img>
         </div>
       )}
       <div className={styles.cardContent({ size })}>

diff --git a/src/components/card/templeStayCard/TempleStayCard.tsx b/src/components/card/templeStayCard/TempleStayCard.tsx
@@ -1,3 +1,4 @@
+import errorImage from '@assets/images/img_gray_light_leaf_medium.png';
 import InfoSection from '@components/card/templeStayCard/InfoSection';
 import FlowerIcon from '@components/common/icon/flowerIcon/FlowerIcon';
 import { useState } from 'react';
@@ -11,11 +12,12 @@ interface TempleStayCardProps {
   tag: string;
   region: string;
   type: string;
-  imgUrl: string;
+  imgUrl?: string;
   liked: boolean;
   layout: 'vertical' | 'horizontal';
   onToggleWishlist: (templestayId: number, liked: boolean) => void;
   onClick?: () => void;
+  onRequireLogin?: () => void;
 }
 
 const TempleStayCard = ({
@@ -30,12 +32,20 @@ const TempleStayCard = ({
   layout,
   onToggleWishlist,
   onClick,
+  onRequireLogin,
 }: TempleStayCardProps) => {
   const [isWished, setIsWished] = useState(liked);
   const isHorizontal = layout === 'horizontal';
 
   const onClickWishBtn = (e: React.MouseEvent) => {
     e.stopPropagation();
+
+    const userId = Number(localStorage.getItem('userId'));
+    if (!userId) {
+      onRequireLogin?.();
+      return;
+    }
+
     setIsWished((prev) => !prev);
     onToggleWishlist(templestayId, isWished);
   };
@@ -45,16 +55,25 @@ const TempleStayCard = ({
       className={isHorizontal ? styles.horizontalContainer : styles.verticalContainer}
       onClick={onClick}
       role="presentation">
-      <section className={isHorizontal ? styles.horizontalImgSection : styles.verticalImgSection}>
-        <img
-          className={isHorizontal ? styles.horizontalImage : styles.verticalImage}
-          src={imgUrl}
-          alt={templeName + ' 대표사진'}
-        />
-        <button className={styles.wishBtn} onClick={onClickWishBtn}>
-          <FlowerIcon isActive={isWished} />
-        </button>
-      </section>
+      {imgUrl ? (
+        <section className={isHorizontal ? styles.horizontalImgSection : styles.verticalImgSection}>
+          <img
+            className={isHorizontal ? styles.horizontalImage : styles.verticalImage}
+            src={imgUrl}
+            alt={templeName + ' 대표사진'}
+          />
+          <button className={styles.wishBtn} onClick={onClickWishBtn}>
+            <FlowerIcon isActive={isWished} />
+          </button>
+        </section>
+      ) : (
+        <div
+          className={
+            isHorizontal ? styles.horizontalEmptyImgSection : styles.verticalEmptyImgSection
+          }>
+          <img src={errorImage} alt="빈이미지"></img>
+        </div>
+      )}
 
       <InfoSection
         templeName={templeName}

diff --git a/src/components/card/templeStayCard/searchCardList/SearchCardList.tsx b/src/components/card/templeStayCard/searchCardList/SearchCardList.tsx
@@ -17,9 +17,15 @@ interface SearchCardListProps {
   }[];
   layout: 'vertical' | 'horizontal';
   onToggleWishlist: (templestayId: number, liked: boolean) => void;
+  onRequireLogin?: () => void;
 }
 
-const SearchCardList = ({ data, layout = 'horizontal', onToggleWishlist }: SearchCardListProps) => {
+const SearchCardList = ({
+  data,
+  layout = 'horizontal',
+  onToggleWishlist,
+  onRequireLogin,
+}: SearchCardListProps) => {
   const navigate = useNavigate();
 
   const handleCardClick = (templestayId: number) => {
@@ -42,6 +48,7 @@ const SearchCardList = ({ data, layout = 'horizontal', onToggleWishlist }: Searc
           layout={layout}
           onToggleWishlist={onToggleWishlist}
           onClick={() => handleCardClick(temple.templestayId)}
+          onRequireLogin={onRequireLogin}
         />
       ))}
     </section>

diff --git a/src/components/card/templeStayCard/templeStayCard.css.ts b/src/components/card/templeStayCard/templeStayCard.css.ts
@@ -76,3 +76,41 @@ export const wishBtn = style({
 
   zIndex: '2',
 });
+
+export const verticalEmptyImgSection = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: '4px',
+  backgroundColor: theme.COLORS.gray2,
+
+  transition: '0.15s ease-out',
+
+  selectors: {
+    [`${verticalContainer}:hover &`]: {
+      filter: 'brightness(88%)',
+    },
+  },
+});
+
+export const horizontalEmptyImgSection = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: '4px 0 0 4px',
+  backgroundColor: theme.COLORS.gray2,
+
+  transition: '0.15s ease-out',
+
+  selectors: {
+    [`${horizontalContainer}:hover &`]: {
+      filter: 'brightness(88%)',
+    },
+  },
+});
diff --git a/src/components/card/templeStayCard/wishCardList/WishCardList.tsx b/src/components/card/templeStayCard/wishCardList/WishCardList.tsx
@@ -11,7 +11,7 @@ interface WishCardListProps {
     tag: string;
     region: string;
     type: string;
-    imgUrl: string;
+    imgUrl?: string;
     liked: boolean;
   }[];
   layout: 'vertical' | 'horizontal';

diff --git a/src/components/carousel/detailCarousel/DetailCarousel.tsx b/src/components/carousel/detailCarousel/DetailCarousel.tsx
@@ -1,4 +1,5 @@
 import useGetTempleImages from '@apis/templeImages';
+import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import useCarousel from '@hooks/useCarousel';
 import registDragEvent from '@utils/registDragEvent';
 import { useParams } from 'react-router-dom';
@@ -16,11 +17,11 @@ const DetailCarousel = () => {
   });
 
   if (isLoading) {
-    return <p>Loading...</p>;
+    return <ExceptLayout type="loading" />;
   }
 
   if (isError) {
-    return <p>Error</p>;
+    return <ExceptLayout type="networkError" />;
   }
 
   if (!data) {

diff --git a/src/components/carousel/detailCarousel/DetailImage.tsx b/src/components/carousel/detailCarousel/DetailImage.tsx
@@ -1,3 +1,4 @@
+import LargeEmptyImage from '@assets/images/img_gray_light_leaf_large.png';
 import useNavigateTo from '@hooks/useNavigateTo';
 import { useParams } from 'react-router-dom';
 
@@ -6,17 +7,16 @@ import NumberTag from './numberTag/NumberTag';
 
 interface ImageItemProps {
   id: number;
-  imgUrl: string;
+  imgUrl?: string;
   currentNum: number;
-  totalNum: number;
+  totalNum?: number;
 }
 
 const ImageItem = ({ id, imgUrl, currentNum, totalNum }: ImageItemProps) => {
   const { templestayId } = useParams();
 
   const navigateToPhoto = useNavigateTo(`/detail/${templestayId}/photo`);
-
-  return (
+  return totalNum ? (
     <div
       role="button"
       tabIndex={0}
@@ -33,6 +33,10 @@ const ImageItem = ({ id, imgUrl, currentNum, totalNum }: ImageItemProps) => {
         <NumberTag currentNum={currentNum} totalNum={totalNum} />
       </div>
     </div>
+  ) : (
+    <div className={styles.emptyImageContainer}>
+      <img src={LargeEmptyImage} alt="빈 이미지"></img>
+    </div>
   );
 };
 

diff --git a/src/components/carousel/detailCarousel/detailCarousel.css.ts b/src/components/carousel/detailCarousel/detailCarousel.css.ts
@@ -1,3 +1,4 @@
+import theme from '@styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const imageWrapper = style({
@@ -35,3 +36,13 @@ export const numberStyle = style({
   right: '0.8rem',
   zIndex: 2,
 });
+
+export const emptyImageContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '21rem',
+  width: '33.5rem',
+  backgroundColor: theme.COLORS.gray2,
+  borderRadius: 4,
+});
diff --git a/src/components/carousel/detailCarousel/numberTag/NumberTag.tsx b/src/components/carousel/detailCarousel/numberTag/NumberTag.tsx
@@ -1,8 +1,8 @@
 import Tag from '@components/common/tag/Tag';
 
 interface numberTagProps {
-  currentNum: number;
-  totalNum: number;
+  currentNum?: number;
+  totalNum?: number;
 }
 
 const NumberTag = ({ currentNum, totalNum }: numberTagProps) => {

diff --git a/src/components/carousel/popularCarousel/PopularCarousel.tsx b/src/components/carousel/popularCarousel/PopularCarousel.tsx
@@ -2,6 +2,7 @@ import useGetRanking from '@apis/ranking';
 import { useAddWishlist, useRemoveWishlist } from '@apis/wish';
 import PopularCard from '@components/card/popularCard/PopularCard';
 import CarouselIndex from '@components/carousel/popularCarousel/CarouselIndex';
+import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import useCarousel from '@hooks/useCarousel';
 import { useQueryClient } from '@tanstack/react-query';
 import registDragEvent from '@utils/registDragEvent';
@@ -10,7 +11,11 @@ import { useNavigate } from 'react-router-dom';
 
 import * as styles from './popularCarousel.css';
 
-const PopularCarousel = () => {
+interface PopularCarouselProps {
+  onRequireLogin: () => void;
+}
+
+const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
   const userId = Number(localStorage.getItem('userId'));
   const queryClient = useQueryClient();
 
@@ -28,16 +33,20 @@ const PopularCarousel = () => {
   const navigate = useNavigate();
 
   if (isLoading) {
-    return <p>Loading...</p>;
+    return <ExceptLayout type="loading" />;
   }
 
   if (isError) {
-    return <p>Error</p>;
+    return <ExceptLayout type="networkError" />;
   }
 
   const handleLikeToggle = (templestayId: number, liked: boolean) => {
-    const mutation = liked ? removeWishlistMutation : addWishlistMutation;
+    if (!userId) {
+      onRequireLogin();
+      return;
+    }
 
+    const mutation = liked ? removeWishlistMutation : addWishlistMutation;
     mutation.mutate(
       { userId, templestayId },
       {

diff --git a/src/components/common/button/buttonBar/buttonBar.css.ts b/src/components/common/button/buttonBar/buttonBar.css.ts
@@ -6,7 +6,7 @@ const buttonBarContainer = style({
   bottom: 0,
   left: '50%',
   transform: 'translateX(-50%)',
-  zIndex: 999,
+  zIndex: 1,
 
   display: 'flex',
   alignItems: 'center',

diff --git a/src/components/common/modal/modal.css.ts b/src/components/common/modal/modal.css.ts
@@ -7,6 +7,9 @@ export const modalContainer = style({
   alignItems: 'center',
   gap: '2.8rem',
   position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
 
   width: '33.1rem',
   height: '18.1rem',
@@ -21,10 +24,13 @@ export const modalBackdrop = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  position: 'absolute',
+  top: 0,
+  left: 0,
 
   zIndex: 3,
   width: '100%',
-  height: '100vh',
+  height: 'calc(100% + 1.2rem)',
   background: theme.COLORS.black60,
 
   marginTop: '-1.2rem',

diff --git a/src/components/common/pageName/PageName.tsx b/src/components/common/pageName/PageName.tsx
@@ -10,7 +10,7 @@ interface PageNameProps {
   isLiked?: boolean;
 }
 
-const PageName = ({ title, onRightClick, isLikeBtn = true, isLiked = false }: PageNameProps) => {
+const PageName = ({ title, onRightClick, isLikeBtn = true, isLiked = true }: PageNameProps) => {
   const handleToBack = useNavigateTo('/');
 
   return (

diff --git a/src/components/templeDetail/naverMap/smallMap/SmallMap.tsx b/src/components/templeDetail/naverMap/smallMap/SmallMap.tsx
@@ -15,6 +15,7 @@ interface MapDataProps {
 const SmallMap = ({ detailAddress, latitude, longitude }: MapDataProps) => {
   const copyToClipboard = () => {
     navigator.clipboard.writeText(detailAddress);
+    alert('주소가 복사되었습니다.');
   };
 
   const { templestayId } = useParams();