From 40b1fafb0eb776a0c6835bc83a92615d386df734 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Thu, 11 Jan 2024 02:15:48 +0900 Subject: [PATCH 01/20] =?UTF-8?q?fix:=20svg=20=EC=88=98=EC=A0=95=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20icon=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/close.svg | 7 ++++--- src/assets/icons/right-chevron.svg | 4 ++-- src/components/Home/TopicSwiper/TopicSwiper.tsx | 11 +++++++---- .../commons/Header/CloseButton/CloseButton.tsx | 3 ++- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg index cbb849c..f82afbf 100644 --- a/src/assets/icons/close.svg +++ b/src/assets/icons/close.svg @@ -1,5 +1,6 @@ - - - + + + + diff --git a/src/assets/icons/right-chevron.svg b/src/assets/icons/right-chevron.svg index e88615a..0ee8dd7 100644 --- a/src/assets/icons/right-chevron.svg +++ b/src/assets/icons/right-chevron.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/Home/TopicSwiper/TopicSwiper.tsx b/src/components/Home/TopicSwiper/TopicSwiper.tsx index 89a664c..cee94aa 100644 --- a/src/components/Home/TopicSwiper/TopicSwiper.tsx +++ b/src/components/Home/TopicSwiper/TopicSwiper.tsx @@ -4,6 +4,8 @@ import SwiperCore from 'swiper'; import { Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; +import { colors } from '@styles/theme'; + import { RightChevronIcon } from '@icons/index'; SwiperCore.use([Navigation]); @@ -27,7 +29,7 @@ const TopicSwiper = ({ children }: TopicSwiperProps) => { setNextDisabled(false); }} > - + { setPrevDisabled(false); }} > - + ); @@ -59,8 +61,9 @@ const TopicSwiper = ({ children }: TopicSwiperProps) => { const SlideButton = styled.button<{ disabled: boolean }>` z-index: 100; - width: 40px; - height: 40px; + width: 32px; + height: 32px; + padding: 4.8px 10.4px; cursor: pointer; background-color: transparent; diff --git a/src/components/commons/Header/CloseButton/CloseButton.tsx b/src/components/commons/Header/CloseButton/CloseButton.tsx index e160c18..6e6a836 100644 --- a/src/components/commons/Header/CloseButton/CloseButton.tsx +++ b/src/components/commons/Header/CloseButton/CloseButton.tsx @@ -13,7 +13,7 @@ const CloseButton = ({ onClick }: CloseButtonProps) => { const handleCloseButtonClick = () => { navigate(-1); - } + }; return (
- 눌러서 선택하기 - - - - - - - - - - Anything
Side - - - - - - Business
Side - - - - - - 어떤 토픽을
만들어 볼까요? - - - - - 
-            {selected === 'A'
-              ? '가벼운 주제부터 무거운 고민까지 \n 세상의 모든 토픽을 담아요'
-              : '카피라이팅, A/B Test등 다양한 \n 직무의 고민과 토픽을 담아요'}
-
- - 토픽 만들기 - - - - - + ); }; diff --git a/src/routes/Topic/TopicCreate.styles.tsx b/src/routes/Topic/TopicSideSelection.styles.tsx similarity index 99% rename from src/routes/Topic/TopicCreate.styles.tsx rename to src/routes/Topic/TopicSideSelection.styles.tsx index 356a5b5..7823660 100644 --- a/src/routes/Topic/TopicCreate.styles.tsx +++ b/src/routes/Topic/TopicSideSelection.styles.tsx @@ -70,6 +70,7 @@ export const AButton = styled.button<{ selected: 'A' | 'B' | null }>` `; export const BButton = styled.button<{ selected: 'A' | 'B' | null }>` + position: relative; z-index: ${(props) => (props.selected === 'A' ? 0 : 1)}; width: 129.31px; height: 153px; diff --git a/src/routes/Topic/TopicSideSelection.tsx b/src/routes/Topic/TopicSideSelection.tsx new file mode 100644 index 0000000..13253dd --- /dev/null +++ b/src/routes/Topic/TopicSideSelection.tsx @@ -0,0 +1,110 @@ +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'; +import Text from '@components/commons/Text/Text'; + +import { colors } from '@styles/theme'; + +import { ALogoIcon, BLogoIcon, DownChevronIcon, TopicCreatBackgrounIcon } from '@icons/index'; + +import { + SelectDescription, + DescriptionContainer, + DescriptionBlur, + AButton, + BButton, + Background, + ButtonContainer, + Container, + Description, + DownShevron, + EmptyDiv, + ADescription, + BDescription, + BackgroundBlur, + SubDescription, + TopicCreateButton, +} from './TopicSideSelection.styles'; + +const TopicSideSelection = () => { + const [selected, setSelected] = useState<'A' | 'B' | null>(null); + const navigate = useNavigate(); + + const handleAButtonClick = () => { + setSelected('A'); + }; + + const handleBButtonClick = () => { + setSelected('B'); + }; + + const handleTopicCreateButtonClick = () => { + if (selected !== null) { + navigate(`/topics/create/${selected}`); + } + }; + + return ( + } + HeaderCenter={() => ( + + 토픽 생성 + + )} + HeaderRight={() => } + > + + + + A/B사이드 +
+ 눌러서 선택하기 + + + + + + + + + + Anything
Side + + + + + + Business
Side + + + + + + 어떤 토픽을
만들어 볼까요? + + + + + 
+            {selected === 'A'
+              ? '가벼운 주제부터 무거운 고민까지 \n 세상의 모든 토픽을 담아요'
+              : '카피라이팅, A/B Test등 다양한 \n 직무의 고민과 토픽을 담아요'}
+
+ + + 토픽 만들기 + + + + + + + + ); +}; + +export default TopicSideSelection; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 075a980..9eb4f97 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -7,6 +7,7 @@ import Login from './Auth/login/Login'; import Signup from './Auth/signup/Signup'; import Home from './Home/Home'; import TopicCreate from './Topic/TopicCreate'; +import TopicSideSelection from './Topic/TopicSideSelection'; const Router = () => { const [isAuthorized, setIsAuthorized] = React.useState(true); @@ -21,6 +22,10 @@ const Router = () => { }, { path: 'topics/create', + element: , + }, + { + path: 'topics/create/:topicSide', element: , }, ], From e5fc719d50ee05a823c657324458d7cbdfea6cea Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Thu, 11 Jan 2024 22:32:16 +0900 Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=ED=81=B0=20=EC=95=84=EB=9E=98?= =?UTF-8?q?=ED=99=94=EC=82=B4=ED=91=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=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/assets/icons/big-down-chevron.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/assets/icons/big-down-chevron.svg diff --git a/src/assets/icons/big-down-chevron.svg b/src/assets/icons/big-down-chevron.svg new file mode 100644 index 0000000..96160e7 --- /dev/null +++ b/src/assets/icons/big-down-chevron.svg @@ -0,0 +1,4 @@ + + + + From e1ff6d168bca9a5f9df5faf84b28f9dabc466964 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Thu, 11 Jan 2024 22:32:55 +0900 Subject: [PATCH 04/20] =?UTF-8?q?fix:=20=EC=95=84=EB=9E=98=20=ED=99=94?= =?UTF-8?q?=EC=82=B4=ED=91=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/down-chevron.svg | 10 ++++++---- src/assets/icons/index.ts | 2 ++ src/assets/icons/right-chevron.svg | 4 +++- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/assets/icons/down-chevron.svg b/src/assets/icons/down-chevron.svg index fbd4c6c..82e9389 100644 --- a/src/assets/icons/down-chevron.svg +++ b/src/assets/icons/down-chevron.svg @@ -1,4 +1,6 @@ - - - \ No newline at end of file + + + + + + diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 35ed4a6..5f3c6f7 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -5,6 +5,7 @@ import AlarmIcon from './alarm-default.svg?react'; import NewAlarmIcon from './alarm-new.svg?react'; import AppleIcon from './apple.svg?react'; import BLogoIcon from './b-logo.svg?react'; +import BigDownChevronIcon from './big-down-chevron.svg?react'; import CloseIcon from './close.svg?react'; import DownChevronIcon from './down-chevron.svg?react'; import GoogleIcon from './google.svg?react'; @@ -47,6 +48,7 @@ export { SizeUpIcon, CloseIcon, DownChevronIcon, + BigDownChevronIcon, TopicCreatBackgrounIcon, ALogoIcon, BLogoIcon, diff --git a/src/assets/icons/right-chevron.svg b/src/assets/icons/right-chevron.svg index 0ee8dd7..05cce94 100644 --- a/src/assets/icons/right-chevron.svg +++ b/src/assets/icons/right-chevron.svg @@ -1,3 +1,5 @@ - + + + From 34b38696c666bef708228113698446e122dc8a14 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Thu, 11 Jan 2024 22:33:27 +0900 Subject: [PATCH 05/20] =?UTF-8?q?fix:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicSideSelection.styles.tsx | 8 ++++++-- src/routes/Topic/TopicSideSelection.tsx | 10 ++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/routes/Topic/TopicSideSelection.styles.tsx b/src/routes/Topic/TopicSideSelection.styles.tsx index 7823660..d328351 100644 --- a/src/routes/Topic/TopicSideSelection.styles.tsx +++ b/src/routes/Topic/TopicSideSelection.styles.tsx @@ -10,6 +10,7 @@ export const Container = styled.div` justify-content: flex-start; height: 100%; padding-top: 19px; + overflow: hidden; background-color: ${(props) => props.theme.colors.navy}; `; @@ -19,6 +20,9 @@ export const EmptyDiv = styled.div` `; export const DownShevron = styled.div` + display: flex; + align-items: center; + justify-content: center; width: 24px; height: 24px; margin-top: 2px; @@ -57,11 +61,11 @@ export const AButton = styled.button<{ selected: 'A' | 'B' | null }>` &::after { position: absolute; - top: 20px; + top: 28px; right: 0; z-index: -1; width: 30px; - height: 123px; + height: 119px; content: ''; background-color: transparent; box-shadow: ${(props) => diff --git a/src/routes/Topic/TopicSideSelection.tsx b/src/routes/Topic/TopicSideSelection.tsx index 13253dd..bd60bae 100644 --- a/src/routes/Topic/TopicSideSelection.tsx +++ b/src/routes/Topic/TopicSideSelection.tsx @@ -7,7 +7,13 @@ import Text from '@components/commons/Text/Text'; import { colors } from '@styles/theme'; -import { ALogoIcon, BLogoIcon, DownChevronIcon, TopicCreatBackgrounIcon } from '@icons/index'; +import { + ALogoIcon, + BLogoIcon, + BigDownChevronIcon, + RightChevronIcon, + TopicCreatBackgrounIcon, +} from '@icons/index'; import { SelectDescription, @@ -65,7 +71,7 @@ const TopicSideSelection = () => { 눌러서 선택하기 - + From 5ef9cf55f471cf16b94c8fdf27cc150865b69f43 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Thu, 11 Jan 2024 22:34:42 +0900 Subject: [PATCH 06/20] =?UTF-8?q?feat:=20=ED=86=A0=ED=94=BD=20=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20side?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20button=20ui=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EB=90=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicCreate.sytles.tsx | 47 ++++++++++++++++++++ src/routes/Topic/TopicCreate.tsx | 57 +++++++++++++++++++++---- 2 files changed, 96 insertions(+), 8 deletions(-) diff --git a/src/routes/Topic/TopicCreate.sytles.tsx b/src/routes/Topic/TopicCreate.sytles.tsx index 986c1a8..119467b 100644 --- a/src/routes/Topic/TopicCreate.sytles.tsx +++ b/src/routes/Topic/TopicCreate.sytles.tsx @@ -23,3 +23,50 @@ export const EmptyDiv = styled.div` width: 24px; height: 24px; `; + +export const HeaderCenterContainer = styled.div` + display: flex; + gap: 8px; + align-items: center; + justify-content: center; +`; + +export const SideButton = styled.button<{ side: string | undefined }>` + position: relative; + display: flex; + gap: 3px; + align-items: center; + justify-content: center; + width: 90px; + height: 25px; + padding: 2px 10px; + background-color: ${(props) => + props.side === 'A' ? 'rgb(208 67 118 / 20%)' : 'rgb(20 152 170 / 20%)'}; + border-radius: 36px; +`; + +export const SideChangeButton = styled.button<{ side: string | undefined; isHidden: boolean }>` + position: absolute; + bottom: -42px; + left: -9.5px; + z-index: 1; + display: flex; + gap: 1px; + align-items: center; + justify-content: center; + width: 154px; + height: 32px; + padding: 6px 20px; + visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')}; + background-color: ${(props) => + props.side === 'B' ? 'rgb(208 67 118 / 20%)' : 'rgb(20 152 170 / 20%)'}; + border-radius: 50px; +`; + +export const DownShevron = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + width: 14px; + height: 14px; +`; diff --git a/src/routes/Topic/TopicCreate.tsx b/src/routes/Topic/TopicCreate.tsx index db951b5..c0e162a 100644 --- a/src/routes/Topic/TopicCreate.tsx +++ b/src/routes/Topic/TopicCreate.tsx @@ -1,20 +1,39 @@ import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; -import CloseButton from '@components/commons/Header/CloseButton/CloseButton'; import Layout from '@components/commons/Layout/Layout'; import Text from '@components/commons/Text/Text'; import { colors } from '@styles/theme'; -import { ALogoIcon, RightChevronIcon } from '@icons/index'; +import { DownChevronIcon, RightChevronIcon } from '@icons/index'; -import { BackButton } from './TopicCreate.sytles'; +import { + BackButton, + DownShevron, + HeaderCenterContainer, + SideButton, + SideChangeButton, +} from './TopicCreate.sytles'; import { Container, EmptyDiv } from './TopicSideSelection.styles'; const TopicCreate = () => { - const [selected, setSelected] = useState<'A' | 'B' | null>(null); const navigate = useNavigate(); + const { topicSide } = useParams(); + const [isHidden, setIsHidden] = useState(true); + + const handleSideButtonClick = () => { + if (isHidden) { + setIsHidden(false); + } else { + setIsHidden(true); + } + }; + + const handleSideChangeButtonClick = (newtopicSideValue: string) => { + navigate(`/topics/create/${newtopicSideValue}`); + }; + return ( { )} HeaderCenter={() => ( - - 토픽 만들기 - + + + 토픽 만들기 + + + + {topicSide} 사이드 + + + + + handleSideChangeButtonClick(topicSide === 'A' ? 'B' : 'A')} + > + + {topicSide === 'A' ? 'B' : 'A'} 사이드 + + + 로 변경하기 + + + + )} HeaderRight={() => } > From cf2c7ed3d06dc716e9f21d240e9e73b269c825f4 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 14 Jan 2024 22:47:23 +0900 Subject: [PATCH 07/20] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD,=20A,B?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=20=EA=B3=B5=EC=9A=A9=20ui=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicCreate.sytles.tsx | 4 ++-- src/routes/Topic/TopicCreate.tsx | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/routes/Topic/TopicCreate.sytles.tsx b/src/routes/Topic/TopicCreate.sytles.tsx index 119467b..5b36ace 100644 --- a/src/routes/Topic/TopicCreate.sytles.tsx +++ b/src/routes/Topic/TopicCreate.sytles.tsx @@ -6,10 +6,10 @@ export const Container = styled.div` position: relative; display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; justify-content: flex-start; height: 100%; - padding-top: 19px; + padding: 51px 20px 0; background-color: ${(props) => props.theme.colors.navy}; `; diff --git a/src/routes/Topic/TopicCreate.tsx b/src/routes/Topic/TopicCreate.tsx index c0e162a..184bdb9 100644 --- a/src/routes/Topic/TopicCreate.tsx +++ b/src/routes/Topic/TopicCreate.tsx @@ -14,8 +14,9 @@ import { HeaderCenterContainer, SideButton, SideChangeButton, + Container, + EmptyDiv, } from './TopicCreate.sytles'; -import { Container, EmptyDiv } from './TopicSideSelection.styles'; const TopicCreate = () => { const navigate = useNavigate(); @@ -38,7 +39,7 @@ const TopicCreate = () => { ( - navigate(-1)}> + navigate(`/topics/create`)}> )} @@ -71,7 +72,11 @@ const TopicCreate = () => { )} HeaderRight={() => } > - + + + 어떤 주제로 물어볼까요? + + ); }; From 4fbf028fe582fbfa3e7a2b187895a73403e338ff Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 21 Jan 2024 21:31:04 +0900 Subject: [PATCH 08/20] =?UTF-8?q?feat:=20TopicCreateTextInput=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/index.ts | 2 + src/assets/icons/rotate.svg | 3 + .../TopicCreateTextInput.styles.tsx | 69 ++++++++++++++ .../TopicCreate/TopicCreateTextInput.tsx | 91 +++++++++++++++++++ 4 files changed, 165 insertions(+) create mode 100644 src/assets/icons/rotate.svg create mode 100644 src/components/TopicCreate/TopicCreateTextInput.styles.tsx create mode 100644 src/components/TopicCreate/TopicCreateTextInput.tsx diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 5f3c6f7..5d5d0e5 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -20,6 +20,7 @@ import RefreshIcon from './refresh.svg?react'; import ReportIcon from './report.svg?react'; import RightChevronIcon from './right-chevron.svg?react'; import RightDoubleArrowIcon from './right-double-arrow.svg?react'; +import RotateIcon from './rotate.svg?react'; import SizeUpIcon from './size-up.svg?react'; import ThumbsIcon from './thumbs.svg?react'; import TopicCreatBackgrounIcon from './topic-create-background.svg?react'; @@ -52,4 +53,5 @@ export { TopicCreatBackgrounIcon, ALogoIcon, BLogoIcon, + RotateIcon, }; diff --git a/src/assets/icons/rotate.svg b/src/assets/icons/rotate.svg new file mode 100644 index 0000000..7225cf0 --- /dev/null +++ b/src/assets/icons/rotate.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/TopicCreate/TopicCreateTextInput.styles.tsx b/src/components/TopicCreate/TopicCreateTextInput.styles.tsx new file mode 100644 index 0000000..fbef74a --- /dev/null +++ b/src/components/TopicCreate/TopicCreateTextInput.styles.tsx @@ -0,0 +1,69 @@ +import { styled } from 'styled-components'; + +import { colors } from '@styles/theme'; + +export const ReplaceButton = styled.div` + display: flex; + flex-direction: row; + gap: 6px; + align-items: center; + justify-content: space-between; + width: 111px; + height: 18px; +`; + +export const ReplaceIcon = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; +`; + +export const TextInputContainer = styled.div` + position: relative; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 57px; + overflow: hidden; + background-color: transparent; + border-radius: 10px; +`; + +export const TextInputTextContainer = styled.div` + position: absolute; + top: 50%; + left: 50%; + display: flex; + align-items: center; + justify-content: center; + transform: translate(-50%, -50%); +`; + +export const Input = styled.input` + width: 100%; + height: 100%; + padding: 16px; + font-size: 1.8rem; + font-weight: 500; + line-height: 1.4; + color: ${colors.white}; + background-color: rgb(77 59 124 / 40%); + border: none; + border-radius: 10px; + outline: none; + + &::placeholder { + color: ${colors.purple}; + } +`; + +export const InputSuffix = styled.div` + position: absolute; + top: 50%; + right: 16px; + transform: translateY(-50%); +`; diff --git a/src/components/TopicCreate/TopicCreateTextInput.tsx b/src/components/TopicCreate/TopicCreateTextInput.tsx new file mode 100644 index 0000000..8a72f07 --- /dev/null +++ b/src/components/TopicCreate/TopicCreateTextInput.tsx @@ -0,0 +1,91 @@ +import { Register } from '@tanstack/react-query'; +import React from 'react'; +import { RegisterOptions, useFormContext } from 'react-hook-form'; +import { CONFIG, INPUT_TYPE, InputType } from 'src/constants/form'; + +import { Col, Row } from '@components/commons/Flex/Flex'; +import Text from '@components/commons/Text/Text'; + +import { colors } from '@styles/theme'; + +import { RotateIcon } from '@icons/index'; + +import { + Input, + ReplaceButton, + ReplaceIcon, + TextInputContainer, + TextInputTextContainer, + InputSuffix, +} from './TopicCreateTextInput.styles'; + +interface TopicCreareProps { + topic: 'A' | 'B'; + topicContent: string; + onKeyDown?: (e: React.KeyboardEvent) => void; +} + +const TopicCreateTextInput = ({ topic, topicContent }: TopicCreareProps) => { + const { register, watch } = useFormContext(); + const ATopicProgress = watch(INPUT_TYPE.ATOPIC) + ? `${watch(INPUT_TYPE.ATOPIC)?.length}/25` + : '0/25'; + const BTopicProgress = watch(INPUT_TYPE.BTOPIC) + ? `${watch(INPUT_TYPE.BTOPIC)?.length}/25` + : '0/25'; + return ( + + + + 어떤 선택지가 있나요? + + + + + + + AB 선택지 바꾸기 + + + + + + + + A + + + + + + {ATopicProgress} + + + + + + + B + + + + + + {BTopicProgress} + + + + + + ); +}; + +export default TopicCreateTextInput; From d1d5f43f928dab1b89893dbddbc10f53559abcab Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 21 Jan 2024 21:32:06 +0900 Subject: [PATCH 09/20] =?UTF-8?q?feat:=20input=20form=EC=97=90=20topicTitl?= =?UTF-8?q?e,=20aTopic,=20bTopic=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/form.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/constants/form.ts b/src/constants/form.ts index 877a99a..c0e0a05 100644 --- a/src/constants/form.ts +++ b/src/constants/form.ts @@ -9,6 +9,9 @@ export const INPUT_TYPE = { BIRTHDAY: 'birth', GENDER: 'gender', JOB: 'job', + TOPICTITLE: 'topicTitle', + ATOPIC: 'aTopic', + BTOPIC: 'bTopic', } as const; export type ConfigKeys = keyof typeof INPUT_TYPE; @@ -59,4 +62,30 @@ export const CONFIG: Record = { }, }, }, + TOPICTITLE: { + options: { + required: { + value: true, + message: '제목을 입력해주세요.', + }, + pattern: { + value: /^[가-힣a-zA-Z0-9!@#$%^()]+$/, + message: '특수문자는 !@#$%^()만 사용하실 수 있습니다.', + }, + maxLength: { + value: 20, + message: '제목은 20자리 이내로 입력해주세요.', + }, + }, + }, + ATOPIC: { + options: { + required: true, + }, + }, + BTOPIC: { + options: { + required: true, + }, + }, } as const; From 2bd446da58d3317cf20c48857964f4ca7ad83895 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 21 Jan 2024 21:33:50 +0900 Subject: [PATCH 10/20] =?UTF-8?q?fix:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20-=20color=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/theme.ts | 30 ++++++++++++++----- .../commons/TextInput/TextInput.tsx | 4 +-- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/assets/styles/theme.ts b/src/assets/styles/theme.ts index 744d6a8..8982b52 100644 --- a/src/assets/styles/theme.ts +++ b/src/assets/styles/theme.ts @@ -2,14 +2,29 @@ import { DefaultTheme } from 'styled-components/dist/types'; export const colors = { purple: '#A46FF3', - sub_purple: '#624392', - sub_purple2: '#BE28F3', + purple_30: 'rgba(164, 111, 243, 0.30)', + purple_60: 'rgba(164, 111, 243, 0.60)', + purple2: '#BE28F3', navy: '#242036', + navy_20: 'rgba(36, 32, 54, 0.20)', + navy_40: 'rgba(36, 32, 54, 0.40)', + navy_60: 'rgba(36, 32, 54, 0.60)', + navy_80: 'rgba(36, 32, 54, 0.80)', navy2: '#4D3B7C', - sub_navy2: '#4D3B7C', + navy2_20: 'rgba(77, 59, 124, 0.20)', + navy2_40: 'rgba(77, 59, 124, 0.40)', + navy2_60: 'rgba(77, 59, 124, 0.60)', + navy2_80: 'rgba(77, 59, 124, 0.80)', A: '#D04376', - sub_A: '#DF8AA9', + A_20: 'rgba(208, 67, 118, 0.20)', + A_40: 'rgba(208, 67, 118, 0.40)', + A_60: 'rgba(208, 67, 118, 0.60)', + A_80: 'rgba(208, 67, 118, 0.80)', B: '#1498AA', + B_20: 'rgba(20, 152, 170, 0.20)', + B_40: 'rgba(20, 152, 170, 0.40)', + B_60: 'rgba(20, 152, 170, 0.60)', + B_80: 'rgba(20, 152, 170, 0.80)', black: '#000000', white: '#FFFFFF', white_20: 'rgba(255, 255, 255, 0.20)', @@ -20,6 +35,7 @@ export const colors = { black_60: 'rgba(0, 0, 0, 0.60)', white_80: 'rgba(255, 255, 255, 0.80)', black_80: 'rgba(0, 0, 0, 0.80)', + navywhite_20: '#504D5E', }; export const zIndex = { @@ -43,7 +59,7 @@ export const input = { backgroundColor: '#342b52', }, error: { - border: `1px solid ${colors.sub_purple2}`, + border: `1px solid ${colors.purple2}`, backgroundColor: '#342b52', }, }, @@ -54,7 +70,7 @@ export const input = { lineHeight: '140%', padding: '0 0 10px 0', border: 'none', - borderBottom: `1px solid ${colors.sub_navy2}`, + borderBottom: `1px solid ${colors.navy2}`, backgroundColor: 'transparent', borderRadius: 0, outline: 'none', @@ -65,7 +81,7 @@ export const input = { lineHeight: '140%', padding: '0 0 10px 0', border: 'none', - borderBottom: `1px solid ${colors.sub_purple2}`, + borderBottom: `1px solid ${colors.purple2}`, borderRadius: 0, backgroundColor: 'transparent', outline: 'none', diff --git a/src/components/commons/TextInput/TextInput.tsx b/src/components/commons/TextInput/TextInput.tsx index 8e76a7e..5524da6 100644 --- a/src/components/commons/TextInput/TextInput.tsx +++ b/src/components/commons/TextInput/TextInput.tsx @@ -34,7 +34,7 @@ const TextInput = (props: TextInputProps) => { const inputTheme = input[theme]; return ( -
+
{left && {left()}} { {errors[id] && ( - + * {errors[id]?.message?.toString()} )} From c2e7e0f83c8fb9018c460f38e21668555374c3ba Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 21 Jan 2024 21:34:16 +0900 Subject: [PATCH 11/20] =?UTF-8?q?fix:=20input=20suppix=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/TextInput/TextInput.styles.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/commons/TextInput/TextInput.styles.tsx b/src/components/commons/TextInput/TextInput.styles.tsx index 191753e..5b7450b 100644 --- a/src/components/commons/TextInput/TextInput.styles.tsx +++ b/src/components/commons/TextInput/TextInput.styles.tsx @@ -37,14 +37,15 @@ const InputPrefix = styled.div` const InputSuffix = styled.div` position: absolute; - top: 14px; right: 16px; + bottom: calc(50% - 10px); + transform: translateY(-50%); `; const ErrorMessage = styled.div` position: absolute; bottom: -28px; - left: 16px; + left: 0; `; export { StyledInput, InputContainer, InputPrefix, InputSuffix, ErrorMessage }; From 4466d6438cbbad9edf37ee7d6bef691f054163f0 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 21 Jan 2024 21:34:46 +0900 Subject: [PATCH 12/20] =?UTF-8?q?fix:=20Text=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=20style=20=EC=A7=80=EC=A0=95=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Text/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/commons/Text/Text.tsx b/src/components/commons/Text/Text.tsx index 1cf015d..3d11fb4 100644 --- a/src/components/commons/Text/Text.tsx +++ b/src/components/commons/Text/Text.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; -export interface TextProps { +export interface TextProps extends React.HTMLAttributes { className?: string; size: number; children: React.ReactNode; From 3142b994c1ae6430940b3f3621ee0f6af3bbe78c Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Sun, 21 Jan 2024 22:07:47 +0900 Subject: [PATCH 13/20] =?UTF-8?q?fix:=20color=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/theme.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/assets/styles/theme.ts b/src/assets/styles/theme.ts index 8982b52..8dcd91d 100644 --- a/src/assets/styles/theme.ts +++ b/src/assets/styles/theme.ts @@ -36,6 +36,9 @@ export const colors = { white_80: 'rgba(255, 255, 255, 0.80)', black_80: 'rgba(0, 0, 0, 0.80)', navywhite_20: '#504D5E', + navywhite_40: '#7C7986', + navywhite_60: '#A7A6AF', + navywhite_80: '#D3D2D7', }; export const zIndex = { From 08cdc1847b0f0da5a5ca33f5055ef72085e1081d Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Tue, 23 Jan 2024 15:01:38 +0900 Subject: [PATCH 14/20] =?UTF-8?q?feat:=20Default=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EA=B3=B5=EC=9A=A9=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/Button/DefaultButton.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/commons/Button/DefaultButton.tsx diff --git a/src/components/commons/Button/DefaultButton.tsx b/src/components/commons/Button/DefaultButton.tsx new file mode 100644 index 0000000..2af95fb --- /dev/null +++ b/src/components/commons/Button/DefaultButton.tsx @@ -0,0 +1,31 @@ +import { styled } from 'styled-components'; + +import { colors } from '@styles/theme'; + +interface DefaultButtonProps extends React.HTMLAttributes { + onClick: () => void; + disabled: boolean; + title: string; +} + +const DefaultButton = ({ onClick, disabled, title }: DefaultButtonProps) => { + return ( + + {title} + + ); +}; + +const StyledButton = styled.button<{ disabled: boolean }>` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 52px; + color: ${(props) => (props.disabled ? colors.navywhite_40 : colors.white)}; + cursor: pointer; + background-color: ${(props) => (props.disabled ? colors.navywhite_20 : colors.purple)}; + border-radius: 10px; +`; + +export default DefaultButton; From bff5d7356542d6b4889fe8253a57605513f03906 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Tue, 23 Jan 2024 15:02:02 +0900 Subject: [PATCH 15/20] =?UTF-8?q?feat:=20=ED=86=A0=ED=94=BD=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=99=94=EB=A9=B4=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.sytles.tsx | 8 ++++++++ src/routes/Topic/TopicCreate.tsx | 15 +++++++-------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/routes/Topic/TopicCreate.sytles.tsx b/src/routes/Topic/TopicCreate.sytles.tsx index 5b36ace..77b1025 100644 --- a/src/routes/Topic/TopicCreate.sytles.tsx +++ b/src/routes/Topic/TopicCreate.sytles.tsx @@ -8,11 +8,19 @@ export const Container = styled.div` flex-direction: column; align-items: flex-start; justify-content: flex-start; + width: 100%; height: 100%; padding: 51px 20px 0; background-color: ${(props) => props.theme.colors.navy}; `; +export const TitleInputContainer = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; +`; + export const BackButton = styled.button` width: 24px; height: 24px; diff --git a/src/routes/Topic/TopicCreate.tsx b/src/routes/Topic/TopicCreate.tsx index 184bdb9..3ef4c90 100644 --- a/src/routes/Topic/TopicCreate.tsx +++ b/src/routes/Topic/TopicCreate.tsx @@ -8,13 +8,14 @@ import { colors } from '@styles/theme'; import { DownChevronIcon, RightChevronIcon } from '@icons/index'; +import ATopicCreate from './ATopicCreate'; +import BTopicCreate from './BTopicCreate'; import { BackButton, DownShevron, HeaderCenterContainer, SideButton, SideChangeButton, - Container, EmptyDiv, } from './TopicCreate.sytles'; @@ -32,14 +33,16 @@ const TopicCreate = () => { }; const handleSideChangeButtonClick = (newtopicSideValue: string) => { - navigate(`/topics/create/${newtopicSideValue}`); + navigate(`/topics/create/${newtopicSideValue}`, { replace: true }); }; + const Container = topicSide === 'A' ? : ; + return ( ( - navigate(`/topics/create`)}> + navigate(-1)}> )} @@ -72,11 +75,7 @@ const TopicCreate = () => { )} HeaderRight={() => } > - - - 어떤 주제로 물어볼까요? - - + {Container} ); }; From 0d6b0812f484072ceea62525fe312b0cd060fd33 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Tue, 23 Jan 2024 15:02:35 +0900 Subject: [PATCH 16/20] =?UTF-8?q?feat:=20=ED=86=A0=ED=94=BD=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=99=94=EB=A9=B4=20A=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=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/ATopicCreate.styles.tsx | 67 ++++++++++++++++++++++++ src/routes/Topic/ATopicCreate.tsx | 66 +++++++++++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 src/routes/Topic/ATopicCreate.styles.tsx create mode 100644 src/routes/Topic/ATopicCreate.tsx diff --git a/src/routes/Topic/ATopicCreate.styles.tsx b/src/routes/Topic/ATopicCreate.styles.tsx new file mode 100644 index 0000000..12b3e8d --- /dev/null +++ b/src/routes/Topic/ATopicCreate.styles.tsx @@ -0,0 +1,67 @@ +import { styled } from 'styled-components'; + +import { colors } from '@styles/theme'; + +export const Container = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + height: 100%; + padding: 51px 20px 0; + background-color: ${colors.navy}; +`; + +export const ReplaceButton = styled.div` + display: flex; + flex-direction: row; + gap: 6px; + align-items: center; + justify-content: space-between; + width: 111px; + height: 18px; +`; + +export const ReplaceIcon = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; +`; + +export const TextInputContainer = styled.div` + position: relative; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 57px; + overflow: hidden; + background-color: ${colors.navy2}; + border-radius: 10px; + opacity: 0.4; +`; + +export const TextInputTextContainer = styled.div` + position: absolute; + top: 50%; + left: 50%; + display: flex; + align-items: center; + justify-content: center; + transform: translate(-50%, -50%); +`; + +export const SubmitButton = styled.div` + position: absolute; + bottom: 48px; + left: 50%; + justify-content: center; + width: 100%; + padding: 0 20px; + transform: translateX(-50%); +`; diff --git a/src/routes/Topic/ATopicCreate.tsx b/src/routes/Topic/ATopicCreate.tsx new file mode 100644 index 0000000..d314669 --- /dev/null +++ b/src/routes/Topic/ATopicCreate.tsx @@ -0,0 +1,66 @@ +import React, { useState } from 'react'; +import { FormProvider, useForm } from 'react-hook-form'; +import { CONFIG, INPUT_TYPE } from 'src/constants/form'; + +import DefaultButton from '@components/commons/Button/DefaultButton'; +import { Col, Row } from '@components/commons/Flex/Flex'; +import Text from '@components/commons/Text/Text'; +import TextInput from '@components/commons/TextInput/TextInput'; +import TopicCreateTextInput from '@components/TopicCreate/TopicCreateTextInput'; + +import { colors } from '@styles/theme'; + +import { Container, SubmitButton } from './ATopicCreate.styles'; + +interface TopicCreateDTO { + topicTitle: string; + ATopic: string; + BTopic: string; +} + +const ATopicCreate = () => { + const methods = useForm({ mode: 'onChange' }); + + const titleProgress = methods.watch(INPUT_TYPE.TOPICTITLE) + ? `${methods.watch(INPUT_TYPE.TOPICTITLE)?.length}/20` + : '0/20'; + + const handleSummitButtonClick = () => { + console.log('summit'); + }; + + return ( + + + + + + 어떤 주제로 물어볼까요? + + ( + + {titleProgress} + + )} + /> + + + + + + + + + ); +}; + +export default ATopicCreate; From f67b934be0e4f121d4c306de2d7f8b8c1d1ff711 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Tue, 23 Jan 2024 15:03:02 +0900 Subject: [PATCH 17/20] =?UTF-8?q?feat:=20=ED=86=A0=ED=94=BD=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=99=94=EB=A9=B4=20B=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=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/BTopicCreate.styles.tsx | 15 +++++++ src/routes/Topic/BTopicCreate.tsx | 57 ++++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/routes/Topic/BTopicCreate.styles.tsx create mode 100644 src/routes/Topic/BTopicCreate.tsx diff --git a/src/routes/Topic/BTopicCreate.styles.tsx b/src/routes/Topic/BTopicCreate.styles.tsx new file mode 100644 index 0000000..031f83d --- /dev/null +++ b/src/routes/Topic/BTopicCreate.styles.tsx @@ -0,0 +1,15 @@ +import { styled } from 'styled-components'; + +import { colors } from '@styles/theme'; + +export const Container = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + height: 100%; + padding: 51px 20px 0; + background-color: ${colors.navy}; +`; diff --git a/src/routes/Topic/BTopicCreate.tsx b/src/routes/Topic/BTopicCreate.tsx new file mode 100644 index 0000000..9c5c6aa --- /dev/null +++ b/src/routes/Topic/BTopicCreate.tsx @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import { FormProvider, useForm } from 'react-hook-form'; +import { CONFIG, INPUT_TYPE } from 'src/constants/form'; + +import { Col } from '@components/commons/Flex/Flex'; +import Text from '@components/commons/Text/Text'; +import TextInput from '@components/commons/TextInput/TextInput'; + +import { colors } from '@styles/theme'; + +import { Container } from './ATopicCreate.styles'; + +interface TopicCreateDTO { + topicTitle: string; + ATopic: string; + BTopic: string; +} + +const BTopicCreate = () => { + const methods = useForm({ mode: 'onChange' }); + + const titleProgress = methods.watch(INPUT_TYPE.TOPICTITLE) + ? `${methods.watch(INPUT_TYPE.TOPICTITLE)?.length}/20` + : '0/20'; + + return ( + + + + + + 어떤 주제로 물어볼까요? + + ( + + {titleProgress} + + )} + /> + + + + 토픽의 카테고리를 알려주세요 + + + + + + ); +}; + +export default BTopicCreate; From 6d65d83da9beac234c1304e6d072a62538947757 Mon Sep 17 00:00:00 2001 From: chaeyoung103 Date: Tue, 23 Jan 2024 15:03:44 +0900 Subject: [PATCH 18/20] =?UTF-8?q?fix:=20color=20=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Topic/TopicSideSelection.styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Topic/TopicSideSelection.styles.tsx b/src/routes/Topic/TopicSideSelection.styles.tsx index d328351..8825e57 100644 --- a/src/routes/Topic/TopicSideSelection.styles.tsx +++ b/src/routes/Topic/TopicSideSelection.styles.tsx @@ -11,7 +11,7 @@ export const Container = styled.div` height: 100%; padding-top: 19px; overflow: hidden; - background-color: ${(props) => props.theme.colors.navy}; + background-color: ${colors.navy}; `; export const EmptyDiv = styled.div` From f4bd8213193b2205a5cf37efc452fd7180861b86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 23 Jan 2024 15:52:09 +0900 Subject: [PATCH 19/20] fix: remove duplicate exports --- src/assets/icons/index.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 7866045..18d87d3 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -35,6 +35,7 @@ export { AlarmIcon, ALogoIcon, AppleIcon, + BigDownChevronIcon, BLogoIcon, ClockIcon, CloseIcon, @@ -53,14 +54,9 @@ export { ReportIcon, RightChevronIcon, RightDoubleArrowIcon, + RotateIcon, SelectedHomeIcon, SizeUpIcon, - CloseIcon, - DownChevronIcon, - BigDownChevronIcon, - ALogoIcon, - BLogoIcon, - RotateIcon, ThumbsIcon, TopicCreatBackgrounIcon, WriteBoxIcon, From 0d0c015146a3c646d6f98a9d59aa4e9e90b0cefa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 23 Jan 2024 15:52:17 +0900 Subject: [PATCH 20/20] fix: color theme key --- src/components/Home/Comment/Comment.tsx | 2 +- src/components/Notifications/NotificationItem.tsx | 2 +- src/components/Notifications/TabHeader.tsx | 2 +- src/components/commons/RadioInput/RadioInput.tsx | 6 +++--- src/components/commons/SelectInput/SelectInput.tsx | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Home/Comment/Comment.tsx b/src/components/Home/Comment/Comment.tsx index b1e7be4..a41bad0 100644 --- a/src/components/Home/Comment/Comment.tsx +++ b/src/components/Home/Comment/Comment.tsx @@ -66,7 +66,7 @@ const Comment = React.memo(({ comment }: CommentProps) => { {'·'} {distanceText}전 - + {comment.writersVotedOption} diff --git a/src/components/Notifications/NotificationItem.tsx b/src/components/Notifications/NotificationItem.tsx index 549b461..3a458d2 100644 --- a/src/components/Notifications/NotificationItem.tsx +++ b/src/components/Notifications/NotificationItem.tsx @@ -56,7 +56,7 @@ const NotificationItem = ({ onClick, notification }: NotificationItem) => { 투표가 마감 되었어요, 지금 바로 결과를 확인해 보세요! - + 성수 치킨 버거의 종결지는? 성수 치킨 버거의 종결지는? diff --git a/src/components/Notifications/TabHeader.tsx b/src/components/Notifications/TabHeader.tsx index 18fda09..6aa7022 100644 --- a/src/components/Notifications/TabHeader.tsx +++ b/src/components/Notifications/TabHeader.tsx @@ -29,7 +29,7 @@ const TabHeader = ({ currentTab, setCurrentTab }: TabHeaderProps) => { {tabName} diff --git a/src/components/commons/RadioInput/RadioInput.tsx b/src/components/commons/RadioInput/RadioInput.tsx index b187144..3ed45db 100644 --- a/src/components/commons/RadioInput/RadioInput.tsx +++ b/src/components/commons/RadioInput/RadioInput.tsx @@ -27,8 +27,8 @@ const RadioLabel = styled.label<{ checked: boolean }>` font-weight: 700; color: ${({ theme }) => theme.colors.purple}; text-align: center; - background-color: ${({ checked, theme }) => (checked ? theme.colors.sub_navy2 : 'transparent')}; - border: 1px solid ${({ theme }) => theme.colors.sub_purple}; + background-color: ${({ checked, theme }) => (checked ? theme.colors.navy2 : 'transparent')}; + border: 1px solid ${({ theme }) => theme.colors.purple}; border-radius: 10px; `; @@ -58,7 +58,7 @@ const RadioInput = (props: RadioInputProps) => { {errors[id] && ( - + * {errors[id]?.message?.toString()} )} diff --git a/src/components/commons/SelectInput/SelectInput.tsx b/src/components/commons/SelectInput/SelectInput.tsx index 22b7ac8..f359faf 100644 --- a/src/components/commons/SelectInput/SelectInput.tsx +++ b/src/components/commons/SelectInput/SelectInput.tsx @@ -72,7 +72,7 @@ const SelectInput = (props: SelectInputProps) => { {errors[id] && ( - + * {errors[id]?.message?.toString()} )}