From b2c8d83add83f362075e847d5a70c69dbf5e81cc Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 03:42:31 +0900 Subject: [PATCH 01/20] =?UTF-8?q?fix:=20button=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/arrow-up.svg | 3 ++ src/assets/svg/index.ts | 2 ++ src/components/common/button/EnterBtn.tsx | 26 ++++++++++++++ src/components/common/button/TextButton.tsx | 38 +++++++++++++++++++++ src/pages/Setting.tsx | 6 ++-- src/styles/GlobalStyle.tsx | 3 +- 6 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 src/assets/svg/arrow-up.svg create mode 100644 src/components/common/button/EnterBtn.tsx create mode 100644 src/components/common/button/TextButton.tsx diff --git a/src/assets/svg/arrow-up.svg b/src/assets/svg/arrow-up.svg new file mode 100644 index 00000000..d87a20cc --- /dev/null +++ b/src/assets/svg/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 1e23873a..6f83d06c 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -4,6 +4,7 @@ import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react'; import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; +import Arrow_up from '@/assets/svg/arrow-up.svg?react'; const Icons = { Icn_clock, @@ -14,6 +15,7 @@ const Icons = { Icn_nav_setting, Icn_nav_today, }, + Arrow_up, }; export default Icons; diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx new file mode 100644 index 00000000..85c23a34 --- /dev/null +++ b/src/components/common/button/EnterBtn.tsx @@ -0,0 +1,26 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const EnterBtn = () => { + return ( + + + + ); +}; + +export default EnterBtn; + +const EnterBtnCss = css` + display: flex; + align-items: center; + padding: 0.3rem 1.2rem; + + border-radius: 8px; +`; + +const EnterBtnLayout = styled.button` + ${EnterBtnCss} +`; diff --git a/src/components/common/button/TextButton.tsx b/src/components/common/button/TextButton.tsx new file mode 100644 index 00000000..6337a3c0 --- /dev/null +++ b/src/components/common/button/TextButton.tsx @@ -0,0 +1,38 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +type Props = { + text: string; + size: 'small' | 'medium'; +}; + +const TextButton = ({ size, text }: Props) => { + return <>{size === 'small' ? {text} : {text}}; +}; + +export default TextButton; + +const textButtonCss = css` + display: flex; + align-items: center; + justify-content: center; + + border-radius: 8px; +`; + +const SmallButton = styled.button` + width: 4.5rem; + height: 2.6rem; + padding: 0.3rem 1.2rem; + + ${textButtonCss} +`; + +const BigButton = styled.button` + width: 6rem; + height: 3.2rem; + padding: 0.7rem 1.6rem; + + box-shadow: 0 0 24px 0; + ${textButtonCss} +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 00d2f6c6..e3e35dc3 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,9 +1,11 @@ -import NavBar from '@/components/common/NavBar'; +import EnterBtn from '@/components/common/button/EnterBtn'; +import TextButton from '@/components/common/button/TextButton'; function Setting() { return (
- + +
); } diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index e20d216f..00fedbcb 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -89,7 +89,8 @@ const style = css` time, mark, audio, - video { + video, + button { margin: 0; padding: 0; From 17c7a04028e3baab90fd9a8befc9b3a341c22ebd Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 03:46:35 +0900 Subject: [PATCH 02/20] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20btn?= =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/EnterBtn.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index 85c23a34..ab45d4d9 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -16,6 +16,9 @@ export default EnterBtn; const EnterBtnCss = css` display: flex; align-items: center; + justify-content: center; + width: 4rem; + height: 2.2rem; padding: 0.3rem 1.2rem; border-radius: 8px; From 5e178889447ef47e29a7a2dfd66a074e389e80d0 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 04:06:52 +0900 Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=EB=8F=99=EA=B8=B0=ED=99=94=20btn?= =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/index.ts | 2 ++ src/assets/svg/refresh.svg | 5 +++ src/components/common/button/RefreshBtn.tsx | 36 +++++++++++++++++++++ src/pages/Setting.tsx | 2 ++ 4 files changed, 45 insertions(+) create mode 100644 src/assets/svg/refresh.svg create mode 100644 src/components/common/button/RefreshBtn.tsx diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 6f83d06c..296e89ec 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -5,6 +5,7 @@ import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; +import Refresh from '@/assets/svg/refresh.svg?react'; const Icons = { Icn_clock, @@ -16,6 +17,7 @@ const Icons = { Icn_nav_today, }, Arrow_up, + Refresh, }; export default Icons; diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg new file mode 100644 index 00000000..d51a93b3 --- /dev/null +++ b/src/assets/svg/refresh.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx new file mode 100644 index 00000000..dcf6c3b6 --- /dev/null +++ b/src/components/common/button/RefreshBtn.tsx @@ -0,0 +1,36 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const RefreshBtn = (props: Props) => { + return ( + + + 동기화 + + ); +}; + +export default RefreshBtn; + +const RefreshBtnCss = css` + display: flex; + gap: 0.8rem; + align-items: center; + justify-content: center; + width: 7.5rem; + height: 2.6rem; + + border-radius: 8px; +`; + +const RefreshBtnLayout = styled.button` + ${RefreshBtnCss} +`; + +const Text = styled.p` + text-align: center; +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index e3e35dc3..b0662894 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,4 +1,5 @@ import EnterBtn from '@/components/common/button/EnterBtn'; +import RefreshBtn from '@/components/common/button/RefreshBtn'; import TextButton from '@/components/common/button/TextButton'; function Setting() { @@ -6,6 +7,7 @@ function Setting() {
+
); } From 21e9bc86a48eb8191bf7906568e9189b77691d80 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 04:32:19 +0900 Subject: [PATCH 04/20] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C/=EC=B7=A8?= =?UTF-8?q?=EC=86=8C=20btn=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/button/DeleteCancelBtn.tsx | 33 +++++++++++++++++++ src/components/common/button/TextButton.tsx | 2 +- src/pages/Setting.tsx | 4 ++- 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/components/common/button/DeleteCancelBtn.tsx diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx new file mode 100644 index 00000000..e09efd13 --- /dev/null +++ b/src/components/common/button/DeleteCancelBtn.tsx @@ -0,0 +1,33 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +type Props = { + status: 'delete' | 'cancel'; +}; + +const DeleteCancelBtn = ({ status }: Props) => { + return <>{status === 'delete' ? 삭제 : 취소}; +}; + +export default DeleteCancelBtn; + +const DeleteCancelBtnCss = css` + display: flex; + align-items: center; + align-self: stretch; + width: 13rem; + height: 3.2rem; + padding: 0.7rem 1.2rem; + + box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); + border-radius: 8px; +`; + +const DeleteBtn = styled.button` + ${DeleteCancelBtnCss} + ${({ theme }) => theme.palette.WITHE} +`; + +const CancelBtn = styled.button` + ${DeleteCancelBtnCss} +`; diff --git a/src/components/common/button/TextButton.tsx b/src/components/common/button/TextButton.tsx index 6337a3c0..76928787 100644 --- a/src/components/common/button/TextButton.tsx +++ b/src/components/common/button/TextButton.tsx @@ -33,6 +33,6 @@ const BigButton = styled.button` height: 3.2rem; padding: 0.7rem 1.6rem; - box-shadow: 0 0 24px 0; + box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); ${textButtonCss} `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index b0662894..0ef779f2 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,3 +1,4 @@ +import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import TextButton from '@/components/common/button/TextButton'; @@ -5,9 +6,10 @@ import TextButton from '@/components/common/button/TextButton'; function Setting() { return (
- + +
); } From 42cb0e7462a7f498c250572685395bd06624fb1f Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 06:04:09 +0900 Subject: [PATCH 05/20] feat: icon import --- src/assets/svg/Selectbox_Selected.svg | 7 +++++++ src/assets/svg/Selectbox_Unselected.svg | 3 +++ src/assets/svg/index.ts | 4 ++++ src/components/common/button/ArrangeBtn.tsx | 21 +++++++++++++++++++++ src/components/common/button/RefreshBtn.tsx | 4 +--- src/pages/Setting.tsx | 2 ++ 6 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 src/assets/svg/Selectbox_Selected.svg create mode 100644 src/assets/svg/Selectbox_Unselected.svg create mode 100644 src/components/common/button/ArrangeBtn.tsx diff --git a/src/assets/svg/Selectbox_Selected.svg b/src/assets/svg/Selectbox_Selected.svg new file mode 100644 index 00000000..b9640cf8 --- /dev/null +++ b/src/assets/svg/Selectbox_Selected.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/Selectbox_Unselected.svg b/src/assets/svg/Selectbox_Unselected.svg new file mode 100644 index 00000000..644b5a0a --- /dev/null +++ b/src/assets/svg/Selectbox_Unselected.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 296e89ec..5e92e437 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -4,6 +4,8 @@ import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react'; import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; +import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react'; +import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; import Refresh from '@/assets/svg/refresh.svg?react'; @@ -18,6 +20,8 @@ const Icons = { }, Arrow_up, Refresh, + SelectedBox, + UnselectedBox, }; export default Icons; diff --git a/src/components/common/button/ArrangeBtn.tsx b/src/components/common/button/ArrangeBtn.tsx new file mode 100644 index 00000000..ab90256b --- /dev/null +++ b/src/components/common/button/ArrangeBtn.tsx @@ -0,0 +1,21 @@ +import styled from '@emotion/styled'; + +type Props = { + text: string; +}; + +const ArrangeBtn = ({ text }: Props) => { + return {text}; +}; + +export default ArrangeBtn; + +const ArrangeBtnLayout = styled.button` + display: flex; + align-items: center; + width: 10.5rem; + height: 2.9rem; + padding: 7px; + + border-radius: 6px; +`; diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index dcf6c3b6..8889e6ca 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -3,9 +3,7 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const RefreshBtn = (props: Props) => { +const RefreshBtn = () => { return ( diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 0ef779f2..01208129 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,3 +1,4 @@ +import ArrangeBtn from '@/components/common/button/ArrangeBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; @@ -10,6 +11,7 @@ function Setting() { + ); } From fea8fe36e7215d71cf9125cbc72eac4f6f44ee31 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 16:31:49 +0900 Subject: [PATCH 06/20] =?UTF-8?q?fix:=20interface=20=EC=BB=A8=EB=B2=A4?= =?UTF-8?q?=EC=85=98=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/ArrangeBtn.tsx | 6 +++--- src/components/common/button/DeleteCancelBtn.tsx | 6 +++--- .../common/button/{TextButton.tsx => TextBtn.tsx} | 8 ++++---- src/pages/Setting.tsx | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) rename src/components/common/button/{TextButton.tsx => TextBtn.tsx} (85%) diff --git a/src/components/common/button/ArrangeBtn.tsx b/src/components/common/button/ArrangeBtn.tsx index ab90256b..4fbba04d 100644 --- a/src/components/common/button/ArrangeBtn.tsx +++ b/src/components/common/button/ArrangeBtn.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; -type Props = { +interface ArrangeBtnProps { text: string; -}; +} -const ArrangeBtn = ({ text }: Props) => { +const ArrangeBtn = ({ text }: ArrangeBtnProps) => { return {text}; }; diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx index e09efd13..fa4e5f3d 100644 --- a/src/components/common/button/DeleteCancelBtn.tsx +++ b/src/components/common/button/DeleteCancelBtn.tsx @@ -1,11 +1,11 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -type Props = { +interface DeleteCancelBtnProps { status: 'delete' | 'cancel'; -}; +} -const DeleteCancelBtn = ({ status }: Props) => { +const DeleteCancelBtn = ({ status }: DeleteCancelBtnProps) => { return <>{status === 'delete' ? 삭제 : 취소}; }; diff --git a/src/components/common/button/TextButton.tsx b/src/components/common/button/TextBtn.tsx similarity index 85% rename from src/components/common/button/TextButton.tsx rename to src/components/common/button/TextBtn.tsx index 76928787..af2d44f2 100644 --- a/src/components/common/button/TextButton.tsx +++ b/src/components/common/button/TextBtn.tsx @@ -1,16 +1,16 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -type Props = { +interface TextBtnProps { text: string; size: 'small' | 'medium'; -}; +} -const TextButton = ({ size, text }: Props) => { +const TextBtn = ({ size, text }: TextBtnProps) => { return <>{size === 'small' ? {text} : {text}}; }; -export default TextButton; +export default TextBtn; const textButtonCss = css` display: flex; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 01208129..247f6cbd 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -2,12 +2,12 @@ import ArrangeBtn from '@/components/common/button/ArrangeBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; -import TextButton from '@/components/common/button/TextButton'; +import TextBtn from '@/components/common/button/TextBtn'; function Setting() { return (
- + From bf2f401b0910fc818f8bb0e3150d99f8d3483851 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sat, 6 Jul 2024 17:36:27 +0900 Subject: [PATCH 07/20] =?UTF-8?q?feat:=20=EC=98=A4=EB=8A=98=EB=A1=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/PlusArrow.svg | 3 ++ src/assets/svg/index.ts | 2 ++ src/components/common/button/TodayPlusBtn.tsx | 36 +++++++++++++++++++ src/pages/Setting.tsx | 2 ++ 4 files changed, 43 insertions(+) create mode 100644 src/assets/svg/PlusArrow.svg create mode 100644 src/components/common/button/TodayPlusBtn.tsx diff --git a/src/assets/svg/PlusArrow.svg b/src/assets/svg/PlusArrow.svg new file mode 100644 index 00000000..0ef5f073 --- /dev/null +++ b/src/assets/svg/PlusArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 5e92e437..61cdc272 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -4,6 +4,7 @@ import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react'; import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; +import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react'; import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; @@ -22,6 +23,7 @@ const Icons = { Refresh, SelectedBox, UnselectedBox, + PlusArrow, }; export default Icons; diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx new file mode 100644 index 00000000..d360aa79 --- /dev/null +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -0,0 +1,36 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const TodayPlusBtn = (props: Props) => { + return ( + + + 오늘로 추가 + + ); +}; + +export default TodayPlusBtn; + +const TodayPlusBtnCss = css` + display: flex; + gap: 6px; + align-items: center; + justify-content: center; + width: 8.9rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const TodayPlusBtnLayout = styled.button` + ${TodayPlusBtnCss} +`; + +const Text = styled.p` + text-align: center; +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 247f6cbd..ae3492e6 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -3,6 +3,7 @@ import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import TextBtn from '@/components/common/button/TextBtn'; +import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; function Setting() { return ( @@ -12,6 +13,7 @@ function Setting() { +
); } From 690df8bc8eb8e38a70d1ad625ecb62f21254b71e Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 18:14:53 +0900 Subject: [PATCH 08/20] =?UTF-8?q?fix:=20develop=20=EC=B6=A9=EB=8F=8C=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/svg/Delete.svg | 3 ++ src/components/common/button/DeleteBtn.tsx | 35 ++++++++++++++++++++++ src/pages/Setting.tsx | 2 ++ 3 files changed, 40 insertions(+) create mode 100644 src/assets/svg/Delete.svg create mode 100644 src/components/common/button/DeleteBtn.tsx diff --git a/src/assets/svg/Delete.svg b/src/assets/svg/Delete.svg new file mode 100644 index 00000000..69d9fe9c --- /dev/null +++ b/src/assets/svg/Delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/common/button/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx new file mode 100644 index 00000000..6407c343 --- /dev/null +++ b/src/components/common/button/DeleteBtn.tsx @@ -0,0 +1,35 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const DeleteBtn = (props: Props) => { + return ( + + + + ); +}; + +export default DeleteBtn; + +const DeleteBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + + border-radius: 10px; +`; + +const DeleteBtnLayout = styled.button` + ${DeleteBtnCss} +`; + +const StlyedDeleteIcon = styled(Icons.DeleteIcon)` + width: 1.8rem; + height: 1.8rem; +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index ae3492e6..e61cdd11 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,4 +1,5 @@ import ArrangeBtn from '@/components/common/button/ArrangeBtn'; +import DeleteBtn from '@/components/common/button/DeleteBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; @@ -14,6 +15,7 @@ function Setting() { + ); } From a8b7fd307738b810746b024778edd7b28eb81f0e Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 18:16:16 +0900 Subject: [PATCH 09/20] =?UTF-8?q?fix:=20develop=20=EC=B6=A9=EB=8F=8C=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/svg/SettingCheck1Icon.svg | 3 ++ src/assets/svg/SettingCheck2Icon.svg | 3 ++ src/assets/svg/SettingCheck3Icon.svg | 3 ++ src/assets/svg/SettingProgressIcon.svg | 8 +++++ src/assets/svg/SettingXIcon.svg | 3 ++ src/assets/svg/index.ts | 12 ++++++++ .../common/button/SettingCheck1Btn.tsx | 30 +++++++++++++++++++ .../common/button/SettingCheck2Btn.tsx | 30 +++++++++++++++++++ .../common/button/SettingCheck3Btn.tsx | 30 +++++++++++++++++++ .../common/button/SettingDeleteBtn.tsx | 30 +++++++++++++++++++ .../common/button/SettingProgressBtn.tsx | 30 +++++++++++++++++++ src/components/common/button/SettingXBtn.tsx | 30 +++++++++++++++++++ src/pages/Setting.tsx | 2 ++ 13 files changed, 214 insertions(+) create mode 100644 src/assets/svg/SettingCheck1Icon.svg create mode 100644 src/assets/svg/SettingCheck2Icon.svg create mode 100644 src/assets/svg/SettingCheck3Icon.svg create mode 100644 src/assets/svg/SettingProgressIcon.svg create mode 100644 src/assets/svg/SettingXIcon.svg create mode 100644 src/components/common/button/SettingCheck1Btn.tsx create mode 100644 src/components/common/button/SettingCheck2Btn.tsx create mode 100644 src/components/common/button/SettingCheck3Btn.tsx create mode 100644 src/components/common/button/SettingDeleteBtn.tsx create mode 100644 src/components/common/button/SettingProgressBtn.tsx create mode 100644 src/components/common/button/SettingXBtn.tsx diff --git a/src/assets/svg/SettingCheck1Icon.svg b/src/assets/svg/SettingCheck1Icon.svg new file mode 100644 index 00000000..f8f88dd5 --- /dev/null +++ b/src/assets/svg/SettingCheck1Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/SettingCheck2Icon.svg b/src/assets/svg/SettingCheck2Icon.svg new file mode 100644 index 00000000..0611f4d5 --- /dev/null +++ b/src/assets/svg/SettingCheck2Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/SettingCheck3Icon.svg b/src/assets/svg/SettingCheck3Icon.svg new file mode 100644 index 00000000..006d5824 --- /dev/null +++ b/src/assets/svg/SettingCheck3Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/SettingProgressIcon.svg b/src/assets/svg/SettingProgressIcon.svg new file mode 100644 index 00000000..6e4496c1 --- /dev/null +++ b/src/assets/svg/SettingProgressIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/SettingXIcon.svg b/src/assets/svg/SettingXIcon.svg new file mode 100644 index 00000000..8cc3cb85 --- /dev/null +++ b/src/assets/svg/SettingXIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 61cdc272..86e7a662 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -7,6 +7,12 @@ import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react'; import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react'; +import DeleteIcon from '@/assets/svg/Delete.svg?react'; +import SettingCheck1 from '@/assets/svg/SettingCheck1Icon.svg?react'; +import SettingCheck2 from '@/assets/svg/SettingCheck2Icon.svg?react'; +import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react'; +import SettingProgress from '@/assets/svg/SettingProgressIcon.svg?react'; +import SettingX from '@/assets/svg/SettingXIcon.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; import Refresh from '@/assets/svg/refresh.svg?react'; @@ -24,6 +30,12 @@ const Icons = { SelectedBox, UnselectedBox, PlusArrow, + DeleteIcon, + SettingCheck1, + SettingCheck2, + SettingCheck3, + SettingX, + SettingProgress, }; export default Icons; diff --git a/src/components/common/button/SettingCheck1Btn.tsx b/src/components/common/button/SettingCheck1Btn.tsx new file mode 100644 index 00000000..e08d08de --- /dev/null +++ b/src/components/common/button/SettingCheck1Btn.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const SettingCheck1 = (props: Props) => { + return ( + + + + ); +}; + +export default SettingCheck1; + +const SettingCheck1Css = css` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const SettingCheck1Layout = styled.button` + ${SettingCheck1Css} +`; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx new file mode 100644 index 00000000..a9a95917 --- /dev/null +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const SettingCheck2 = (props: Props) => { + return ( + + + + ); +}; + +export default SettingCheck2; + +const SettingCheck2Css = css` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const SettingCheck2Layout = styled.button` + ${SettingCheck2Css} +`; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx new file mode 100644 index 00000000..12b3f2a0 --- /dev/null +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const SettingCheck3 = (props: Props) => { + return ( + + + + ); +}; + +export default SettingCheck3; + +const SettingCheck3Css = css` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const SettingCheck3Layout = styled.button` + ${SettingCheck3Css} +`; diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx new file mode 100644 index 00000000..9845be4d --- /dev/null +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const SettingDeleteBtn = (props: Props) => { + return ( + + + + ); +}; + +export default SettingDeleteBtn; + +const SettingDeleteBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const SettingDeleteBtnLayout = styled.button` + ${SettingDeleteBtnCss} +`; diff --git a/src/components/common/button/SettingProgressBtn.tsx b/src/components/common/button/SettingProgressBtn.tsx new file mode 100644 index 00000000..b698a47c --- /dev/null +++ b/src/components/common/button/SettingProgressBtn.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const SettingProgressBtn = (props: Props) => { + return ( + + + + ); +}; + +export default SettingProgressBtn; + +const SettingProgressBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const SettingProgressBtnLayout = styled.button` + ${SettingProgressBtnCss} +`; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx new file mode 100644 index 00000000..402db435 --- /dev/null +++ b/src/components/common/button/SettingXBtn.tsx @@ -0,0 +1,30 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +const SettingXBtn = (props: Props) => { + return ( + + + + ); +}; + +export default SettingXBtn; + +const SettingXBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const SettingXBtnLayout = styled.button` + ${SettingXBtnCss} +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index e61cdd11..16796767 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -3,6 +3,7 @@ import DeleteBtn from '@/components/common/button/DeleteBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; +import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; import TextBtn from '@/components/common/button/TextBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; @@ -16,6 +17,7 @@ function Setting() { + ); } From 03d6d7e3a90fb8fa8d34914a4db7675e403ea4a3 Mon Sep 17 00:00:00 2001 From: Kjiw0n Date: Sun, 7 Jul 2024 18:16:55 +0900 Subject: [PATCH 10/20] =?UTF-8?q?fix:=20develop=20=EC=B6=A9=EB=8F=8C=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/svg/DoneIcon.svg | 3 ++ src/assets/svg/index.ts | 4 +- src/components/common/button/Check1Btn.tsx | 45 +++++++++++++++++++ src/components/common/button/EnterBtn.tsx | 8 +++- .../common/button/SettingCheck1Btn.tsx | 30 ------------- src/pages/Setting.tsx | 2 + 6 files changed, 59 insertions(+), 33 deletions(-) create mode 100644 src/assets/svg/DoneIcon.svg create mode 100644 src/components/common/button/Check1Btn.tsx delete mode 100644 src/components/common/button/SettingCheck1Btn.tsx diff --git a/src/assets/svg/DoneIcon.svg b/src/assets/svg/DoneIcon.svg new file mode 100644 index 00000000..8802fa10 --- /dev/null +++ b/src/assets/svg/DoneIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 86e7a662..344efcf2 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -4,10 +4,11 @@ import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react'; import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; +import DeleteIcon from '@/assets/svg/Delete.svg?react'; +import DoneIcon from '@/assets/svg/DoneIcon.svg?react'; import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react'; import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react'; -import DeleteIcon from '@/assets/svg/Delete.svg?react'; import SettingCheck1 from '@/assets/svg/SettingCheck1Icon.svg?react'; import SettingCheck2 from '@/assets/svg/SettingCheck2Icon.svg?react'; import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react'; @@ -36,6 +37,7 @@ const Icons = { SettingCheck3, SettingX, SettingProgress, + DoneIcon, }; export default Icons; diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx new file mode 100644 index 00000000..92f76d42 --- /dev/null +++ b/src/components/common/button/Check1Btn.tsx @@ -0,0 +1,45 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +interface Check1 { + type: 'setting' | 'done'; +} + +const Check1Btn = ({ type }: Check1) => { + return ( + <> + {type === 'setting' ? ( + + + + ) : ( + + + + )} + + ); +}; + +export default Check1Btn; + +const SettingCheck1Layout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const DoneLayout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + + border-radius: 10px; +`; diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index ab45d4d9..ca19faf9 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const EnterBtn = () => { return ( - + ); }; @@ -19,7 +19,6 @@ const EnterBtnCss = css` justify-content: center; width: 4rem; height: 2.2rem; - padding: 0.3rem 1.2rem; border-radius: 8px; `; @@ -27,3 +26,8 @@ const EnterBtnCss = css` const EnterBtnLayout = styled.button` ${EnterBtnCss} `; + +const StyledIcon = styled(Icons.Arrow_up)` + width: 1.6rem; + height: 1.6rem; +`; diff --git a/src/components/common/button/SettingCheck1Btn.tsx b/src/components/common/button/SettingCheck1Btn.tsx deleted file mode 100644 index e08d08de..00000000 --- a/src/components/common/button/SettingCheck1Btn.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; - -type Props = {}; - -const SettingCheck1 = (props: Props) => { - return ( - - - - ); -}; - -export default SettingCheck1; - -const SettingCheck1Css = css` - display: flex; - align-items: center; - justify-content: center; - width: 2.4rem; - height: 2.4rem; - - border-radius: 8px; -`; - -const SettingCheck1Layout = styled.button` - ${SettingCheck1Css} -`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 16796767..982d9a65 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,4 +1,5 @@ import ArrangeBtn from '@/components/common/button/ArrangeBtn'; +import Check1Btn from '@/components/common/button/Check1Btn'; import DeleteBtn from '@/components/common/button/DeleteBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; @@ -18,6 +19,7 @@ function Setting() { + ); } From 9e79797aa861c28b2cafb962c25b7bc9cd560f00 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 01:35:29 +0900 Subject: [PATCH 11/20] =?UTF-8?q?fix:=20setting=20progress=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20prop=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/ProgressIcon.svg | 8 ++++ src/assets/svg/index.ts | 2 + src/components/common/button/ProgressBtn.tsx | 45 +++++++++++++++++++ .../common/button/SettingProgressBtn.tsx | 30 ------------- src/pages/Setting.tsx | 2 + 5 files changed, 57 insertions(+), 30 deletions(-) create mode 100644 src/assets/svg/ProgressIcon.svg create mode 100644 src/components/common/button/ProgressBtn.tsx delete mode 100644 src/components/common/button/SettingProgressBtn.tsx diff --git a/src/assets/svg/ProgressIcon.svg b/src/assets/svg/ProgressIcon.svg new file mode 100644 index 00000000..422ea0db --- /dev/null +++ b/src/assets/svg/ProgressIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 344efcf2..c3986aa3 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -7,6 +7,7 @@ import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; import DeleteIcon from '@/assets/svg/Delete.svg?react'; import DoneIcon from '@/assets/svg/DoneIcon.svg?react'; import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; +import ProgressIcon from '@/assets/svg/ProgressIcon.svg?react'; import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react'; import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react'; import SettingCheck1 from '@/assets/svg/SettingCheck1Icon.svg?react'; @@ -38,6 +39,7 @@ const Icons = { SettingX, SettingProgress, DoneIcon, + ProgressIcon, }; export default Icons; diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx new file mode 100644 index 00000000..cb3e5fda --- /dev/null +++ b/src/components/common/button/ProgressBtn.tsx @@ -0,0 +1,45 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +interface Progress { + type: 'setting' | 'defaultProgress'; +} + +const ProgressBtn = ({ type }: Progress) => { + return ( + <> + {type === 'setting' ? ( + + + + ) : ( + + + + )} + + ); +}; + +export default ProgressBtn; + +const SettingProgressLayout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 2.4rem; + height: 2.4rem; + + border-radius: 8px; +`; + +const DefaultProgressLayout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + + border-radius: 10px; +`; diff --git a/src/components/common/button/SettingProgressBtn.tsx b/src/components/common/button/SettingProgressBtn.tsx deleted file mode 100644 index b698a47c..00000000 --- a/src/components/common/button/SettingProgressBtn.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; - -type Props = {}; - -const SettingProgressBtn = (props: Props) => { - return ( - - - - ); -}; - -export default SettingProgressBtn; - -const SettingProgressBtnCss = css` - display: flex; - align-items: center; - justify-content: center; - width: 2.4rem; - height: 2.4rem; - - border-radius: 8px; -`; - -const SettingProgressBtnLayout = styled.button` - ${SettingProgressBtnCss} -`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 982d9a65..fb5a7f6d 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -3,6 +3,7 @@ import Check1Btn from '@/components/common/button/Check1Btn'; import DeleteBtn from '@/components/common/button/DeleteBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; +import ProgressBtn from '@/components/common/button/ProgressBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; import TextBtn from '@/components/common/button/TextBtn'; @@ -20,6 +21,7 @@ function Setting() { + ); } From be6f30547bc5b85bf871931e2e680b8f8fd8cdfc Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 02:14:13 +0900 Subject: [PATCH 12/20] =?UTF-8?q?feat:=20timeline=20delete=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/ic_delete.svg | 3 ++ src/assets/svg/index.ts | 2 ++ .../common/button/TimelineDeleteBtn.tsx | 28 +++++++++++++++++++ src/pages/Setting.tsx | 2 ++ 4 files changed, 35 insertions(+) create mode 100644 src/assets/svg/ic_delete.svg create mode 100644 src/components/common/button/TimelineDeleteBtn.tsx diff --git a/src/assets/svg/ic_delete.svg b/src/assets/svg/ic_delete.svg new file mode 100644 index 00000000..f27857ec --- /dev/null +++ b/src/assets/svg/ic_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index c3986aa3..a8e6706d 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -16,6 +16,7 @@ import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react'; import SettingProgress from '@/assets/svg/SettingProgressIcon.svg?react'; import SettingX from '@/assets/svg/SettingXIcon.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; +import TimelineDelete from '@/assets/svg/ic_delete.svg?react'; import Refresh from '@/assets/svg/refresh.svg?react'; const Icons = { @@ -40,6 +41,7 @@ const Icons = { SettingProgress, DoneIcon, ProgressIcon, + TimelineDelete, }; export default Icons; diff --git a/src/components/common/button/TimelineDeleteBtn.tsx b/src/components/common/button/TimelineDeleteBtn.tsx new file mode 100644 index 00000000..936af9db --- /dev/null +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +import { theme } from '@/styles/theme'; + +const TimelineDeleteBtn = () => { + return ( + + + + ); +}; + +export default TimelineDeleteBtn; + +const TimelineDeleteBtnLayout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 1.6rem; + height: 1.6rem; + + background: ${({ theme }) => theme.palette.SECONDARY}; + + /* stylelint-disable-next-line custom-property-pattern */ + border-radius: var(--Corner-Extra-large, 28px); +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index fb5a7f6d..7aad9f72 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -7,6 +7,7 @@ import ProgressBtn from '@/components/common/button/ProgressBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; import TextBtn from '@/components/common/button/TextBtn'; +import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; function Setting() { @@ -22,6 +23,7 @@ function Setting() { + ); } From 8c5bb13317820b2b986ad21c13fe9ad85a159fbd Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 02:49:48 +0900 Subject: [PATCH 13/20] =?UTF-8?q?feat:=20Status=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/button/StatusDoneBtn.tsx | 28 +++++++++++++++++++ .../common/button/StatusInProgressBtn.tsx | 28 +++++++++++++++++++ .../common/button/StatusStagingBtn.tsx | 28 +++++++++++++++++++ .../common/button/StatusTodoBtn.tsx | 28 +++++++++++++++++++ .../common/button/TimelineDeleteBtn.tsx | 2 -- src/pages/Setting.tsx | 8 ++++++ 6 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 src/components/common/button/StatusDoneBtn.tsx create mode 100644 src/components/common/button/StatusInProgressBtn.tsx create mode 100644 src/components/common/button/StatusStagingBtn.tsx create mode 100644 src/components/common/button/StatusTodoBtn.tsx diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx new file mode 100644 index 00000000..5ed580d8 --- /dev/null +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +import ProgressBtn from '@/components/common/button/ProgressBtn'; +import TextBtn from '@/components/common/button/TextBtn'; + +const StatusDoneBtn = () => { + return ( + + + + + ); +}; + +export default StatusDoneBtn; + +const StatusDoneBtnLayout = styled.div` + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + width: 7.3rem; + height: 2.4rem; + padding: 0.4rem; + + border: 1px solid var(--white, #fff); + border-radius: 10px; +`; diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx new file mode 100644 index 00000000..6a5a3cd5 --- /dev/null +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +import Check1Btn from '@/components/common/button/Check1Btn'; +import TextBtn from '@/components/common/button/TextBtn'; + +const StatusInProgressBtn = () => { + return ( + + + + + ); +}; + +export default StatusInProgressBtn; + +const StatusInProgressBtnLayout = styled.div` + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + width: 7.3rem; + height: 2.4rem; + padding: 0.4rem; + + border: 1px solid var(--white, #fff); + border-radius: 10px; +`; diff --git a/src/components/common/button/StatusStagingBtn.tsx b/src/components/common/button/StatusStagingBtn.tsx new file mode 100644 index 00000000..59153ca3 --- /dev/null +++ b/src/components/common/button/StatusStagingBtn.tsx @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +import Check1Btn from '@/components/common/button/Check1Btn'; +import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; + +const StatusStagingBtn = () => { + return ( + + + + + ); +}; + +export default StatusStagingBtn; + +const StatusStagingBtnLayout = styled.div` + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + width: 5.2rem; + height: 2.4rem; + padding: 0.4rem; + + border: 1px solid var(--white, #fff); + border-radius: 10px; +`; diff --git a/src/components/common/button/StatusTodoBtn.tsx b/src/components/common/button/StatusTodoBtn.tsx new file mode 100644 index 00000000..741ccea5 --- /dev/null +++ b/src/components/common/button/StatusTodoBtn.tsx @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +import Check1Btn from '@/components/common/button/Check1Btn'; +import ProgressBtn from '@/components/common/button/ProgressBtn'; + +const StatusTodoBtn = () => { + return ( + + + + + ); +}; + +export default StatusTodoBtn; + +const StatusTodoBtnLayout = styled.div` + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + width: 5.2rem; + height: 2.4rem; + padding: 0.4rem; + + border: 1px solid var(--white, #fff); + border-radius: 10px; +`; diff --git a/src/components/common/button/TimelineDeleteBtn.tsx b/src/components/common/button/TimelineDeleteBtn.tsx index 936af9db..5a6dfd72 100644 --- a/src/components/common/button/TimelineDeleteBtn.tsx +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -2,8 +2,6 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -import { theme } from '@/styles/theme'; - const TimelineDeleteBtn = () => { return ( diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 7aad9f72..72b09786 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -6,6 +6,10 @@ import EnterBtn from '@/components/common/button/EnterBtn'; import ProgressBtn from '@/components/common/button/ProgressBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; +import StatusDoneBtn from '@/components/common/button/StatusDoneBtn'; +import StatusInProgressBtn from '@/components/common/button/StatusInProgressBtn'; +import StatusStagingBtn from '@/components/common/button/StatusStagingBtn'; +import StatusTodoBtn from '@/components/common/button/StatusTodoBtn'; import TextBtn from '@/components/common/button/TextBtn'; import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; @@ -24,6 +28,10 @@ function Setting() { + + + + ); } From c69f3714b85e4eeba3eb1eb6f8e2dc9277692b3f Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 03:03:04 +0900 Subject: [PATCH 14/20] =?UTF-8?q?feat:=20=ED=99=95=EC=9D=B8/=EC=B7=A8?= =?UTF-8?q?=EC=86=8C=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/button/OkayCancelBtn.tsx | 38 +++++++++++++++++++ src/pages/Setting.tsx | 2 + 2 files changed, 40 insertions(+) create mode 100644 src/components/common/button/OkayCancelBtn.tsx diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx new file mode 100644 index 00000000..71bae207 --- /dev/null +++ b/src/components/common/button/OkayCancelBtn.tsx @@ -0,0 +1,38 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +interface OkayCancelBtnProps { + type: 'okay' | 'cancel'; +} + +const OkayCancelBtn = ({ type }: OkayCancelBtnProps) => { + return <>{type === 'okay' ? 확인 : 취소}; +}; + +export default OkayCancelBtn; + +const OkayCancelBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 6rem; + height: 3.2rem; + + border-radius: 8px; +`; + +const OkayBtn = styled.button` + ${OkayCancelBtnCss}; + color: ${({ theme }) => theme.palette.WITHE}; + + background-color: ${({ theme }) => theme.palette.BLACK}; + ${({ theme }) => theme.fontTheme.BODY_02}; +`; + +const CancelBtn = styled.button` + ${OkayCancelBtnCss}; + color: ${({ theme }) => theme.palette.GREY_05}; + + background-color: ${({ theme }) => theme.palette.WITHE}; + ${({ theme }) => theme.fontTheme.BODY_02}; +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 72b09786..607acc8a 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -3,6 +3,7 @@ import Check1Btn from '@/components/common/button/Check1Btn'; import DeleteBtn from '@/components/common/button/DeleteBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; import EnterBtn from '@/components/common/button/EnterBtn'; +import OkayCancelBtn from '@/components/common/button/OkayCancelBtn'; import ProgressBtn from '@/components/common/button/ProgressBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; @@ -32,6 +33,7 @@ function Setting() { + ); } From 69eef9405b4d91159a0d69b3636d9f571bb8dcd4 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 16:39:17 +0900 Subject: [PATCH 15/20] =?UTF-8?q?fix:=20theme=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/refresh.svg | 8 +++--- src/components/common/button/ArrangeBtn.tsx | 21 ++++++++++++++ src/components/common/button/Check1Btn.tsx | 12 +++++++- src/components/common/button/DeleteBtn.tsx | 9 ++++-- .../common/button/DeleteCancelBtn.tsx | 19 ++++++++++++- src/components/common/button/EnterBtn.tsx | 9 ++++++ .../common/button/OkayCancelBtn.tsx | 1 + src/components/common/button/ProgressBtn.tsx | 10 +++++++ src/components/common/button/RefreshBtn.tsx | 14 +++++++++- .../common/button/SettingCheck2Btn.tsx | 15 +++++++--- .../common/button/SettingCheck3Btn.tsx | 15 +++++++--- .../common/button/SettingDeleteBtn.tsx | 15 +++++++--- src/components/common/button/SettingXBtn.tsx | 15 +++++++--- src/components/common/button/TextBtn.tsx | 12 ++++++++ src/components/common/button/TodayPlusBtn.tsx | 20 +++++++++++-- src/pages/Setting.tsx | 28 +++++++++++-------- 16 files changed, 183 insertions(+), 40 deletions(-) diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg index d51a93b3..f82acf84 100644 --- a/src/assets/svg/refresh.svg +++ b/src/assets/svg/refresh.svg @@ -1,5 +1,5 @@ - - - - + + \ No newline at end of file diff --git a/src/components/common/button/ArrangeBtn.tsx b/src/components/common/button/ArrangeBtn.tsx index 4fbba04d..927fe83d 100644 --- a/src/components/common/button/ArrangeBtn.tsx +++ b/src/components/common/button/ArrangeBtn.tsx @@ -17,5 +17,26 @@ const ArrangeBtnLayout = styled.button` height: 2.9rem; padding: 7px; + color: ${({ theme }) => theme.palette.GREY_06}; + + background-color: ${({ theme }) => theme.palette.WITHE}; border-radius: 6px; + + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */ + + &:hover { + color: ${({ theme }) => theme.palette.GREY_06}; + + background-color: ${({ theme }) => theme.palette.GREY_01}; + + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */ + } + + &:active { + color: ${({ theme }) => theme.palette.GREY_06}; /* 수정 필요 */ + + background-color: ${({ theme }) => theme.palette.GREY_03}; + + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */ + } `; diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index 92f76d42..e63cac90 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -11,7 +11,7 @@ const Check1Btn = ({ type }: Check1) => { <> {type === 'setting' ? ( - + ) : ( @@ -31,7 +31,16 @@ const SettingCheck1Layout = styled.button` width: 2.4rem; height: 2.4rem; + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ border-radius: 8px; + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + } `; const DoneLayout = styled.button` @@ -41,5 +50,6 @@ const DoneLayout = styled.button` width: 3.2rem; height: 3.2rem; + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ border-radius: 10px; `; diff --git a/src/components/common/button/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx index 6407c343..34c16e9a 100644 --- a/src/components/common/button/DeleteBtn.tsx +++ b/src/components/common/button/DeleteBtn.tsx @@ -3,9 +3,7 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const DeleteBtn = (props: Props) => { +const DeleteBtn = () => { return ( @@ -27,6 +25,11 @@ const DeleteBtnCss = css` const DeleteBtnLayout = styled.button` ${DeleteBtnCss} + background-color: ${({ theme }) => theme.palette.GREY_01}; + + &:active { + background-color: ${({ theme }) => theme.palette.GREY_03}; + } `; const StlyedDeleteIcon = styled(Icons.DeleteIcon)` diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx index fa4e5f3d..fb11083d 100644 --- a/src/components/common/button/DeleteCancelBtn.tsx +++ b/src/components/common/button/DeleteCancelBtn.tsx @@ -25,9 +25,26 @@ const DeleteCancelBtnCss = css` const DeleteBtn = styled.button` ${DeleteCancelBtnCss} - ${({ theme }) => theme.palette.WITHE} + color: ${({ theme }) => theme.palette.WITHE}; + + background-color: ${({ theme }) => theme.palette.SECONDARY}; + ${({ theme }) => theme.fontTheme.BODY_02}; + + &:hover { + background-color: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */ + } `; const CancelBtn = styled.button` ${DeleteCancelBtnCss} + color: ${({ theme }) => theme.palette.GREY_05}; + + background-color: ${({ theme }) => theme.palette.WITHE}; + ${({ theme }) => theme.fontTheme.BODY_02}; + + &:hover { + color: ${({ theme }) => theme.palette.GREY_06}; + + background-color: ${({ theme }) => theme.palette.GREY_03}; + } `; diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index ca19faf9..9c33eb13 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -25,6 +25,15 @@ const EnterBtnCss = css` const EnterBtnLayout = styled.button` ${EnterBtnCss} + background-color: ${({ theme }) => theme.palette.PRIMARY}; + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; /* 수정 필요 */ + } + + &:active { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* svg 색 수정 필요 */ + } `; const StyledIcon = styled(Icons.Arrow_up)` diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx index 71bae207..3ddf8ac7 100644 --- a/src/components/common/button/OkayCancelBtn.tsx +++ b/src/components/common/button/OkayCancelBtn.tsx @@ -27,6 +27,7 @@ const OkayBtn = styled.button` background-color: ${({ theme }) => theme.palette.BLACK}; ${({ theme }) => theme.fontTheme.BODY_02}; + box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); `; const CancelBtn = styled.button` diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx index cb3e5fda..93997705 100644 --- a/src/components/common/button/ProgressBtn.tsx +++ b/src/components/common/button/ProgressBtn.tsx @@ -31,7 +31,16 @@ const SettingProgressLayout = styled.button` width: 2.4rem; height: 2.4rem; + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; border-radius: 8px; + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */ + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */ + } `; const DefaultProgressLayout = styled.button` @@ -41,5 +50,6 @@ const DefaultProgressLayout = styled.button` width: 3.2rem; height: 3.2rem; + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; border-radius: 10px; `; diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index 8889e6ca..e53d40a4 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const RefreshBtn = () => { return ( - + {/*아이콘 사이즈 이상함 확인 필요*/} 동기화 ); @@ -27,8 +27,20 @@ const RefreshBtnCss = css` const RefreshBtnLayout = styled.button` ${RefreshBtnCss} + background-color: ${({ theme }) => theme.palette.BLACK}; + + &:hover { + background-color: ${({ theme }) => theme.palette.GREY_06}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.GREY_05}; /* 수정 필요 */ + } `; const Text = styled.p` + color: ${({ theme }) => theme.palette.WITHE}; text-align: center; + + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */ `; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index a9a95917..d611d3ab 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -3,12 +3,10 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const SettingCheck2 = (props: Props) => { +const SettingCheck2 = () => { return ( - + {/*아이콘 크기 조정 필요*/} ); }; @@ -27,4 +25,13 @@ const SettingCheck2Css = css` const SettingCheck2Layout = styled.button` ${SettingCheck2Css} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + } `; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index 12b3f2a0..a044ce35 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -3,12 +3,10 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const SettingCheck3 = (props: Props) => { +const SettingCheck3 = () => { return ( - + {/*아이콘 크기 조정 필요*/} ); }; @@ -27,4 +25,13 @@ const SettingCheck3Css = css` const SettingCheck3Layout = styled.button` ${SettingCheck3Css} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + } `; diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx index 9845be4d..0c80d1e7 100644 --- a/src/components/common/button/SettingDeleteBtn.tsx +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -3,12 +3,10 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const SettingDeleteBtn = (props: Props) => { +const SettingDeleteBtn = () => { return ( - + {/*아이콘 크기 조정 필요*/} ); }; @@ -27,4 +25,13 @@ const SettingDeleteBtnCss = css` const SettingDeleteBtnLayout = styled.button` ${SettingDeleteBtnCss} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */ + } `; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index 402db435..fd2447e8 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -3,12 +3,10 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const SettingXBtn = (props: Props) => { +const SettingXBtn = () => { return ( - + {/*아이콘 크기 조정 필요*/} ); }; @@ -27,4 +25,13 @@ const SettingXBtnCss = css` const SettingXBtnLayout = styled.button` ${SettingXBtnCss} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + } `; diff --git a/src/components/common/button/TextBtn.tsx b/src/components/common/button/TextBtn.tsx index af2d44f2..ee31b3c5 100644 --- a/src/components/common/button/TextBtn.tsx +++ b/src/components/common/button/TextBtn.tsx @@ -26,6 +26,16 @@ const SmallButton = styled.button` padding: 0.3rem 1.2rem; ${textButtonCss} + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */ + background-color: ${({ theme }) => theme.palette.WITHE}; + + &:hover { + background-color: ${({ theme }) => theme.palette.GREY_04}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */ + } `; const BigButton = styled.button` @@ -34,5 +44,7 @@ const BigButton = styled.button` padding: 0.7rem 1.6rem; box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); + ${textButtonCss} + ${({ theme }) => theme.fontTheme.BODY_02}; `; diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index d360aa79..1843fe2a 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -3,9 +3,7 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -const TodayPlusBtn = (props: Props) => { +const TodayPlusBtn = () => { return ( @@ -29,8 +27,24 @@ const TodayPlusBtnCss = css` const TodayPlusBtnLayout = styled.button` ${TodayPlusBtnCss} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 색 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.GREY_04}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */ + } `; const Text = styled.p` + color: ${({ theme }) => theme.palette.PRIMARY}; /* 폰트 수정 필요 & 아이콘 색상 변경 필요 */ text-align: center; + + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */ + + &:active { + color: ${({ theme }) => theme.palette.WITHE}; /* svg 색 수정 필요 */ + } `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 607acc8a..5f035a40 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -6,7 +6,10 @@ import EnterBtn from '@/components/common/button/EnterBtn'; import OkayCancelBtn from '@/components/common/button/OkayCancelBtn'; import ProgressBtn from '@/components/common/button/ProgressBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; +import SettingCheck2 from '@/components/common/button/SettingCheck2Btn'; +import SettingCheck3 from '@/components/common/button/SettingCheck3Btn'; import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; +import SettingXBtn from '@/components/common/button/SettingXBtn'; import StatusDoneBtn from '@/components/common/button/StatusDoneBtn'; import StatusInProgressBtn from '@/components/common/button/StatusInProgressBtn'; import StatusStagingBtn from '@/components/common/button/StatusStagingBtn'; @@ -18,22 +21,25 @@ import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; function Setting() { return (
- - - - - + + + + + + + + - - - - + + + - - + + +
); } From 2ac93e8d955c4f5230d4fd1d041455ae31220ffa Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 22:02:02 +0900 Subject: [PATCH 16/20] =?UTF-8?q?fix:=20svg=20=ED=81=AC=EA=B8=B0=20&=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{SettingCheck1Icon.svg => SettingCheck1.svg} | 0 src/assets/svg/index.ts | 2 +- src/components/common/button/Check1Btn.tsx | 14 ++++++++++++-- src/components/common/button/ProgressBtn.tsx | 12 ++++++++++-- src/components/common/button/RefreshBtn.tsx | 7 ++++++- src/components/common/button/SettingCheck2Btn.tsx | 7 ++++++- src/components/common/button/SettingCheck3Btn.tsx | 7 ++++++- src/components/common/button/SettingDeleteBtn.tsx | 7 ++++++- src/components/common/button/SettingXBtn.tsx | 7 ++++++- src/components/common/button/TimelineDeleteBtn.tsx | 8 +++++++- src/components/common/button/TodayPlusBtn.tsx | 7 ++++++- src/pages/Setting.tsx | 2 +- 12 files changed, 67 insertions(+), 13 deletions(-) rename src/assets/svg/{SettingCheck1Icon.svg => SettingCheck1.svg} (100%) diff --git a/src/assets/svg/SettingCheck1Icon.svg b/src/assets/svg/SettingCheck1.svg similarity index 100% rename from src/assets/svg/SettingCheck1Icon.svg rename to src/assets/svg/SettingCheck1.svg diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index a8e6706d..e72a0db7 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -10,7 +10,6 @@ import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; import ProgressIcon from '@/assets/svg/ProgressIcon.svg?react'; import SelectedBox from '@/assets/svg/Selectbox_Selected.svg?react'; import UnselectedBox from '@/assets/svg/Selectbox_Unselected.svg?react'; -import SettingCheck1 from '@/assets/svg/SettingCheck1Icon.svg?react'; import SettingCheck2 from '@/assets/svg/SettingCheck2Icon.svg?react'; import SettingCheck3 from '@/assets/svg/SettingCheck3Icon.svg?react'; import SettingProgress from '@/assets/svg/SettingProgressIcon.svg?react'; @@ -18,6 +17,7 @@ import SettingX from '@/assets/svg/SettingXIcon.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; import TimelineDelete from '@/assets/svg/ic_delete.svg?react'; import Refresh from '@/assets/svg/refresh.svg?react'; +import SettingCheck1 from '@/assets/svg/SettingCheck1.svg?react'; const Icons = { Icn_clock, diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index e63cac90..b6506927 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -11,11 +11,11 @@ const Check1Btn = ({ type }: Check1) => { <> {type === 'setting' ? ( - + ) : ( - + )} @@ -43,6 +43,11 @@ const SettingCheck1Layout = styled.button` } `; +const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)` + width: 1.3911rem; + height: 1.3911rem; +`; + const DoneLayout = styled.button` display: flex; align-items: center; @@ -53,3 +58,8 @@ const DoneLayout = styled.button` background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ border-radius: 10px; `; + +const StlyedDoneIc = styled(Icons.DoneIcon)` + width: 1.8548rem; + height: 1.8548rem; +`; diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx index 93997705..cc4897f0 100644 --- a/src/components/common/button/ProgressBtn.tsx +++ b/src/components/common/button/ProgressBtn.tsx @@ -11,11 +11,11 @@ const ProgressBtn = ({ type }: Progress) => { <> {type === 'setting' ? ( - + ) : ( - + )} @@ -43,6 +43,10 @@ const SettingProgressLayout = styled.button` } `; +const StyledSettingProgress = styled(Icons.SettingProgress)` + width: 1.4rem; +`; + const DefaultProgressLayout = styled.button` display: flex; align-items: center; @@ -53,3 +57,7 @@ const DefaultProgressLayout = styled.button` background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; border-radius: 10px; `; + +const StyledProgressIcon = styled(Icons.ProgressIcon)` + width: 1.8667rem; +`; diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index e53d40a4..0b4a0978 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const RefreshBtn = () => { return ( - {/*아이콘 사이즈 이상함 확인 필요*/} + 동기화 ); @@ -38,6 +38,11 @@ const RefreshBtnLayout = styled.button` } `; +const StyledRefreshIcon = styled(Icons.Refresh)` + width: 1.2rem; + height: 1.2rem; +`; + const Text = styled.p` color: ${({ theme }) => theme.palette.WITHE}; text-align: center; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index d611d3ab..4654b1fe 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const SettingCheck2 = () => { return ( - {/*아이콘 크기 조정 필요*/} + ); }; @@ -35,3 +35,8 @@ const SettingCheck2Layout = styled.button` background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ } `; + +const StyledSettingCheck2Icon = styled(Icons.SettingCheck2)` + width: 1.391rem; + height: 0.9563rem; +`; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index a044ce35..f8862930 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const SettingCheck3 = () => { return ( - {/*아이콘 크기 조정 필요*/} + {/*아이콘 크기 조정 필요*/} ); }; @@ -35,3 +35,8 @@ const SettingCheck3Layout = styled.button` background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ } `; + +const StyledSettingCheck3Icon = styled(Icons.SettingCheck3)` + width: 1.391rem; + height: 1.391rem; +`; diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx index 0c80d1e7..48f86fe3 100644 --- a/src/components/common/button/SettingDeleteBtn.tsx +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const SettingDeleteBtn = () => { return ( - {/*아이콘 크기 조정 필요*/} + ); }; @@ -35,3 +35,8 @@ const SettingDeleteBtnLayout = styled.button` background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */ } `; + +const StyledDeleteIcon = styled(Icons.DeleteIcon)` + width: 1.35rem; + height: 1.35rem; +`; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index fd2447e8..6fad3ca9 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const SettingXBtn = () => { return ( - {/*아이콘 크기 조정 필요*/} + ); }; @@ -35,3 +35,8 @@ const SettingXBtnLayout = styled.button` background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ } `; + +const StyledSettingX = styled(Icons.SettingX)` + width: 1.391rem; + height: 1.391rem; +`; diff --git a/src/components/common/button/TimelineDeleteBtn.tsx b/src/components/common/button/TimelineDeleteBtn.tsx index 5a6dfd72..c066242d 100644 --- a/src/components/common/button/TimelineDeleteBtn.tsx +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -5,7 +5,7 @@ import Icons from '@/assets/svg/index'; const TimelineDeleteBtn = () => { return ( - + ); }; @@ -14,6 +14,7 @@ export default TimelineDeleteBtn; const TimelineDeleteBtnLayout = styled.button` display: flex; + flex-direction: column; align-items: center; justify-content: center; width: 1.6rem; @@ -24,3 +25,8 @@ const TimelineDeleteBtnLayout = styled.button` /* stylelint-disable-next-line custom-property-pattern */ border-radius: var(--Corner-Extra-large, 28px); `; + +const StyledTimelineDelete = styled(Icons.TimelineDelete)` + width: 1.2rem; + height: 1.2rem; +`; diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index 1843fe2a..b48f25b4 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; const TodayPlusBtn = () => { return ( - + 오늘로 추가 ); @@ -48,3 +48,8 @@ const Text = styled.p` color: ${({ theme }) => theme.palette.WITHE}; /* svg 색 수정 필요 */ } `; + +const StyledPlusArrow = styled(Icons.PlusArrow)` + width: 1rem; + height: 1rem; +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 5f035a40..418a0d98 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -27,7 +27,7 @@ function Setting() { - + From edbc46440fcd14f3bae37ec14ac04d6f91e9dcfc Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Sun, 7 Jul 2024 22:19:18 +0900 Subject: [PATCH 17/20] =?UTF-8?q?fix:=20svg=20color=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/SettingCheck1.svg | 6 ++++-- src/components/common/button/Check1Btn.tsx | 4 ++++ src/components/common/button/EnterBtn.tsx | 6 ++++++ src/components/common/button/ProgressBtn.tsx | 3 +++ src/components/common/button/SettingCheck2Btn.tsx | 3 +++ src/components/common/button/SettingCheck3Btn.tsx | 3 +++ src/components/common/button/SettingXBtn.tsx | 3 +++ src/components/common/button/TodayPlusBtn.tsx | 6 ++++++ src/pages/Setting.tsx | 2 +- 9 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/assets/svg/SettingCheck1.svg b/src/assets/svg/SettingCheck1.svg index f8f88dd5..46b00599 100644 --- a/src/assets/svg/SettingCheck1.svg +++ b/src/assets/svg/SettingCheck1.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index b6506927..77420a25 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -40,6 +40,10 @@ const SettingCheck1Layout = styled.button` &:active { background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } } `; diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index 9c33eb13..3123b086 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -29,10 +29,16 @@ const EnterBtnLayout = styled.button` &:hover { background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; /* 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */ + } } &:active { background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */ + } } `; diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx index cc4897f0..b2c6193d 100644 --- a/src/components/common/button/ProgressBtn.tsx +++ b/src/components/common/button/ProgressBtn.tsx @@ -40,6 +40,9 @@ const SettingProgressLayout = styled.button` &:active { background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } } `; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index 4654b1fe..ace7b266 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -33,6 +33,9 @@ const SettingCheck2Layout = styled.button` &:active { background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } } `; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index f8862930..ce58345d 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -33,6 +33,9 @@ const SettingCheck3Layout = styled.button` &:active { background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } } `; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index 6fad3ca9..3928a1d2 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -33,6 +33,9 @@ const SettingXBtnLayout = styled.button` &:active { background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } } `; diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index b48f25b4..0af40160 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -28,6 +28,9 @@ const TodayPlusBtnCss = css` const TodayPlusBtnLayout = styled.button` ${TodayPlusBtnCss} background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.PRIMARY}; + } &:hover { background-color: ${({ theme }) => theme.palette.GREY_04}; @@ -35,6 +38,9 @@ const TodayPlusBtnLayout = styled.button` &:active { background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } } `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 418a0d98..647e7a59 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -22,7 +22,7 @@ function Setting() { return (
- + From 6c450385a19e2c0a0b2239f692900f37059ffa26 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 00:47:58 +0900 Subject: [PATCH 18/20] =?UTF-8?q?fix:=20rem=20=EB=8B=A8=EC=9C=84=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/components/common/button/Check1Btn.tsx | 10 ++++++---- src/components/common/button/DeleteBtn.tsx | 9 ++------- src/components/common/button/StatusDoneBtn.tsx | 4 ++-- src/components/common/button/StatusInProgressBtn.tsx | 4 ++-- src/components/common/button/StatusStagingBtn.tsx | 4 ++-- src/components/common/button/StatusTodoBtn.tsx | 4 ++-- src/components/common/button/TimelineDeleteBtn.tsx | 4 +--- src/components/common/button/TodayPlusBtn.tsx | 2 +- 8 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index 77420a25..0506187b 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { css } from '@emotion/react'; import Icons from '@/assets/svg/index'; @@ -24,10 +25,13 @@ const Check1Btn = ({ type }: Check1) => { export default Check1Btn; -const SettingCheck1Layout = styled.button` +const alignCenterStyle = css` display: flex; align-items: center; justify-content: center; +`; +const SettingCheck1Layout = styled.button` + ${alignCenterStyle} width: 2.4rem; height: 2.4rem; @@ -53,9 +57,7 @@ const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)` `; const DoneLayout = styled.button` - display: flex; - align-items: center; - justify-content: center; + ${alignCenterStyle} width: 3.2rem; height: 3.2rem; diff --git a/src/components/common/button/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx index 34c16e9a..0b547eea 100644 --- a/src/components/common/button/DeleteBtn.tsx +++ b/src/components/common/button/DeleteBtn.tsx @@ -1,4 +1,3 @@ -import { css } from '@emotion/react'; import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; @@ -13,19 +12,15 @@ const DeleteBtn = () => { export default DeleteBtn; -const DeleteBtnCss = css` +const DeleteBtnLayout = styled.button` display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; - border-radius: 10px; -`; - -const DeleteBtnLayout = styled.button` - ${DeleteBtnCss} background-color: ${({ theme }) => theme.palette.GREY_01}; + border-radius: 10px; &:active { background-color: ${({ theme }) => theme.palette.GREY_03}; diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx index 5ed580d8..1b5fc61d 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -16,13 +16,13 @@ export default StatusDoneBtn; const StatusDoneBtnLayout = styled.div` display: flex; - gap: 4px; + gap: 0.4rem; align-items: center; justify-content: center; width: 7.3rem; height: 2.4rem; padding: 0.4rem; - border: 1px solid var(--white, #fff); + border: 1px solid var(${({ theme }) => theme.palette.WITHE}); border-radius: 10px; `; diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx index 6a5a3cd5..ca00cf92 100644 --- a/src/components/common/button/StatusInProgressBtn.tsx +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -16,13 +16,13 @@ export default StatusInProgressBtn; const StatusInProgressBtnLayout = styled.div` display: flex; - gap: 4px; + gap: 0.4rem; align-items: center; justify-content: center; width: 7.3rem; height: 2.4rem; padding: 0.4rem; - border: 1px solid var(--white, #fff); + border: 1px solid var(${({ theme }) => theme.palette.WITHE}); border-radius: 10px; `; diff --git a/src/components/common/button/StatusStagingBtn.tsx b/src/components/common/button/StatusStagingBtn.tsx index 59153ca3..674d31b2 100644 --- a/src/components/common/button/StatusStagingBtn.tsx +++ b/src/components/common/button/StatusStagingBtn.tsx @@ -16,13 +16,13 @@ export default StatusStagingBtn; const StatusStagingBtnLayout = styled.div` display: flex; - gap: 4px; + gap: 0.4rem; align-items: center; justify-content: center; width: 5.2rem; height: 2.4rem; padding: 0.4rem; - border: 1px solid var(--white, #fff); + border: 1px solid var(${({ theme }) => theme.palette.WITHE}); border-radius: 10px; `; diff --git a/src/components/common/button/StatusTodoBtn.tsx b/src/components/common/button/StatusTodoBtn.tsx index 741ccea5..bb0634fd 100644 --- a/src/components/common/button/StatusTodoBtn.tsx +++ b/src/components/common/button/StatusTodoBtn.tsx @@ -16,13 +16,13 @@ export default StatusTodoBtn; const StatusTodoBtnLayout = styled.div` display: flex; - gap: 4px; + gap: 0.4rem; align-items: center; justify-content: center; width: 5.2rem; height: 2.4rem; padding: 0.4rem; - border: 1px solid var(--white, #fff); + border: 1px solid var(${({ theme }) => theme.palette.WITHE}); border-radius: 10px; `; diff --git a/src/components/common/button/TimelineDeleteBtn.tsx b/src/components/common/button/TimelineDeleteBtn.tsx index c066242d..b7f09622 100644 --- a/src/components/common/button/TimelineDeleteBtn.tsx +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -21,9 +21,7 @@ const TimelineDeleteBtnLayout = styled.button` height: 1.6rem; background: ${({ theme }) => theme.palette.SECONDARY}; - - /* stylelint-disable-next-line custom-property-pattern */ - border-radius: var(--Corner-Extra-large, 28px); + border-radius: 50%; `; const StyledTimelineDelete = styled(Icons.TimelineDelete)` diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index 0af40160..54ba6a84 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -16,7 +16,7 @@ export default TodayPlusBtn; const TodayPlusBtnCss = css` display: flex; - gap: 6px; + gap: 0.6rem; align-items: center; justify-content: center; width: 8.9rem; From becab59be7b01de35cb3c33dd597e4e3795341cb Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 02:28:15 +0900 Subject: [PATCH 19/20] =?UTF-8?q?fix:=20disabled=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/EnterBtn.tsx | 41 +++++++++++++-------- src/components/common/button/RefreshBtn.tsx | 34 +++++++++++------ src/pages/Setting.tsx | 4 +- 3 files changed, 49 insertions(+), 30 deletions(-) diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index 3123b086..06181861 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -3,9 +3,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const EnterBtn = () => { +interface EnterBtnProps { + isDisabled: boolean; +} + +const EnterBtn = ({ isDisabled }: EnterBtnProps) => { return ( - + ); @@ -23,23 +27,28 @@ const EnterBtnCss = css` border-radius: 8px; `; -const EnterBtnLayout = styled.button` +const EnterBtnLayout = styled.button<{ isDisabled: boolean }>` ${EnterBtnCss} - background-color: ${({ theme }) => theme.palette.PRIMARY}; - - &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; /* 수정 필요 */ - path { - stroke: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */ + color: ${({ theme }) => theme.palette.WITHE}; + + background-color: ${({ theme, isDisabled }) => + isDisabled ? theme.palette.BLUE_DISABLED : theme.palette.PRIMARY}; /* 색 수정 필요 */ + ${({ theme, isDisabled }) => + !isDisabled && + ` + &:hover { + background-color: ${theme.palette.BLUE_PASSED}; /* 수정 필요 */ + path { + stroke: ${theme.palette.BLUE_DEFAULT}; /* 수정 필요 */ + } + } + &:active { + background-color: ${theme.palette.BLUE_DISABLED}; + path { + stroke: ${theme.palette.BLACK}; /* 수정 필요 */ } - } - - &:active { - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* svg 색 수정 필요 */ - path { - stroke: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */ } - } + `} `; const StyledIcon = styled(Icons.Arrow_up)` diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index 0b4a0978..d3d4500b 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -3,9 +3,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const RefreshBtn = () => { +interface RefreshProps { + isDisabled: boolean; +} + +const RefreshBtn = ({ isDisabled }: RefreshProps) => { return ( - + 동기화 @@ -25,17 +29,23 @@ const RefreshBtnCss = css` border-radius: 8px; `; -const RefreshBtnLayout = styled.button` +const RefreshBtnLayout = styled.button<{ isDisabled: boolean }>` ${RefreshBtnCss} - background-color: ${({ theme }) => theme.palette.BLACK}; - - &:hover { - background-color: ${({ theme }) => theme.palette.GREY_06}; - } - - &:active { - background-color: ${({ theme }) => theme.palette.GREY_05}; /* 수정 필요 */ - } + color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.GREY_05 : theme.palette.WITHE)}; + + background-color: ${({ theme, isDisabled }) => + isDisabled ? theme.palette.GREY_06 : theme.palette.BLACK}; /* 색 수정 필요 */ + + ${({ theme, isDisabled }) => + !isDisabled && + ` + &:hover { + background-color: ${theme.palette.GREY_06}; + } + &:active { + background-color: ${theme.palette.GREY_05}; + } + `} `; const StyledRefreshIcon = styled(Icons.Refresh)` diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 647e7a59..a547b39b 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -25,10 +25,10 @@ function Setting() { - + - + From 503c12f3c411a63e481c7a884eb694d3e0987637 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 03:23:55 +0900 Subject: [PATCH 20/20] =?UTF-8?q?fix:=20light=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/button/StatusDoneBtn.tsx | 2 +- .../common/button/StatusInProgressBtn.tsx | 2 +- src/components/common/button/TextBtn.tsx | 126 ++++++++++++++++-- src/pages/Setting.tsx | 2 +- 4 files changed, 116 insertions(+), 16 deletions(-) diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx index 1b5fc61d..503c1b97 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -6,7 +6,7 @@ import TextBtn from '@/components/common/button/TextBtn'; const StatusDoneBtn = () => { return ( - + ); diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx index ca00cf92..ff250500 100644 --- a/src/components/common/button/StatusInProgressBtn.tsx +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -6,7 +6,7 @@ import TextBtn from '@/components/common/button/TextBtn'; const StatusInProgressBtn = () => { return ( - + ); diff --git a/src/components/common/button/TextBtn.tsx b/src/components/common/button/TextBtn.tsx index ee31b3c5..1b392bb2 100644 --- a/src/components/common/button/TextBtn.tsx +++ b/src/components/common/button/TextBtn.tsx @@ -4,10 +4,24 @@ import styled from '@emotion/styled'; interface TextBtnProps { text: string; size: 'small' | 'medium'; + color: 'blue' | 'white' | 'black'; + isLight: boolean; } -const TextBtn = ({ size, text }: TextBtnProps) => { - return <>{size === 'small' ? {text} : {text}}; +const TextBtn = ({ size, text, color, isLight }: TextBtnProps) => { + return ( + <> + {size === 'small' ? ( + + {text} + + ) : ( + + {text} + + )} + + ); }; export default TextBtn; @@ -20,31 +34,117 @@ const textButtonCss = css` border-radius: 8px; `; -const SmallButton = styled.button` +const SmallButton = styled.button<{ color: string; isLight: boolean }>` width: 4.5rem; height: 2.6rem; padding: 0.3rem 1.2rem; ${textButtonCss} ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */ - background-color: ${({ theme }) => theme.palette.WITHE}; + ${({ theme, color, isLight }) => + !isLight && + css` + color: ${color === 'blue' ? theme.palette.WITHE : color === 'white' ? theme.palette.BLACK : theme.palette.WITHE}; - &:hover { - background-color: ${({ theme }) => theme.palette.GREY_04}; - } + background-color: ${color === 'blue' + ? theme.palette.PRIMARY + : color === 'white' + ? theme.palette.WITHE + : theme.palette.BLACK}; - &:active { - background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */ - } + &:hover { + background-color: ${color === 'blue' + ? theme.palette.BLUE_HOVER + : color === 'white' + ? theme.palette.GREY_04 + : theme.palette.GREY_06}; + } + + &:active { + color: ${color === 'blue' + ? theme.palette.BLUE_DEFAULT + : color === 'white' + ? theme.palette.BLACK + : theme.palette.WITHE}; + + background-color: ${color === 'blue' + ? theme.palette.BLUE_PASSED + : color === 'white' + ? theme.palette.GREY_05 + : theme.palette.GREY_06}; + } + `} + ${({ theme, color, isLight }) => + isLight && + css` + color: ${color === 'blue' + ? theme.palette.WITHE + : color === 'white' + ? theme.palette.GREY_06 + : theme.palette.GREY_04}; + + background-color: ${color === 'blue' + ? theme.palette.BLUE_DISABLED + : color === 'white' + ? theme.palette.GREY_03 + : theme.palette.GREY_06}; + `} `; -const BigButton = styled.button` +const BigButton = styled.button<{ color: string; isLight: boolean }>` width: 6rem; height: 3.2rem; padding: 0.7rem 1.6rem; - box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); - ${textButtonCss} ${({ theme }) => theme.fontTheme.BODY_02}; + ${({ theme, color, isLight }) => + !isLight && + css` + color: ${color === 'blue' ? theme.palette.WITHE : color === 'white' ? theme.palette.BLACK : theme.palette.WITHE}; + + background-color: ${color === 'blue' + ? theme.palette.PRIMARY + : color === 'white' + ? theme.palette.WITHE + : theme.palette.BLACK}; + + &:hover { + background-color: ${color === 'blue' + ? theme.palette.BLUE_HOVER + : color === 'white' + ? theme.palette.GREY_04 + : theme.palette.GREY_06}; + } + + &:active { + color: ${color === 'blue' + ? theme.palette.BLUE_DEFAULT + : color === 'white' + ? theme.palette.BLACK + : theme.palette.WITHE}; + + background-color: ${color === 'blue' + ? theme.palette.BLUE_PASSED + : color === 'white' + ? theme.palette.GREY_05 + : theme.palette.GREY_06}; + } + `} + ${({ theme, color, isLight }) => + isLight && + css` + color: ${color === 'blue' + ? theme.palette.WITHE + : color === 'white' + ? theme.palette.GREY_06 + : theme.palette.GREY_04}; + + background-color: ${color === 'blue' + ? theme.palette.BLUE_DISABLED + : color === 'white' + ? theme.palette.GREY_03 + : theme.palette.GREY_06}; + `} + box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index a547b39b..cde13871 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -37,7 +37,7 @@ function Setting() { - +