release: 프론트엔드 v1.0.2

frontend/.vscode/settings.json

@@ -12,5 +12,5 @@
 
   "stylelint.config": null,
   "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"],
-  "cSpell.words": ["JSESSION", "tanstack", "zustand"]
+  "cSpell.words": ["JSESSION", "tanstack", "webp", "zustand"]
 }

frontend/.webpack/webpack.common.js

@@ -24,7 +24,7 @@ module.exports = {
         sideEffects: true,
       },
       {
-        test: /\.(jpg|jpeg|gif|png|ico)?$/,
+        test: /\.(jpg|jpeg|gif|png|ico|webp)?$/,
         type: 'asset',
         generator: {
           filename: 'images/[name][ext]',

frontend/src/@types/global.d.ts

@@ -2,6 +2,7 @@
 
 declare module '*.png';
 declare module '*.woff2';
+declare module '*.webp';
 declare module '*.svg' {
   import * as React from 'react';
 

frontend/src/components/@common/WaterMarkImage/WaterMarkImage.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { styled, css } from 'styled-components';
+import useOnClickBlock from '~/hooks/useOnClickBlock';
 import { BORDER_RADIUS, FONT_SIZE, paintSkeleton } from '~/styles/common';
 import { getImgUrl } from '~/utils/image';
 
@@ -12,13 +13,14 @@ interface WaterMarkImageProps {
 
 function WaterMarkImage({ waterMark, imageUrl, type, sns }: WaterMarkImageProps) {
   const [isImageLoading, setIsImageLoading] = useState<boolean>(true);
+  const register = useOnClickBlock({
+    callback: e => {
+      e.stopPropagation();
 
-  const onClickWaterMark = (e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    if (sns === 'INSTAGRAM') window.open(`https://www.instagram.com/${waterMark.substring(1)}`, '_blank');
-    if (sns === 'YOUTUBE') window.open(`https://www.youtube.com/${waterMark}`, '_blank');
-  };
+      if (sns === 'INSTAGRAM') window.open(`https://www.instagram.com/${waterMark.substring(1)}`, '_blank');
+      if (sns === 'YOUTUBE') window.open(`https://www.youtube.com/${waterMark}`, '_blank');
+    },
+  });
 
   return (
     <StyledWaterMarkImage type={type} isImageLoading={isImageLoading}>
@@ -33,7 +35,7 @@ function WaterMarkImage({ waterMark, imageUrl, type, sns }: WaterMarkImageProps)
         />
       </picture>
       {waterMark && (
-        <StyledWaterMark onClick={onClickWaterMark} aria-hidden="true">
+        <StyledWaterMark {...register} aria-hidden="true">
           {waterMark}
         </StyledWaterMark>
       )}

frontend/src/hooks/useOnClickBlock.ts

@@ -1,7 +1,7 @@
-import { useCallback, useState } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 
 interface UseOnClickBlockProps {
-  callback: () => void;
+  callback: (e?: MouseEvent) => void;
 }
 
 const useOnClickBlock = ({ callback }: UseOnClickBlockProps) => {
@@ -15,9 +15,9 @@ const useOnClickBlock = ({ callback }: UseOnClickBlockProps) => {
     setIsDragging(true);
   }, []);
 
-  const handleClick = () => {
+  const handleClick = (e: MouseEvent) => {
     if (isDragging) return;
-    callback();
+    callback(e);
   };
 
   return { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick };

frontend/src/index.tsx

@@ -16,7 +16,6 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
-      retry: 1,
     },
   },
 });

frontend/src/mocks/handler/mainPage/handler.ts

@@ -2,7 +2,7 @@ import { rest } from 'msw';
 import restaurants from '~/mocks/data/restaurants';
 import { recommendation } from '~/mocks/data/recommendation';
 import { RECOMMENDED_REGION } from '~/constants/recommendedRegion';
-import { getRandomNumber } from '~/utils/getRandomNumber';
+import { getRandomResponse } from '~/utils/getRandomResponse';
 
 export const newMainPageHandler = [
   rest.get('/address', (req, res, ctx) => {
@@ -18,9 +18,12 @@ export const newMainPageHandler = [
   }),
 
   rest.get('/main-page/recommendation', (req, res, ctx) => {
-    const responses = [res(ctx.status(401)), res(ctx.status(401)), res(ctx.status(200), ctx.json(recommendation))];
-    return responses[getRandomNumber()];
-    // return res(ctx.status(400), ctx.json(recommendation));
-    // return res(ctx.status(200), ctx.json(recommendation));
+    /** 에러바운더리를 테스트하려면 이 주석을 해제해주세요 */
+    // return getRandomResponse(
+    //   res(ctx.status(200), ctx.json(recommendation)),
+    //   res(ctx.status(400)),
+    // );
+
+    return res(ctx.status(200), ctx.json(recommendation));
   }),
 ];

frontend/src/mocks/handler/mapPages/handler.ts

@@ -6,7 +6,7 @@ import { profile } from '../../data/user';
 
 import type { Celeb } from '~/@types/celeb.types';
 import type { RestaurantData, RestaurantListData } from '~/@types/api.types';
-import { getRandomNumber } from '~/utils/getRandomNumber';
+import { getRandomResponse } from '~/utils/getRandomResponse';
 
 export const MainPageSuccessHandler = [
   rest.get('/restaurants', (req, res, ctx) => {
@@ -130,8 +130,8 @@ export const MainPageSuccessHandler = [
     const restaurant = restaurants.find(restaurant => restaurant.id === Number(restaurantId));
     restaurant.isLiked ? (restaurant['isLiked'] = false) : (restaurant['isLiked'] = true);
 
-    // const responses = [res(ctx.status(429)), res(ctx.status(429)), res(ctx.status(200))];
-    // return responses[getRandomNumber()];
+    /** 에러핸들링을 테스트하려면 이 주석을 해제해주세요 */
+    // return getRandomResponse(res(ctx.status(200)), res(ctx.status(429)))
 
     if (JSESSION === undefined) {
       return res(ctx.status(401), ctx.json({ message: '만료된 세션입니다.' }));

frontend/src/pages/RestaurantDetailPage/ImageViewer.tsx

@@ -1,15 +1,32 @@
 import { useQuery } from '@tanstack/react-query';
+import Slider from 'react-slick';
+import styled from 'styled-components';
 import { RestaurantData } from '~/@types/api.types';
 import { getRestaurantDetail } from '~/api/restaurant';
 import ImageCarousel from '~/components/@common/ImageCarousel';
-import ImageGrid from '~/components/@common/ImageGrid';
+import WaterMarkImage from '~/components/@common/WaterMarkImage';
 import useMediaQuery from '~/hooks/useMediaQuery';
+import Next from '~/assets/icons/arrow/next.svg';
+import Prev from '~/assets/icons/arrow/prev.svg';
+import { BORDER_RADIUS } from '~/styles/common';
+import noImageUrl from '~/assets/images/no-image.webp';
 
 interface ImageViewerProps {
   restaurantId: string;
   celebId: string;
 }
 
+const sliderProps = {
+  arrows: true,
+  dots: true,
+  infinite: true,
+  speed: 1000,
+  slidesToShow: 2,
+  slidesToScroll: 2,
+  nextArrow: <Next />,
+  prevArrow: <Prev />,
+};
+
 function ImageViewer({ restaurantId, celebId }: ImageViewerProps) {
   const { isMobile } = useMediaQuery();
 
@@ -23,7 +40,42 @@ function ImageViewer({ restaurantId, celebId }: ImageViewerProps) {
 
   if (isMobile) return <ImageCarousel type="list" images={images} showWaterMark />;
 
-  return <ImageGrid images={images.map(({ name: url, author, sns }) => ({ waterMark: author, url, sns }))} />;
+  if (images.length === 1) {
+    const { name: url, author, sns } = images[0];
+
+    return (
+      <Slider {...sliderProps}>
+        <SlideItem>
+          <WaterMarkImage type="list" imageUrl={url} waterMark={author} sns={sns} />
+        </SlideItem>
+        <SlideItem>
+          <StyledNoImage src={noImageUrl} />
+        </SlideItem>
+      </Slider>
+    );
+  }
+
+  return (
+    <Slider {...sliderProps}>
+      {images.map(({ name: url, author, sns }) => (
+        <SlideItem key={url}>
+          <WaterMarkImage type="list" imageUrl={url} waterMark={author} sns={sns} />
+        </SlideItem>
+      ))}
+    </Slider>
+  );
 }
 
 export default ImageViewer;
+
+const SlideItem = styled.li`
+  padding: 1.2rem;
+`;
+
+const StyledNoImage = styled.img`
+  width: 100%;
+
+  object-fit: cover;
+
+  border-radius: ${BORDER_RADIUS.md};
+`;

frontend/src/pages/RestaurantDetailPage/Skeleton.tsx

@@ -62,8 +62,6 @@ const StyledHeader = styled.div`
   flex-direction: column;
   gap: 0.8rem 0;
 
-  width: calc(100vw - 2.4rem);
-
   padding: 1.2rem 0 2.4rem;
 
   & > div:first-child {
@@ -85,7 +83,6 @@ const StyledHeader = styled.div`
 
 const StyledImageViewer = styled.div`
   ${paintSkeleton}
-  width: calc(100vw - 2.4rem);
   height: calc((100vw - 2.4rem) * 0.9);
 
   padding: 2.4rem 0;
@@ -98,8 +95,6 @@ const StyledDetailInformation = styled.div`
   flex-direction: column;
   gap: 2.4rem;
 
-  width: calc(100vw - 2.4rem);
-
   padding: 4.8rem 0;
 
   & > div {
@@ -114,15 +109,13 @@ const StyledDetailInformation = styled.div`
 
     & > div > div:first-child {
       ${paintSkeleton}
-      width: calc((100vw - 2.4rem) * 0.7);
       height: 24px;
 
       border-radius: ${BORDER_RADIUS.xs};
     }
 
     & > div > div:last-child {
       ${paintSkeleton}
-      width: calc((100vw - 2.4rem) * 0.5);
       height: 20px;
 
       border-radius: ${BORDER_RADIUS.xs};
@@ -135,16 +128,13 @@ const StyledLine = styled.div`
   flex-direction: column;
   gap: 1.2rem;
 
-  width: calc(100vw - 2.4rem);
-
   padding: 4.8rem 0;
 
   border-top: 1px solid var(--gray-2);
   border-bottom: 1px solid var(--gray-2);
 
   & > div {
     ${paintSkeleton}
-    width: calc((100vw - 2.4rem) * 0.6);
     height: 24px;
 
     border-radius: ${BORDER_RADIUS.xs};
@@ -153,7 +143,6 @@ const StyledLine = styled.div`
 
 const StyledBox = styled.div`
   ${paintSkeleton}
-  width: calc(100vw - 2.4rem);
   height: 120px;
 
   border-radius: ${BORDER_RADIUS.md};

frontend/src/utils/getRandomResponse.ts

@@ -0,0 +1,9 @@
+export const getRandomResponse = <T>(successResponse: T, failureResponse: T): T => {
+  const probability = Math.floor(Math.random() * 10) + 1;
+
+  if (probability <= 8) {
+    return failureResponse;
+  }
+
+  return successResponse;
+};