From bb8c52fd30d5bd1f4a8d9551f9aaa191b9fb7fe6 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Wed, 21 Apr 2021 15:29:57 +0900 Subject: [PATCH 01/13] feat : modify carousel --- .vscode/launch.json | 15 ++++++++++++ src/App.js | 14 ----------- src/js/util/Carousel.js | 53 ++++++++++++++++++++++------------------- 3 files changed, 44 insertions(+), 38 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..0053e8309 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. + // 기존 특성에 대한 설명을 보려면 가리킵니다. + // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 88b1259ea..78d6991c9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,5 @@ -import BestList from "./js/components/bestList/BestList"; import TestCarousel from "./js/util/TestCarousel"; function App() { - const test = { - detail_hash: "HBDEF", - image: - "http://public.codesquad.kr/jk/storeapp/data/2d3f99a9a35601f4e98837bc4d39b2c8.jpg", - alt: "[미노리키친] 규동 250g", - delivery_type: ["새벽배송", "전국택배"], - title: "[미노리키친] 규동 250g", - description: "일본인의 소울푸드! 한국인도 좋아하는 소고기덮밥", - n_price: "6,500", - s_price: "7,000원", - badge: ["이벤트특가"], - }; - return ( <> diff --git a/src/js/util/Carousel.js b/src/js/util/Carousel.js index ec55ae916..0de047c10 100644 --- a/src/js/util/Carousel.js +++ b/src/js/util/Carousel.js @@ -9,9 +9,9 @@ import styled, { css, keyframes } from "styled-components"; const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { const virtureSlides = useRef(createVirtureSlides(items, itemsPerPeice)); - const initialSlide = virtureSlides.current.shift(); + const initialSlide = virtureSlides.current[0]; const [realSlides, setRealSlieds] = useState([initialSlide]); - + // virtureSlides를 하나씩 없애면서, 좌로갈때는 translate 100인 상태에서 시작핟록, 그리고 translate에 "현재" 기준에 "더하거나 뺴는" 방식으로 변경 const container = useRef(); const currentSlideIndex = useRef(0); const direction = useRef("none"); @@ -19,47 +19,52 @@ const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { const move = (dir) => { if (isThereItem(dir)) { slideContainer(dir); + currentSlideIndex.current = + dir === "prev" + ? currentSlideIndex.current - 1 + : currentSlideIndex.current + 1; return; } const newSlides = isEmptyVirtureSlides() ? getMovedSlides(dir) - : getAddedSlides(); - - setRealSlieds((newSlides) => newSlides); + : getAddedSlides(dir); + direction.current = dir; - if (dir === "prev") { - currentSlideIndex.current -= 1; - direction.current = "prev"; - // setRealSlieds([newSlide, ...realSlides]); - } else { - currentSlideIndex.current += 1; - direction.current = "next"; - // setRealSlieds([...realSlides, newSlide]); - } + setRealSlieds(newSlides); }; const getMovedSlides = (dir) => { - let newSlides = [...realSlides]; + const newSlides = [...realSlides]; if (dir === "prev") { - const opposite = newSlides.current.pop(); + const opposite = newSlides.pop(); newSlides.unshift(opposite); } else { - const opposite = newSlides.current.shift(); + const opposite = newSlides.shift(); newSlides.push(opposite); } return newSlides; }; - const getAddedSlides = () => {}; + const getAddedSlides = (dir) => { + const newSlide = + dir === "prev" + ? virtureSlides.current.pop() + : virtureSlides.current.shift(); + + const newSlides = + dir === "prev" ? [newSlide, ...realSlides] : [...realSlides, newSlide]; + + return newSlides; + }; const slideContainer = (dir) => { container.current.style.transform = dir === "prev" ? "translate(100%)" : "translate(-100%)"; }; const renderList = () => { const list = realSlides; - return list.map((slide) => { + return list.map((slide, index) => { return ( - - {slide.map((item) => ( - {item} + + {slide.map((item, index) => ( + {item} ))} ); @@ -67,9 +72,9 @@ const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { }; const isThereItem = (direction) => { if (direction === "prev") { - return currentSlideIndex !== 0; + return currentSlideIndex.current !== 0; } else { - return currentSlideIndex !== realSlides.length - 1; + return currentSlideIndex.current !== realSlides.length - 1; } }; const isEmptyVirtureSlides = () => { From 9972e02fcd2ecb14901e96389f8e9658756e7774 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Wed, 21 Apr 2021 18:39:11 +0900 Subject: [PATCH 02/13] feat : add newSlides logic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 좌, 우 클릭시 각종 상황을 판단해서 단순 이동(미구현) / 새로운 요소 추가 / 반대편 요소 가져오기 동작 구현 --- src/App.js | 3 +- src/js/util/Carousel.js | 55 ++++++++++++++++---------------- src/js/util/TestCarousel.js | 22 +++---------- webapck.dev.js | 62 ------------------------------------- 4 files changed, 35 insertions(+), 107 deletions(-) delete mode 100644 webapck.dev.js diff --git a/src/App.js b/src/App.js index 78d6991c9..db2cdaba0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,9 @@ import TestCarousel from "./js/util/TestCarousel"; +// import BestList from "./js/components/bestList/BestList"; function App() { return ( <> - + {/* */} ); diff --git a/src/js/util/Carousel.js b/src/js/util/Carousel.js index 0de047c10..e5e1e3c17 100644 --- a/src/js/util/Carousel.js +++ b/src/js/util/Carousel.js @@ -8,28 +8,22 @@ import styled, { css, keyframes } from "styled-components"; // - VList에 요소가 남았다면 pop or shift해서 방향에 맞게 추가하고 리렌더링 후에 slideContanier const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { - const virtureSlides = useRef(createVirtureSlides(items, itemsPerPeice)); - const initialSlide = virtureSlides.current[0]; + const [initialSlide, virture] = createVirtureSlides(items, itemsPerPeice); + const virtureSlides = useRef(virture); const [realSlides, setRealSlieds] = useState([initialSlide]); - // virtureSlides를 하나씩 없애면서, 좌로갈때는 translate 100인 상태에서 시작핟록, 그리고 translate에 "현재" 기준에 "더하거나 뺴는" 방식으로 변경 + const container = useRef(); const currentSlideIndex = useRef(0); - const direction = useRef("none"); const move = (dir) => { if (isThereItem(dir)) { slideContainer(dir); - currentSlideIndex.current = - dir === "prev" - ? currentSlideIndex.current - 1 - : currentSlideIndex.current + 1; + changeCurrentIndex(dir); return; } const newSlides = isEmptyVirtureSlides() ? getMovedSlides(dir) : getAddedSlides(dir); - direction.current = dir; - setRealSlieds(newSlides); }; const getMovedSlides = (dir) => { @@ -41,9 +35,11 @@ const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { const opposite = newSlides.shift(); newSlides.push(opposite); } + return newSlides; }; const getAddedSlides = (dir) => { + console.log("add"); const newSlide = dir === "prev" ? virtureSlides.current.pop() @@ -54,9 +50,16 @@ const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { return newSlides; }; + const changeCurrentIndex = (dir) => { + currentSlideIndex.current = + dir === "prev" + ? currentSlideIndex.current - 1 + : currentSlideIndex.current + 1; + }; const slideContainer = (dir) => { - container.current.style.transform = - dir === "prev" ? "translate(100%)" : "translate(-100%)"; + const i = currentSlideIndex.current; + container.current.style.animation = + dir === "prev" ? `${moveToPrev} 1s` : "translate(-100%)"; }; const renderList = () => { const list = realSlides; @@ -83,7 +86,7 @@ const Carousel = ({ children: items, itemsPerPeice, onClickItem }) => { return ( + + + {renderList()} + + + ); }; @@ -119,11 +146,16 @@ const divmod = (a, b) => { const CarouselWrapper = styled.div` background: #b5b5b5; - position: relative; + display: flex; +`; +const CarouselContent = styled.div` + width: 90%; + overflow: hidden; `; - const CarouselContainer = styled.div` - display: flex; + display: inline-flex; + width: 100%; + padding-right: ${({ gap }) => `${gap}`}; `; const Slide = styled.ul` background: #777777; @@ -131,27 +163,32 @@ const Slide = styled.ul` width: 100%; flex: 1 0 auto; padding: 0; + padding-right: ${({ gap }) => `${gap}`}; + &::first-child { + } `; const SlideItem = styled.li` list-style-type: none; - width: 100%; + ${({ autoFit, itemsPerPeice, gap }) => css` + width: ${autoFit ? `calc(100%/${itemsPerPeice})` : "auto"}; + & + & { + margin-left: ${gap}; + } + `} `; const Button = styled.div` - position: absolute; - width: 50px; - height: 50px; - background: orange; - top: 50px; + flex: 1; + z-index: 2; ${(props) => css` ${props.prev && css` - left: 10px; + left: 10%; `} ${props.next && css` - right: 10px; + right: 10%; `} - `} + `}; `; export default Carousel; diff --git a/src/js/util/TestCarousel.js b/src/js/util/TestCarousel.js index b73b2b86d..2b2c10633 100644 --- a/src/js/util/TestCarousel.js +++ b/src/js/util/TestCarousel.js @@ -5,19 +5,24 @@ const StyledBlock = styled.div` margin: 0 auto; margin-top: 100px; background-color: #e3e3e3; - width: 200px; + width: 500px; `; const TestBlock = styled.div` background-color: tan; + width: 90px; + height: 50px; + box-sizing: border-box; `; const TestCarousel = () => { return (

테스트 중입니다

{ - console.log("click item!"); + itemsPerPeice={5} + autoFit + gap={"10px"} + onClickItem={({ target }) => { + console.log(1, target); }} > test1 From 9cb4ae0237828817397f0441d6136e6eea12c88d Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 23 Apr 2021 02:18:45 +0900 Subject: [PATCH 12/13] feat : TestBlock map --- src/App.js | 2 -- src/js/util/TestCarousel.js | 13 ++++--------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index db2cdaba0..890bd25ab 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,7 @@ import TestCarousel from "./js/util/TestCarousel"; -// import BestList from "./js/components/bestList/BestList"; function App() { return ( <> - {/* */} ); diff --git a/src/js/util/TestCarousel.js b/src/js/util/TestCarousel.js index 2b2c10633..0196f24b4 100644 --- a/src/js/util/TestCarousel.js +++ b/src/js/util/TestCarousel.js @@ -9,10 +9,10 @@ const StyledBlock = styled.div` `; const TestBlock = styled.div` background-color: tan; - width: 90px; height: 50px; box-sizing: border-box; `; +const array = [1, 2, 3, 4, 6, 7, 8]; const TestCarousel = () => { return ( @@ -25,14 +25,9 @@ const TestCarousel = () => { console.log(1, target); }} > - test1 - test2 - test3 - test4 - test5 - test6 - test7 - test8 + {array.map((el) => ( + el + ))} ); From 28b5b9022a38fe68adb61ca89ebe022439d16421 Mon Sep 17 00:00:00 2001 From: jjunyjjuny Date: Fri, 23 Apr 2021 04:09:15 +0900 Subject: [PATCH 13/13] merge 0422 --- src/App.js | 5 +- src/js/components/bestList/BestList.jsx | 124 +++++++++++++----------- src/js/util/Carousel.js | 6 +- 3 files changed, 75 insertions(+), 60 deletions(-) diff --git a/src/App.js b/src/App.js index 4ea700eb0..689c56af1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,10 @@ -import Main from "./js/components/Main" - +import Main from "./js/components/Main"; +import TestCarousel from "./js/util/TestCarousel"; function App() { return ( <>
+ ); } diff --git a/src/js/components/bestList/BestList.jsx b/src/js/components/bestList/BestList.jsx index 643196e22..d34886cf1 100644 --- a/src/js/components/bestList/BestList.jsx +++ b/src/js/components/bestList/BestList.jsx @@ -1,76 +1,90 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import Card from "../common/Card"; - const BestListWrapper = styled.div` - font-family: Noto Sans KR; - font-style: normal; - font-weight: normal; + font-family: Noto Sans KR; + font-style: normal; + font-weight: normal; `; const Title = styled.div` - font-weight: bold; - font-size: 24px; - line-height: 35px; - margin-bottom: 32px; + font-weight: bold; + font-size: 24px; + line-height: 35px; + margin-bottom: 32px; `; const TabList = styled.ul` - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; `; const Tab = styled.li` - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 16px 32px; - list-style: none; - background: ${(props) => (props.index === props.select ? "#EEF4FA" : "#f5f5f7")}; - border-radius: 5px 5px 0px 0px; - margin-right: 8px; - font-size: 18px; - line-height: 26px; - color: #828282; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 16px 32px; + list-style: none; + background: ${(props) => + props.index === props.select ? "#EEF4FA" : "#f5f5f7"}; + border-radius: 5px 5px 0px 0px; + margin-right: 8px; + font-size: 18px; + line-height: 26px; + color: #828282; `; const Box = styled.ul` - display: flex; - flex-direction: row; - position: relative; - justify-content: space-evenly; - width: 1280px; - height: 620px; - background: #eef4fa; - border-radius: 0px 5px 5px 5px; + display: flex; + flex-direction: row; + position: relative; + justify-content: space-evenly; + width: 1280px; + height: 620px; + background: #eef4fa; + border-radius: 0px 5px 5px 5px; `; const BestList = (props) => { - const [bestList, setBestList] = useState([{ items: [] }]); - const [index, setIndex] = useState(0); + const [bestList, setBestList] = useState([{ items: [] }]); + const [index, setIndex] = useState(0); - useEffect(() => { - fetch("https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/best") - .then((response) => response.json()) - .then((json) => setBestList(() => json.body)); - }, []); + useEffect(() => { + fetch( + "https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/best" + ) + .then((response) => response.json()) + .then((json) => setBestList(() => json.body)); + }, []); - const clickHandler = ({ target }) => setIndex(() => bestList.findIndex(({ name }) => name === target.innerHTML)); + const clickHandler = ({ target }) => + setIndex(() => bestList.findIndex(({ name }) => name === target.innerHTML)); - return ( - - 후기가 증명하는 베스트 반찬 - - {bestList.map((e, i) => ( - - {e.name} - - ))} - - - {bestList[index].items.map((e) => ( - - ))} - - - ); + return ( + + 후기가 증명하는 베스트 반찬 + + {bestList.map((e, i) => ( + + {e.name} + + ))} + + + {bestList[index].items.map((e) => ( + + ))} + + + ); }; export default BestList; diff --git a/src/js/util/Carousel.js b/src/js/util/Carousel.js index d231dc329..40faaffdb 100644 --- a/src/js/util/Carousel.js +++ b/src/js/util/Carousel.js @@ -78,9 +78,6 @@ const Carousel = ({ const slideContainer = (dir) => { const i = currentSlideIndex.current; container.current.style.transition = `all 1s ease`; - // container.current.style.transform = `translateX(calc(-${i * 100}% ${ - // dir === "next" ? `- ${gap}` : "" - // }))`; container.current.style.transform = `translateX(-${i * 100}%)`; }; @@ -132,6 +129,9 @@ const Carousel = ({ }; const createVirtureSlides = (items, itemsPerPeice) => { + if (!Array.isArray(items)) { + return [[items], []]; + } const newItems = items.reduce((result, item, index) => { const [i, j] = divmod(index, itemsPerPeice); result[i] ? (result[i][j] = item) : (result[i] = [item]);