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/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/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/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/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 1e4da705..e90f5869 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'; @@ -69,6 +70,7 @@ const Icons = { DoneIcon, ProgressIcon, TimelineDelete, + ClockCheck, plus_circle, }; diff --git a/src/components/SettingPage/AccountArea.tsx b/src/components/SettingPage/AccountArea.tsx index eefb33d7..a777a82e 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/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/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx deleted file mode 100644 index c63aec06..00000000 --- a/src/components/common/button/Check1Btn.tsx +++ /dev/null @@ -1,73 +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; -`; 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/settingBtn/SettingCheck2Btn.tsx b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx deleted file mode 100644 index fa0d7deb..00000000 --- a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; -import { SettingLayout } from '@/components/common/button/settingBtn/settingBtnStyle'; - -function SettingCheck2() { - return ( - - - - ); -} - -export default SettingCheck2; - -const StyledSettingCheck2Icon = styled(Icons.SettingIcons.SettingCheck2)` - width: 1.6rem; - height: 1.6rem; -`; diff --git a/src/components/common/button/settingBtn/SettingCheck3Btn.tsx b/src/components/common/button/settingBtn/SettingCheck3Btn.tsx deleted file mode 100644 index ba7286a2..00000000 --- a/src/components/common/button/settingBtn/SettingCheck3Btn.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; -import { SettingLayout } from '@/components/common/button/settingBtn/settingBtnStyle'; - -function SettingCheck3() { - return ( - - - - ); -} - -export default SettingCheck3; - -const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)` - width: 1.6rem; - height: 1.6rem; -`; 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/settingBtn/SettingCheckBtn.tsx b/src/components/common/button/settingBtn/SettingCheckBtn.tsx new file mode 100644 index 00000000..a6975e7c --- /dev/null +++ b/src/components/common/button/settingBtn/SettingCheckBtn.tsx @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; +import { FunctionComponent, SVGProps } from 'react'; + +import Icons from '@/assets/svg/index'; +import { SettingLayout, smallIcon, bigIcon } from '@/components/common/button/settingBtn/settingBtnStyle'; + +const settingIconMap: Record>> = { + complete: Icons.SettingIcons.SettingCheck1, + check: Icons.SettingIcons.SettingCheck2, + done: Icons.SettingIcons.SettingCheck3, + progress: Icons.SettingIcons.SettingCheck4, + close: Icons.SettingX, +}; +interface SettingCheckBtnProps { + size: 'small' | 'big'; + type: 'complete' | 'check' | 'done' | 'progress' | 'close'; + onClick?: () => void; + isHover: boolean; + isPressed: boolean; + isActive: boolean; +} + +function SettingCheckBtn({ size, type, onClick, isHover, isPressed, isActive }: SettingCheckBtnProps) { + const IconComponent = settingIconMap[type]; + + const isFill = type === 'progress'; + + const StyledSettingCheckIcon = styled(IconComponent)<{ size: string }>` + ${({ size }) => (size === 'small' ? smallIcon : bigIcon)}; + `; + + return ( + + + + ); +} + +export default SettingCheckBtn; diff --git a/src/components/common/button/settingBtn/SettingXBtn.tsx b/src/components/common/button/settingBtn/SettingXBtn.tsx deleted file mode 100644 index d9f9ebc5..00000000 --- a/src/components/common/button/settingBtn/SettingXBtn.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; -import { SettingLayout } from '@/components/common/button/settingBtn/settingBtnStyle'; - -function SettingXBtn() { - return ( - - - - ); -} - -export default SettingXBtn; - -const StyledSettingX = styled(Icons.SettingX)` - width: 1.6rem; - height: 1.6rem; -`; diff --git a/src/components/common/button/settingBtn/settingBtnStyle.ts b/src/components/common/button/settingBtn/settingBtnStyle.ts index 85db0544..8bc34b96 100644 --- a/src/components/common/button/settingBtn/settingBtnStyle.ts +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -5,25 +5,70 @@ 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; + isFill: boolean; + isHover: boolean; + isPressed: boolean; + isActive: 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 && + css` + &:hover { + background-color: ${theme.palette.Blue.Blue3}; + } + `} + + ${({ isActive, theme, isFill }) => + isActive && + css` + &:active { + background-color: ${theme.palette.Primary}; - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; + path { + ${isFill ? `fill: ${theme.palette.Grey.White};` : `stroke: ${theme.palette.Grey.White};`} + } + } + `} + + ${({ isPressed, theme, isFill }) => + isPressed && + css` + background-color: ${theme.palette.Primary}; - path { - stroke: ${({ theme }) => theme.palette.Grey.White}; - } - } + 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..8218963b 100644 --- a/src/components/common/button/statusBtn/StatusTodoBtn.tsx +++ b/src/components/common/button/statusBtn/StatusTodoBtn.tsx @@ -1,8 +1,7 @@ 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); @@ -19,10 +18,24 @@ function StatusTodoBtn() { return ( {!isCheckingPressed && ( - + )} {!isSettingPressed && ( - + )} ); 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/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..5b06d0c0 100644 --- a/src/components/common/modal/ModalHeaderBtn.tsx +++ b/src/components/common/modal/ModalHeaderBtn.tsx @@ -1,14 +1,15 @@ import styled from '@emotion/styled'; -import Icons from '@/assets/svg/index'; +import DeleteBtn from '@/components/common/button/DeleteBtn'; +import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckBtn'; import { SizeType } from '@/types/textInputType'; function ModalHeaderBtn({ type }: SizeType) { return ( - - {type === 'long' && } - + + {type === 'long' && } + ); } @@ -18,8 +19,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 05ee8a0c..42153496 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,5 +1,22 @@ import styled from '@emotion/styled'; +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 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'; +import StatusInProgressBtn from '@/components/common/button/statusBtn/StatusInProgressBtn'; +import StatusStagingBtn from '@/components/common/button/statusBtn/StatusStagingBtn'; +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'; import AccountArea from '@/components/SettingPage/AccountArea'; import LogOutBtn from '@/components/SettingPage/LogOutBtn'; @@ -9,6 +26,33 @@ function Setting() { return (
+ + + + + + + + + + + + + + + + + + + + + + + + + + +