From cafe9420767e7da0d8a86948547791cb22ba2ba3 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Mon, 8 Jan 2024 00:46:27 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20a,b=EB=B2=84=ED=8A=BC=20transition?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicCreate.styles.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/routes/Topic/TopicCreate.styles.tsx b/src/routes/Topic/TopicCreate.styles.tsx index fa3f724..a07bc40 100644 --- a/src/routes/Topic/TopicCreate.styles.tsx +++ b/src/routes/Topic/TopicCreate.styles.tsx @@ -53,6 +53,7 @@ export const AButton = styled.button<{ selected: 'A' | 'B' | null }>` background-color: transparent; filter: ${(props) => (props.selected === 'B' ? 'blur(1px)' : 'blur(0px)')}; opacity: ${(props) => (props.selected === 'B' ? 0.3 : 1)}; + transition: 0.3s; &::after { position: absolute; @@ -75,6 +76,7 @@ export const BButton = styled.button<{ selected: 'A' | 'B' | null }>` background-color: transparent; filter: ${(props) => (props.selected === 'A' ? 'blur(1px)' : 'blur(0px)')}; opacity: ${(props) => (props.selected === 'A' ? 0.3 : 1)}; + transition: 0.3s; &::after { position: absolute; From 9ad36ba6da4135c081872a57533222a83cb883dd Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Mon, 8 Jan 2024 00:47:04 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=EB=84=A4?= =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=EC=97=90=20=ED=86=A0?= =?UTF-8?q?=ED=94=BD=EC=83=9D=EC=84=B1=ED=95=98=EA=B8=B0=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/BottomNavigation/BottomNavigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/commons/BottomNavigation/BottomNavigation.tsx b/src/components/commons/BottomNavigation/BottomNavigation.tsx index 3e57523..1d799fd 100644 --- a/src/components/commons/BottomNavigation/BottomNavigation.tsx +++ b/src/components/commons/BottomNavigation/BottomNavigation.tsx @@ -35,7 +35,7 @@ const BottomNavigation = () => { MY - + From b9762de00506e807e343cf37d8f98d962d3f90a5 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Wed, 10 Jan 2024 15:56:19 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=ED=86=A0=ED=94=BD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=B2=84=ED=8A=BC=20transition=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20&=20a.b=20=EB=B2=84=ED=8A=BC=20description=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicCreate.styles.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/routes/Topic/TopicCreate.styles.tsx b/src/routes/Topic/TopicCreate.styles.tsx index a07bc40..248506c 100644 --- a/src/routes/Topic/TopicCreate.styles.tsx +++ b/src/routes/Topic/TopicCreate.styles.tsx @@ -106,6 +106,7 @@ export const ADescription = styled.div<{ selected: 'A' | 'B' | null }>` text-align: start; text-shadow: 0 0 30px #242036; letter-spacing: 0.2px; + pointer-events: none; visibility: ${(props) => (props.selected === 'A' ? 'visible' : 'hidden')}; `; @@ -123,6 +124,7 @@ export const BDescription = styled.div<{ selected: 'A' | 'B' | null }>` text-align: end; text-shadow: 0 0 30px #242036; letter-spacing: 0.2px; + pointer-events: none; visibility: ${(props) => (props.selected === 'B' ? 'visible' : 'hidden')}; `; @@ -223,4 +225,5 @@ export const TopicCreateButton = styled.button<{ selected: 'A' | 'B' | null }>` visibility: ${(props) => (props.selected === null ? 'hidden' : 'visible')}; background-color: ${(props) => (props.selected === 'A' ? colors.A : colors.B)}; border-radius: 50px; + transition: 0.3s; `; From d14bf443afc06e8d38dc2ac9d3482b9a619a2717 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Wed, 10 Jan 2024 16:27:59 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20close=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/Header/CloseButton/CloseButton.tsx | 15 +++++++++++++-- src/routes/Topic/TopicCreate.tsx | 8 +++++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/commons/Header/CloseButton/CloseButton.tsx b/src/components/commons/Header/CloseButton/CloseButton.tsx index 49de4c9..3283532 100644 --- a/src/components/commons/Header/CloseButton/CloseButton.tsx +++ b/src/components/commons/Header/CloseButton/CloseButton.tsx @@ -1,11 +1,22 @@ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import { styled } from 'styled-components'; import { CloseIcon } from '@icons/index'; -const CloseButton = () => { +interface CloseButtonProps { + onClick?: () => void; +} + +const CloseButton = ({ onClick }: CloseButtonProps) => { + const navigate = useNavigate(); + + function handleCloseButtonClick() { + navigate(-1); + } + return ( - ); diff --git a/src/routes/Topic/TopicCreate.tsx b/src/routes/Topic/TopicCreate.tsx index 46cbc04..3df67a8 100644 --- a/src/routes/Topic/TopicCreate.tsx +++ b/src/routes/Topic/TopicCreate.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import CloseButton from '@components/commons/Header/CloseButton/CloseButton'; import Layout from '@components/commons/Layout/Layout'; @@ -29,6 +30,7 @@ import { const TopicCreate = () => { const [selected, setSelected] = useState<'A' | 'B' | null>(null); + const navigate = useNavigate(); function handleAButtonClick() { setSelected('A'); @@ -38,10 +40,14 @@ const TopicCreate = () => { setSelected('B'); } + function handleCloseButtonClick() { + navigate(-1); + } + return ( } + HeaderLeft={() => } HeaderCenter={() => ( 토픽 생성 From e5d6e0362507cbe9625ac550a0ba28d60495f108 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Wed, 10 Jan 2024 16:28:33 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=EB=B0=94=ED=85=80=EB=84=A4=EB=B9=84?= =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=20A,B=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EB=B0=94=EB=80=90=20=EB=A1=9C=EA=B3=A0=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/BottomNavigation/BottomNavigation.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/commons/BottomNavigation/BottomNavigation.tsx b/src/components/commons/BottomNavigation/BottomNavigation.tsx index 1d799fd..9f10c1a 100644 --- a/src/components/commons/BottomNavigation/BottomNavigation.tsx +++ b/src/components/commons/BottomNavigation/BottomNavigation.tsx @@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom'; import Text from '@components/commons/Text/Text'; -import { ABIcon, WriteBoxIcon, ProfileIcon, SelectedHomeIcon } from '@icons/index'; +import { ALogoIcon, BLogoIcon, WriteBoxIcon, ProfileIcon, SelectedHomeIcon } from '@icons/index'; import { Container, @@ -22,12 +22,12 @@ const BottomNavigation = () => { 홈 - + A사이드 - + B사이드 From a139e87d1ecc2e8530e5036795206abc44db61ef Mon Sep 17 00:00:00 2001 From: CHAEYOUNG SONG <77428876+chaeyoung103@users.noreply.github.com> Date: Wed, 10 Jan 2024 16:35:02 +0900 Subject: [PATCH 6/7] Update src/components/commons/Header/CloseButton/CloseButton.tsx Co-authored-by: Jeon Jinho --- src/components/commons/Header/CloseButton/CloseButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/commons/Header/CloseButton/CloseButton.tsx b/src/components/commons/Header/CloseButton/CloseButton.tsx index 3283532..e160c18 100644 --- a/src/components/commons/Header/CloseButton/CloseButton.tsx +++ b/src/components/commons/Header/CloseButton/CloseButton.tsx @@ -11,7 +11,7 @@ interface CloseButtonProps { const CloseButton = ({ onClick }: CloseButtonProps) => { const navigate = useNavigate(); - function handleCloseButtonClick() { + const handleCloseButtonClick = () => { navigate(-1); } From 2b77b6edeb30f215029f065fbf49096db0366c5f Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Wed, 10 Jan 2024 16:44:29 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20A,BButton=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicCreate.styles.tsx | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/routes/Topic/TopicCreate.styles.tsx b/src/routes/Topic/TopicCreate.styles.tsx index 248506c..356a5b5 100644 --- a/src/routes/Topic/TopicCreate.styles.tsx +++ b/src/routes/Topic/TopicCreate.styles.tsx @@ -92,39 +92,32 @@ export const BButton = styled.button<{ selected: 'A' | 'B' | null }>` } `; -export const ADescription = styled.div<{ selected: 'A' | 'B' | null }>` +const DescriptionBase = styled.div` position: absolute; - top: 0; - right: -111.78px; z-index: 2; width: 97px; height: 62px; font-size: 22px; font-weight: 700; line-height: 140%; - color: ${colors.A}; - text-align: start; text-shadow: 0 0 30px #242036; letter-spacing: 0.2px; pointer-events: none; +`; + +export const ADescription = styled(DescriptionBase)<{ selected: 'A' | 'B' | null }>` + top: 0; + right: -111.78px; + color: ${colors.A}; + text-align: start; visibility: ${(props) => (props.selected === 'A' ? 'visible' : 'hidden')}; `; -export const BDescription = styled.div<{ selected: 'A' | 'B' | null }>` - position: absolute; +export const BDescription = styled(DescriptionBase)<{ selected: 'A' | 'B' | null }>` bottom: 0; left: -111.78px; - z-index: 2; - width: 97px; - height: 62px; - font-size: 22px; - font-weight: 700; - line-height: 140%; color: ${colors.B}; text-align: end; - text-shadow: 0 0 30px #242036; - letter-spacing: 0.2px; - pointer-events: none; visibility: ${(props) => (props.selected === 'B' ? 'visible' : 'hidden')}; `;