From cb9b5861b0c2b8e478715f3ce8f274d12d8771f5 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Tue, 9 Jul 2024 18:34:18 +0900 Subject: [PATCH 01/13] =?UTF-8?q?fix:=20=EB=8B=A4=EB=A5=B8=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=99=80=EC=84=9C=20=EB=AA=A8=EB=8B=AC=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/clock-check.svg | 3 +++ src/assets/svg/index.ts | 2 ++ src/components/common/modal/Modal.tsx | 13 +++++-------- src/components/common/modal/ModalHeaderBtn.tsx | 14 ++++++-------- src/components/common/modal/ModalTextInputTime.tsx | 4 +--- src/pages/Setting.tsx | 4 ++++ 6 files changed, 21 insertions(+), 19 deletions(-) create mode 100644 src/assets/svg/clock-check.svg diff --git a/src/assets/svg/clock-check.svg b/src/assets/svg/clock-check.svg new file mode 100644 index 00000000..9494af0b --- /dev/null +++ b/src/assets/svg/clock-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 9411e142..22a0c816 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,6 +1,7 @@ import Icn_arrow_narrow_right from '@/assets/svg/arrow-narrow-right.svg?react'; import Arrow_up from '@/assets/svg/arrow-up.svg?react'; import Icn_calander from '@/assets/svg/calendar-minus-01.svg?react'; +import ClockCheck from '@/assets/svg/clock-check.svg?react'; import Icn_date_clock from '@/assets/svg/clock.svg?react'; import DeleteIcon from '@/assets/svg/Delete.svg?react'; import DoneIcon from '@/assets/svg/DoneIcon.svg?react'; @@ -68,6 +69,7 @@ const Icons = { DoneIcon, ProgressIcon, TimelineDelete, + ClockCheck, }; export default Icons; diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx index 37063b9a..899246dd 100644 --- a/src/components/common/modal/Modal.tsx +++ b/src/components/common/modal/Modal.tsx @@ -1,9 +1,10 @@ import styled from '@emotion/styled'; +import BtnDate from '@/components/common/BtnDate/BtnDate'; +import OkayCancelBtn from '@/components/common/button/OkayCancelBtn'; import ModalHeaderBtn from '@/components/common/modal/ModalHeaderBtn'; import ModalTextInputTime from '@/components/common/modal/ModalTextInputTime'; import TextInputBox from '@/components/common/modal/TextInputBox'; -import TextboxInput from '@/components/common/textbox/TextboxInput'; import { SizeType } from '@/types/textInputType'; interface ModalProps { @@ -16,7 +17,7 @@ function Modal({ isOpen, sizeType }: ModalProps) { isOpen && ( - + @@ -24,8 +25,8 @@ function Modal({ isOpen, sizeType }: ModalProps) { {sizeType.type === 'long' && } - 취소 - 확인 + + ) @@ -62,8 +63,4 @@ const ModalFooter = styled.div` justify-content: flex-end; `; -const TmpBtn = styled.button` - display: block; -`; - export default Modal; diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index 47612b9e..eae17e4c 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -1,14 +1,16 @@ import styled from '@emotion/styled'; -import Icons from '@/assets/svg/index'; +import Check1Btn from '@/components/common/button/Check1Btn'; +import DeleteBtn from '@/components/common/button/DeleteBtn'; +import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; import { SizeType } from '@/types/textInputType'; function ModalHeaderBtn({ type }: SizeType) { return ( - - {type === 'long' && } - + + {type === 'long' && } + ); } @@ -18,8 +20,4 @@ const ModalHeaderBtnLayout = styled.div` gap: 0.6rem; `; -const TmpIcon = styled(Icons.Icn_clock)` - width: 3.2rem; - height: 3.2rem; -`; export default ModalHeaderBtn; diff --git a/src/components/common/modal/ModalTextInputTime.tsx b/src/components/common/modal/ModalTextInputTime.tsx index f14a4ceb..fb79d760 100644 --- a/src/components/common/modal/ModalTextInputTime.tsx +++ b/src/components/common/modal/ModalTextInputTime.tsx @@ -19,8 +19,6 @@ function ModalTextInputTime() { const ModalTextInputTimeLayout = styled.div` display: flex; gap: 2rem; - - /* justify-content: space-between; */ width: 100%; `; @@ -30,7 +28,7 @@ const TextInputTimeBox = styled.div` align-items: center; `; -const TmpIcon = styled(Icons.Icn_clock)` +const TmpIcon = styled(Icons.ClockCheck)` width: 2.4rem; height: 2.4rem; `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index f3da9d9e..f3e9250e 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -17,6 +17,7 @@ import StatusTodoBtn from '@/components/common/button/statusBtn/StatusTodoBtn'; import TextBtn from '@/components/common/button/textBtn/TextBtn'; import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; +import Modal from '@/components/common/modal/Modal'; import NavBar from '@/components/common/NavBar'; function Setting() { @@ -43,6 +44,9 @@ function Setting() { + + + ); } From 00575a84b3f0d9f19ddf513c8287cbc92fef16a0 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Tue, 9 Jul 2024 22:57:29 +0900 Subject: [PATCH 02/13] =?UTF-8?q?fix:=20OkayCancelBtn=20hover=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/OkayCancelBtn.tsx | 12 ++++++++++++ src/components/common/button/textBtn/textBtnStyle.ts | 1 - src/components/common/modal/ModalHeaderBtn.tsx | 4 ++-- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx index 854f9f30..56fa6026 100644 --- a/src/components/common/button/OkayCancelBtn.tsx +++ b/src/components/common/button/OkayCancelBtn.tsx @@ -27,6 +27,12 @@ const OkayBtn = styled.button` background-color: ${({ theme }) => theme.palette.Grey.Black}; ${({ theme }) => theme.fontTheme.BODY_02}; + + &:hover { + color: ${({ theme }) => theme.palette.Grey.White}; + + background-color: ${({ theme }) => theme.palette.Grey.Grey7}; + } `; const CancelBtn = styled.button` @@ -35,4 +41,10 @@ const CancelBtn = styled.button` background-color: ${({ theme }) => theme.palette.Grey.White}; ${({ theme }) => theme.fontTheme.BODY_02}; + + &:hover { + color: ${({ theme }) => theme.palette.Grey.Grey6}; + + background-color: ${({ theme }) => theme.palette.Grey.Grey3}; + } `; diff --git a/src/components/common/button/textBtn/textBtnStyle.ts b/src/components/common/button/textBtn/textBtnStyle.ts index 0b169cef..3f65682f 100644 --- a/src/components/common/button/textBtn/textBtnStyle.ts +++ b/src/components/common/button/textBtn/textBtnStyle.ts @@ -24,5 +24,4 @@ export const bigSize = css` ${textButtonCss} ${theme.fontTheme.BODY_02} - box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); `; diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index eae17e4c..41582305 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -9,8 +9,8 @@ function ModalHeaderBtn({ type }: SizeType) { return ( - {type === 'long' && } - + {type === 'long' && } + ); } From d09727bf0e58e0053c422e8e3624367fb952f830 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 02:47:30 +0900 Subject: [PATCH 03/13] =?UTF-8?q?fix:=20setting=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/SettingCheck4Icon.svg | 6 ++-- src/components/common/button/Check1Btn.tsx | 1 + .../button/settingBtn/SettingCheck2Btn.tsx | 32 +++++++++++++------ .../button/settingBtn/SettingCheck3Btn.tsx | 17 ++++++---- .../common/button/settingBtn/SettingXBtn.tsx | 17 ++++++---- .../button/settingBtn/settingBtnStyle.ts | 25 ++++++++++++++- .../common/modal/ModalHeaderBtn.tsx | 2 +- src/pages/Setting.tsx | 13 ++++++-- 8 files changed, 81 insertions(+), 32 deletions(-) diff --git a/src/assets/svg/SettingCheck4Icon.svg b/src/assets/svg/SettingCheck4Icon.svg index 5619f901..1071a6a6 100644 --- a/src/assets/svg/SettingCheck4Icon.svg +++ b/src/assets/svg/SettingCheck4Icon.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index c63aec06..07354008 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -70,4 +70,5 @@ const DoneLayout = styled.button` const StlyedDoneIc = styled(Icons.DoneIcon)` width: 1.85rem; + height: 1.85rem; `; diff --git a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx index fa0d7deb..163b9f2c 100644 --- a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx +++ b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx @@ -1,19 +1,31 @@ import styled from '@emotion/styled'; +import { FunctionComponent, SVGProps } from 'react'; import Icons from '@/assets/svg/index'; -import { SettingLayout } from '@/components/common/button/settingBtn/settingBtnStyle'; +import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle'; -function SettingCheck2() { +const settingIconMap: Record>> = { + complete: Icons.SettingIcons.SettingCheck1, + check: Icons.SettingIcons.SettingCheck2, + done: Icons.SettingIcons.SettingCheck3, + progress: Icons.SettingIcons.SettingCheck4, +}; +interface SettingCheckBtnProps { + size: 'small' | 'big'; + type: 'complete' | 'check' | 'done' | 'progress'; +} + +function SettingCheckBtn({ size, type }: SettingCheckBtnProps) { + const IconComponent = settingIconMap[type]; + + const StyledSettingCheck2Icon = styled(IconComponent)<{ size: string }>` + ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; + `; return ( - - + + ); } -export default SettingCheck2; - -const StyledSettingCheck2Icon = styled(Icons.SettingIcons.SettingCheck2)` - width: 1.6rem; - height: 1.6rem; -`; +export default SettingCheckBtn; diff --git a/src/components/common/button/settingBtn/SettingCheck3Btn.tsx b/src/components/common/button/settingBtn/SettingCheck3Btn.tsx index ba7286a2..2a80dfc5 100644 --- a/src/components/common/button/settingBtn/SettingCheck3Btn.tsx +++ b/src/components/common/button/settingBtn/SettingCheck3Btn.tsx @@ -1,19 +1,22 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -import { SettingLayout } from '@/components/common/button/settingBtn/settingBtnStyle'; +import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle'; -function SettingCheck3() { +interface SettingCheck3Props { + size: 'small' | 'big'; +} + +function SettingCheck3({ size }: SettingCheck3Props) { return ( - - + + ); } export default SettingCheck3; -const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)` - width: 1.6rem; - height: 1.6rem; +const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)<{ size: string }>` + ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; `; diff --git a/src/components/common/button/settingBtn/SettingXBtn.tsx b/src/components/common/button/settingBtn/SettingXBtn.tsx index d9f9ebc5..fdc9e402 100644 --- a/src/components/common/button/settingBtn/SettingXBtn.tsx +++ b/src/components/common/button/settingBtn/SettingXBtn.tsx @@ -1,19 +1,22 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -import { SettingLayout } from '@/components/common/button/settingBtn/settingBtnStyle'; +import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle'; -function SettingXBtn() { +interface SettingXBtnProps { + size: 'small' | 'big'; +} + +function SettingXBtn({ size }: SettingXBtnProps) { return ( - - + + ); } export default SettingXBtn; -const StyledSettingX = styled(Icons.SettingX)` - width: 1.6rem; - height: 1.6rem; +const StyledSettingX = styled(Icons.SettingX)<{ size: string }>` + ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; `; diff --git a/src/components/common/button/settingBtn/settingBtnStyle.ts b/src/components/common/button/settingBtn/settingBtnStyle.ts index 85db0544..109e0431 100644 --- a/src/components/common/button/settingBtn/settingBtnStyle.ts +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -5,13 +5,34 @@ export const SettingCss = css` display: flex; align-items: center; justify-content: center; +`; + +export const smallSize = css` width: 2.4rem; height: 2.4rem; border-radius: 8px; `; -export const SettingLayout = styled.button` +export const bigSize = css` + width: 3.2rem; + height: 3.2rem; + + border-radius: 10px; +`; + +export const smallIcon = css` + width: 1.6rem; + height: 1.6rem; +`; + +export const bigIcon = css` + width: 2.2rem; + height: 2.2rem; +`; + +export const SettingLayout = styled.button<{ size: string }>` + ${({ size }) => (size === 'small' ? smallSize : bigSize)}; ${SettingCss} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; @@ -23,6 +44,8 @@ export const SettingLayout = styled.button` background-color: ${({ theme }) => theme.palette.Primary}; path { + /* fill: ${({ theme }) => theme.palette.Grey.White}; */ + stroke: ${({ theme }) => theme.palette.Grey.White}; } } diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index 41582305..cd53e7cf 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -10,7 +10,7 @@ function ModalHeaderBtn({ type }: SizeType) { {type === 'long' && } - + ); } diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index f3e9250e..2b01d6d7 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -34,16 +34,23 @@ function Setting() { - - + + {/* */} + + - + + + + + + From 7c6a5e7b539ebcc54afb3422a9a2263fd1550b71 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 02:48:13 +0900 Subject: [PATCH 04/13] =?UTF-8?q?fix:=20progress=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9D=80=20active=EC=8B=9C=20fill=EC=9D=B4=20=EC=B1=84?= =?UTF-8?q?=EC=9B=8C=EC=A7=80=EB=8F=84=EB=A1=9D=20=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button/settingBtn/SettingCheck2Btn.tsx | 8 +++++-- .../button/settingBtn/SettingCheck3Btn.tsx | 22 ------------------- .../common/button/settingBtn/SettingXBtn.tsx | 22 ------------------- .../button/settingBtn/settingBtnStyle.ts | 6 ++--- src/pages/Setting.tsx | 9 +------- 5 files changed, 9 insertions(+), 58 deletions(-) delete mode 100644 src/components/common/button/settingBtn/SettingCheck3Btn.tsx delete mode 100644 src/components/common/button/settingBtn/SettingXBtn.tsx diff --git a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx index 163b9f2c..951bc103 100644 --- a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx +++ b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx @@ -9,20 +9,24 @@ const settingIconMap: Record>> check: Icons.SettingIcons.SettingCheck2, done: Icons.SettingIcons.SettingCheck3, progress: Icons.SettingIcons.SettingCheck4, + xBtn: Icons.SettingX, }; interface SettingCheckBtnProps { size: 'small' | 'big'; - type: 'complete' | 'check' | 'done' | 'progress'; + type: 'complete' | 'check' | 'done' | 'progress' | 'xBtn'; } function SettingCheckBtn({ size, type }: SettingCheckBtnProps) { const IconComponent = settingIconMap[type]; + const isFill = type === 'progress'; + const StyledSettingCheck2Icon = styled(IconComponent)<{ size: string }>` ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; `; + return ( - + ); diff --git a/src/components/common/button/settingBtn/SettingCheck3Btn.tsx b/src/components/common/button/settingBtn/SettingCheck3Btn.tsx deleted file mode 100644 index 2a80dfc5..00000000 --- a/src/components/common/button/settingBtn/SettingCheck3Btn.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; -import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle'; - -interface SettingCheck3Props { - size: 'small' | 'big'; -} - -function SettingCheck3({ size }: SettingCheck3Props) { - return ( - - - - ); -} - -export default SettingCheck3; - -const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)<{ size: string }>` - ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; -`; diff --git a/src/components/common/button/settingBtn/SettingXBtn.tsx b/src/components/common/button/settingBtn/SettingXBtn.tsx deleted file mode 100644 index fdc9e402..00000000 --- a/src/components/common/button/settingBtn/SettingXBtn.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; -import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle'; - -interface SettingXBtnProps { - size: 'small' | 'big'; -} - -function SettingXBtn({ size }: SettingXBtnProps) { - return ( - - - - ); -} - -export default SettingXBtn; - -const StyledSettingX = styled(Icons.SettingX)<{ size: string }>` - ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; -`; diff --git a/src/components/common/button/settingBtn/settingBtnStyle.ts b/src/components/common/button/settingBtn/settingBtnStyle.ts index 109e0431..80a98818 100644 --- a/src/components/common/button/settingBtn/settingBtnStyle.ts +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -31,7 +31,7 @@ export const bigIcon = css` height: 2.2rem; `; -export const SettingLayout = styled.button<{ size: string }>` +export const SettingLayout = styled.button<{ size: string; isFill: boolean }>` ${({ size }) => (size === 'small' ? smallSize : bigSize)}; ${SettingCss} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; @@ -44,9 +44,7 @@ export const SettingLayout = styled.button<{ size: string }>` background-color: ${({ theme }) => theme.palette.Primary}; path { - /* fill: ${({ theme }) => theme.palette.Grey.White}; */ - - stroke: ${({ theme }) => theme.palette.Grey.White}; + ${({ isFill, theme }) => (isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`)} } } `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 2b01d6d7..fb55a79c 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -6,9 +6,7 @@ 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/settingBtn/SettingCheck2Btn'; -import SettingCheck3 from '@/components/common/button/settingBtn/SettingCheck3Btn'; import SettingDeleteBtn from '@/components/common/button/settingBtn/SettingDeleteBtn'; -import SettingXBtn from '@/components/common/button/settingBtn/SettingXBtn'; import SortBtn from '@/components/common/button/SortBtn'; import StatusDoneBtn from '@/components/common/button/statusBtn/StatusDoneBtn'; import StatusInProgressBtn from '@/components/common/button/statusBtn/StatusInProgressBtn'; @@ -35,12 +33,7 @@ function Setting() { - {/* */} - - - - @@ -51,7 +44,7 @@ function Setting() { - + From 9d498e18f8dbc61f36f459c45a5b1358a58a295f Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 03:02:05 +0900 Subject: [PATCH 05/13] =?UTF-8?q?fix:=20svg=20=ED=8C=A8=EB=94=A9=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EC=A0=84=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/SettingCheck1Icon.svg | 6 +++--- src/assets/svg/SettingCheck3Icon.svg | 6 +++--- src/assets/svg/SettingXIcon.svg | 6 +++--- .../{SettingCheck2Btn.tsx => SettingCheckBtn.tsx} | 0 src/components/common/modal/ModalHeaderBtn.tsx | 7 +++---- src/pages/Setting.tsx | 2 +- 6 files changed, 13 insertions(+), 14 deletions(-) rename src/components/common/button/settingBtn/{SettingCheck2Btn.tsx => SettingCheckBtn.tsx} (100%) diff --git a/src/assets/svg/SettingCheck1Icon.svg b/src/assets/svg/SettingCheck1Icon.svg index f8f88dd5..a25350ad 100644 --- a/src/assets/svg/SettingCheck1Icon.svg +++ b/src/assets/svg/SettingCheck1Icon.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/svg/SettingCheck3Icon.svg b/src/assets/svg/SettingCheck3Icon.svg index 006d5824..4cd78951 100644 --- a/src/assets/svg/SettingCheck3Icon.svg +++ b/src/assets/svg/SettingCheck3Icon.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/svg/SettingXIcon.svg b/src/assets/svg/SettingXIcon.svg index 8cc3cb85..ec619033 100644 --- a/src/assets/svg/SettingXIcon.svg +++ b/src/assets/svg/SettingXIcon.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx b/src/components/common/button/settingBtn/SettingCheckBtn.tsx similarity index 100% rename from src/components/common/button/settingBtn/SettingCheck2Btn.tsx rename to src/components/common/button/settingBtn/SettingCheckBtn.tsx diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index cd53e7cf..9ffa75c4 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -1,16 +1,15 @@ import styled from '@emotion/styled'; -import Check1Btn from '@/components/common/button/Check1Btn'; import DeleteBtn from '@/components/common/button/DeleteBtn'; -import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; import { SizeType } from '@/types/textInputType'; function ModalHeaderBtn({ type }: SizeType) { return ( - {type === 'long' && } - + {type === 'long' && } + ); } diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index fb55a79c..27d05a6b 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -5,7 +5,7 @@ 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/settingBtn/SettingCheck2Btn'; +import SettingCheck2 from '@/components/common/button/settingBtn/SettingCheckBtn'; import SettingDeleteBtn from '@/components/common/button/settingBtn/SettingDeleteBtn'; import SortBtn from '@/components/common/button/SortBtn'; import StatusDoneBtn from '@/components/common/button/statusBtn/StatusDoneBtn'; From 89727c9d6cf4f87193dd6b3674feeec255d99fd3 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 03:39:58 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=EC=84=B8=ED=8C=85=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20props=EC=97=90=20hover,=20active=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button/settingBtn/SettingCheckBtn.tsx | 7 +++-- .../button/settingBtn/settingBtnStyle.ts | 26 ++++++++++++------- .../common/modal/ModalHeaderBtn.tsx | 4 +-- src/pages/Setting.tsx | 12 +++++---- 4 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/components/common/button/settingBtn/SettingCheckBtn.tsx b/src/components/common/button/settingBtn/SettingCheckBtn.tsx index 951bc103..49b3c3d5 100644 --- a/src/components/common/button/settingBtn/SettingCheckBtn.tsx +++ b/src/components/common/button/settingBtn/SettingCheckBtn.tsx @@ -14,9 +14,12 @@ const settingIconMap: Record>> interface SettingCheckBtnProps { size: 'small' | 'big'; type: 'complete' | 'check' | 'done' | 'progress' | 'xBtn'; + onClick?: () => void; + isHover: boolean; + isPressed: boolean; } -function SettingCheckBtn({ size, type }: SettingCheckBtnProps) { +function SettingCheckBtn({ size, type, onClick, isHover, isPressed }: SettingCheckBtnProps) { const IconComponent = settingIconMap[type]; const isFill = type === 'progress'; @@ -26,7 +29,7 @@ function SettingCheckBtn({ size, type }: SettingCheckBtnProps) { `; return ( - + ); diff --git a/src/components/common/button/settingBtn/settingBtnStyle.ts b/src/components/common/button/settingBtn/settingBtnStyle.ts index 80a98818..66b3da89 100644 --- a/src/components/common/button/settingBtn/settingBtnStyle.ts +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -31,20 +31,28 @@ export const bigIcon = css` height: 2.2rem; `; -export const SettingLayout = styled.button<{ size: string; isFill: boolean }>` +export const SettingLayout = styled.button<{ size: string; isFill: boolean; isHover: boolean; isPressed: boolean }>` ${({ size }) => (size === 'small' ? smallSize : bigSize)}; ${SettingCss} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; - &:hover { - background-color: ${({ theme }) => theme.palette.Blue.Blue3}; - } + ${({ isHover, theme }) => + isHover && + ` + &:hover { + background-color: ${theme.palette.Blue.Blue3}; + } + `} - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; + ${({ isPressed, theme, isFill }) => + isPressed && + ` + &:active { + background-color: ${theme.palette.Primary}; - path { - ${({ isFill, theme }) => (isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`)} + path { + ${isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`} + } } - } + `} `; diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index 9ffa75c4..d548de32 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -8,8 +8,8 @@ function ModalHeaderBtn({ type }: SizeType) { return ( - {type === 'long' && } - + {type === 'long' && } + ); } diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 27d05a6b..29b4b6d0 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -40,13 +40,15 @@ function Setting() { - - - - - + + + + + + + {/* */} ); } From 0e88253c3845c8eb90cee5b8e8c05dd482b1fdae Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 04:36:22 +0900 Subject: [PATCH 07/13] =?UTF-8?q?fix:=20status=20button=20check1btn=20?= =?UTF-8?q?=EC=A7=80=EC=9A=B0=EA=B3=A0=20=EA=B3=B5=ED=86=B5=20=EC=84=B8?= =?UTF-8?q?=ED=8C=85=20=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Check1Btn.tsx | 74 ------------------- .../button/settingBtn/SettingCheckBtn.tsx | 12 ++- .../button/settingBtn/settingBtnStyle.ts | 23 +++++- .../common/button/statusBtn/StatusDoneBtn.tsx | 11 ++- .../button/statusBtn/StatusInProgressBtn.tsx | 11 ++- .../button/statusBtn/StatusStagingBtn.tsx | 11 ++- .../common/button/statusBtn/StatusTodoBtn.tsx | 11 ++- .../common/modal/ModalHeaderBtn.tsx | 4 +- src/pages/Setting.tsx | 8 +- 9 files changed, 72 insertions(+), 93 deletions(-) delete mode 100644 src/components/common/button/Check1Btn.tsx diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx deleted file mode 100644 index 07354008..00000000 --- a/src/components/common/button/Check1Btn.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; - -interface Check1Props { - type: 'setting' | 'done'; - isHover: boolean; - isPressed: boolean; - onClick?: () => void; -} - -function Check1Btn({ type, isHover, isPressed, onClick }: Check1Props) { - return ( -
- {type === 'setting' ? ( - - - - ) : ( - - - - )} -
- ); -} - -export default Check1Btn; - -const alignCenterStyle = css` - display: flex; - align-items: center; - justify-content: center; -`; -const SettingCheck1Layout = styled.button<{ isHover: boolean; isPressed: boolean }>` - ${alignCenterStyle} - width: 2.4rem; - height: 2.4rem; - - background-color: ${({ theme, isPressed }) => (isPressed ? theme.palette.Primary : theme.palette.Blue.Blue1)}; - - path { - stroke: ${({ theme, isPressed }) => (isPressed ? theme.palette.Grey.White : theme.palette.Primary)}; - } - border-radius: 8px; - - ${({ isHover, theme }) => - isHover && - css` - &:hover { - background-color: ${theme.palette.Blue.Blue3}; - } - `} -`; - -const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)` - width: 1.6rem; - height: 1.6rem; -`; - -const DoneLayout = styled.button` - ${alignCenterStyle} - width: 3.2rem; - height: 3.2rem; - - background-color: ${({ theme }) => theme.palette.Blue.Blue1}; - border-radius: 10px; -`; - -const StlyedDoneIc = styled(Icons.DoneIcon)` - width: 1.85rem; - height: 1.85rem; -`; diff --git a/src/components/common/button/settingBtn/SettingCheckBtn.tsx b/src/components/common/button/settingBtn/SettingCheckBtn.tsx index 49b3c3d5..95f198f3 100644 --- a/src/components/common/button/settingBtn/SettingCheckBtn.tsx +++ b/src/components/common/button/settingBtn/SettingCheckBtn.tsx @@ -17,9 +17,10 @@ interface SettingCheckBtnProps { onClick?: () => void; isHover: boolean; isPressed: boolean; + isActive: boolean; } -function SettingCheckBtn({ size, type, onClick, isHover, isPressed }: SettingCheckBtnProps) { +function SettingCheckBtn({ size, type, onClick, isHover, isPressed, isActive }: SettingCheckBtnProps) { const IconComponent = settingIconMap[type]; const isFill = type === 'progress'; @@ -29,7 +30,14 @@ function SettingCheckBtn({ size, type, onClick, isHover, isPressed }: SettingChe `; return ( - + ); diff --git a/src/components/common/button/settingBtn/settingBtnStyle.ts b/src/components/common/button/settingBtn/settingBtnStyle.ts index 66b3da89..23770c76 100644 --- a/src/components/common/button/settingBtn/settingBtnStyle.ts +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -31,7 +31,13 @@ export const bigIcon = css` height: 2.2rem; `; -export const SettingLayout = styled.button<{ size: string; isFill: boolean; isHover: boolean; isPressed: boolean }>` +export const SettingLayout = styled.button<{ + size: string; + isFill: boolean; + isHover: boolean; + isPressed: boolean; + isActive: boolean; +}>` ${({ size }) => (size === 'small' ? smallSize : bigSize)}; ${SettingCss} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; @@ -44,8 +50,8 @@ export const SettingLayout = styled.button<{ size: string; isFill: boolean; isHo } `} - ${({ isPressed, theme, isFill }) => - isPressed && + ${({ isActive, theme, isFill }) => + isActive && ` &:active { background-color: ${theme.palette.Primary}; @@ -55,4 +61,15 @@ export const SettingLayout = styled.button<{ size: string; isFill: boolean; isHo } } `} + + ${({ isPressed, theme, isFill }) => + isPressed && + ` + + background-color: ${theme.palette.Primary}; + + path { + ${isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`} + } + `} `; diff --git a/src/components/common/button/statusBtn/StatusDoneBtn.tsx b/src/components/common/button/statusBtn/StatusDoneBtn.tsx index 1a9a149d..871d66bd 100644 --- a/src/components/common/button/statusBtn/StatusDoneBtn.tsx +++ b/src/components/common/button/statusBtn/StatusDoneBtn.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; -import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; import TextBtn from '@/components/common/button/textBtn/TextBtn'; function StatusDoneBtn() { @@ -15,7 +15,14 @@ function StatusDoneBtn() { return ( {!isPressed && } - + ); } diff --git a/src/components/common/button/statusBtn/StatusInProgressBtn.tsx b/src/components/common/button/statusBtn/StatusInProgressBtn.tsx index 51165e7c..9b80d376 100644 --- a/src/components/common/button/statusBtn/StatusInProgressBtn.tsx +++ b/src/components/common/button/statusBtn/StatusInProgressBtn.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import Check1Btn from '@/components/common/button/Check1Btn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; import TextBtn from '@/components/common/button/textBtn/TextBtn'; function StatusInProgressBtn() { @@ -14,7 +14,14 @@ function StatusInProgressBtn() { return ( {!isPressed && } - + ); } diff --git a/src/components/common/button/statusBtn/StatusStagingBtn.tsx b/src/components/common/button/statusBtn/StatusStagingBtn.tsx index 0dd74241..06cd08c7 100644 --- a/src/components/common/button/statusBtn/StatusStagingBtn.tsx +++ b/src/components/common/button/statusBtn/StatusStagingBtn.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import Check1Btn from '@/components/common/button/Check1Btn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; import SettingDeleteBtn from '@/components/common/button/settingBtn/SettingDeleteBtn'; function StatusStagingBtn() { @@ -22,7 +22,14 @@ function StatusStagingBtn() { )} {!isDeletePressed && ( - + )} ); diff --git a/src/components/common/button/statusBtn/StatusTodoBtn.tsx b/src/components/common/button/statusBtn/StatusTodoBtn.tsx index a55476ec..40196290 100644 --- a/src/components/common/button/statusBtn/StatusTodoBtn.tsx +++ b/src/components/common/button/statusBtn/StatusTodoBtn.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import Check1Btn from '@/components/common/button/Check1Btn'; import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; function StatusTodoBtn() { const [isSettingPressed, setIsSettingPressed] = useState(false); @@ -22,7 +22,14 @@ function StatusTodoBtn() { )} {!isSettingPressed && ( - + )} ); diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index d548de32..5a9c28fa 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -8,8 +8,8 @@ function ModalHeaderBtn({ type }: SizeType) { return ( - {type === 'long' && } - + {type === 'long' && } + ); } diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 29b4b6d0..05e2660c 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,4 +1,3 @@ -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'; @@ -25,7 +24,6 @@ function Setting() { - @@ -37,10 +35,8 @@ function Setting() { - - @@ -48,6 +44,10 @@ function Setting() { + + + + {/* */} ); From 5fb3de17af91de27b0f3ab8a4f5892dc6393ee02 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 04:51:28 +0900 Subject: [PATCH 08/13] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD?= 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/CancelWhiteBtn.tsx | 4 ++-- src/components/common/modal/ModalHeaderBtn.tsx | 2 +- src/pages/Setting.tsx | 2 -- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/assets/svg/SettingCheck1.svg b/src/assets/svg/SettingCheck1.svg index 46b00599..a25350ad 100644 --- a/src/assets/svg/SettingCheck1.svg +++ b/src/assets/svg/SettingCheck1.svg @@ -1,5 +1,3 @@ - - + + \ No newline at end of file diff --git a/src/components/common/button/CancelWhiteBtn.tsx b/src/components/common/button/CancelWhiteBtn.tsx index e6b0734d..9f888c5c 100644 --- a/src/components/common/button/CancelWhiteBtn.tsx +++ b/src/components/common/button/CancelWhiteBtn.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -function DeleteBtn() { +function CancelWhiteBtn() { return ( @@ -10,7 +10,7 @@ function DeleteBtn() { ); } -export default DeleteBtn; +export default CancelWhiteBtn; const DeleteBtnLayout = styled.button` display: flex; diff --git a/src/components/common/modal/ModalHeaderBtn.tsx b/src/components/common/modal/ModalHeaderBtn.tsx index 5a9c28fa..5b06d0c0 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -9,7 +9,7 @@ function ModalHeaderBtn({ type }: SizeType) { {type === 'long' && } - + ); } diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 05e2660c..09e96092 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -47,8 +47,6 @@ function Setting() { - - {/* */} ); } From 42be0217034d6cf9743a6bff9f65dcd8c70fb0c0 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 05:00:19 +0900 Subject: [PATCH 09/13] =?UTF-8?q?settingCheck4=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button/settingBtn/SettingCheck4Btn.tsx | 52 ------------------- .../common/button/statusBtn/StatusTodoBtn.tsx | 10 +++- 2 files changed, 8 insertions(+), 54 deletions(-) delete mode 100644 src/components/common/button/settingBtn/SettingCheck4Btn.tsx diff --git a/src/components/common/button/settingBtn/SettingCheck4Btn.tsx b/src/components/common/button/settingBtn/SettingCheck4Btn.tsx deleted file mode 100644 index 5655c470..00000000 --- a/src/components/common/button/settingBtn/SettingCheck4Btn.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; - -interface SettingCheck4Props { - isHover: boolean; - isPressed: boolean; - onClick?: () => void; -} - -function SettingCheck4({ isHover, isPressed, onClick }: SettingCheck4Props) { - return ( - - - - ); -} - -export default SettingCheck4; - -const SettingCheck4Css = css` - display: flex; - align-items: center; - justify-content: center; - width: 2.4rem; - height: 2.4rem; - - border-radius: 8px; -`; - -const SettingCheck4Layout = styled.button<{ isHover: boolean; isPressed: boolean }>` - ${SettingCheck4Css} - background-color: ${({ theme, isPressed }) => (isPressed ? theme.palette.Primary : theme.palette.Blue.Blue1)}; - - path { - fill: ${({ theme, isPressed }) => (isPressed ? theme.palette.Grey.White : theme.palette.Primary)}; - } - - ${({ isHover, theme }) => - isHover && - css` - &:hover { - background-color: ${theme.palette.Blue.Blue3}; - } - `} -`; - -const StyledSettingCheck4Icon = styled(Icons.SettingIcons.SettingCheck4)` - width: 1.53rem; - height: 1.53rem; -`; diff --git a/src/components/common/button/statusBtn/StatusTodoBtn.tsx b/src/components/common/button/statusBtn/StatusTodoBtn.tsx index 40196290..8218963b 100644 --- a/src/components/common/button/statusBtn/StatusTodoBtn.tsx +++ b/src/components/common/button/statusBtn/StatusTodoBtn.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; function StatusTodoBtn() { @@ -19,7 +18,14 @@ function StatusTodoBtn() { return ( {!isCheckingPressed && ( - + )} {!isSettingPressed && ( Date: Wed, 10 Jul 2024 05:17:01 +0900 Subject: [PATCH 10/13] =?UTF-8?q?style:=20emotion=20=EC=9D=B4=EB=A6=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/settingBtn/SettingCheckBtn.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/button/settingBtn/SettingCheckBtn.tsx b/src/components/common/button/settingBtn/SettingCheckBtn.tsx index 95f198f3..00e06bdb 100644 --- a/src/components/common/button/settingBtn/SettingCheckBtn.tsx +++ b/src/components/common/button/settingBtn/SettingCheckBtn.tsx @@ -25,7 +25,7 @@ function SettingCheckBtn({ size, type, onClick, isHover, isPressed, isActive }: const isFill = type === 'progress'; - const StyledSettingCheck2Icon = styled(IconComponent)<{ size: string }>` + const StyledSettingCheckIcon = styled(IconComponent)<{ size: string }>` ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; `; @@ -38,7 +38,7 @@ function SettingCheckBtn({ size, type, onClick, isHover, isPressed, isActive }: isPressed={isPressed} isActive={isActive} > - + ); } From 410c275213b148e4d78a902059cc3aa3df1c5a63 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 18:07:51 +0900 Subject: [PATCH 11/13] =?UTF-8?q?fix:=20SettingLayout=20=EC=97=90=20css?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button/settingBtn/settingBtnStyle.ts | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/components/common/button/settingBtn/settingBtnStyle.ts b/src/components/common/button/settingBtn/settingBtnStyle.ts index 23770c76..8bc34b96 100644 --- a/src/components/common/button/settingBtn/settingBtnStyle.ts +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -44,32 +44,31 @@ export const SettingLayout = styled.button<{ ${({ isHover, theme }) => isHover && - ` - &:hover { - background-color: ${theme.palette.Blue.Blue3}; - } - `} + css` + &:hover { + background-color: ${theme.palette.Blue.Blue3}; + } + `} ${({ isActive, theme, isFill }) => isActive && - ` - &:active { - background-color: ${theme.palette.Primary}; + css` + &:active { + background-color: ${theme.palette.Primary}; - path { - ${isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`} + path { + ${isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`} + } } - } - `} + `} ${({ isPressed, theme, isFill }) => isPressed && - ` - - background-color: ${theme.palette.Primary}; + css` + background-color: ${theme.palette.Primary}; path { ${isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`} } - `} + `} `; From e4e254b2c3cefe4667a2a800ee56432260528c45 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 19:34:26 +0900 Subject: [PATCH 12/13] =?UTF-8?q?delete:=20settingX=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B3=A0=20settingCheckBtn?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=ED=86=B5=ED=95=A9:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SettingPage/AccountArea.tsx | 4 ++-- src/components/calendarPage/CategoryBox.tsx | 26 +++++++++++++++++++++ src/pages/Setting.tsx | 12 ++++------ 3 files changed, 33 insertions(+), 9 deletions(-) create mode 100644 src/components/calendarPage/CategoryBox.tsx diff --git a/src/components/SettingPage/AccountArea.tsx b/src/components/SettingPage/AccountArea.tsx index eefb33d7..78e4c86c 100644 --- a/src/components/SettingPage/AccountArea.tsx +++ b/src/components/SettingPage/AccountArea.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import google_calendar from '@/assets/images/google_calendar.png'; import Icons from '@/assets/svg/index'; -import SettingXBtn from '@/components/common/button/settingBtn/SettingXBtn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; import USERS from '@/constants/users'; function AccountArea() { @@ -19,7 +19,7 @@ function AccountArea() { {USERS.data.email} - + diff --git a/src/components/calendarPage/CategoryBox.tsx b/src/components/calendarPage/CategoryBox.tsx new file mode 100644 index 00000000..6762319c --- /dev/null +++ b/src/components/calendarPage/CategoryBox.tsx @@ -0,0 +1,26 @@ +import styled from '@emotion/styled'; + +function CategoryBox() { + return ( + + 카테고리 + + ); +} + +const CategoryBoxLayout = styled.div` + width: 31.7rem; + height: 49rem; + + border: 1px solid #e4e4e4; + border-radius: 12px; +`; + +const TitleSection = styled.section` + width: 100%; + height: 6.6rem; + padding: 2rem 0.8rem 1.8rem 2.8rem; + + ${({ theme }) => theme.fontTheme.HEADLINE_02} +`; +export default CategoryBox; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 4f3d3b68..2ce32ab0 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,3 +1,4 @@ +import styled from '@emotion/styled'; import DeleteBtn from '@/components/common/button/DeleteBtn'; import DeleteCancelBtn from '@/components/common/button/DeleteCancelBtn'; @@ -5,7 +6,7 @@ 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/settingBtn/SettingCheckBtn'; +import SettingCheck from '@/components/common/button/settingBtn/SettingCheckBtn'; import SettingDeleteBtn from '@/components/common/button/settingBtn/SettingDeleteBtn'; import SortBtn from '@/components/common/button/SortBtn'; import StatusDoneBtn from '@/components/common/button/statusBtn/StatusDoneBtn'; @@ -16,10 +17,6 @@ import TextBtn from '@/components/common/button/textBtn/TextBtn'; import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; import Modal from '@/components/common/modal/Modal'; - -import styled from '@emotion/styled'; - - import NavBar from '@/components/common/NavBar'; import AccountArea from '@/components/SettingPage/AccountArea'; import LogOutBtn from '@/components/SettingPage/LogOutBtn'; @@ -53,8 +50,9 @@ function Setting() { - - + + + From 6b995bcd166519e07a2fd040ce729466fa38ef15 Mon Sep 17 00:00:00 2001 From: moonseonghui Date: Wed, 10 Jul 2024 19:36:24 +0900 Subject: [PATCH 13/13] =?UTF-8?q?fix:=20xBtn=20=EC=9D=B4=EB=A6=84=20close?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SettingPage/AccountArea.tsx | 2 +- src/components/common/button/settingBtn/SettingCheckBtn.tsx | 4 ++-- src/pages/Setting.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SettingPage/AccountArea.tsx b/src/components/SettingPage/AccountArea.tsx index 78e4c86c..a777a82e 100644 --- a/src/components/SettingPage/AccountArea.tsx +++ b/src/components/SettingPage/AccountArea.tsx @@ -19,7 +19,7 @@ function AccountArea() { {USERS.data.email} - + diff --git a/src/components/common/button/settingBtn/SettingCheckBtn.tsx b/src/components/common/button/settingBtn/SettingCheckBtn.tsx index 00e06bdb..a6975e7c 100644 --- a/src/components/common/button/settingBtn/SettingCheckBtn.tsx +++ b/src/components/common/button/settingBtn/SettingCheckBtn.tsx @@ -9,11 +9,11 @@ const settingIconMap: Record>> check: Icons.SettingIcons.SettingCheck2, done: Icons.SettingIcons.SettingCheck3, progress: Icons.SettingIcons.SettingCheck4, - xBtn: Icons.SettingX, + close: Icons.SettingX, }; interface SettingCheckBtnProps { size: 'small' | 'big'; - type: 'complete' | 'check' | 'done' | 'progress' | 'xBtn'; + type: 'complete' | 'check' | 'done' | 'progress' | 'close'; onClick?: () => void; isHover: boolean; isPressed: boolean; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 2ce32ab0..42153496 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -52,7 +52,7 @@ function Setting() { - +