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/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/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/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/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/SettingCheck1.svg b/src/assets/svg/SettingCheck1.svg new file mode 100644 index 00000000..46b00599 --- /dev/null +++ b/src/assets/svg/SettingCheck1.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file 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/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/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 85e6a7e4..581b5c6e 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,12 +1,26 @@ 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 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'; +import TimelineDelete from '@/assets/svg/ic_delete.svg?react'; import Icn_clock from '@/assets/svg/icn_clock.svg?react'; 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 Icn_line from '@/assets/svg/line164.svg?react'; +import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; +import ProgressIcon from '@/assets/svg/ProgressIcon.svg?react'; +import Refresh from '@/assets/svg/refresh.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/SettingCheck1.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 IcnXCricle from '@/assets/svg/x-circle.svg?react'; const Icons = { @@ -22,6 +36,20 @@ const Icons = { Icn_nav_setting, Icn_nav_today, }, + Arrow_up, + Refresh, + SelectedBox, + UnselectedBox, + PlusArrow, + DeleteIcon, + SettingCheck1, + SettingCheck2, + SettingCheck3, + SettingX, + SettingProgress, + DoneIcon, + ProgressIcon, + TimelineDelete, }; export default Icons; diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg new file mode 100644 index 00000000..f82acf84 --- /dev/null +++ b/src/assets/svg/refresh.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/components/common/button/ArrangeBtn.tsx b/src/components/common/button/ArrangeBtn.tsx new file mode 100644 index 00000000..927fe83d --- /dev/null +++ b/src/components/common/button/ArrangeBtn.tsx @@ -0,0 +1,42 @@ +import styled from '@emotion/styled'; + +interface ArrangeBtnProps { + text: string; +} + +const ArrangeBtn = ({ text }: ArrangeBtnProps) => { + return {text}; +}; + +export default ArrangeBtn; + +const ArrangeBtnLayout = styled.button` + display: flex; + align-items: center; + width: 10.5rem; + 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 new file mode 100644 index 00000000..0506187b --- /dev/null +++ b/src/components/common/button/Check1Btn.tsx @@ -0,0 +1,71 @@ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; + +import Icons from '@/assets/svg/index'; + +interface Check1 { + type: 'setting' | 'done'; +} + +const Check1Btn = ({ type }: Check1) => { + return ( + <> + {type === 'setting' ? ( + + + + ) : ( + + + + )} + + ); +}; + +export default Check1Btn; + +const alignCenterStyle = css` + display: flex; + align-items: center; + justify-content: center; +`; +const SettingCheck1Layout = styled.button` + ${alignCenterStyle} + 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}; + + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } + } +`; + +const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)` + width: 1.3911rem; + height: 1.3911rem; +`; + +const DoneLayout = styled.button` + ${alignCenterStyle} + width: 3.2rem; + height: 3.2rem; + + 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/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx new file mode 100644 index 00000000..0b547eea --- /dev/null +++ b/src/components/common/button/DeleteBtn.tsx @@ -0,0 +1,33 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const DeleteBtn = () => { + return ( + + + + ); +}; + +export default DeleteBtn; + +const DeleteBtnLayout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + + background-color: ${({ theme }) => theme.palette.GREY_01}; + border-radius: 10px; + + &:active { + background-color: ${({ theme }) => theme.palette.GREY_03}; + } +`; + +const StlyedDeleteIcon = styled(Icons.DeleteIcon)` + width: 1.8rem; + height: 1.8rem; +`; diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx new file mode 100644 index 00000000..fb11083d --- /dev/null +++ b/src/components/common/button/DeleteCancelBtn.tsx @@ -0,0 +1,50 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +interface DeleteCancelBtnProps { + status: 'delete' | 'cancel'; +} + +const DeleteCancelBtn = ({ status }: DeleteCancelBtnProps) => { + 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} + 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 new file mode 100644 index 00000000..06181861 --- /dev/null +++ b/src/components/common/button/EnterBtn.tsx @@ -0,0 +1,57 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +interface EnterBtnProps { + isDisabled: boolean; +} + +const EnterBtn = ({ isDisabled }: EnterBtnProps) => { + return ( + + + + ); +}; + +export default EnterBtn; + +const EnterBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 2.2rem; + + border-radius: 8px; +`; + +const EnterBtnLayout = styled.button<{ isDisabled: boolean }>` + ${EnterBtnCss} + 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}; /* 수정 필요 */ + } + } + `} +`; + +const StyledIcon = styled(Icons.Arrow_up)` + width: 1.6rem; + height: 1.6rem; +`; diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx new file mode 100644 index 00000000..3ddf8ac7 --- /dev/null +++ b/src/components/common/button/OkayCancelBtn.tsx @@ -0,0 +1,39 @@ +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}; + box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); +`; + +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/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx new file mode 100644 index 00000000..b2c6193d --- /dev/null +++ b/src/components/common/button/ProgressBtn.tsx @@ -0,0 +1,66 @@ +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; + + 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}; /* 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } + } +`; + +const StyledSettingProgress = styled(Icons.SettingProgress)` + width: 1.4rem; +`; + +const DefaultProgressLayout = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + + 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 new file mode 100644 index 00000000..d3d4500b --- /dev/null +++ b/src/components/common/button/RefreshBtn.tsx @@ -0,0 +1,61 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +interface RefreshProps { + isDisabled: boolean; +} + +const RefreshBtn = ({ isDisabled }: RefreshProps) => { + 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<{ isDisabled: boolean }>` + ${RefreshBtnCss} + 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)` + width: 1.2rem; + height: 1.2rem; +`; + +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 new file mode 100644 index 00000000..ace7b266 --- /dev/null +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -0,0 +1,45 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const SettingCheck2 = () => { + 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} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } + } +`; + +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 new file mode 100644 index 00000000..ce58345d --- /dev/null +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -0,0 +1,45 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const SettingCheck3 = () => { + 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} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } + } +`; + +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 new file mode 100644 index 00000000..48f86fe3 --- /dev/null +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -0,0 +1,42 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const SettingDeleteBtn = () => { + 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} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + 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 new file mode 100644 index 00000000..3928a1d2 --- /dev/null +++ b/src/components/common/button/SettingXBtn.tsx @@ -0,0 +1,45 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const SettingXBtn = () => { + 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} + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + + &:hover { + background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } + } +`; + +const StyledSettingX = styled(Icons.SettingX)` + width: 1.391rem; + height: 1.391rem; +`; diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx new file mode 100644 index 00000000..503c1b97 --- /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: 0.4rem; + align-items: center; + justify-content: center; + width: 7.3rem; + height: 2.4rem; + padding: 0.4rem; + + 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 new file mode 100644 index 00000000..ff250500 --- /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: 0.4rem; + align-items: center; + justify-content: center; + width: 7.3rem; + height: 2.4rem; + padding: 0.4rem; + + 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 new file mode 100644 index 00000000..674d31b2 --- /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: 0.4rem; + align-items: center; + justify-content: center; + width: 5.2rem; + height: 2.4rem; + padding: 0.4rem; + + 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 new file mode 100644 index 00000000..bb0634fd --- /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: 0.4rem; + align-items: center; + justify-content: center; + width: 5.2rem; + height: 2.4rem; + padding: 0.4rem; + + border: 1px solid var(${({ theme }) => theme.palette.WITHE}); + border-radius: 10px; +`; diff --git a/src/components/common/button/TextBtn.tsx b/src/components/common/button/TextBtn.tsx new file mode 100644 index 00000000..1b392bb2 --- /dev/null +++ b/src/components/common/button/TextBtn.tsx @@ -0,0 +1,150 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +interface TextBtnProps { + text: string; + size: 'small' | 'medium'; + color: 'blue' | 'white' | 'black'; + isLight: boolean; +} + +const TextBtn = ({ size, text, color, isLight }: TextBtnProps) => { + return ( + <> + {size === 'small' ? ( + + {text} + + ) : ( + + {text} + + )} + + ); +}; + +export default TextBtn; + +const textButtonCss = css` + display: flex; + align-items: center; + justify-content: center; + + border-radius: 8px; +`; + +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}; /* 폰트 수정 필요 */ + ${({ 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}; + `} +`; + +const BigButton = styled.button<{ color: string; isLight: boolean }>` + width: 6rem; + height: 3.2rem; + padding: 0.7rem 1.6rem; + + ${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/components/common/button/TimelineDeleteBtn.tsx b/src/components/common/button/TimelineDeleteBtn.tsx new file mode 100644 index 00000000..b7f09622 --- /dev/null +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -0,0 +1,30 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const TimelineDeleteBtn = () => { + return ( + + + + ); +}; + +export default TimelineDeleteBtn; + +const TimelineDeleteBtnLayout = styled.button` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 1.6rem; + height: 1.6rem; + + background: ${({ theme }) => theme.palette.SECONDARY}; + border-radius: 50%; +`; + +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 new file mode 100644 index 00000000..54ba6a84 --- /dev/null +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -0,0 +1,61 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +const TodayPlusBtn = () => { + return ( + + + 오늘로 추가 + + ); +}; + +export default TodayPlusBtn; + +const TodayPlusBtnCss = css` + display: flex; + gap: 0.6rem; + align-items: center; + justify-content: center; + width: 8.9rem; + height: 2.4rem; + + border-radius: 8px; +`; + +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}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */ + path { + stroke: ${({ theme }) => theme.palette.WITHE}; + } + } +`; + +const Text = styled.p` + color: ${({ theme }) => theme.palette.PRIMARY}; /* 폰트 수정 필요 & 아이콘 색상 변경 필요 */ + text-align: center; + + ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */ + + &:active { + 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 00d2f6c6..cde13871 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,9 +1,45 @@ -import NavBar from '@/components/common/NavBar'; +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'; +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'; +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'; 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;