[Beemo, ppamppam] side-dish FE 2주차 PR 03 (#70)

* Feat: Tabs 구현 * Feat: Model 레이아웃 상단 구성 * Feat: Model setImgSources추가 * add: merge * fix: merge * fix: carousel animation render fix * Test: 목업데이터로 요청해보기 setupProxy * Feat: 썸네일 클릭시 이미지 변경 * fix: 캐로셀 코드 개선 애니메이션 및 함수 분리 * Fix: 클릭시 모달창 띄우기 * add: 캐로셀 이벤트 모달 및 애니메이션 추가 * fix: 캐로셀 리팩토링 * fix: 필요없는 함수 삭제 * add: 캐로셀 커스텀 훅, upper 네비게이터, 디폴트 네비게이터 분리 * fix: 캐로셀 컨테이너 리팩토링 * Feat: 에러 이미지 처리 * fix: upper navigator를 위한 padding-top 처리 * fix: 캐로셀 모달 이벤트 꼼수 수정 * fix: useCarousel 커스텀훅 clean 함수 수정 * fix: 강제지정된 높이값 수정 * add: 메인디시 캐로셀 테스트를 위한 목업 작업 * fix: 모달 바텀 테스트 통한 작업 추가, BottomSide 조건부 렌더링 추가를 통한 리렌더링 처리 -> 향후 수정 예정 * fix: 리사이즈 디바운싱 처리 * fix: useCarousel hotfix * fix: 케로셀 width height 계산로직 에러 수정 * Fix: Hearder, Tabs 반응형으로 수정 * fix: fe_dev refactor project #48 import strategy change * Fix: 상대경로 절대경로로 수정하기 fix #48 * Fix: Card Tabs분기처리 fix #51 * Fix: error 처리 useReducer로 수정 fix #50 * Fix: key를 unique하게 수정 fix #50 * Feat: useAsync 함수 구현 fix #50 * add: 전체보기 버튼 추가 * fix: 탭 상단 라벨버튼 퍼블리싱 마진값 관련 개선 * fix: 캐로셀 offset 관련 에러 및 초기 렌더 깨지는 문제 해결 * fix: 버튼 컴포넌트 엔트리 변경 * fix: 팀 API 활용을 위한 엔드포인트 처리, 카테고리 불러오기 로직 초기작업 * Fix: useAsync 수정 * Fix: api수정하여 데이터 받는부분(변수명, split(', ') 등..) 수정 * Feat: 프론트엔드 빌드 파일 추가 * fix: Dish 관리 변경 * fix: z-index 처리 * add: 랜덤 불러오기 함수 추가 * fix: 모달 refetch관련 수정 * fix: modal refetch관련 카드 수정 * Fix: api수정되어 데이터 포맷 수정 * Fix: 모달 Bottom 간격수정, console 제거 * fix: z-index hotfix Co-authored-by: jeonyeonkyu <[email protected]> Co-authored-by: jeonyeonkyu <[email protected]> Co-authored-by: Jaeuk-YOO <[email protected]> Co-authored-by: 빰빰맨 <[email protected]>
codesquad-members-2021 · May 2, 2021 · e818d38 · e818d38
1 parent 6f7c82f
commit e818d38
Show file tree

Hide file tree

Showing 31 changed files with 561 additions and 246 deletions.
diff --git a/FE/package.json b/FE/package.json
@@ -36,5 +36,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com"
+  "proxy": "http://13.125.229.168:8080"
 }
diff --git a/FE/src/Components/Carousel/CarouselContainer.js b/FE/src/Components/Carousel/CarouselContainer.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 
 import CarouselItem from 'Components/Carousel/CarouselItem.js';
@@ -11,17 +11,22 @@ const CarouselContainer = ({ navigator = "default", unit = 1, ...props }) => {
 
   const $CarouselAreaWrapper = useRef(null);
   const $CarouselArea = useRef(null);
+  const [mountStatus, setMountStatus] = useState(false);
 
   const {
     useNavigator, useEventModal,
     calculatedMovableRange, itemWidth
   } = useCarousel({ $CarouselAreaWrapper, $CarouselArea, unit, itemLength: props.children.length })
 
+  useEffect(() => {
+    setMountStatus(true);
+  }, [])
+
   return (
     <CarouselLayout navigator={navigator}>
       <CarouselAreaWrapper className={"carousel-area-wrapper"} ref={$CarouselAreaWrapper}>
         <CarouselArea ref={$CarouselArea} calculatedMovableRange={calculatedMovableRange}>
-          {[...props.children].map((child, i) => {
+          {mountStatus && [...props.children].map((child, i) => {
             return <CarouselItem key={`Carousel-Item-${i}`} width={itemWidth} children={child} />
           })}
         </CarouselArea>
@@ -48,6 +53,7 @@ const CarouselLayout = styled.div`
 
 const CarouselAreaWrapper = styled.div`
   width: 100%;
+  z-index: 1;
   overflow: hidden;
 `;
 

diff --git a/FE/src/Components/Carousel/CarouselEventModal.js b/FE/src/Components/Carousel/CarouselEventModal.js
@@ -59,7 +59,7 @@ const CarouselEventModalArea = styled.div`
   
   display: flex;
   justify-content: center;
-  z-index: 1;
+  z-index: 2;
 `;
 
 export default CarouselEventModal;
diff --git a/FE/src/Components/Carousel/hooks/useCarousel.js b/FE/src/Components/Carousel/hooks/useCarousel.js
@@ -1,31 +1,30 @@
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 
-const useCarousel = ({$CarouselAreaWrapper, $CarouselArea, itemLength, unit}) => {
-  
-  const [carouselNavigatorAreaSize, setCarouselNavigatorAreaSize] = useState({width: 0, height: 0});
+const useCarousel = ({ $CarouselAreaWrapper, $CarouselArea, itemLength, unit }) => {
+
+  const [carouselNavigatorAreaSize, setCarouselNavigatorAreaSize] = useState({ width: 0, height: 0 });
   const [itemWidth, setItemWidth] = useState(0);
-  const [calculatedMovableRange, setCalculatedMovableRange] = useState({from: 0, to: 0});
+  const [calculatedMovableRange, setCalculatedMovableRange] = useState({ from: 0, to: 0 });
   const [slideCount, setSlideCount] = useState(unit);
-  const [carouselEvent, setCarouselEvent] = useState({isActive:false, msg:""});
+  const [carouselEvent, setCarouselEvent] = useState({ isActive: false, msg: "" });
 
   const timeoutFunc = useRef();
 
-  useLayoutEffect(() => {  
+  useLayoutEffect(() => {
     window.addEventListener('resize', debounced(handleResize));
     return () => { // cleanup 
-      window.removeEventListener('resize', debounced(handleResize));
+      window.removeEventListener('resize', debounced(handleResize), false);
     }
   }, [])
 
   useEffect(() => {
-
     const $CarouselAreaDOM = $CarouselArea.current; // 리액트에서 내주는 warning에 대한 가이드 반영
     $CarouselAreaDOM.classList.add("carousel-start")
     return () => { $CarouselAreaDOM.classList.remove("carousel-start"); }
-  });
+  }, [slideCount]);
 
   useEffect(() => {
-    handleResize();  
+    handleResize();
   }, [itemWidth])
 
   const debounced = (handleResize) => {
@@ -34,18 +33,19 @@ const useCarousel = ({$CarouselAreaWrapper, $CarouselArea, itemLength, unit}) =>
       timeoutFunc.current = setTimeout(handleResize, 500);
     };
   }
-  
+
   const handleResize = () => {
+    if (!$CarouselAreaWrapper.current) return;
     setItemWidth($CarouselAreaWrapper.current.offsetWidth / unit);
-    setCarouselNavigatorAreaSize({ 
-      width: $CarouselAreaWrapper.current.offsetWidth, 
-      height: $CarouselAreaWrapper.current.offsetHeight 
+    setCarouselNavigatorAreaSize({
+      width: $CarouselAreaWrapper.current.offsetWidth,
+      height: $CarouselAreaWrapper.current.offsetHeight
     });
   }
 
-  const isNotAbleToSlide = ({type}) => {
+  const isNotAbleToSlide = ({ type }) => {
     if (carouselEvent.isActive) return true;
-    
+
     if (type === "left" && slideCount === unit) {
       setCarouselEvent({ isActive: true, msg: "처음입니다" });
       return true;
@@ -56,49 +56,49 @@ const useCarousel = ({$CarouselAreaWrapper, $CarouselArea, itemLength, unit}) =>
 
     return false;
   }
-  
+
   const slideLeft = () => {
-    if (isNotAbleToSlide( {type: "left"} )) return false;
-    
+    if (isNotAbleToSlide({ type: "left" })) return false;
+
     let calculatedXValue = calculatedMovableRange.to;
     // let ItemWidth = $CarouselArea.current.offsetWidth/unit;
     if (slideCount - unit < unit) {
-      let remainItemsCount = slideCount%unit;
-      calculatedXValue += itemWidth*remainItemsCount;
+      let remainItemsCount = slideCount % unit;
+      calculatedXValue += itemWidth * remainItemsCount;
       setSlideCount(unit);
     } else {
       calculatedXValue += $CarouselArea.current.offsetWidth;
       setSlideCount(slideCount - unit);
     }
-    setCalculatedMovableRange({from: calculatedMovableRange.to, to: Number(calculatedXValue.toFixed(3))});
+    setCalculatedMovableRange({ from: calculatedMovableRange.to, to: Number(calculatedXValue.toFixed(3)) });
     return true;
   }
 
   const slideRight = () => {
-    if (isNotAbleToSlide( {type: "right"} )) return false;
+    if (isNotAbleToSlide({ type: "right" })) return false;
 
     let calculatedXValue = calculatedMovableRange.to;
     if (slideCount + unit > itemLength) {
       let remainItemsCount = itemLength - slideCount;
-      calculatedXValue -= itemWidth*remainItemsCount;
+      calculatedXValue -= itemWidth * remainItemsCount;
       setSlideCount(itemLength);
     } else {
       calculatedXValue -= $CarouselArea.current.offsetWidth;
       setSlideCount(slideCount + unit);
-      
+
     }
-    setCalculatedMovableRange({from: calculatedMovableRange.to, to: Number(calculatedXValue.toFixed(3))});
+    setCalculatedMovableRange({ from: calculatedMovableRange.to, to: Number(calculatedXValue.toFixed(3)) });
     return true;
   }
-  
+
   return {
-    calculatedMovableRange, 
+    calculatedMovableRange,
     itemWidth,
-    useNavigator: () => { 
-      return {slideLeft, slideRight, carouselNavigatorAreaSize, totalIndex: Math.ceil(itemLength/unit) }
+    useNavigator: () => {
+      return { slideLeft, slideRight, carouselNavigatorAreaSize, totalIndex: Math.ceil(itemLength / unit) }
     },
     useEventModal: () => {
-      return {carouselEvent, setCarouselEvent}
+      return { carouselEvent, setCarouselEvent }
     }
   }
 }

diff --git a/FE/src/Components/Header/Dropdown/Dropdown.js b/FE/src/Components/Header/Dropdown/Dropdown.js
@@ -5,8 +5,8 @@ const Dropdown = ({ list }) => {
   return (
     <DropdownWrapper>
       <MenuList>
-        {list.map((text, index) => {
-          return <MenuItem key={index}>{text}</MenuItem>;
+        {list.map((text, idx) => {
+          return <MenuItem key={`menuItem-${idx}`}>{text}</MenuItem>;
         })}
       </MenuList>
     </DropdownWrapper>

diff --git a/FE/src/Components/Header/Navigation/Navigation.js b/FE/src/Components/Header/Navigation/Navigation.js
@@ -13,8 +13,8 @@ const Navigation = () => {
 
   return (
     <NavWrapper>
-      {navItemArray.map(([menuTitle, itemList], index) =>
-        <NavContent key={index}>
+      {navItemArray.map(([menuTitle, itemList], idx) =>
+        <NavContent key={`navContent-${idx}`}>
           <NavSpan>{menuTitle}</NavSpan> <Dropdown list={itemList} ></Dropdown>
         </NavContent>
       )}

diff --git a/FE/src/Components/Modal/BottomSide/BottomSide.js b/FE/src/Components/Modal/BottomSide/BottomSide.js
@@ -1,20 +1,27 @@
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
+
 import * as Carousel from 'Components/Carousel';
 import Card from 'Components/commons/Cards';
 
-const BottomSide = ({ isHide }) => {
+import API from 'util/API';
 
-  useEffect(() => {
-    console.log(isHide)
-  }, [isHide])
+const BottomSide = ({ refetchModal }) => {
+  const [randomDishes, setRandomDishes] = useState();
 
+  useEffect(() => {
+    const fetchRandomDishes = async () => {
+      setRandomDishes(await API.get.random10());
+    }
+    fetchRandomDishes();
+  }, [])
+  if (!randomDishes) return <></>
   return (
     <BottomSideWrapper>
       <Carousel.Container navigator={"upper"} unit={5}>
         {/* for test */}
-        {[...new Array(22).keys()].map((_, i) => {
-          return <Card key={`test-${i}`} number={i} type={"responsive"} />;
+        {randomDishes.map((dish, i) => {
+          return <Card key={`test-${i}`} number={i} type={"responsive"} payload={dish} refetchModal={refetchModal} />;
         })}
 
       </Carousel.Container>
@@ -24,7 +31,7 @@ const BottomSide = ({ isHide }) => {
 
 const BottomSideWrapper = styled.div`
   width: 960px;
-  padding: 48px;
+  padding: 24px 48px;
   box-sizing: border-box;
   background: #F5F5F7;
   border-radius: 0px 0px 5px 5px;

diff --git a/FE/src/Components/Modal/DetailProductModal.js b/FE/src/Components/Modal/DetailProductModal.js
@@ -6,38 +6,45 @@ import RightSide from 'Components/Modal/RightSide/RightSide';
 import BottomSide from 'Components/Modal/BottomSide/BottomSide';
 import useToggle from 'util/hooks/useToggle';
 import preparingProduct from 'images/preparingProduct.png';
-
-const DetailProductModal = ({ modalState }) => {
+import loadingImage from 'images/loading.gif';
+// refetchModal
+const DetailProductModal = ({ modalState, refetchModal }) => {
   const [isHide, setHide] = useToggle(true);
+  const { loading, data, error } = modalState;
 
   useEffect(() => {
-    if (modalState) {
-      setHide.toggle();
-    }
+    if (loading) setHide.toggle();
+    return () => { setHide.set(false); }
   }, [modalState]);
 
   return (
     <Background isHide={isHide}>
-      <ModelWrapper>
-        {modalState?.status === 'success' &&
+      <ModalWrapper>
+        {loading &&
+          <LoadingWrapper>
+            <img src={loadingImage} alt="" width='100%' />
+          </LoadingWrapper>
+        }
+
+        {data &&
           <div>
             <TopSide>
-              {modalState && (
-                <><LeftSide {...modalState} />
-                  <RightSide {...modalState} /></>
+              {data && (
+                <><LeftSide {...data} />
+                  <RightSide {...data} /></>
               )}
             </TopSide>
-            {!isHide && <BottomSide />}
+            {!isHide && <BottomSide refetchModal={refetchModal}/>}
           </div>
         }
 
-        {modalState?.status === 'fail' &&
+        {error &&
           <ErrorImgWrapper>
             <img src={preparingProduct} alt="" width='100%' />
           </ErrorImgWrapper>
         }
         <CloseButton src={closeImage} onClick={setHide.toggle} alt="" />
-      </ModelWrapper>
+      </ModalWrapper>
     </Background >
   );
 };
@@ -53,7 +60,7 @@ const Background = styled.div`
   background: rgba(0, 0, 0, 0.6);
 `;
 
-const ModelWrapper = styled.div`
+const ModalWrapper = styled.div`
   display:flex;
   width:  1000px ;
   height: 1076px;
@@ -79,10 +86,20 @@ const CloseButton = styled.img`
   }
 `;
 
-const ErrorImgWrapper = styled.div`
+const LoadingWrapper = styled.div`
+  height: inherit;
+  width: 960px;
+  background: #fff;
+  border-radius: 5px;
+  font-size: 50px;
+`;
+
+const ErrorImgWrapper = styled(LoadingWrapper)`
   height: inherit;
   width: 960px;
   background: #fff;
   border-radius: 5px;
+  font-size: 50px;
 `;
+
 export default DetailProductModal;
diff --git a/FE/src/Components/Modal/LeftSide/LeftSide.js b/FE/src/Components/Modal/LeftSide/LeftSide.js
@@ -3,18 +3,18 @@ import styled from 'styled-components';
 import Thumbnail from 'Components/Modal/LeftSide/Thumbnail';
 import SmallThumbnail from 'Components/Modal/LeftSide/SmallThumbnail';
 
-const LeftSide = ({ thumb_images }) => {
+const LeftSide = ({ thumbImages }) => {
   const [thumbnailSource, setThumbnailSource] = useState('');
   const [imgSources, setImgSources] = useState([]);
   const handleChangeImageSource = ({ idx }) => () => {
     setThumbnailSource(imgSources[idx]);
   };
 
   useEffect(() => {
-    const fiveImgs = Object.assign(Array(5).fill(''), thumb_images); //이미지파일이 5개 미만이라도 개수가 5개인 고정된 배열을 만들기..
+    const fiveImgs = Object.assign(Array(5).fill(''), thumbImages); //이미지파일이 5개 미만이라도 개수가 5개인 고정된 배열을 만들기..
     setImgSources(fiveImgs);
     setThumbnailSource(fiveImgs[0]);
-  }, [thumb_images]);
+  }, [thumbImages]);
 
   return (
     <LeftSideWrapper>

diff --git a/FE/src/Components/Modal/LeftSide/SmallThumbnail.js b/FE/src/Components/Modal/LeftSide/SmallThumbnail.js
@@ -7,7 +7,7 @@ const SmallThumbnail = ({ imgSources, handleChangeImageSource }) => {
     <SmallThumbnailWrapper >
       {imgSources && imgSources.map((img, idx) => {
         return (
-          <label key={idx}>
+          <label key={`smallThumbnail-${idx}`}>
             <RadioButton
               type="radio"
               name="small-thumbnail"

diff --git a/FE/src/Components/Modal/LeftSide/Thumbnail.js b/FE/src/Components/Modal/LeftSide/Thumbnail.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
+import preparingImage from 'images/preparingImage.jpg';
 
 const Thumbnail = ({ thumbnailSource }) => {
   return (
     <ThumbnailWrapper>
-      <ThumbnailImage src={thumbnailSource} />
+      <ThumbnailImage src={thumbnailSource} onError={(e) => e.target.src = preparingImage} />
     </ThumbnailWrapper>
   );
 };