From c15707edd62138a8051535072ff378032b9aade5 Mon Sep 17 00:00:00 2001 From: Jeon Date: Sun, 3 Dec 2023 17:01:39 +0900 Subject: [PATCH 1/5] feat: add choice slide --- .../ChoiceSlide/ChoiceSlide.styles.tsx | 23 +++++++++++++ src/components/ChoiceSlide/ChoiceSlide.tsx | 34 +++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/components/ChoiceSlide/ChoiceSlide.styles.tsx create mode 100644 src/components/ChoiceSlide/ChoiceSlide.tsx diff --git a/src/components/ChoiceSlide/ChoiceSlide.styles.tsx b/src/components/ChoiceSlide/ChoiceSlide.styles.tsx new file mode 100644 index 0000000..f4f6a85 --- /dev/null +++ b/src/components/ChoiceSlide/ChoiceSlide.styles.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +const SlideContainer = styled.div` + display: flex; + align-items: center; + width: 325px; + height: 148px; + padding: 0 44px; +`; + +export const AlphaSideContainer = styled(SlideContainer)` + justify-content: flex-end; + background-image: linear-gradient(270deg, #d04376 56.25%, transparent 100%); + border-top-right-radius: 74px; + border-bottom-right-radius: 74px; +`; + +export const BetaSideContainer = styled(SlideContainer)` + justify-content: flex-start; + background: linear-gradient(90deg, #1498aa 56.25%, rgb(20 152 170 / 0%) 100%); + border-top-left-radius: 74px; + border-bottom-left-radius: 74px; +`; diff --git a/src/components/ChoiceSlide/ChoiceSlide.tsx b/src/components/ChoiceSlide/ChoiceSlide.tsx new file mode 100644 index 0000000..cd0d76d --- /dev/null +++ b/src/components/ChoiceSlide/ChoiceSlide.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import Text from '@components/Text/Text'; + +import { colors } from '@styles/theme'; + +import { AlphaSideContainer, BetaSideContainer } from './ChoiceSlide.styles'; + +interface ChoiceSlideProps { + side: 'A' | 'B'; +} + +const ChoiceSlide = ({ side }: ChoiceSlideProps) => { + if (side === 'A') { + return ( + + + 10년 전
+ 과거로 가기 + + + ); + } + return ( + + + 10년 전
+ 과거로 가기 + + + ); +}; + +export default ChoiceSlide; From 8766df873895ff624e78d3aa51154684b38de348 Mon Sep 17 00:00:00 2001 From: Jeon Date: Sun, 3 Dec 2023 17:01:49 +0900 Subject: [PATCH 2/5] feat: make choice slide draggable --- src/components/TopicCard/TopicCard.styles.tsx | 13 ++++++++----- src/components/TopicCard/TopicCard.tsx | 16 +++++++++++++++- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/TopicCard/TopicCard.styles.tsx b/src/components/TopicCard/TopicCard.styles.tsx index 4408624..d1d6be8 100644 --- a/src/components/TopicCard/TopicCard.styles.tsx +++ b/src/components/TopicCard/TopicCard.styles.tsx @@ -1,3 +1,4 @@ +import { motion } from 'framer-motion'; import { styled } from 'styled-components'; export const Container = styled.div` @@ -9,6 +10,7 @@ export const TopicCardContainer = styled.div` display: flex; flex-direction: column; height: 100%; + overflow: hidden; `; export const SheetContainer = styled.div` @@ -64,13 +66,14 @@ export const SkipButton = styled.button` cursor: pointer; `; -export const SelectContainer = styled.div` +export const SelectContainer = styled(motion.div)` + position: relative; display: flex; - align-items: center; + gap: 15px; justify-content: center; - width: 100%; - height: 188px; - margin-top: 37px; + width: max-content; + overflow: hidden; + transform: translateX(-19%); `; export const UserInfoContainer = styled.div` diff --git a/src/components/TopicCard/TopicCard.tsx b/src/components/TopicCard/TopicCard.tsx index 61518df..6ae6d28 100644 --- a/src/components/TopicCard/TopicCard.tsx +++ b/src/components/TopicCard/TopicCard.tsx @@ -1,6 +1,9 @@ +import { motion } from 'framer-motion'; import React from 'react'; import { useNavigate } from 'react-router'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import ChoiceSlide from '@components/ChoiceSlide/ChoiceSlide'; import Text from '@components/Text/Text'; import Timer from '@components/Timer/Timer'; @@ -45,7 +48,18 @@ const TopicCard = () => { 이런 토픽은 안볼래요 - + + + + From 93e9834d0bdb88d72f523f75a7a70a1fc9a788a1 Mon Sep 17 00:00:00 2001 From: Jeon Date: Mon, 4 Dec 2023 21:57:05 +0900 Subject: [PATCH 3/5] feat: add ChoiceSlide --- .../ChoiceSlide/ChoiceSlide.styles.tsx | 2 ++ src/components/ChoiceSlide/ChoiceSlide.tsx | 28 +++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/components/ChoiceSlide/ChoiceSlide.styles.tsx b/src/components/ChoiceSlide/ChoiceSlide.styles.tsx index f4f6a85..91a4cca 100644 --- a/src/components/ChoiceSlide/ChoiceSlide.styles.tsx +++ b/src/components/ChoiceSlide/ChoiceSlide.styles.tsx @@ -1,11 +1,13 @@ import styled from 'styled-components'; const SlideContainer = styled.div` + position: relative; display: flex; align-items: center; width: 325px; height: 148px; padding: 0 44px; + overflow: hidden; `; export const AlphaSideContainer = styled(SlideContainer)` diff --git a/src/components/ChoiceSlide/ChoiceSlide.tsx b/src/components/ChoiceSlide/ChoiceSlide.tsx index cd0d76d..b251420 100644 --- a/src/components/ChoiceSlide/ChoiceSlide.tsx +++ b/src/components/ChoiceSlide/ChoiceSlide.tsx @@ -14,7 +14,18 @@ const ChoiceSlide = ({ side }: ChoiceSlideProps) => { if (side === 'A') { return ( - +
+ + A + +
+ 10년 전
과거로 가기 @@ -23,10 +34,21 @@ const ChoiceSlide = ({ side }: ChoiceSlideProps) => { } return ( - + 10년 전
- 과거로 가기 + 미래로 가기 +
+ + B + +
); }; From 8b12c50c1b35eaf818337d3dc43ec1bb4db092dc Mon Sep 17 00:00:00 2001 From: Jeon Date: Mon, 4 Dec 2023 21:57:14 +0900 Subject: [PATCH 4/5] feat: implement drag slider --- src/components/TopicCard/TopicCard.styles.tsx | 3 +- src/components/TopicCard/TopicCard.tsx | 73 ++++++++++++++----- 2 files changed, 58 insertions(+), 18 deletions(-) diff --git a/src/components/TopicCard/TopicCard.styles.tsx b/src/components/TopicCard/TopicCard.styles.tsx index d1d6be8..ff2cc26 100644 --- a/src/components/TopicCard/TopicCard.styles.tsx +++ b/src/components/TopicCard/TopicCard.styles.tsx @@ -72,8 +72,9 @@ export const SelectContainer = styled(motion.div)` gap: 15px; justify-content: center; width: max-content; + padding: 36px 0; + margin: 7px 0 19px; overflow: hidden; - transform: translateX(-19%); `; export const UserInfoContainer = styled.div` diff --git a/src/components/TopicCard/TopicCard.tsx b/src/components/TopicCard/TopicCard.tsx index 6ae6d28..30fe9bb 100644 --- a/src/components/TopicCard/TopicCard.tsx +++ b/src/components/TopicCard/TopicCard.tsx @@ -1,7 +1,6 @@ -import { motion } from 'framer-motion'; -import React from 'react'; +import { PanInfo, motion, useAnimation } from 'framer-motion'; +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router'; -import { Swiper, SwiperSlide } from 'swiper/react'; import ChoiceSlide from '@components/ChoiceSlide/ChoiceSlide'; import Text from '@components/Text/Text'; @@ -22,12 +21,43 @@ import { } from './TopicCard.styles'; const TopicCard = () => { + const containerRef = useRef(null); + + const controls = useAnimation(); + const navigate = useNavigate(); + const [containerWidth, setContainerWidth] = useState(0); + const [hasSlided, setHasSlided] = useState(false); + const profileName = '체리체리체리체리'; const topic = '10년전 또는 후로 갈 수 있다면?'; const endTime = new Date(); endTime.setHours(endTime.getHours() + 4); + const variants = { + A: { + translateX: 300, + opacity: 0, + }, + B: { + translateX: -800, + opacity: 0, + }, + }; - const navigate = useNavigate(); + useLayoutEffect(() => { + if (containerRef.current) { + setContainerWidth(containerRef.current.offsetWidth); + } + }, [containerRef]); + + const handleDragEnd = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { + if (info.velocity.x < 0 && info.offset.x < -(containerWidth / 2 + 7.5)) { + // B 슬라이드 + controls.start('B'); + } else if (info.velocity.x > 0 && info.offset.x > containerWidth / 2 + 7.5) { + // A 슬라이드 + controls.start('A'); + } + }; const handleSkipButton = () => { /*현재토픽 skip 후 다음토픽 으로 이동*/ @@ -35,7 +65,7 @@ const TopicCard = () => { }; return ( - + 실시간 인기 토픽 @@ -48,18 +78,27 @@ const TopicCard = () => { 이런 토픽은 안볼래요 - - - - + {containerWidth > 0 && ( + + + + + )} From d6c5d344368433ef0d719c80007eebbe2da3e0e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Mon, 4 Dec 2023 22:24:03 +0900 Subject: [PATCH 5/5] Revert "Merge branch 'feat/topic-choice' into dev" This reverts commit 63c126c6633021ff3af1e288ddf29c5c851a2c7c, reversing changes made to 3f6c4e92fba621d0c717b000782f7df754b242fe. --- .../ChoiceSlide/ChoiceSlide.styles.tsx | 25 -------- src/components/ChoiceSlide/ChoiceSlide.tsx | 56 ----------------- src/components/TopicCard/TopicCard.styles.tsx | 14 ++--- src/components/TopicCard/TopicCard.tsx | 61 ++----------------- 4 files changed, 9 insertions(+), 147 deletions(-) delete mode 100644 src/components/ChoiceSlide/ChoiceSlide.styles.tsx delete mode 100644 src/components/ChoiceSlide/ChoiceSlide.tsx diff --git a/src/components/ChoiceSlide/ChoiceSlide.styles.tsx b/src/components/ChoiceSlide/ChoiceSlide.styles.tsx deleted file mode 100644 index 91a4cca..0000000 --- a/src/components/ChoiceSlide/ChoiceSlide.styles.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import styled from 'styled-components'; - -const SlideContainer = styled.div` - position: relative; - display: flex; - align-items: center; - width: 325px; - height: 148px; - padding: 0 44px; - overflow: hidden; -`; - -export const AlphaSideContainer = styled(SlideContainer)` - justify-content: flex-end; - background-image: linear-gradient(270deg, #d04376 56.25%, transparent 100%); - border-top-right-radius: 74px; - border-bottom-right-radius: 74px; -`; - -export const BetaSideContainer = styled(SlideContainer)` - justify-content: flex-start; - background: linear-gradient(90deg, #1498aa 56.25%, rgb(20 152 170 / 0%) 100%); - border-top-left-radius: 74px; - border-bottom-left-radius: 74px; -`; diff --git a/src/components/ChoiceSlide/ChoiceSlide.tsx b/src/components/ChoiceSlide/ChoiceSlide.tsx deleted file mode 100644 index b251420..0000000 --- a/src/components/ChoiceSlide/ChoiceSlide.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import Text from '@components/Text/Text'; - -import { colors } from '@styles/theme'; - -import { AlphaSideContainer, BetaSideContainer } from './ChoiceSlide.styles'; - -interface ChoiceSlideProps { - side: 'A' | 'B'; -} - -const ChoiceSlide = ({ side }: ChoiceSlideProps) => { - if (side === 'A') { - return ( - -
- - A - -
- - 10년 전
- 과거로 가기 - - - ); - } - return ( - - - 10년 전
- 미래로 가기 - -
- - B - -
- - ); -}; - -export default ChoiceSlide; diff --git a/src/components/TopicCard/TopicCard.styles.tsx b/src/components/TopicCard/TopicCard.styles.tsx index ff2cc26..4408624 100644 --- a/src/components/TopicCard/TopicCard.styles.tsx +++ b/src/components/TopicCard/TopicCard.styles.tsx @@ -1,4 +1,3 @@ -import { motion } from 'framer-motion'; import { styled } from 'styled-components'; export const Container = styled.div` @@ -10,7 +9,6 @@ export const TopicCardContainer = styled.div` display: flex; flex-direction: column; height: 100%; - overflow: hidden; `; export const SheetContainer = styled.div` @@ -66,15 +64,13 @@ export const SkipButton = styled.button` cursor: pointer; `; -export const SelectContainer = styled(motion.div)` - position: relative; +export const SelectContainer = styled.div` display: flex; - gap: 15px; + align-items: center; justify-content: center; - width: max-content; - padding: 36px 0; - margin: 7px 0 19px; - overflow: hidden; + width: 100%; + height: 188px; + margin-top: 37px; `; export const UserInfoContainer = styled.div` diff --git a/src/components/TopicCard/TopicCard.tsx b/src/components/TopicCard/TopicCard.tsx index 30fe9bb..61518df 100644 --- a/src/components/TopicCard/TopicCard.tsx +++ b/src/components/TopicCard/TopicCard.tsx @@ -1,8 +1,6 @@ -import { PanInfo, motion, useAnimation } from 'framer-motion'; -import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; +import React from 'react'; import { useNavigate } from 'react-router'; -import ChoiceSlide from '@components/ChoiceSlide/ChoiceSlide'; import Text from '@components/Text/Text'; import Timer from '@components/Timer/Timer'; @@ -21,43 +19,12 @@ import { } from './TopicCard.styles'; const TopicCard = () => { - const containerRef = useRef(null); - - const controls = useAnimation(); - const navigate = useNavigate(); - const [containerWidth, setContainerWidth] = useState(0); - const [hasSlided, setHasSlided] = useState(false); - const profileName = '체리체리체리체리'; const topic = '10년전 또는 후로 갈 수 있다면?'; const endTime = new Date(); endTime.setHours(endTime.getHours() + 4); - const variants = { - A: { - translateX: 300, - opacity: 0, - }, - B: { - translateX: -800, - opacity: 0, - }, - }; - useLayoutEffect(() => { - if (containerRef.current) { - setContainerWidth(containerRef.current.offsetWidth); - } - }, [containerRef]); - - const handleDragEnd = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { - if (info.velocity.x < 0 && info.offset.x < -(containerWidth / 2 + 7.5)) { - // B 슬라이드 - controls.start('B'); - } else if (info.velocity.x > 0 && info.offset.x > containerWidth / 2 + 7.5) { - // A 슬라이드 - controls.start('A'); - } - }; + const navigate = useNavigate(); const handleSkipButton = () => { /*현재토픽 skip 후 다음토픽 으로 이동*/ @@ -65,7 +32,7 @@ const TopicCard = () => { }; return ( - + 실시간 인기 토픽 @@ -78,27 +45,7 @@ const TopicCard = () => { 이런 토픽은 안볼래요 - {containerWidth > 0 && ( - - - - - )} +