[#27] feat: ✨ BestTab Skeleton UI 만들기

- Main.jsx - 시연을 위한 loop 설정 추가 - BestTab.jsx - SkeletonTab import - BestTabNavigator.jsx - 주석 제거 - SkeletonTab.jsx - Skeleton UI 구현 - DicoJsonCarousel.jsx - Carousel 구현중
ha3158987 · Apr 30, 2021 · 266cb39 · 266cb39
1 parent 1f85635
commit 266cb39
Show file tree

Hide file tree

Showing 5 changed files with 365 additions and 107 deletions.
diff --git a/src/component/main/Main.jsx b/src/component/main/Main.jsx
@@ -10,7 +10,7 @@ import styled from "styled-components";
 import {
  useMainItemsContext,
  useMainItemsActiveContext,
- useSetMainItemsActiveContext
+ useSetMainItemsActiveContext,
 } from "../Context";
 
 const CarouselContainer = styled.div`
@@ -24,62 +24,55 @@ export default function Main() {
 
  const onShowMoreItems = () => {
  setActive(true);
- }
+ };
  const getSalePrice = (price, discountRate) => {
  return price - price * (discountRate / 100);
  };
- if(!mainItems) return null;
+ if (!mainItems) return null;
  return (
  <>
- <BestTab/>
- {
- active 
- ? (mainItems.map(mainItem => 
- <CarouselContainer>
- <h2>{mainItem.title}</h2>
- <DicoJsonCarousel>
- {
- mainItem.childs.map((item, idx) => 
- <ItemCard
- src={item.main_image}
- title={item.title}
- description={item.description}
- salePrice={getSalePrice(item.price, item.discount)}
- normalPrice={item.price}
- labels={item.label}
- key={idx}
- id={item._id}
- />
- )
- }
- </DicoJsonCarousel>
- </CarouselContainer>
- )) 
- :
- (
- <CarouselContainer>
- <h2>{mainItems[0].title}</h2>
- <DicoJsonCarousel>
- {
- mainItems[0].childs.map((item, idx) => 
- <ItemCard
- src={item.main_image}
- title={item.title}
- description={item.description}
- salePrice={getSalePrice(item.price, item.discount)}
- normalPrice={item.price}
- labels={item.label}
- key={idx}
- id={item._id}
- />
- )
- }
- </DicoJsonCarousel>
- </CarouselContainer>
- )
- }
- <ShowMoreBtn active={active} onShowMoreItems={onShowMoreItems}/>
- <PopUpContainer/>
+ <BestTab />
+ {active ? (
+ mainItems.map((mainItem, id) => (
+ <CarouselContainer key={id}>
+ <h2>{mainItem.title}</h2>
+ <DicoJsonCarousel options={{ loop: id === 0 }}>
+ {mainItem.childs.map((item, idx) => (
+ <ItemCard
+ src={item.main_image}
+ title={item.title}
+ description={item.description}
+ salePrice={getSalePrice(item.price, item.discount)}
+ normalPrice={item.price}
+ labels={item.label}
+ key={idx}
+ id={item._id}
+ />
+ ))}
+ </DicoJsonCarousel>
+ </CarouselContainer>
+ ))
+ ) : (
+ <CarouselContainer>
+ <h2>{mainItems[0].title}</h2>
+ <DicoJsonCarousel options={{ loop: true }}>
+ {mainItems[0].childs.map((item, idx) => (
+ <ItemCard
+ src={item.main_image}
+ title={item.title}
+ description={item.description}
+ salePrice={getSalePrice(item.price, item.discount)}
+ normalPrice={item.price}
+ labels={item.label}
+ key={idx}
+ id={item._id}
+ />
+ ))}
+ </DicoJsonCarousel>
+ </CarouselContainer>
+ )}
+ <ShowMoreBtn active={active} onShowMoreItems={onShowMoreItems} />
+ <PopUpContainer />
  </>
  );
-}
+}
diff --git a/src/component/main/bestTab/BestTab.jsx b/src/component/main/bestTab/BestTab.jsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import BestTabContainer from "./BestTabContainer";
 import BestTabNavigator from "./BestTabNavigator";
 import api from "../../../common/api.js";
+import SkeletonTab from "./SkeletonTab";
 
 const BestTabStyle = styled.div`
  h2 {
@@ -20,7 +21,8 @@ export default function BestTab() {
  try {
  (async () => {
  const data = await api("/best");
- setBestItems(data);
+ setTimeout(() => setBestItems(data), 1000);
+ // setBestItems(data);
  })();
  } catch (e) {
  console.log(e);
@@ -29,19 +31,23 @@ export default function BestTab() {
  return;
  }, [bestItems]);
 
- if (!bestItems) return null;
+ // if (!bestItems) return null;
 
  return (
- <BestTabStyle>
- <h2>후기가 증명하는 베스트 반찬</h2>
- <BestTabNavigator
- bestItems={bestItems}
- active={active}
- setActive={setActive}
- />
- <BestTabContainer
- bestItem={bestItems[active]}
- />
- </BestTabStyle>
+ <>
+ {bestItems ? (
+ <BestTabStyle>
+ <h2>후기가 증명하는 베스트 반찬</h2>
+ <BestTabNavigator
+ bestItems={bestItems}
+ active={active}
+ setActive={setActive}
+ />
+ <BestTabContainer bestItem={bestItems[active]} />
+ </BestTabStyle>
+ ) : (
+ <SkeletonTab />
+ )}
+ </>
  );
 }
diff --git a/src/component/main/bestTab/BestTabNavigator.jsx b/src/component/main/bestTab/BestTabNavigator.jsx
@@ -3,16 +3,16 @@ import styled from "styled-components";
 const BestTabNavigatorStyle = styled.div`
  display: grid;
  grid-gap: 0.5rem;
- grid-template-columns: repeat(5,13rem);
+ grid-template-columns: repeat(5, 13rem);
 `;
 
 const BestTabNavigatorItemStyle = styled.div`
  font-size: 1.125rem;
- background-color: ${(props) => props.active ? "#EEF4FA" : "#F5F5F5"};
+ background-color: ${(props) => (props.active ? "#EEF4FA" : "#F5F5F5")};
  padding: 1rem 2rem;
  text-align: center;
- font-weight: ${(props) => props.active ? 600 : 400};
- color: ${(props) => props.active ? "#333" : "#828282"};
+ font-weight: ${(props) => (props.active ? 600 : 400)};
+ color: ${(props) => (props.active ? "#333" : "#828282")};
  cursor: pointer;
  &:hover {
  color: #333;
@@ -23,17 +23,14 @@ export default function BestTabNavigator({ bestItems, active, setActive }) {
  return (
  <BestTabNavigatorStyle>
  {bestItems.map((bestItem, i) => (
- <BestTabNavigatorItemStyle 
+ <BestTabNavigatorItemStyle
  key={i}
- onClick={() => setActive(i)} 
- active={(i === active)}>{bestItem.title}
+ onClick={() => setActive(i)}
+ active={i === active}
+ >
+ {bestItem.title}
  </BestTabNavigatorItemStyle>
  ))}
- {/*
- <BestTabNavigatorItemStyle>풍성한 고기반찬</BestTabNavigatorItemStyle>
- <BestTabNavigatorItemStyle>편리한 반찬세트</BestTabNavigatorItemStyle>
- <BestTabNavigatorItemStyle>간편한 덮밥요리</BestTabNavigatorItemStyle>
- <BestTabNavigatorItemStyle>우리아이 영양반찬</BestTabNavigatorItemStyle> */}
  </BestTabNavigatorStyle>
- )
-}
+ );
+}