From d37f8c6285e7133aa31334938512e3c418d6d105 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 14:03:42 +0900 Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=ED=8F=B4=EB=8D=94=EB=AA=85=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 --- package.json | 1 + src/assets/svg/SettingCheck1Icon.svg | 3 + .../common/button/CancelWhiteBtn.tsx | 34 ++++++++++ .../button/{ArrangeBtn.tsx => SortBtn.tsx} | 10 +-- src/pages/Setting.tsx | 4 +- yarn.lock | 67 +++++++++++++++++++ 6 files changed, 112 insertions(+), 7 deletions(-) create mode 100644 src/assets/svg/SettingCheck1Icon.svg create mode 100644 src/components/common/button/CancelWhiteBtn.tsx rename src/components/common/button/{ArrangeBtn.tsx => SortBtn.tsx} (74%) diff --git a/package.json b/package.json index 61c3cd24..48f5e2ae 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@emotion/styled": "^11.11.5", "@svgr/cli": "^8.1.0", "react": "^18.3.1", + "react-datepicker": "^7.2.0", "react-dom": "^18.3.1", "react-router-dom": "^6.24.1", "vite-plugin-svgr": "^4.2.0" diff --git a/src/assets/svg/SettingCheck1Icon.svg b/src/assets/svg/SettingCheck1Icon.svg new file mode 100644 index 00000000..f8f88dd5 --- /dev/null +++ b/src/assets/svg/SettingCheck1Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/common/button/CancelWhiteBtn.tsx b/src/components/common/button/CancelWhiteBtn.tsx new file mode 100644 index 00000000..bf77ec28 --- /dev/null +++ b/src/components/common/button/CancelWhiteBtn.tsx @@ -0,0 +1,34 @@ +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +type Props = {}; + +function DeleteBtn(props: Props) { + return ( + + + + ); +} + +export default DeleteBtn; + +const DeleteBtnCss = css` + display: flex; + align-items: center; + justify-content: center; + width: 3.2rem; + height: 3.2rem; + + border-radius: 10px; +`; + +const DeleteBtnLayout = styled.button` + ${DeleteBtnCss} +`; + +const StlyedDeleteIcon = styled(Icons.DeleteIcon)` + width: 1.8rem; + height: 1.8rem; +`; diff --git a/src/components/common/button/ArrangeBtn.tsx b/src/components/common/button/SortBtn.tsx similarity index 74% rename from src/components/common/button/ArrangeBtn.tsx rename to src/components/common/button/SortBtn.tsx index 1a61db98..4abbdc1e 100644 --- a/src/components/common/button/ArrangeBtn.tsx +++ b/src/components/common/button/SortBtn.tsx @@ -1,16 +1,16 @@ import styled from '@emotion/styled'; -interface ArrangeBtnProps { +interface SortBtnProps { text: string; } -function ArrangeBtn({ text }: ArrangeBtnProps) { - return {text}; +function SortBtn({ text }: SortBtnProps) { + return {text}; } -export default ArrangeBtn; +export default SortBtn; -const ArrangeBtnLayout = styled.button` +const SortBtnLayout = styled.button` display: flex; align-items: center; width: 10.5rem; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 49bdff7c..f2ac680c 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,4 +1,3 @@ -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'; @@ -10,6 +9,7 @@ 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 SortBtn from '@/components/common/button/SortBtn'; import StatusDoneBtn from '@/components/common/button/StatusDoneBtn'; import StatusInProgressBtn from '@/components/common/button/StatusInProgressBtn'; import StatusStagingBtn from '@/components/common/button/StatusStagingBtn'; @@ -21,7 +21,7 @@ import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; function Setting() { return (
- + diff --git a/yarn.lock b/yarn.lock index 4b192ea0..f6c221eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1479,6 +1479,42 @@ resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4" integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ== +"@floating-ui/core@^1.6.0": + version "1.6.4" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.4.tgz#0140cf5091c8dee602bff9da5ab330840ff91df6" + integrity sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA== + dependencies: + "@floating-ui/utils" "^0.2.4" + +"@floating-ui/dom@^1.0.0": + version "1.6.7" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.7.tgz#85d22f731fcc5b209db504478fb1df5116a83015" + integrity sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.4" + +"@floating-ui/react-dom@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0" + integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg== + dependencies: + "@floating-ui/dom" "^1.0.0" + +"@floating-ui/react@^0.26.2": + version "0.26.19" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.19.tgz#e3c713bec8a7264caa6f8195e0865f9210f483a1" + integrity sha512-Jk6zITdjjIvjO/VdQFvpRaD3qPwOHH6AoDHxjhpy+oK4KFgaSP871HYWUAPdnLmx1gQ+w/pB312co3tVml+BXA== + dependencies: + "@floating-ui/react-dom" "^2.1.1" + "@floating-ui/utils" "^0.2.4" + tabbable "^6.0.0" + +"@floating-ui/utils@^0.2.4": + version "0.2.4" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.4.tgz#1d459cee5031893a08a0e064c406ad2130cced7c" + integrity sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA== + "@humanwhocodes/config-array@^0.11.14": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -3712,6 +3748,11 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== +clsx@^2.1.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -3988,6 +4029,11 @@ data-view-byte-offset@^1.0.0: es-errors "^1.3.0" is-data-view "^1.0.1" +date-fns@^3.3.1: + version "3.6.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf" + integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww== + debug@2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -6997,6 +7043,17 @@ react-confetti@^6.1.0: dependencies: tween-functions "^1.2.0" +react-datepicker@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-7.2.0.tgz#2d430caebb5c8b0fb988286d004aa2676ace665f" + integrity sha512-Hhs1Fk6/ZqpGGg9QX/JjzvgEJoSFKYCAvRVdBbjxvOjflsXutFprAl/E0ZOm1J+/b/jQqU03WMTTNLcw5nXcuw== + dependencies: + "@floating-ui/react" "^0.26.2" + clsx "^2.1.0" + date-fns "^3.3.1" + prop-types "^15.7.2" + react-onclickoutside "^6.13.0" + react-docgen-typescript@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c" @@ -7055,6 +7112,11 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-onclickoutside@^6.13.0: + version "6.13.1" + resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz#1f5e0241c08784b6e65745d91aca0d700c548a89" + integrity sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w== + react-refresh@^0.14.2: version "0.14.2" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9" @@ -7907,6 +7969,11 @@ synckit@^0.8.6: "@pkgr/core" "^0.1.0" tslib "^2.6.2" +tabbable@^6.0.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + table@^6.8.2: version "6.8.2" resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58" From b9069722fa7f7529916881d52b372123a23429e3 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 17:45:37 +0900 Subject: [PATCH 02/16] =?UTF-8?q?fix:=20=ED=99=9C=EC=84=B1=ED=99=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/button/CancelWhiteBtn.tsx | 5 +- src/components/common/button/Check1Btn.tsx | 10 +- src/components/common/button/DeleteBtn.tsx | 4 +- .../common/button/DeleteCancelBtn.tsx | 6 +- src/components/common/button/EnterBtn.tsx | 4 +- .../common/button/OkayCancelBtn.tsx | 6 +- src/components/common/button/ProgressBtn.tsx | 8 +- src/components/common/button/RefreshBtn.tsx | 4 +- .../common/button/SettingCheck2Btn.tsx | 4 +- .../common/button/SettingCheck3Btn.tsx | 6 +- .../common/button/SettingDeleteBtn.tsx | 4 +- src/components/common/button/SettingXBtn.tsx | 4 +- .../common/button/StatusDoneBtn.tsx | 8 +- .../common/button/StatusInProgressBtn.tsx | 8 +- .../common/button/StatusStagingBtn.tsx | 4 +- .../common/button/StatusTodoBtn.tsx | 4 +- src/components/common/button/TextBtn.tsx | 150 ------------------ .../common/button/TimelineDeleteBtn.tsx | 4 +- src/components/common/button/TodayPlusBtn.tsx | 4 +- .../common/button/textBtn/TextBtn.tsx | 44 +++++ .../common/button/textBtn/textBtnStyle.ts | 28 ++++ src/pages/Setting.tsx | 7 +- src/styles/theme.ts | 58 +++++++ src/types/textBtnType.ts | 7 + 24 files changed, 190 insertions(+), 201 deletions(-) delete mode 100644 src/components/common/button/TextBtn.tsx create mode 100644 src/components/common/button/textBtn/TextBtn.tsx create mode 100644 src/components/common/button/textBtn/textBtnStyle.ts create mode 100644 src/types/textBtnType.ts diff --git a/src/components/common/button/CancelWhiteBtn.tsx b/src/components/common/button/CancelWhiteBtn.tsx index bf77ec28..95b5b64c 100644 --- a/src/components/common/button/CancelWhiteBtn.tsx +++ b/src/components/common/button/CancelWhiteBtn.tsx @@ -1,10 +1,9 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -type Props = {}; - -function DeleteBtn(props: Props) { +function DeleteBtn() { return ( diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index 0506187b..c5aae039 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -1,5 +1,5 @@ -import styled from '@emotion/styled'; import { css } from '@emotion/react'; +import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; @@ -7,9 +7,9 @@ interface Check1 { type: 'setting' | 'done'; } -const Check1Btn = ({ type }: Check1) => { +function Check1Btn({ type }: Check1) { return ( - <> +
{type === 'setting' ? ( @@ -19,9 +19,9 @@ const Check1Btn = ({ type }: Check1) => { )} - +
); -}; +} export default Check1Btn; diff --git a/src/components/common/button/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx index 0b547eea..53d3068a 100644 --- a/src/components/common/button/DeleteBtn.tsx +++ b/src/components/common/button/DeleteBtn.tsx @@ -2,13 +2,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const DeleteBtn = () => { +function DeleteBtn() { return ( ); -}; +} export default DeleteBtn; diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx index fb11083d..553c54f2 100644 --- a/src/components/common/button/DeleteCancelBtn.tsx +++ b/src/components/common/button/DeleteCancelBtn.tsx @@ -5,9 +5,9 @@ interface DeleteCancelBtnProps { status: 'delete' | 'cancel'; } -const DeleteCancelBtn = ({ status }: DeleteCancelBtnProps) => { - return <>{status === 'delete' ? 삭제 : 취소}; -}; +function DeleteCancelBtn({ status }: DeleteCancelBtnProps) { + return
{status === 'delete' ? 삭제 : 취소}
; +} export default DeleteCancelBtn; diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index 06181861..2d95a7d6 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -7,13 +7,13 @@ interface EnterBtnProps { isDisabled: boolean; } -const EnterBtn = ({ isDisabled }: EnterBtnProps) => { +function EnterBtn({ isDisabled }: EnterBtnProps) { return ( ); -}; +} export default EnterBtn; diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx index 3ddf8ac7..1a3ec74c 100644 --- a/src/components/common/button/OkayCancelBtn.tsx +++ b/src/components/common/button/OkayCancelBtn.tsx @@ -5,9 +5,9 @@ interface OkayCancelBtnProps { type: 'okay' | 'cancel'; } -const OkayCancelBtn = ({ type }: OkayCancelBtnProps) => { - return <>{type === 'okay' ? 확인 : 취소}; -}; +function OkayCancelBtn({ type }: OkayCancelBtnProps) { + return
{type === 'okay' ? 확인 : 취소}
; +} export default OkayCancelBtn; diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx index b2c6193d..f5ac5d62 100644 --- a/src/components/common/button/ProgressBtn.tsx +++ b/src/components/common/button/ProgressBtn.tsx @@ -6,9 +6,9 @@ interface Progress { type: 'setting' | 'defaultProgress'; } -const ProgressBtn = ({ type }: Progress) => { +function ProgressBtn({ type }: Progress) { return ( - <> +
{type === 'setting' ? ( @@ -18,9 +18,9 @@ const ProgressBtn = ({ type }: Progress) => { )} - +
); -}; +} export default ProgressBtn; diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index d3d4500b..6d110f8a 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -7,14 +7,14 @@ interface RefreshProps { isDisabled: boolean; } -const RefreshBtn = ({ isDisabled }: RefreshProps) => { +function RefreshBtn({ isDisabled }: RefreshProps) { return ( 동기화 ); -}; +} export default RefreshBtn; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index ace7b266..2fee1e8a 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const SettingCheck2 = () => { +function SettingCheck2() { return ( ); -}; +} export default SettingCheck2; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index ce58345d..7bad8a7c 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const SettingCheck3 = () => { +function SettingCheck3() { return ( - {/*아이콘 크기 조정 필요*/} + {/* 아이콘 크기 조정 필요 */} ); -}; +} export default SettingCheck3; diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx index 48f86fe3..2abbb8fc 100644 --- a/src/components/common/button/SettingDeleteBtn.tsx +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const SettingDeleteBtn = () => { +function SettingDeleteBtn() { return ( ); -}; +} export default SettingDeleteBtn; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index 3928a1d2..ead4e37b 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const SettingXBtn = () => { +function SettingXBtn() { return ( ); -}; +} export default SettingXBtn; diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx index 503c1b97..2558c0f1 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -1,16 +1,16 @@ import styled from '@emotion/styled'; import ProgressBtn from '@/components/common/button/ProgressBtn'; -import TextBtn from '@/components/common/button/TextBtn'; +import TextBtn from '@/components/common/button/textBtn/TextBtn'; -const StatusDoneBtn = () => { +function StatusDoneBtn() { return ( - + ); -}; +} export default StatusDoneBtn; diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx index ff250500..a549c59e 100644 --- a/src/components/common/button/StatusInProgressBtn.tsx +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -1,16 +1,16 @@ import styled from '@emotion/styled'; import Check1Btn from '@/components/common/button/Check1Btn'; -import TextBtn from '@/components/common/button/TextBtn'; +import TextBtn from '@/components/common/button/textBtn/TextBtn'; -const StatusInProgressBtn = () => { +function StatusInProgressBtn() { return ( - + ); -}; +} export default StatusInProgressBtn; diff --git a/src/components/common/button/StatusStagingBtn.tsx b/src/components/common/button/StatusStagingBtn.tsx index 674d31b2..72cb7a81 100644 --- a/src/components/common/button/StatusStagingBtn.tsx +++ b/src/components/common/button/StatusStagingBtn.tsx @@ -3,14 +3,14 @@ import styled from '@emotion/styled'; import Check1Btn from '@/components/common/button/Check1Btn'; import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; -const StatusStagingBtn = () => { +function StatusStagingBtn() { return ( ); -}; +} export default StatusStagingBtn; diff --git a/src/components/common/button/StatusTodoBtn.tsx b/src/components/common/button/StatusTodoBtn.tsx index bb0634fd..95804a7a 100644 --- a/src/components/common/button/StatusTodoBtn.tsx +++ b/src/components/common/button/StatusTodoBtn.tsx @@ -3,14 +3,14 @@ import styled from '@emotion/styled'; import Check1Btn from '@/components/common/button/Check1Btn'; import ProgressBtn from '@/components/common/button/ProgressBtn'; -const StatusTodoBtn = () => { +function StatusTodoBtn() { return ( ); -}; +} export default StatusTodoBtn; diff --git a/src/components/common/button/TextBtn.tsx b/src/components/common/button/TextBtn.tsx deleted file mode 100644 index 1b392bb2..00000000 --- a/src/components/common/button/TextBtn.tsx +++ /dev/null @@ -1,150 +0,0 @@ -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 index b7f09622..33582c2b 100644 --- a/src/components/common/button/TimelineDeleteBtn.tsx +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -2,13 +2,13 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const TimelineDeleteBtn = () => { +function TimelineDeleteBtn() { return ( ); -}; +} export default TimelineDeleteBtn; diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index 54ba6a84..4e951de8 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -3,14 +3,14 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -const TodayPlusBtn = () => { +function TodayPlusBtn() { return ( 오늘로 추가 ); -}; +} export default TodayPlusBtn; diff --git a/src/components/common/button/textBtn/TextBtn.tsx b/src/components/common/button/textBtn/TextBtn.tsx new file mode 100644 index 00000000..a5667ab1 --- /dev/null +++ b/src/components/common/button/textBtn/TextBtn.tsx @@ -0,0 +1,44 @@ +/* eslint-disable @typescript-eslint/no-shadow */ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { smallSize, bigSize } from './textBtnStyle'; + +import { TextBtnType } from '@/types/textBtnType'; + +function TextBtn({ size, text, color, mode, isAction }: TextBtnType) { + const StyledTextBtn = styled.div<{ + size: string; + color: 'BLUE' | 'WHITE' | 'BLACK'; + mode: string; + isAction: boolean; + }>` + ${({ size }) => (size === 'small' ? smallSize : bigSize)}; + color: ${({ theme }) => theme.textButton[color][mode].TEXT}; + + background-color: ${({ theme }) => theme.textButton[color][mode].BG}; + + ${({ isAction, theme, color }) => + isAction && + css` + &:hover { + color: ${theme.textButton[color].HOVER.TEXT}; + + background-color: ${theme.textButton[color].HOVER.BG}; + } + + &:active { + color: ${theme.textButton[color].PRESSED.TEXT}; + + background-color: ${theme.textButton[color].PRESSED.BG}; + } + `} + `; + return ( + + {text} + + ); +} + +export default TextBtn; diff --git a/src/components/common/button/textBtn/textBtnStyle.ts b/src/components/common/button/textBtn/textBtnStyle.ts new file mode 100644 index 00000000..0b169cef --- /dev/null +++ b/src/components/common/button/textBtn/textBtnStyle.ts @@ -0,0 +1,28 @@ +import { css } from '@emotion/react'; + +import { theme } from '@/styles/theme'; + +const textButtonCss = css` + display: flex; + align-items: center; + justify-content: center; + + border-radius: 8px; +`; + +export const smallSize = css` + width: 4.5rem; + height: 2.6rem; + + ${textButtonCss} + ${theme.fontTheme.CAPTION_01} +`; + +export const bigSize = css` + width: 6rem; + height: 3.2rem; + + ${textButtonCss} + ${theme.fontTheme.BODY_02} + box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%); +`; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index f2ac680c..15baea0a 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -14,13 +14,17 @@ 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 TextBtn from '@/components/common/button/textBtn/TextBtn'; import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; +import NavBar from '@/components/common/NavBar'; function Setting() { return (
+ + + @@ -37,7 +41,6 @@ function Setting() { -
diff --git a/src/styles/theme.ts b/src/styles/theme.ts index d15e07ba..68043fd5 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -2,7 +2,65 @@ import button from './buttonTheme'; import fontTheme from './fontTheme'; import palette from './palette'; +const textButton = { + BLUE: { + LIGHT: { + BG: '#C2D5FF', + TEXT: '#FFFFFF', + }, + DEFAULT: { + BG: '#3876F6', + TEXT: '#FFFFFF', + }, + HOVER: { + BG: '#245CCE', + TEXT: 'FFFFFF', + }, + PRESSED: { + BG: '#0D47A1', + TEXT: '#90B2FF', + }, + }, + WHITE: { + LIGHT: { + BG: '#E9E9EE', + TEXT: '#626273', + }, + DEFAULT: { + BG: '#FFFFFF', + TEXT: '#212121', + }, + HOVER: { + BG: '#E9E9EE', + TEXT: '#212121', + }, + PRESSED: { + BG: '#C6C6D0', + TEXT: '#212121', + }, + }, + BLACK: { + LIGHT: { + BG: '#626273', + TEXT: '#C6C6D0', + }, + DEFAULT: { + BG: '#212121', + TEXT: '#FFFFFF', + }, + HOVER: { + BG: '#464656', + TEXT: '#FFFFFF', + }, + PRESSED: { + BG: '#34343C', + TEXT: '#FFFFFF', + }, + }, +}; + export const theme = { + textButton, button, palette, fontTheme, diff --git a/src/types/textBtnType.ts b/src/types/textBtnType.ts new file mode 100644 index 00000000..59e81300 --- /dev/null +++ b/src/types/textBtnType.ts @@ -0,0 +1,7 @@ +export interface TextBtnType { + mode: 'LIGHT' | 'DEFAULT'; + color: 'BLUE' | 'WHITE' | 'BLACK'; + size: 'small' | 'big'; + text: string; + isAction: boolean; +} From 56668b6077cd00aed7c8f2d4d84bff5fba8aee97 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 18:10:17 +0900 Subject: [PATCH 03/16] =?UTF-8?q?fix:=20text=20button=20theme=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/textButtonTheme.ts | 60 +++++++++++++++++++++++++++++++++++ src/styles/theme.ts | 58 +-------------------------------- 2 files changed, 61 insertions(+), 57 deletions(-) create mode 100644 src/styles/textButtonTheme.ts diff --git a/src/styles/textButtonTheme.ts b/src/styles/textButtonTheme.ts new file mode 100644 index 00000000..88ba9960 --- /dev/null +++ b/src/styles/textButtonTheme.ts @@ -0,0 +1,60 @@ +import palette from './palette'; + +const textButton = { + BLUE: { + LIGHT: { + BG: palette.Blue.Blue3, + TEXT: palette.Grey.White, + }, + DEFAULT: { + BG: palette.Primary, + TEXT: palette.Grey.White, + }, + HOVER: { + BG: palette.Blue.Blue8, + TEXT: palette.Grey.White, + }, + PRESSED: { + BG: palette.Blue.Blue9, + TEXT: palette.Blue.Blue4, + }, + }, + WHITE: { + LIGHT: { + BG: palette.Grey.Grey3, + TEXT: palette.Grey.Grey6, + }, + DEFAULT: { + BG: palette.Grey.White, + TEXT: palette.Grey.Black, + }, + HOVER: { + BG: palette.Grey.Grey4, + TEXT: palette.Grey.Black, + }, + PRESSED: { + BG: palette.Grey.Grey3, + TEXT: palette.Grey.Black, + }, + }, + BLACK: { + LIGHT: { + BG: palette.Grey.Grey6, + TEXT: palette.Grey.Grey4, + }, + DEFAULT: { + BG: palette.Grey.Black, + TEXT: palette.Grey.White, + }, + HOVER: { + BG: palette.Grey.Grey7, + TEXT: palette.Grey.White, + }, + PRESSED: { + BG: palette.Grey.Grey8, + TEXT: palette.Grey.White, + }, + }, +}; + +export default textButton; diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 68043fd5..292b80af 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,63 +1,7 @@ import button from './buttonTheme'; import fontTheme from './fontTheme'; import palette from './palette'; - -const textButton = { - BLUE: { - LIGHT: { - BG: '#C2D5FF', - TEXT: '#FFFFFF', - }, - DEFAULT: { - BG: '#3876F6', - TEXT: '#FFFFFF', - }, - HOVER: { - BG: '#245CCE', - TEXT: 'FFFFFF', - }, - PRESSED: { - BG: '#0D47A1', - TEXT: '#90B2FF', - }, - }, - WHITE: { - LIGHT: { - BG: '#E9E9EE', - TEXT: '#626273', - }, - DEFAULT: { - BG: '#FFFFFF', - TEXT: '#212121', - }, - HOVER: { - BG: '#E9E9EE', - TEXT: '#212121', - }, - PRESSED: { - BG: '#C6C6D0', - TEXT: '#212121', - }, - }, - BLACK: { - LIGHT: { - BG: '#626273', - TEXT: '#C6C6D0', - }, - DEFAULT: { - BG: '#212121', - TEXT: '#FFFFFF', - }, - HOVER: { - BG: '#464656', - TEXT: '#FFFFFF', - }, - PRESSED: { - BG: '#34343C', - TEXT: '#FFFFFF', - }, - }, -}; +import textButton from './textButtonTheme'; export const theme = { textButton, From c75ccaee43a01070871c3d47475feb52509841d3 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 18:32:45 +0900 Subject: [PATCH 04/16] =?UTF-8?q?fix:=20theme=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Check1Btn.tsx | 10 ++--- src/components/common/button/DeleteBtn.tsx | 4 +- .../common/button/DeleteCancelBtn.tsx | 14 +++---- src/components/common/button/EnterBtn.tsx | 13 +++--- .../common/button/OkayCancelBtn.tsx | 9 ++-- src/components/common/button/ProgressBtn.tsx | 11 ++--- src/components/common/button/RefreshBtn.tsx | 12 +++--- .../common/button/SettingCheck2Btn.tsx | 9 ++-- .../common/button/SettingCheck3Btn.tsx | 9 ++-- .../common/button/SettingDeleteBtn.tsx | 6 +-- src/components/common/button/SettingXBtn.tsx | 9 ++-- .../common/button/StatusDoneBtn.tsx | 2 +- .../common/button/StatusInProgressBtn.tsx | 2 +- .../common/button/StatusStagingBtn.tsx | 2 +- .../common/button/StatusTodoBtn.tsx | 2 +- .../common/button/TimelineDeleteBtn.tsx | 2 +- src/components/common/button/TodayPlusBtn.tsx | 18 ++++---- src/pages/Setting.tsx | 42 +++++++++---------- 18 files changed, 89 insertions(+), 87 deletions(-) diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index c5aae039..f39868e4 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -35,18 +35,18 @@ const SettingCheck1Layout = styled.button` width: 2.4rem; height: 2.4rem; - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; border-radius: 8px; &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; + background-color: ${({ theme }) => theme.palette.Primary}; path { - stroke: ${({ theme }) => theme.palette.WITHE}; + stroke: ${({ theme }) => theme.palette.Grey.White}; } } `; @@ -61,7 +61,7 @@ const DoneLayout = styled.button` width: 3.2rem; height: 3.2rem; - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; border-radius: 10px; `; diff --git a/src/components/common/button/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx index 53d3068a..0e35e6a0 100644 --- a/src/components/common/button/DeleteBtn.tsx +++ b/src/components/common/button/DeleteBtn.tsx @@ -19,11 +19,11 @@ const DeleteBtnLayout = styled.button` width: 3.2rem; height: 3.2rem; - background-color: ${({ theme }) => theme.palette.GREY_01}; + background-color: ${({ theme }) => theme.palette.Grey.Grey1}; border-radius: 10px; &:active { - background-color: ${({ theme }) => theme.palette.GREY_03}; + background-color: ${({ theme }) => theme.palette.Grey.Grey3}; } `; diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx index 553c54f2..5ea2e827 100644 --- a/src/components/common/button/DeleteCancelBtn.tsx +++ b/src/components/common/button/DeleteCancelBtn.tsx @@ -25,26 +25,26 @@ const DeleteCancelBtnCss = css` const DeleteBtn = styled.button` ${DeleteCancelBtnCss} - color: ${({ theme }) => theme.palette.WITHE}; + color: ${({ theme }) => theme.palette.Grey.White}; - background-color: ${({ theme }) => theme.palette.SECONDARY}; + background-color: ${({ theme }) => theme.palette.Secondary}; ${({ theme }) => theme.fontTheme.BODY_02}; &:hover { - background-color: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Orange.Orange7}; } `; const CancelBtn = styled.button` ${DeleteCancelBtnCss} - color: ${({ theme }) => theme.palette.GREY_05}; + color: ${({ theme }) => theme.palette.Grey.Grey5}; - background-color: ${({ theme }) => theme.palette.WITHE}; + background-color: ${({ theme }) => theme.palette.Grey.White}; ${({ theme }) => theme.fontTheme.BODY_02}; &:hover { - color: ${({ theme }) => theme.palette.GREY_06}; + color: ${({ theme }) => theme.palette.Grey.Grey6}; - background-color: ${({ theme }) => theme.palette.GREY_03}; + background-color: ${({ theme }) => theme.palette.Grey.Grey3}; } `; diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx index 2d95a7d6..bc912bf4 100644 --- a/src/components/common/button/EnterBtn.tsx +++ b/src/components/common/button/EnterBtn.tsx @@ -29,23 +29,22 @@ const EnterBtnCss = css` const EnterBtnLayout = styled.button<{ isDisabled: boolean }>` ${EnterBtnCss} - color: ${({ theme }) => theme.palette.WITHE}; + color: ${({ theme }) => theme.palette.Grey.White}; - background-color: ${({ theme, isDisabled }) => - isDisabled ? theme.palette.BLUE_DISABLED : theme.palette.PRIMARY}; /* 색 수정 필요 */ + background-color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Blue.Blue3 : theme.palette.Primary)}; ${({ theme, isDisabled }) => !isDisabled && ` &:hover { - background-color: ${theme.palette.BLUE_PASSED}; /* 수정 필요 */ + background-color: ${theme.palette.Blue.Blue8}; path { - stroke: ${theme.palette.BLUE_DEFAULT}; /* 수정 필요 */ + stroke: ${theme.palette.Blue.Blue2}; } } &:active { - background-color: ${theme.palette.BLUE_DISABLED}; + background-color: ${theme.palette.Blue.Blue9}; path { - stroke: ${theme.palette.BLACK}; /* 수정 필요 */ + stroke: ${theme.palette.Blue.Blue4}; } } `} diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx index 1a3ec74c..854f9f30 100644 --- a/src/components/common/button/OkayCancelBtn.tsx +++ b/src/components/common/button/OkayCancelBtn.tsx @@ -23,17 +23,16 @@ const OkayCancelBtnCss = css` const OkayBtn = styled.button` ${OkayCancelBtnCss}; - color: ${({ theme }) => theme.palette.WITHE}; + color: ${({ theme }) => theme.palette.Grey.White}; - background-color: ${({ theme }) => theme.palette.BLACK}; + background-color: ${({ theme }) => theme.palette.Grey.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}; + color: ${({ theme }) => theme.palette.Grey.Grey5}; - background-color: ${({ theme }) => theme.palette.WITHE}; + background-color: ${({ theme }) => theme.palette.Grey.White}; ${({ theme }) => theme.fontTheme.BODY_02}; `; diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx index f5ac5d62..b174029d 100644 --- a/src/components/common/button/ProgressBtn.tsx +++ b/src/components/common/button/ProgressBtn.tsx @@ -31,17 +31,18 @@ const SettingProgressLayout = styled.button` width: 2.4rem; height: 2.4rem; - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; border-radius: 8px; &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Primary}; + path { - stroke: ${({ theme }) => theme.palette.WITHE}; + stroke: ${({ theme }) => theme.palette.Grey.White}; } } `; @@ -57,7 +58,7 @@ const DefaultProgressLayout = styled.button` width: 3.2rem; height: 3.2rem; - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; border-radius: 10px; `; diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx index 6d110f8a..592bf12d 100644 --- a/src/components/common/button/RefreshBtn.tsx +++ b/src/components/common/button/RefreshBtn.tsx @@ -31,19 +31,18 @@ const RefreshBtnCss = css` const RefreshBtnLayout = styled.button<{ isDisabled: boolean }>` ${RefreshBtnCss} - color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.GREY_05 : theme.palette.WITHE)}; + color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Grey.Grey5 : theme.palette.Grey.White)}; - background-color: ${({ theme, isDisabled }) => - isDisabled ? theme.palette.GREY_06 : theme.palette.BLACK}; /* 색 수정 필요 */ + background-color: ${({ theme, isDisabled }) => (isDisabled ? theme.palette.Grey.Grey7 : theme.palette.Grey.Black)}; ${({ theme, isDisabled }) => !isDisabled && ` &:hover { - background-color: ${theme.palette.GREY_06}; + background-color: ${theme.palette.Grey.Grey6}; } &:active { - background-color: ${theme.palette.GREY_05}; + background-color: ${theme.palette.Grey.Grey8}; } `} `; @@ -54,8 +53,7 @@ const StyledRefreshIcon = styled(Icons.Refresh)` `; const Text = styled.p` - color: ${({ theme }) => theme.palette.WITHE}; text-align: center; - ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */ + ${({ theme }) => theme.fontTheme.CAPTION_02}; `; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index 2fee1e8a..e68098de 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -25,16 +25,17 @@ const SettingCheck2Css = css` const SettingCheck2Layout = styled.button` ${SettingCheck2Css} - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Primary}; + path { - stroke: ${({ theme }) => theme.palette.WITHE}; + stroke: ${({ theme }) => theme.palette.Grey.White}; } } `; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index 7bad8a7c..4791c4e6 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -25,16 +25,17 @@ const SettingCheck3Css = css` const SettingCheck3Layout = styled.button` ${SettingCheck3Css} - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Primary}; + path { - stroke: ${({ theme }) => theme.palette.WITHE}; + stroke: ${({ theme }) => theme.palette.Grey.White}; } } `; diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx index 2abbb8fc..156d74ae 100644 --- a/src/components/common/button/SettingDeleteBtn.tsx +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -25,14 +25,14 @@ const SettingDeleteBtnCss = css` const SettingDeleteBtnLayout = styled.button` ${SettingDeleteBtnCss} - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Primary}; } `; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index ead4e37b..cc8be267 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -25,16 +25,17 @@ const SettingXBtnCss = css` const SettingXBtnLayout = styled.button` ${SettingXBtnCss} - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue1}; &:hover { - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Primary}; + path { - stroke: ${({ theme }) => theme.palette.WITHE}; + stroke: ${({ theme }) => theme.palette.Grey.White}; } } `; diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx index 2558c0f1..3dc6d9fc 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -23,6 +23,6 @@ const StatusDoneBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.WITHE}); + border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); border-radius: 10px; `; diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx index a549c59e..13caf5f5 100644 --- a/src/components/common/button/StatusInProgressBtn.tsx +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -23,6 +23,6 @@ const StatusInProgressBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.WITHE}); + border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); border-radius: 10px; `; diff --git a/src/components/common/button/StatusStagingBtn.tsx b/src/components/common/button/StatusStagingBtn.tsx index 72cb7a81..54e1cf30 100644 --- a/src/components/common/button/StatusStagingBtn.tsx +++ b/src/components/common/button/StatusStagingBtn.tsx @@ -23,6 +23,6 @@ const StatusStagingBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.WITHE}); + border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); border-radius: 10px; `; diff --git a/src/components/common/button/StatusTodoBtn.tsx b/src/components/common/button/StatusTodoBtn.tsx index 95804a7a..7d434984 100644 --- a/src/components/common/button/StatusTodoBtn.tsx +++ b/src/components/common/button/StatusTodoBtn.tsx @@ -23,6 +23,6 @@ const StatusTodoBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.WITHE}); + border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); border-radius: 10px; `; diff --git a/src/components/common/button/TimelineDeleteBtn.tsx b/src/components/common/button/TimelineDeleteBtn.tsx index 33582c2b..50d62a59 100644 --- a/src/components/common/button/TimelineDeleteBtn.tsx +++ b/src/components/common/button/TimelineDeleteBtn.tsx @@ -20,7 +20,7 @@ const TimelineDeleteBtnLayout = styled.button` width: 1.6rem; height: 1.6rem; - background: ${({ theme }) => theme.palette.SECONDARY}; + background: ${({ theme }) => theme.palette.Secondary}; border-radius: 50%; `; diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index 4e951de8..b4e635b3 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -27,31 +27,33 @@ const TodayPlusBtnCss = css` const TodayPlusBtnLayout = styled.button` ${TodayPlusBtnCss} - background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 색 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Blue.Blue2}; + path { - stroke: ${({ theme }) => theme.palette.PRIMARY}; + stroke: ${({ theme }) => theme.palette.Primary}; } &:hover { - background-color: ${({ theme }) => theme.palette.GREY_04}; + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; } &:active { - background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */ + background-color: ${({ theme }) => theme.palette.Primary}; + path { - stroke: ${({ theme }) => theme.palette.WITHE}; + stroke: ${({ theme }) => theme.palette.Grey.White}; } } `; const Text = styled.p` - color: ${({ theme }) => theme.palette.PRIMARY}; /* 폰트 수정 필요 & 아이콘 색상 변경 필요 */ + color: ${({ theme }) => theme.palette.Primary}; text-align: center; - ${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */ + ${({ theme }) => theme.fontTheme.CAPTION_02}; &:active { - color: ${({ theme }) => theme.palette.WITHE}; /* svg 색 수정 필요 */ + color: ${({ theme }) => theme.palette.Grey.White}; } `; diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 15baea0a..e710f804 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,28 +1,28 @@ -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 SortBtn from '@/components/common/button/SortBtn'; -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/TextBtn'; -import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; +// 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 SortBtn from '@/components/common/button/SortBtn'; +// 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/TextBtn'; +// import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; -import NavBar from '@/components/common/NavBar'; +// import NavBar from '@/components/common/NavBar'; function Setting() { return (
- + {/* @@ -41,7 +41,7 @@ function Setting() { - + */}
); From 323fe3f5dd0eb6be565b1e467bd977a155da0089 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 18:40:41 +0900 Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=EC=A7=84=ED=96=89=EC=A4=91=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/SettingCheck4Icon.svg | 5 ++ src/assets/svg/index.ts | 10 ++-- src/components/common/button/Check1Btn.tsx | 2 +- .../common/button/SettingCheck2Btn.tsx | 2 +- .../common/button/SettingCheck3Btn.tsx | 4 +- .../common/button/SettingCheck4Btn.tsx | 46 +++++++++++++++++++ 6 files changed, 62 insertions(+), 7 deletions(-) create mode 100644 src/assets/svg/SettingCheck4Icon.svg create mode 100644 src/components/common/button/SettingCheck4Btn.tsx diff --git a/src/assets/svg/SettingCheck4Icon.svg b/src/assets/svg/SettingCheck4Icon.svg new file mode 100644 index 00000000..ca48a9c8 --- /dev/null +++ b/src/assets/svg/SettingCheck4Icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index bd86d43c..beb1336a 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -23,6 +23,7 @@ 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 SettingCheck4 from '@/assets/svg/SettingCheck4Icon.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'; @@ -52,9 +53,12 @@ const Icons = { UnselectedBox, PlusArrow, DeleteIcon, - SettingCheck1, - SettingCheck2, - SettingCheck3, + SettingIcons: { + SettingCheck1, + SettingCheck2, + SettingCheck3, + SettingCheck4, + }, SettingX, SettingProgress, DoneIcon, diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index f39868e4..cc4a469a 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -51,7 +51,7 @@ const SettingCheck1Layout = styled.button` } `; -const StlyedSettingCheck1Ic = styled(Icons.SettingCheck1)` +const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)` width: 1.3911rem; height: 1.3911rem; `; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index e68098de..d05d8473 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -40,7 +40,7 @@ const SettingCheck2Layout = styled.button` } `; -const StyledSettingCheck2Icon = styled(Icons.SettingCheck2)` +const StyledSettingCheck2Icon = styled(Icons.SettingIcons.SettingCheck2)` width: 1.391rem; height: 0.9563rem; `; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index 4791c4e6..6374f2fc 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index'; function SettingCheck3() { return ( - {/* 아이콘 크기 조정 필요 */} + ); } @@ -40,7 +40,7 @@ const SettingCheck3Layout = styled.button` } `; -const StyledSettingCheck3Icon = styled(Icons.SettingCheck3)` +const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)` width: 1.391rem; height: 1.391rem; `; diff --git a/src/components/common/button/SettingCheck4Btn.tsx b/src/components/common/button/SettingCheck4Btn.tsx new file mode 100644 index 00000000..53fe24cc --- /dev/null +++ b/src/components/common/button/SettingCheck4Btn.tsx @@ -0,0 +1,46 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +import Icons from '@/assets/svg/index'; + +function 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.Blue1}; + + &:hover { + background-color: ${({ theme }) => theme.palette.Blue.Blue3}; + } + + &:active { + background-color: ${({ theme }) => theme.palette.Primary}; + + path { + stroke: ${({ theme }) => theme.palette.Grey.White}; + } + } +`; + +const StyledSettingCheck4Icon = styled(Icons.SettingIcons.SettingCheck4)` + width: 1.3911rem; + height: 1.3911rem; +`; From 0595267a6c9bf3f687263ed3f357913315317cce Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 18:55:12 +0900 Subject: [PATCH 06/16] =?UTF-8?q?feat:=20hover=20bar=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/icn_nav_calendar.svg | 6 ++-- src/components/common/button/HoverBarBtn.tsx | 32 +++++++++++++++++++ .../common/button/SettingCheck4Btn.tsx | 14 ++++---- .../targetArea/TargetControlSection.tsx | 4 +-- src/pages/Setting.tsx | 2 ++ 5 files changed, 47 insertions(+), 11 deletions(-) create mode 100644 src/components/common/button/HoverBarBtn.tsx diff --git a/src/assets/svg/icn_nav_calendar.svg b/src/assets/svg/icn_nav_calendar.svg index cc83f5e1..6635f5e1 100644 --- a/src/assets/svg/icn_nav_calendar.svg +++ b/src/assets/svg/icn_nav_calendar.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/components/common/button/HoverBarBtn.tsx b/src/components/common/button/HoverBarBtn.tsx new file mode 100644 index 00000000..e98bf40f --- /dev/null +++ b/src/components/common/button/HoverBarBtn.tsx @@ -0,0 +1,32 @@ +import styled from '@emotion/styled'; + +import Check1Btn from './Check1Btn'; + +import SettingCheck4 from '@/components/common/button/SettingCheck4Btn'; +import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; +import TextBtn from '@/components/common/button/textBtn/TextBtn'; + +function HoverBarBtn() { + return ( + + + + + + + ); +} + +export default HoverBarBtn; + +const HoverBarBtnLayout = styled.div` + display: flex; + gap: 0.4rem; + align-items: center; + width: 13.7rem; + height: 3.2rem; + padding: 0.4rem; + + border: 1px solid ${({ theme }) => theme.palette.Grey.White}; + border-radius: 12px; +`; diff --git a/src/components/common/button/SettingCheck4Btn.tsx b/src/components/common/button/SettingCheck4Btn.tsx index 53fe24cc..2ece8e46 100644 --- a/src/components/common/button/SettingCheck4Btn.tsx +++ b/src/components/common/button/SettingCheck4Btn.tsx @@ -3,17 +3,17 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -function SettingCheck3() { +function SettingCheck4() { return ( - + - + ); } -export default SettingCheck3; +export default SettingCheck4; -const SettingCheck3Css = css` +const SettingCheck4Css = css` display: flex; align-items: center; justify-content: center; @@ -23,8 +23,8 @@ const SettingCheck3Css = css` border-radius: 8px; `; -const SettingCheck3Layout = styled.button` - ${SettingCheck3Css} +const SettingCheck4Layout = styled.button` + ${SettingCheck4Css} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; &:hover { diff --git a/src/components/targetArea/TargetControlSection.tsx b/src/components/targetArea/TargetControlSection.tsx index 6ef4fa7b..7c71e937 100644 --- a/src/components/targetArea/TargetControlSection.tsx +++ b/src/components/targetArea/TargetControlSection.tsx @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; -import TextBtn from '../common/button/TextBtn'; +import TextBtn from '@/components/common/button/textBtn/TextBtn'; function TargetControlSection() { return ( - + diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index e710f804..1d281b82 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -16,6 +16,7 @@ // import StatusTodoBtn from '@/components/common/button/StatusTodoBtn'; // import TextBtn from '@/components/common/button/textBtn/TextBtn'; // import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; +import HoverBarBtn from '@/components/common/button/HoverBarBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; // import NavBar from '@/components/common/NavBar'; @@ -43,6 +44,7 @@ function Setting() { */} +
); } From 775614ddfe774d2e0c15e6e242951eb97bd333c0 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 19:07:42 +0900 Subject: [PATCH 07/16] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/HoverBarBtn.tsx | 2 +- src/pages/Setting.tsx | 44 ++++++++++---------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/common/button/HoverBarBtn.tsx b/src/components/common/button/HoverBarBtn.tsx index e98bf40f..18952da2 100644 --- a/src/components/common/button/HoverBarBtn.tsx +++ b/src/components/common/button/HoverBarBtn.tsx @@ -10,7 +10,7 @@ function HoverBarBtn() { return ( - + diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 1d281b82..0b28f725 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -1,29 +1,29 @@ -// 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 SortBtn from '@/components/common/button/SortBtn'; -// 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/TextBtn'; -// import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; +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 HoverBarBtn from '@/components/common/button/HoverBarBtn'; +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 SortBtn from '@/components/common/button/SortBtn'; +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/TextBtn'; +import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn'; import TodayPlusBtn from '@/components/common/button/TodayPlusBtn'; -// import NavBar from '@/components/common/NavBar'; +import NavBar from '@/components/common/NavBar'; function Setting() { return (
- {/* + @@ -33,7 +33,7 @@ function Setting() { - + @@ -42,7 +42,7 @@ function Setting() { - */} +
From 933143d98e7a2c8ee18364c12d9816b2741858ca Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 21:29:39 +0900 Subject: [PATCH 08/16] =?UTF-8?q?fix:=20hover=20&=20pressed=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Check1Btn.tsx | 37 ++++++++++------- src/components/common/button/HoverBarBtn.tsx | 8 ++-- .../common/button/SettingCheck4Btn.tsx | 40 ++++++++++++------- .../common/button/SettingDeleteBtn.tsx | 32 ++++++++++----- .../common/button/textBtn/TextBtn.tsx | 14 ++++--- src/pages/Setting.tsx | 8 ++-- src/types/textBtnType.ts | 3 +- 7 files changed, 90 insertions(+), 52 deletions(-) diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index cc4a469a..14057262 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -3,15 +3,17 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -interface Check1 { +interface Check1Props { type: 'setting' | 'done'; + isHover: boolean; + isPressed: boolean; } -function Check1Btn({ type }: Check1) { +function Check1Btn({ type, isHover, isPressed }: Check1Props) { return (
{type === 'setting' ? ( - + ) : ( @@ -30,7 +32,7 @@ const alignCenterStyle = css` align-items: center; justify-content: center; `; -const SettingCheck1Layout = styled.button` +const SettingCheck1Layout = styled.button<{ isHover: boolean; isPressed: boolean }>` ${alignCenterStyle} width: 2.4rem; height: 2.4rem; @@ -38,17 +40,24 @@ const SettingCheck1Layout = styled.button` background-color: ${({ theme }) => theme.palette.Blue.Blue1}; border-radius: 8px; - &:hover { - background-color: ${({ theme }) => theme.palette.Blue.Blue3}; - } + ${({ isHover, theme }) => + isHover && + css` + &:hover { + background-color: ${theme.palette.Blue.Blue3}; + } + `} + ${({ isPressed, theme }) => + isPressed && + css` + &:active { + background-color: ${theme.palette.Primary}; - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; - - path { - stroke: ${({ theme }) => theme.palette.Grey.White}; - } - } + path { + stroke: ${theme.palette.Grey.White}; + } + } + `} `; const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)` diff --git a/src/components/common/button/HoverBarBtn.tsx b/src/components/common/button/HoverBarBtn.tsx index 18952da2..f7f69cd3 100644 --- a/src/components/common/button/HoverBarBtn.tsx +++ b/src/components/common/button/HoverBarBtn.tsx @@ -9,10 +9,10 @@ import TextBtn from '@/components/common/button/textBtn/TextBtn'; function HoverBarBtn() { return ( - - - - + + + + ); } diff --git a/src/components/common/button/SettingCheck4Btn.tsx b/src/components/common/button/SettingCheck4Btn.tsx index 2ece8e46..49524f3b 100644 --- a/src/components/common/button/SettingCheck4Btn.tsx +++ b/src/components/common/button/SettingCheck4Btn.tsx @@ -3,9 +3,14 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -function SettingCheck4() { +interface SettingCheck4Props { + isHover: boolean; + isPressed: boolean; +} + +function SettingCheck4({ isHover, isPressed }: SettingCheck4Props) { return ( - + ); @@ -23,21 +28,28 @@ const SettingCheck4Css = css` border-radius: 8px; `; -const SettingCheck4Layout = styled.button` +const SettingCheck4Layout = styled.button<{ isHover: boolean; isPressed: boolean }>` ${SettingCheck4Css} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; - &:hover { - background-color: ${({ theme }) => theme.palette.Blue.Blue3}; - } - - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; - - path { - stroke: ${({ theme }) => theme.palette.Grey.White}; - } - } + ${({ isHover, theme }) => + isHover && + css` + &:hover { + background-color: ${theme.palette.Blue.Blue3}; + } + `} + ${({ isPressed, theme }) => + isPressed && + css` + &:active { + background-color: ${theme.palette.Primary}; + + path { + stroke: ${theme.palette.Grey.White}; + } + } + `} `; const StyledSettingCheck4Icon = styled(Icons.SettingIcons.SettingCheck4)` diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx index 156d74ae..7023fb8e 100644 --- a/src/components/common/button/SettingDeleteBtn.tsx +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -3,9 +3,14 @@ import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; -function SettingDeleteBtn() { +interface SettingDeleteBtnProps { + isHover: boolean; + isPressed: boolean; +} + +function SettingDeleteBtn({ isHover, isPressed }: SettingDeleteBtnProps) { return ( - + ); @@ -23,17 +28,24 @@ const SettingDeleteBtnCss = css` border-radius: 8px; `; -const SettingDeleteBtnLayout = styled.button` +const SettingDeleteBtnLayout = styled.button<{ isHover: boolean; isPressed: boolean }>` ${SettingDeleteBtnCss} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; - &:hover { - background-color: ${({ theme }) => theme.palette.Blue.Blue3}; - } - - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; - } + ${({ isHover, theme }) => + isHover && + css` + &:hover { + background-color: ${theme.palette.Blue.Blue3}; + } + `} + ${({ isPressed, theme }) => + isPressed && + css` + &:active { + background-color: ${theme.palette.Primary}; + } + `} `; const StyledDeleteIcon = styled(Icons.DeleteIcon)` diff --git a/src/components/common/button/textBtn/TextBtn.tsx b/src/components/common/button/textBtn/TextBtn.tsx index a5667ab1..b148df3c 100644 --- a/src/components/common/button/textBtn/TextBtn.tsx +++ b/src/components/common/button/textBtn/TextBtn.tsx @@ -11,22 +11,26 @@ function TextBtn({ size, text, color, mode, isAction }: TextBtnType) { size: string; color: 'BLUE' | 'WHITE' | 'BLACK'; mode: string; - isAction: boolean; + isHover: boolean; + isPressed: boolean; }>` ${({ size }) => (size === 'small' ? smallSize : bigSize)}; color: ${({ theme }) => theme.textButton[color][mode].TEXT}; background-color: ${({ theme }) => theme.textButton[color][mode].BG}; - ${({ isAction, theme, color }) => - isAction && + ${({ isHover, theme, color }) => + isHover && css` &:hover { color: ${theme.textButton[color].HOVER.TEXT}; background-color: ${theme.textButton[color].HOVER.BG}; } - + `} + ${({ isPressed, theme, color }) => + isPressed && + css` &:active { color: ${theme.textButton[color].PRESSED.TEXT}; @@ -35,7 +39,7 @@ function TextBtn({ size, text, color, mode, isAction }: TextBtnType) { `} `; return ( - + {text} ); diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 0b28f725..085c3382 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -24,10 +24,10 @@ function Setting() { return (
- - + + - + @@ -36,7 +36,7 @@ function Setting() { - + diff --git a/src/types/textBtnType.ts b/src/types/textBtnType.ts index 59e81300..05b18c89 100644 --- a/src/types/textBtnType.ts +++ b/src/types/textBtnType.ts @@ -3,5 +3,6 @@ export interface TextBtnType { color: 'BLUE' | 'WHITE' | 'BLACK'; size: 'small' | 'big'; text: string; - isAction: boolean; + isHover: boolean; + isPressed: boolean; } From b1d4f7f4bee159bfca7193be1b93bd87f0c19835 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 21:34:49 +0900 Subject: [PATCH 09/16] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/StatusDoneBtn.tsx | 2 +- src/components/common/button/StatusInProgressBtn.tsx | 4 ++-- src/components/targetArea/TargetControlSection.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx index 3dc6d9fc..89f6ca24 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -6,7 +6,7 @@ import TextBtn from '@/components/common/button/textBtn/TextBtn'; function StatusDoneBtn() { return ( - + ); diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx index 13caf5f5..4b550973 100644 --- a/src/components/common/button/StatusInProgressBtn.tsx +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -6,8 +6,8 @@ import TextBtn from '@/components/common/button/textBtn/TextBtn'; function StatusInProgressBtn() { return ( - - + + ); } diff --git a/src/components/targetArea/TargetControlSection.tsx b/src/components/targetArea/TargetControlSection.tsx index 7c71e937..9d37b56c 100644 --- a/src/components/targetArea/TargetControlSection.tsx +++ b/src/components/targetArea/TargetControlSection.tsx @@ -6,7 +6,7 @@ function TargetControlSection() { return ( - + From e973467d7c04b2e2da14ca2170c4cdbc6937e011 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 21:35:40 +0900 Subject: [PATCH 10/16] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/textBtn/TextBtn.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/button/textBtn/TextBtn.tsx b/src/components/common/button/textBtn/TextBtn.tsx index b148df3c..24277a75 100644 --- a/src/components/common/button/textBtn/TextBtn.tsx +++ b/src/components/common/button/textBtn/TextBtn.tsx @@ -6,7 +6,7 @@ import { smallSize, bigSize } from './textBtnStyle'; import { TextBtnType } from '@/types/textBtnType'; -function TextBtn({ size, text, color, mode, isAction }: TextBtnType) { +function TextBtn({ size, text, color, mode, isHover, isPressed }: TextBtnType) { const StyledTextBtn = styled.div<{ size: string; color: 'BLUE' | 'WHITE' | 'BLACK'; From 4560969ede5695330bc79ecd090eff3b94adae42 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 21:58:55 +0900 Subject: [PATCH 11/16] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80=EB=90=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/SettingCheck4Icon.svg | 6 ++-- src/components/common/button/HoverBarBtn.tsx | 32 ------------------- .../common/button/SettingCheck4Btn.tsx | 6 +++- .../common/button/StatusDoneBtn.tsx | 9 +++--- .../common/button/StatusInProgressBtn.tsx | 6 ++-- .../common/button/StatusStagingBtn.tsx | 8 ++--- .../common/button/StatusTodoBtn.tsx | 11 ++++--- 7 files changed, 26 insertions(+), 52 deletions(-) delete mode 100644 src/components/common/button/HoverBarBtn.tsx diff --git a/src/assets/svg/SettingCheck4Icon.svg b/src/assets/svg/SettingCheck4Icon.svg index ca48a9c8..5619f901 100644 --- a/src/assets/svg/SettingCheck4Icon.svg +++ b/src/assets/svg/SettingCheck4Icon.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/components/common/button/HoverBarBtn.tsx b/src/components/common/button/HoverBarBtn.tsx deleted file mode 100644 index f7f69cd3..00000000 --- a/src/components/common/button/HoverBarBtn.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import styled from '@emotion/styled'; - -import Check1Btn from './Check1Btn'; - -import SettingCheck4 from '@/components/common/button/SettingCheck4Btn'; -import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; -import TextBtn from '@/components/common/button/textBtn/TextBtn'; - -function HoverBarBtn() { - return ( - - - - - - - ); -} - -export default HoverBarBtn; - -const HoverBarBtnLayout = styled.div` - display: flex; - gap: 0.4rem; - align-items: center; - width: 13.7rem; - height: 3.2rem; - padding: 0.4rem; - - border: 1px solid ${({ theme }) => theme.palette.Grey.White}; - border-radius: 12px; -`; diff --git a/src/components/common/button/SettingCheck4Btn.tsx b/src/components/common/button/SettingCheck4Btn.tsx index 49524f3b..d491e81c 100644 --- a/src/components/common/button/SettingCheck4Btn.tsx +++ b/src/components/common/button/SettingCheck4Btn.tsx @@ -32,6 +32,10 @@ const SettingCheck4Layout = styled.button<{ isHover: boolean; isPressed: boolean ${SettingCheck4Css} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; + path { + fill: ${({ theme }) => theme.palette.Primary}; + } + ${({ isHover, theme }) => isHover && css` @@ -46,7 +50,7 @@ const SettingCheck4Layout = styled.button<{ isHover: boolean; isPressed: boolean background-color: ${theme.palette.Primary}; path { - stroke: ${theme.palette.Grey.White}; + fill: ${theme.palette.Grey.White}; } } `} diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/StatusDoneBtn.tsx index 89f6ca24..59d7d39d 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/StatusDoneBtn.tsx @@ -1,13 +1,14 @@ import styled from '@emotion/styled'; -import ProgressBtn from '@/components/common/button/ProgressBtn'; +import SettingCheck4 from './SettingCheck4Btn'; + import TextBtn from '@/components/common/button/textBtn/TextBtn'; function StatusDoneBtn() { return ( - + ); } @@ -23,6 +24,6 @@ const StatusDoneBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); - border-radius: 10px; + border: 1px solid ${({ theme }) => theme.palette.Grey.White}; + border-radius: 12px; `; diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/StatusInProgressBtn.tsx index 4b550973..b51c949d 100644 --- a/src/components/common/button/StatusInProgressBtn.tsx +++ b/src/components/common/button/StatusInProgressBtn.tsx @@ -7,7 +7,7 @@ function StatusInProgressBtn() { return ( - + ); } @@ -23,6 +23,6 @@ const StatusInProgressBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); - border-radius: 10px; + border: 1px solid ${({ theme }) => theme.palette.Grey.White}; + border-radius: 12px; `; diff --git a/src/components/common/button/StatusStagingBtn.tsx b/src/components/common/button/StatusStagingBtn.tsx index 54e1cf30..eb9f222d 100644 --- a/src/components/common/button/StatusStagingBtn.tsx +++ b/src/components/common/button/StatusStagingBtn.tsx @@ -6,8 +6,8 @@ import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; function StatusStagingBtn() { return ( - - + + ); } @@ -23,6 +23,6 @@ const StatusStagingBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); - border-radius: 10px; + border: 1px solid ${({ theme }) => theme.palette.Grey.White}; + border-radius: 12px; `; diff --git a/src/components/common/button/StatusTodoBtn.tsx b/src/components/common/button/StatusTodoBtn.tsx index 7d434984..bdfdd374 100644 --- a/src/components/common/button/StatusTodoBtn.tsx +++ b/src/components/common/button/StatusTodoBtn.tsx @@ -1,13 +1,14 @@ import styled from '@emotion/styled'; +import SettingCheck4 from './SettingCheck4Btn'; + import Check1Btn from '@/components/common/button/Check1Btn'; -import ProgressBtn from '@/components/common/button/ProgressBtn'; function StatusTodoBtn() { return ( - - + + ); } @@ -23,6 +24,6 @@ const StatusTodoBtnLayout = styled.div` height: 2.4rem; padding: 0.4rem; - border: 1px solid var(${({ theme }) => theme.palette.Grey.White}); - border-radius: 10px; + border: 1px solid ${({ theme }) => theme.palette.Grey.White}; + border-radius: 12px; `; From b19d51741bb14d03b92ce241580d57cd5c62a611 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 22:01:57 +0900 Subject: [PATCH 12/16] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Setting.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 085c3382..193ff571 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -2,7 +2,6 @@ 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 HoverBarBtn from '@/components/common/button/HoverBarBtn'; import OkayCancelBtn from '@/components/common/button/OkayCancelBtn'; import ProgressBtn from '@/components/common/button/ProgressBtn'; import RefreshBtn from '@/components/common/button/RefreshBtn'; @@ -44,7 +43,6 @@ function Setting() { -
); } From a7c72b4956b34b2a166419f68b38dcc48715c70a Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 22:09:43 +0900 Subject: [PATCH 13/16] =?UTF-8?q?fix:=20rem=20=EA=B0=92=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 | 7 +++---- src/components/common/button/ProgressBtn.tsx | 2 +- src/components/common/button/SettingCheck2Btn.tsx | 3 +-- src/components/common/button/SettingCheck3Btn.tsx | 3 +-- src/components/common/button/SettingCheck4Btn.tsx | 3 +-- src/components/common/button/SettingXBtn.tsx | 3 +-- 6 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index 14057262..c8d72b08 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -61,8 +61,8 @@ const SettingCheck1Layout = styled.button<{ isHover: boolean; isPressed: boolean `; const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)` - width: 1.3911rem; - height: 1.3911rem; + width: 1.4rem; + height: 1.4rem; `; const DoneLayout = styled.button` @@ -75,6 +75,5 @@ const DoneLayout = styled.button` `; const StlyedDoneIc = styled(Icons.DoneIcon)` - width: 1.8548rem; - height: 1.8548rem; + width: 1.85rem; `; diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx index b174029d..20f2b5f1 100644 --- a/src/components/common/button/ProgressBtn.tsx +++ b/src/components/common/button/ProgressBtn.tsx @@ -63,5 +63,5 @@ const DefaultProgressLayout = styled.button` `; const StyledProgressIcon = styled(Icons.ProgressIcon)` - width: 1.8667rem; + width: 1.86rem; `; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index d05d8473..4ec2748e 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -41,6 +41,5 @@ const SettingCheck2Layout = styled.button` `; const StyledSettingCheck2Icon = styled(Icons.SettingIcons.SettingCheck2)` - width: 1.391rem; - height: 0.9563rem; + width: 1.4rem; `; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index 6374f2fc..a57ac61e 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -41,6 +41,5 @@ const SettingCheck3Layout = styled.button` `; const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)` - width: 1.391rem; - height: 1.391rem; + width: 1.4rem; `; diff --git a/src/components/common/button/SettingCheck4Btn.tsx b/src/components/common/button/SettingCheck4Btn.tsx index d491e81c..8264043e 100644 --- a/src/components/common/button/SettingCheck4Btn.tsx +++ b/src/components/common/button/SettingCheck4Btn.tsx @@ -57,6 +57,5 @@ const SettingCheck4Layout = styled.button<{ isHover: boolean; isPressed: boolean `; const StyledSettingCheck4Icon = styled(Icons.SettingIcons.SettingCheck4)` - width: 1.3911rem; - height: 1.3911rem; + width: 1.4rem; `; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index cc8be267..a05c5bfe 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -41,6 +41,5 @@ const SettingXBtnLayout = styled.button` `; const StyledSettingX = styled(Icons.SettingX)` - width: 1.391rem; - height: 1.391rem; + width: 1.4rem; `; From f94de9eb3eb7d2c7576fb49e0416c1ffb7fec34f Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 22:25:56 +0900 Subject: [PATCH 14/16] =?UTF-8?q?chore:=20=EB=88=88=EC=BD=94=EB=94=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Check1Btn.tsx | 4 ++-- src/components/common/button/SettingCheck2Btn.tsx | 3 ++- src/components/common/button/SettingCheck3Btn.tsx | 3 ++- src/components/common/button/SettingCheck4Btn.tsx | 3 ++- src/components/common/button/SettingDeleteBtn.tsx | 4 ++-- src/components/common/button/SettingXBtn.tsx | 3 ++- 6 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx index c8d72b08..5496ae65 100644 --- a/src/components/common/button/Check1Btn.tsx +++ b/src/components/common/button/Check1Btn.tsx @@ -61,8 +61,8 @@ const SettingCheck1Layout = styled.button<{ isHover: boolean; isPressed: boolean `; const StlyedSettingCheck1Ic = styled(Icons.SettingIcons.SettingCheck1)` - width: 1.4rem; - height: 1.4rem; + width: 1.6rem; + height: 1.6rem; `; const DoneLayout = styled.button` diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx index 4ec2748e..c5479b28 100644 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ b/src/components/common/button/SettingCheck2Btn.tsx @@ -41,5 +41,6 @@ const SettingCheck2Layout = styled.button` `; const StyledSettingCheck2Icon = styled(Icons.SettingIcons.SettingCheck2)` - width: 1.4rem; + width: 1.6rem; + height: 1.6rem; `; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx index a57ac61e..5806bda5 100644 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ b/src/components/common/button/SettingCheck3Btn.tsx @@ -41,5 +41,6 @@ const SettingCheck3Layout = styled.button` `; const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)` - width: 1.4rem; + width: 1.6rem; + height: 1.6rem; `; diff --git a/src/components/common/button/SettingCheck4Btn.tsx b/src/components/common/button/SettingCheck4Btn.tsx index 8264043e..9a971c60 100644 --- a/src/components/common/button/SettingCheck4Btn.tsx +++ b/src/components/common/button/SettingCheck4Btn.tsx @@ -57,5 +57,6 @@ const SettingCheck4Layout = styled.button<{ isHover: boolean; isPressed: boolean `; const StyledSettingCheck4Icon = styled(Icons.SettingIcons.SettingCheck4)` - width: 1.4rem; + width: 1.53rem; + height: 15.29rem; `; diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx index 7023fb8e..ece459e3 100644 --- a/src/components/common/button/SettingDeleteBtn.tsx +++ b/src/components/common/button/SettingDeleteBtn.tsx @@ -49,6 +49,6 @@ const SettingDeleteBtnLayout = styled.button<{ isHover: boolean; isPressed: bool `; const StyledDeleteIcon = styled(Icons.DeleteIcon)` - width: 1.35rem; - height: 1.35rem; + width: 1.4rem; + height: 1.4rem; `; diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx index a05c5bfe..c667d4f2 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/SettingXBtn.tsx @@ -41,5 +41,6 @@ const SettingXBtnLayout = styled.button` `; const StyledSettingX = styled(Icons.SettingX)` - width: 1.4rem; + width: 1.6rem; + height: 1.6rem; `; From cb382a2a8b62cb4d10a5cb13c978fd9721fed5b4 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 23:19:42 +0900 Subject: [PATCH 15/16] =?UTF-8?q?fix:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/button/CancelWhiteBtn.tsx | 7 +-- .../common/button/SettingCheck2Btn.tsx | 46 ------------------- .../common/button/SettingCheck3Btn.tsx | 46 ------------------- .../button/settingBtn/SettingCheck2Btn.tsx | 19 ++++++++ .../button/settingBtn/SettingCheck3Btn.tsx | 19 ++++++++ .../{ => settingBtn}/SettingCheck4Btn.tsx | 0 .../{ => settingBtn}/SettingDeleteBtn.tsx | 0 .../common/button/settingBtn/SettingXBtn.tsx | 19 ++++++++ .../settingBtnStyle.ts} | 23 ++-------- .../button/{ => statusBtn}/StatusDoneBtn.tsx | 3 +- .../{ => statusBtn}/StatusInProgressBtn.tsx | 0 .../{ => statusBtn}/StatusStagingBtn.tsx | 2 +- .../button/{ => statusBtn}/StatusTodoBtn.tsx | 3 +- src/pages/Setting.tsx | 16 +++---- 14 files changed, 72 insertions(+), 131 deletions(-) delete mode 100644 src/components/common/button/SettingCheck2Btn.tsx delete mode 100644 src/components/common/button/SettingCheck3Btn.tsx create mode 100644 src/components/common/button/settingBtn/SettingCheck2Btn.tsx create mode 100644 src/components/common/button/settingBtn/SettingCheck3Btn.tsx rename src/components/common/button/{ => settingBtn}/SettingCheck4Btn.tsx (100%) rename src/components/common/button/{ => settingBtn}/SettingDeleteBtn.tsx (100%) create mode 100644 src/components/common/button/settingBtn/SettingXBtn.tsx rename src/components/common/button/{SettingXBtn.tsx => settingBtn/settingBtnStyle.ts} (58%) rename src/components/common/button/{ => statusBtn}/StatusDoneBtn.tsx (88%) rename src/components/common/button/{ => statusBtn}/StatusInProgressBtn.tsx (100%) rename src/components/common/button/{ => statusBtn}/StatusStagingBtn.tsx (87%) rename src/components/common/button/{ => statusBtn}/StatusTodoBtn.tsx (87%) diff --git a/src/components/common/button/CancelWhiteBtn.tsx b/src/components/common/button/CancelWhiteBtn.tsx index 95b5b64c..e6b0734d 100644 --- a/src/components/common/button/CancelWhiteBtn.tsx +++ b/src/components/common/button/CancelWhiteBtn.tsx @@ -1,4 +1,3 @@ -import { css } from '@emotion/react'; import styled from '@emotion/styled'; import Icons from '@/assets/svg/index'; @@ -13,7 +12,7 @@ function DeleteBtn() { export default DeleteBtn; -const DeleteBtnCss = css` +const DeleteBtnLayout = styled.button` display: flex; align-items: center; justify-content: center; @@ -23,10 +22,6 @@ const DeleteBtnCss = css` border-radius: 10px; `; -const DeleteBtnLayout = styled.button` - ${DeleteBtnCss} -`; - const StlyedDeleteIcon = styled(Icons.DeleteIcon)` width: 1.8rem; height: 1.8rem; diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx deleted file mode 100644 index c5479b28..00000000 --- a/src/components/common/button/SettingCheck2Btn.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; - -function 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.Blue1}; - - &:hover { - background-color: ${({ theme }) => theme.palette.Blue.Blue3}; - } - - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; - - path { - stroke: ${({ theme }) => theme.palette.Grey.White}; - } - } -`; - -const StyledSettingCheck2Icon = styled(Icons.SettingIcons.SettingCheck2)` - width: 1.6rem; - height: 1.6rem; -`; diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx deleted file mode 100644 index 5806bda5..00000000 --- a/src/components/common/button/SettingCheck3Btn.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -import Icons from '@/assets/svg/index'; - -function 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.Blue1}; - - &:hover { - background-color: ${({ theme }) => theme.palette.Blue.Blue3}; - } - - &:active { - background-color: ${({ theme }) => theme.palette.Primary}; - - path { - stroke: ${({ theme }) => theme.palette.Grey.White}; - } - } -`; - -const StyledSettingCheck3Icon = styled(Icons.SettingIcons.SettingCheck3)` - width: 1.6rem; - height: 1.6rem; -`; diff --git a/src/components/common/button/settingBtn/SettingCheck2Btn.tsx b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx new file mode 100644 index 00000000..fa0d7deb --- /dev/null +++ b/src/components/common/button/settingBtn/SettingCheck2Btn.tsx @@ -0,0 +1,19 @@ +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 new file mode 100644 index 00000000..ba7286a2 --- /dev/null +++ b/src/components/common/button/settingBtn/SettingCheck3Btn.tsx @@ -0,0 +1,19 @@ +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/SettingCheck4Btn.tsx b/src/components/common/button/settingBtn/SettingCheck4Btn.tsx similarity index 100% rename from src/components/common/button/SettingCheck4Btn.tsx rename to src/components/common/button/settingBtn/SettingCheck4Btn.tsx diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/settingBtn/SettingDeleteBtn.tsx similarity index 100% rename from src/components/common/button/SettingDeleteBtn.tsx rename to src/components/common/button/settingBtn/SettingDeleteBtn.tsx diff --git a/src/components/common/button/settingBtn/SettingXBtn.tsx b/src/components/common/button/settingBtn/SettingXBtn.tsx new file mode 100644 index 00000000..d9f9ebc5 --- /dev/null +++ b/src/components/common/button/settingBtn/SettingXBtn.tsx @@ -0,0 +1,19 @@ +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/SettingXBtn.tsx b/src/components/common/button/settingBtn/settingBtnStyle.ts similarity index 58% rename from src/components/common/button/SettingXBtn.tsx rename to src/components/common/button/settingBtn/settingBtnStyle.ts index c667d4f2..85db0544 100644 --- a/src/components/common/button/SettingXBtn.tsx +++ b/src/components/common/button/settingBtn/settingBtnStyle.ts @@ -1,19 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import Icons from '@/assets/svg/index'; - -function SettingXBtn() { - return ( - - - - ); -} - -export default SettingXBtn; - -const SettingXBtnCss = css` +export const SettingCss = css` display: flex; align-items: center; justify-content: center; @@ -23,8 +11,8 @@ const SettingXBtnCss = css` border-radius: 8px; `; -const SettingXBtnLayout = styled.button` - ${SettingXBtnCss} +export const SettingLayout = styled.button` + ${SettingCss} background-color: ${({ theme }) => theme.palette.Blue.Blue1}; &:hover { @@ -39,8 +27,3 @@ const SettingXBtnLayout = styled.button` } } `; - -const StyledSettingX = styled(Icons.SettingX)` - width: 1.6rem; - height: 1.6rem; -`; diff --git a/src/components/common/button/StatusDoneBtn.tsx b/src/components/common/button/statusBtn/StatusDoneBtn.tsx similarity index 88% rename from src/components/common/button/StatusDoneBtn.tsx rename to src/components/common/button/statusBtn/StatusDoneBtn.tsx index 59d7d39d..ada765f8 100644 --- a/src/components/common/button/StatusDoneBtn.tsx +++ b/src/components/common/button/statusBtn/StatusDoneBtn.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; -import SettingCheck4 from './SettingCheck4Btn'; - +import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; import TextBtn from '@/components/common/button/textBtn/TextBtn'; function StatusDoneBtn() { diff --git a/src/components/common/button/StatusInProgressBtn.tsx b/src/components/common/button/statusBtn/StatusInProgressBtn.tsx similarity index 100% rename from src/components/common/button/StatusInProgressBtn.tsx rename to src/components/common/button/statusBtn/StatusInProgressBtn.tsx diff --git a/src/components/common/button/StatusStagingBtn.tsx b/src/components/common/button/statusBtn/StatusStagingBtn.tsx similarity index 87% rename from src/components/common/button/StatusStagingBtn.tsx rename to src/components/common/button/statusBtn/StatusStagingBtn.tsx index eb9f222d..2b4a8c26 100644 --- a/src/components/common/button/StatusStagingBtn.tsx +++ b/src/components/common/button/statusBtn/StatusStagingBtn.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import Check1Btn from '@/components/common/button/Check1Btn'; -import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn'; +import SettingDeleteBtn from '@/components/common/button/settingBtn/SettingDeleteBtn'; function StatusStagingBtn() { return ( diff --git a/src/components/common/button/StatusTodoBtn.tsx b/src/components/common/button/statusBtn/StatusTodoBtn.tsx similarity index 87% rename from src/components/common/button/StatusTodoBtn.tsx rename to src/components/common/button/statusBtn/StatusTodoBtn.tsx index bdfdd374..63de3e2b 100644 --- a/src/components/common/button/StatusTodoBtn.tsx +++ b/src/components/common/button/statusBtn/StatusTodoBtn.tsx @@ -1,8 +1,7 @@ import styled from '@emotion/styled'; -import SettingCheck4 from './SettingCheck4Btn'; - import Check1Btn from '@/components/common/button/Check1Btn'; +import SettingCheck4 from '@/components/common/button/settingBtn/SettingCheck4Btn'; function StatusTodoBtn() { return ( diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx index 193ff571..f3da9d9e 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Setting.tsx @@ -5,15 +5,15 @@ 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 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/StatusDoneBtn'; -import StatusInProgressBtn from '@/components/common/button/StatusInProgressBtn'; -import StatusStagingBtn from '@/components/common/button/StatusStagingBtn'; -import StatusTodoBtn from '@/components/common/button/StatusTodoBtn'; +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'; From 26e6a8b5ab4897ef3de2091ac24d9706cf9d89c2 Mon Sep 17 00:00:00 2001 From: JeeminYi Date: Mon, 8 Jul 2024 23:22:45 +0900 Subject: [PATCH 16/16] =?UTF-8?q?fix:=20pressed=20=EC=8B=9C=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=AC=EB=9F=AC=20=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/TodayPlusBtn.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx index b4e635b3..7291d73b 100644 --- a/src/components/common/button/TodayPlusBtn.tsx +++ b/src/components/common/button/TodayPlusBtn.tsx @@ -27,6 +27,8 @@ const TodayPlusBtnCss = css` const TodayPlusBtnLayout = styled.button` ${TodayPlusBtnCss} + color: ${({ theme }) => theme.palette.Primary}; + background-color: ${({ theme }) => theme.palette.Blue.Blue2}; path { @@ -38,6 +40,8 @@ const TodayPlusBtnLayout = styled.button` } &:active { + color: ${({ theme }) => theme.palette.Grey.White}; + background-color: ${({ theme }) => theme.palette.Primary}; path { @@ -47,14 +51,9 @@ const TodayPlusBtnLayout = styled.button` `; const Text = styled.p` - color: ${({ theme }) => theme.palette.Primary}; text-align: center; ${({ theme }) => theme.fontTheme.CAPTION_02}; - - &:active { - color: ${({ theme }) => theme.palette.Grey.White}; - } `; const StyledPlusArrow = styled(Icons.PlusArrow)`