From 9b0d430bab17b9386350dd046774743d1b427cda Mon Sep 17 00:00:00 2001 From: from1to2 Date: Fri, 27 Oct 2023 16:21:37 +0900 Subject: [PATCH 1/6] style: whiteselectorButton --- .../common/WhiteSelectorButton/index.tsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/common/WhiteSelectorButton/index.tsx diff --git a/src/components/common/WhiteSelectorButton/index.tsx b/src/components/common/WhiteSelectorButton/index.tsx new file mode 100644 index 00000000..f5fbef62 --- /dev/null +++ b/src/components/common/WhiteSelectorButton/index.tsx @@ -0,0 +1,61 @@ +import styled from '@emotion/styled' +import { useState } from 'react' + +import { palette } from '@/styles/palette' + +type ToggleButtonProps = { + buttonName: string + selectedButtonColor: string + defaultButtonColor?: string + onClick?: () => void +} + +type StyledButtonProps = { + backgroundColor: string +} + +const WhiteSelectorButton = ({ + buttonName, + selectedButtonColor, + defaultButtonColor = palette.TERTIARY, + onClick, +}: ToggleButtonProps) => { + const [backgroundColor, setBackgroundColor] = useState(defaultButtonColor) + + const handleButtonClick = () => { + setBackgroundColor((prevColor) => + prevColor === defaultButtonColor ? selectedButtonColor : defaultButtonColor, + ) + if (onClick) onClick() + } + + return ( + + {buttonName} + + ) +} + +const StyledButton = styled.button` + margin: 0 4px; + height: 36px; + padding: 10px 15px 10px 15px; + font-size: 12px; + cursor: pointer; + border: none; + border-radius: 10px; + background-color: ${(props) => props.backgroundColor}; + transition: background-color 0.3s; + &:hover { + opacity: 0.9; + } + &:focus { + outline: none; + } + color: ${palette.WHITE}; // 텍스트의 기본 색상을 검은색으로 설정 + display: inline-block; // 버튼의 크기를 내용물의 크기에 맞게 조절 + vertical-align: middle; // 버튼의 텍스트를 버튼의 중앙에 위치시킴 + line-height: 1; // 텍스트 높이를 폰트 크기에 맞게 조절 +` + +export default WhiteSelectorButton From a9e49d321a05cf40936cef4b9c54b174a6f9cbd3 Mon Sep 17 00:00:00 2001 From: from1to2 Date: Fri, 27 Oct 2023 16:24:48 +0900 Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=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/WhiteSelectorButton/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/WhiteSelectorButton/index.tsx b/src/components/common/WhiteSelectorButton/index.tsx index f5fbef62..09c2a57d 100644 --- a/src/components/common/WhiteSelectorButton/index.tsx +++ b/src/components/common/WhiteSelectorButton/index.tsx @@ -52,10 +52,10 @@ const StyledButton = styled.button` &:focus { outline: none; } - color: ${palette.WHITE}; // 텍스트의 기본 색상을 검은색으로 설정 - display: inline-block; // 버튼의 크기를 내용물의 크기에 맞게 조절 - vertical-align: middle; // 버튼의 텍스트를 버튼의 중앙에 위치시킴 - line-height: 1; // 텍스트 높이를 폰트 크기에 맞게 조절 + color: ${palette.WHITE}; + display: inline-block; + vertical-align: middle; + line-height: 1; ` export default WhiteSelectorButton From 95c0ca3ea862fc8dd87ccaa90617a6e78644177d Mon Sep 17 00:00:00 2001 From: from1to2 Date: Fri, 27 Oct 2023 16:44:58 +0900 Subject: [PATCH 3/6] style: darkselectorbutton --- .../common/DarkSelectorButton/index.tsx | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/components/common/DarkSelectorButton/index.tsx diff --git a/src/components/common/DarkSelectorButton/index.tsx b/src/components/common/DarkSelectorButton/index.tsx new file mode 100644 index 00000000..f0488f86 --- /dev/null +++ b/src/components/common/DarkSelectorButton/index.tsx @@ -0,0 +1,75 @@ +import styled from '@emotion/styled' +import { useState } from 'react' + +import { palette } from '@/styles/palette' + +type ToggleButtonProps = { + buttonName: string + selectedButtonColor: string + defaultButtonColor?: string + selectedTextColor: string + onClick?: () => void +} + +type StyledButtonProps = { + backgroundColor: string + textColor: string +} + +const DarkSelectorButton = ({ + buttonName, + selectedButtonColor, + defaultButtonColor = palette.WHITE, + selectedTextColor = palette.SECONDARY, + onClick, +}: ToggleButtonProps) => { + const [backgroundColor, setBackgroundColor] = useState(defaultButtonColor) + const [textColor, setTextColor] = useState(palette.SECONDARY) // 텍스트 색상에 대한 state + + const handleButtonClick = () => { + setBackgroundColor((prevColor) => { + if (prevColor === defaultButtonColor) { + setTextColor(selectedTextColor) + return selectedButtonColor + } else { + setTextColor(palette.SECONDARY) + return defaultButtonColor + } + }) + if (onClick) onClick() + } + + return ( + + {buttonName} + + ) +} + +const StyledButton = styled.button` + margin: 0 4px; + height: 36px; + padding: 10px 15px 10px 15px; + font-size: 12px; + cursor: pointer; + border: none; + border-radius: 10px; + background-color: ${(props) => props.backgroundColor}; + transition: background-color 0.3s; + &:hover { + opacity: 0.9; + } + &:focus { + outline: none; + } + color: ${(props) => props.textColor}; + display: inline-block; + vertical-align: middle; + line-height: 1; +` + +export default DarkSelectorButton From 89a1c4e4c47c05f70ff8656509749d0a60acb88a Mon Sep 17 00:00:00 2001 From: Changuk Woo <43228743+wukdddang@users.noreply.github.com> Date: Fri, 27 Oct 2023 18:46:11 +0900 Subject: [PATCH 4/6] Update src/components/common/DarkSelectorButton/index.tsx --- src/components/common/DarkSelectorButton/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/common/DarkSelectorButton/index.tsx b/src/components/common/DarkSelectorButton/index.tsx index f0488f86..c8342b27 100644 --- a/src/components/common/DarkSelectorButton/index.tsx +++ b/src/components/common/DarkSelectorButton/index.tsx @@ -70,6 +70,8 @@ const StyledButton = styled.button` display: inline-block; vertical-align: middle; line-height: 1; + font-weight: 600 + letter-spacing: -1px; ` export default DarkSelectorButton From ed76fd7fcbbb6ee44d6ea1782e3a2c4cfe881649 Mon Sep 17 00:00:00 2001 From: Changuk Woo <43228743+wukdddang@users.noreply.github.com> Date: Fri, 27 Oct 2023 18:46:22 +0900 Subject: [PATCH 5/6] Update src/components/common/WhiteSelectorButton/index.tsx --- src/components/common/WhiteSelectorButton/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/common/WhiteSelectorButton/index.tsx b/src/components/common/WhiteSelectorButton/index.tsx index 09c2a57d..0716e531 100644 --- a/src/components/common/WhiteSelectorButton/index.tsx +++ b/src/components/common/WhiteSelectorButton/index.tsx @@ -56,6 +56,8 @@ const StyledButton = styled.button` display: inline-block; vertical-align: middle; line-height: 1; + letter-spacing: -1px; + font-weight: 600 ` export default WhiteSelectorButton From a4b06114a1307a103d5aeea2a32fd0f8fe9ae35c Mon Sep 17 00:00:00 2001 From: wukddang <43228743+funkyblues@users.noreply.github.com> Date: Fri, 27 Oct 2023 21:56:29 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20font-weight=20=EC=98=A4=ED=83=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/DarkSelectorButton/index.tsx | 2 +- src/components/common/WhiteSelectorButton/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/DarkSelectorButton/index.tsx b/src/components/common/DarkSelectorButton/index.tsx index c8342b27..df56355e 100644 --- a/src/components/common/DarkSelectorButton/index.tsx +++ b/src/components/common/DarkSelectorButton/index.tsx @@ -70,7 +70,7 @@ const StyledButton = styled.button` display: inline-block; vertical-align: middle; line-height: 1; - font-weight: 600 + font-weight: 600; letter-spacing: -1px; ` diff --git a/src/components/common/WhiteSelectorButton/index.tsx b/src/components/common/WhiteSelectorButton/index.tsx index 0716e531..4d02fd04 100644 --- a/src/components/common/WhiteSelectorButton/index.tsx +++ b/src/components/common/WhiteSelectorButton/index.tsx @@ -57,7 +57,7 @@ const StyledButton = styled.button` vertical-align: middle; line-height: 1; letter-spacing: -1px; - font-weight: 600 + font-weight: 600; ` export default WhiteSelectorButton