[#17] feat: ✨ 슬라이드 1/2 구현 중

src/App.js

@@ -2,15 +2,18 @@ import Header from "./component/header/Header.jsx";
 import Main from "./component/main/Main.jsx";
 import GlobalStyle from "./common/style.js";
 import { ContextProvider } from './component/Context.jsx';
+import { DJSlider } from './component/util/dj-slider/DJSlider';
 
 function App() {
   return (
     <ContextProvider>
       <GlobalStyle />
       <Header />
       <Main />
+      <DJSlider />
     </ContextProvider>
   );
 }
 
+
 export default App;

src/component/main/bestTab/BestItems.jsx

@@ -9,7 +9,7 @@ const BestItemsStyle = styled.div`
   padding: 2.5rem;
 `;
 
-export default function BestItems({ childs, onFetchDetailData }) {
+export default function BestItems({ childs }) {
   const getRandom = (n, max) => {
     const set = new Set();
     while (set.size < n) {
@@ -34,7 +34,6 @@ export default function BestItems({ childs, onFetchDetailData }) {
           labels={childs[idx].label}
           key={idx}
           id={childs[idx]._id}
-          onFetchDetailData={onFetchDetailData}
         />
       ))}
     </BestItemsStyle>

src/component/main/bestTab/BestTab.jsx

@@ -11,7 +11,7 @@ const BestTabStyle = styled.div`
   margin-bottom: 5rem;
 `;
 
-export default function BestTab({ onFetchDetailData }) {
+export default function BestTab() {
   const [active, setActive] = useState(0);
   const [bestItems, setBestItems] = useState(null);
 
@@ -37,7 +37,6 @@ export default function BestTab({ onFetchDetailData }) {
       />
       <BestTabContainer
         bestItem={bestItems[active]}
-        onFetchDetailData={onFetchDetailData}
       />
     </BestTabStyle>
   );

src/component/main/bestTab/BestTabContainer.jsx

@@ -3,10 +3,10 @@ import BestItems from "./BestItems";
 
 const BestTabContainerStyle = styled.div``;
 
-export default function BestTabContainer({ bestItem, onFetchDetailData }) {
+export default function BestTabContainer({ bestItem }) {
   return (
     <BestTabContainerStyle>
-      <BestItems childs={bestItem.childs} onFetchDetailData={onFetchDetailData}/>
+      <BestItems childs={bestItem.childs}/>
     </BestTabContainerStyle>
   )
 }

src/component/main/popUp/PopUpContainer.jsx

@@ -13,7 +13,7 @@ const PopUpContainerStyle = styled.div`
   left: 0;
   width: 100vw;
   height: 100vh;
-
+  z-index: 1;
   &:before {
     content: "";
     position: fixed;

src/component/util/dj-slider/DJSlider.jsx

@@ -1,25 +1,95 @@
+import { useState, useEffect, createContext, useContext } from 'react';
 import styled from "styled-components";
-import SlideTrack from './SlideTrack';
+import SlideList from "./SlideList";
 import SlideArrows from './SlideArrows';
 import SlideDots from './SlideDot';
-
-const DicoJsonSlider = (target, { props }) => {
-  const { perPages, autoplay, timeInterval, loop, useNavigation, useArrow, customArrow, useCount, animationSpeed } = props;
-}
+import API from '../../../common/api.js';
 
 const DJSliderContainer = styled.div`
+  position: relative;
+  width: 100%;
+  min-height: 5vh;
 `;
 
-export default function DJSlider() {
-
+const PageContext = createContext();
+const ItemContext = createContext();
+
+// 페이지의 변화에 따라 arrow 컨트롤, slideTrack의 slideList의 보여줄 영역 컨트롤, dots의 활성화 dot 컨트롤
+
+export function DJSlider(props = {}) {
+  const [ items, setItems ] = useState(null);
+  const [ page, setPage ] = useState(1);
+
+  const {
+    // 필수
+    // list = [],
+    perPages = 4,
+    speed = 500,
+
+    // 선택
+    autoplay = false, // interval과 세트
+    interval = 1000,
+    dots = false, 
+    count = false, 
+
+    arrows = true,
+    loop = false, 
+  } = props;
+  useEffect(() => {
+    if (!items) {
+      (async () => {
+        const data = await API("/main");
+        setItems(data[0].childs); // 8, 5, 4
+      })();
+    }
+    return;
+  }, [items]);
+
+  if(!items) return null;
+
   return (
     <DJSliderContainer>
-      <SlideTrack/>
-      <SlideArrows/>
-      <SlideDots/>
+      <PageContext.Provider value={page}>
+        <ItemContext.Provider value={items}>
+          <SlideList perPages={perPages} speed={speed} maxPage={Math.ceil(items.length / perPages)}/>
+        </ItemContext.Provider>
+        <SlideArrows setPage={setPage} loop={loop} maxPage={Math.ceil(items.length / perPages)}/>
+        {/* <SlideDots setPage={setPage} /> */}
+      </PageContext.Provider>
     </DJSliderContainer>
   );
 }
+
+export function usePageContext() {
+  return useContext(PageContext);
+}
+
+export function useItemContext() {
+  return useContext(ItemContext);
+}
+
+
+
+// export default function DJSlider(props) {
+//   const {
+//     list = [],
+//     perPages = 1,
+//     autoplay = false,
+//     interval = 1000,
+//     loop = false, 
+//     dots = false, 
+//     arrows = true,
+//     count = false, 
+//     speed = 500,
+//   } = props;
+//   return (
+//     <DJSliderContainer>
+//       <SlideTrack/>
+//       <SlideArrows/>
+//       <SlideDots/>
+//     </DJSliderContainer>
+//   );
+// }
 /*
   <DJSlider>
     <SlideTrack>
@@ -51,4 +121,36 @@ export default function DJSlider() {
       <SlideDotted active=false/>
     </SlideNavigation>
   </DJSlider>
-*/
+*/
+
+
+// const DicoJsonSlider = (target, { props }) => {
+//   // customArrow
+//   const { perPages, autoplay, timeInterval, loop, useNavigation, useArrow, customArrow, useCount, animationSpeed } = props;
+// }
+const items = [
+  "https://cdn.pixabay.com/photo/2016/08/10/10/28/vegetable-1582920__340.jpg",
+  "https://cdn.pixabay.com/photo/2017/07/27/16/48/toppokki-2545943__340.jpg", 
+  "https://cdn.pixabay.com/photo/2017/08/08/09/44/food-photography-2610865__340.jpg", 
+  "https://cdn.pixabay.com/photo/2015/06/26/02/58/korean-food-822092__340.jpg",
+  "https://cdn.pixabay.com/photo/2016/01/15/06/57/vegetarian-1141242__340.jpg",
+  "https://cdn.pixabay.com/photo/2018/03/26/15/46/korean-food-3263032__340.jpg",
+  "https://cdn.pixabay.com/photo/2019/03/26/01/14/tofu-4081697__340.jpg",
+  "https://cdn.pixabay.com/photo/2015/03/27/15/36/bob-694825__340.jpg",
+  "https://cdn.pixabay.com/photo/2018/03/07/10/09/food-3205654__340.jpg",
+  "https://cdn.pixabay.com/photo/2016/05/09/02/25/food-1380277__340.jpg",
+  "https://cdn.pixabay.com/photo/2018/12/10/00/27/tang-fish-cakes-3866060__340.jpg",
+  "https://cdn.pixabay.com/photo/2015/09/10/17/07/gochujang-934742__340.jpg",
+  "https://cdn.pixabay.com/photo/2017/08/14/15/52/bachelor-business-2640909__340.jpg",
+  "https://cdn.pixabay.com/photo/2015/04/06/16/33/bibim-guksu-709616__340.jpg",
+  "https://cdn.pixabay.com/photo/2015/11/20/08/17/meat-1052571__340.jpg"
+];
+/*
+  <Items>
+    <Item/>
+    <Item/>
+    <Item/>
+    <Item/>
+    <Item/>
+  </Items>
+*/

src/component/util/dj-slider/Slide.jsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
 
 export default function Slide() {
-    return ()
+    return null;
 }

src/component/util/dj-slider/SlideArrows.jsx

@@ -1,14 +1,45 @@
 import styled from "styled-components";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import { usePageContext } from './DJSlider';
 
-const SlideLeftArrow = styled.div``;
-const SlideRightArrow = styled.div``;
-
-export default function SlideArrows() {
+const SlideArrowsStyle = styled.div`
+    position: absolute;
+    width: calc(100% + 7rem);
+    top: calc(50% - 4rem);
+    left: -3.5rem;
+    z-index: -1;
+    display: flex;
+    justify-content: space-between;
+    & > * {
+        padding: 1rem;
+        line-height: 1rem;
+        font-size: 1.25rem;
+        cursor: pointer;
+    }
+`;
+const SlideLeftArrow = styled.div`
+    opacity: ${(props) => props.active ? 1 : 0.5};
+    user-select: ${(props) => props.active ? 'initial' : 'none'};
+    pointer-events: ${(props) => props.active ? 'initial' : 'none'};
+`;
+const SlideRightArrow = styled.div`
+    opacity: ${(props) => props.active ? 1 : 0.5};
+    user-select: ${(props) => props.active ? 'initial' : 'none'};
+    pointer-events: ${(props) => props.active ? 'initial' : 'none'};
+`;
 
+export default function SlideArrows({ setPage, loop, maxPage }) {
+    const page = usePageContext();
+    const onMovePage = count => {
+        const sum = page + count;
+        if(sum > -1 && sum < maxPage + 1) {
+            setPage(sum);
+        }
+    }
     return (
-        <>
-        <SlideLeftArrow />
-        <SlideRightArrow />
-        </>
+        <SlideArrowsStyle>
+            <SlideLeftArrow onClick={() => onMovePage(-1)} active={loop || page > 1}><FaChevronLeft/></SlideLeftArrow>
+            <SlideRightArrow onClick={() => onMovePage(1)} active={loop || page < maxPage}><FaChevronRight/></SlideRightArrow>
+        </SlideArrowsStyle>
     )
 }