From 6299079c9bea80ff34759dc41435b8d57f48d89b Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:15:32 +0900
Subject: [PATCH 1/8] =?UTF-8?q?Refactor:=20Primary40=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20=EC=82=AC?=
=?UTF-8?q?=EC=9A=A9=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=94=94=EC=9E=90?=
=?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Buttons/ButtonStyle.jsx | 13 ++++++++-----
src/components/common/ModalWindow.jsx | 13 ++-----------
2 files changed, 10 insertions(+), 16 deletions(-)
diff --git a/src/components/common/Buttons/ButtonStyle.jsx b/src/components/common/Buttons/ButtonStyle.jsx
index 4dad6de..e0b3e1e 100644
--- a/src/components/common/Buttons/ButtonStyle.jsx
+++ b/src/components/common/Buttons/ButtonStyle.jsx
@@ -10,7 +10,8 @@ export const ButtonCommon = styled.button`
`;
const PrimaryBtn = styled(ButtonCommon)`
- padding: 1.4rem 2.4rem;
+ background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
+ color: var(--white);
// active 여부
&:hover:enabled {
@@ -30,9 +31,6 @@ const PrimaryBtn = styled(ButtonCommon)`
export const Primary56 = styled(PrimaryBtn)`
padding: 1.4rem 2.4rem;
border-radius: 1.2rem;
- background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
- /* Font/18 Bold */
- color: var(--white);
/* Font/18 Bold */
font-family: Pretendard;
@@ -44,9 +42,14 @@ export const Primary56 = styled(PrimaryBtn)`
`;
export const Primary40 = styled(PrimaryBtn)`
+ padding: 0.7rem 1.6rem;
border-radius: 0.6rem;
- background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
/* Font/16 Regular */
+ font-family: Pretendard;
+ font-size: 1.6rem;
+ font-style: normal;
+ line-height: 2.6rem; /* 162.5% */
+ letter-spacing: -0.16px;
`;
export const Secondary = styled(ButtonCommon)`
diff --git a/src/components/common/ModalWindow.jsx b/src/components/common/ModalWindow.jsx
index de7b1be..37e817f 100644
--- a/src/components/common/ModalWindow.jsx
+++ b/src/components/common/ModalWindow.jsx
@@ -1,5 +1,6 @@
import { useState } from 'react';
import styled from 'styled-components';
+import { Primary40 } from './Buttons/ButtonStyle';
// import { useKakaoShare } from './useKakaoShare';
const ModalBox = styled.div`
@@ -25,18 +26,8 @@ const ModalBody = styled.div`
transform: translate(-50%, -30%);
`;
-const CloseBtn = styled.button`
- display: flex;
+const CloseBtn = styled(Primary40)`
width: 120px;
- padding: 7px 16px;
- align-items: center;
- justify-content: center;
- border-radius: 6px;
- background: var(--purple600);
- color: #fff;
- font-size: 16px;
- line-height: 26px; /* 162.5% */
- letter-spacing: -0.16px;
position: absolute;
bottom: 40px;
`;
From 0d0ceb96a50c7b70270b977cbf44c0bfbc0a753b Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:16:44 +0900
Subject: [PATCH 2/8] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
=?UTF-8?q?=ED=95=9C=20console.log=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/modal/CardModal.jsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/modal/CardModal.jsx b/src/components/modal/CardModal.jsx
index 067dc45..de85cff 100644
--- a/src/components/modal/CardModal.jsx
+++ b/src/components/modal/CardModal.jsx
@@ -26,7 +26,6 @@ function CardModal({
}) {
const location = useLocation();
const isEditRoute = location.pathname.includes('/edit');
- console.log(id, isEditRoute);
const createdDays = new Date(cardCreatedAt);
const fontClass = {
From 969f47d2d02d2b4b253113cd5844625e45ff79bb Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:19:10 +0900
Subject: [PATCH 3/8] =?UTF-8?q?Refactor:=20ButtonStyle=20=EC=9C=84?=
=?UTF-8?q?=EC=B9=98=20=EC=9D=B4=EB=8F=99(->=20styles)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Buttons/BackToPostButton.jsx | 2 +-
src/components/common/Buttons/DeleteRecipientButton.js | 2 +-
src/components/common/Buttons/EditButton.js | 2 +-
src/components/common/Buttons/EditMessageButton.js | 2 +-
src/components/common/Buttons/PostButton.js | 2 +-
src/components/common/Buttons/PutPatchButton.jsx | 2 +-
src/components/common/Buttons/movePageButton.jsx | 2 +-
src/components/common/ModalWindow.jsx | 2 +-
src/{components/common/Buttons => styles}/ButtonStyle.jsx | 0
9 files changed, 8 insertions(+), 8 deletions(-)
rename src/{components/common/Buttons => styles}/ButtonStyle.jsx (100%)
diff --git a/src/components/common/Buttons/BackToPostButton.jsx b/src/components/common/Buttons/BackToPostButton.jsx
index 1481dfb..572c81a 100644
--- a/src/components/common/Buttons/BackToPostButton.jsx
+++ b/src/components/common/Buttons/BackToPostButton.jsx
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function BackToPostButton({ moveLink, btnName }) {
const navigate = useNavigate();
diff --git a/src/components/common/Buttons/DeleteRecipientButton.js b/src/components/common/Buttons/DeleteRecipientButton.js
index 40cf38c..e7c86d4 100644
--- a/src/components/common/Buttons/DeleteRecipientButton.js
+++ b/src/components/common/Buttons/DeleteRecipientButton.js
@@ -1,7 +1,7 @@
import styled from 'styled-components';
import { useNavigate, useParams } from 'react-router-dom';
import { deleteRecipient } from '../../../api/DeleteApi';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function DeleteRecipientButton() {
const navigate = useNavigate();
diff --git a/src/components/common/Buttons/EditButton.js b/src/components/common/Buttons/EditButton.js
index 62a2d03..7413936 100644
--- a/src/components/common/Buttons/EditButton.js
+++ b/src/components/common/Buttons/EditButton.js
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { useNavigate, useParams } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function EditButton() {
const navigate = useNavigate();
diff --git a/src/components/common/Buttons/EditMessageButton.js b/src/components/common/Buttons/EditMessageButton.js
index c25078e..3faa268 100644
--- a/src/components/common/Buttons/EditMessageButton.js
+++ b/src/components/common/Buttons/EditMessageButton.js
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { useNavigate, useParams } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function EditMessageButton({ messageID }) {
const navigate = useNavigate();
diff --git a/src/components/common/Buttons/PostButton.js b/src/components/common/Buttons/PostButton.js
index bf5212a..6dcab3a 100644
--- a/src/components/common/Buttons/PostButton.js
+++ b/src/components/common/Buttons/PostButton.js
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function PostButton({ onSubmit, btnDisable }) {
const navigate = useNavigate();
diff --git a/src/components/common/Buttons/PutPatchButton.jsx b/src/components/common/Buttons/PutPatchButton.jsx
index 5c433bd..9ca5c11 100644
--- a/src/components/common/Buttons/PutPatchButton.jsx
+++ b/src/components/common/Buttons/PutPatchButton.jsx
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function PutPatchButton({ onSubmit, btnDisable }) {
const navigate = useNavigate();
diff --git a/src/components/common/Buttons/movePageButton.jsx b/src/components/common/Buttons/movePageButton.jsx
index a9f7efc..ab5b7df 100644
--- a/src/components/common/Buttons/movePageButton.jsx
+++ b/src/components/common/Buttons/movePageButton.jsx
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
-import { Primary56 } from './ButtonStyle';
+import { Primary56 } from '../../../styles/ButtonStyle';
function MovePageButton({ moveLink, btnName }) {
const navigate = useNavigate();
diff --git a/src/components/common/ModalWindow.jsx b/src/components/common/ModalWindow.jsx
index 37e817f..df29e43 100644
--- a/src/components/common/ModalWindow.jsx
+++ b/src/components/common/ModalWindow.jsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
import styled from 'styled-components';
-import { Primary40 } from './Buttons/ButtonStyle';
+import { Primary40 } from '../../styles/ButtonStyle';
// import { useKakaoShare } from './useKakaoShare';
const ModalBox = styled.div`
diff --git a/src/components/common/Buttons/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx
similarity index 100%
rename from src/components/common/Buttons/ButtonStyle.jsx
rename to src/styles/ButtonStyle.jsx
From 0d6a62319559e013059f99547f9f1686e3317c21 Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:41:30 +0900
Subject: [PATCH 4/8] =?UTF-8?q?Refactor:=20Outlined36=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B4=80?=
=?UTF-8?q?=EB=A0=A8=20=EB=B2=84=ED=8A=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/post/SubHeader.jsx | 14 +------
.../post/subheader/EmojiDropDown.jsx | 21 +---------
src/styles/ButtonStyle.jsx | 40 ++++++++++++++++---
3 files changed, 39 insertions(+), 36 deletions(-)
diff --git a/src/components/post/SubHeader.jsx b/src/components/post/SubHeader.jsx
index 4438fc5..4ae3392 100644
--- a/src/components/post/SubHeader.jsx
+++ b/src/components/post/SubHeader.jsx
@@ -6,6 +6,7 @@ import ShareToggle from '../modal/ShareToggle';
import KakaoModal from '../modal/KakaoModal';
import ModalPortal from '../modal/ModalPortal';
import Toast from '../common/Toast';
+import { Outlined36 } from '../../styles/ButtonStyle';
const Text = css`
font-family: Pretendard;
@@ -18,15 +19,6 @@ const FlexCenter = css`
align-items: center;
`;
-const Button = css`
- ${FlexCenter}
- padding: 6px 16px;
- border-radius: 6px;
- border: 1px solid var(--gray300);
- background: var(--white);
- gap: 10px;
-`;
-
const SubHeaderWrapper = styled.div`
width: 100%;
background-color: var(--white);
@@ -144,9 +136,7 @@ const SplitBarVertical2 = styled(SplitBarVertical)`
margin: 0 13px;
`;
-const ShareButton = styled.button`
- ${Button}
-
+const ShareButton = styled(Outlined36)`
@media (max-width: 470px) {
padding: 6px 8px;
}
diff --git a/src/components/post/subheader/EmojiDropDown.jsx b/src/components/post/subheader/EmojiDropDown.jsx
index ec8204f..6392e18 100644
--- a/src/components/post/subheader/EmojiDropDown.jsx
+++ b/src/components/post/subheader/EmojiDropDown.jsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { submitEmojiPost } from '../../../api/PostApi';
import { getEmojiData } from '../../../api/GetApi';
+import { Outlined36 } from '../../../styles/ButtonStyle';
const FlexCenter = css`
display: flex;
@@ -11,15 +12,6 @@ const FlexCenter = css`
align-items: center;
`;
-const Button = css`
- ${FlexCenter}
- padding: 6px 16px;
- border-radius: 6px;
- border: 1px solid var(--gray300);
- background: var(--white);
- gap: 10px;
-`;
-
const EmojiGroup = styled.div`
display: flex;
gap: 8px;
@@ -93,17 +85,8 @@ const EmojiGroupInDropDown = styled(EmojiGroup)`
grid-template-columns: 63px 63px 63px 63px;
`;
-const EmojiAddButton = styled.div`
- ${Button}
+const EmojiAddButton = styled(Outlined36)`
position: relative;
- cursor: pointer;
-
- color: var(--gray-900, #181818);
- font-family: Pretendard;
- font-size: 16px;
- font-style: normal;
- font-weight: 500;
- line-height: 24px;
@media (max-width: 470px) {
span {
diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx
index e0b3e1e..fdb7aab 100644
--- a/src/styles/ButtonStyle.jsx
+++ b/src/styles/ButtonStyle.jsx
@@ -5,7 +5,7 @@ export const ButtonCommon = styled.button`
justify-content: center;
text-align: center;
gap: 1rem;
- background: var(--${({ disabled }) => (disabled ? 'gray300' : 'purple600')});
+
cursor: ${({ disabled }) => disabled && 'not-allowed'};
`;
@@ -54,16 +54,46 @@ export const Primary40 = styled(PrimaryBtn)`
export const Secondary = styled(ButtonCommon)`
padding: 0.7rem 1.6rem;
+ border-radius: 0.6rem;
+ color: var(--${({ disabled }) => (disabled ? 'white' : 'purple700')});
+ border: 1px solid var(--purple600);
+
+ &:hover:enabled {
+ background: var(--purple700);
+ }
+
+ &:active:enabled {
+ background: var(--purple800);
+ }
+
+ &:focus:enabled {
+ /* border: 2px solid var(--purple900); */
+ background: var(--purple800);
+ }
+`;
- &:hover {
- background: var(--gray300);
+export const Outlined36 = styled(ButtonCommon)`
+ padding: 0.6rem 1.6rem;
+ border-radius: 0.6rem;
+ background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')});
+ color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')});
+ border: 1px solid var(--gray300);
+ /* Font/16 Regular */
+ font-family: Pretendard;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px;
+
+ &:hover:enabled {
+ background: var(--gray100);
}
- &:active {
+ &:active:enabled {
background: var(--gray100);
}
- &:focus {
+ &:focus:enabled {
border: 1px solid var(--gray500);
}
`;
From ba549e8669cca3850c961e42cb3d0342aa3833e5 Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 16:07:00 +0900
Subject: [PATCH 5/8] =?UTF-8?q?Feat:=20Card=20=EB=A7=88=EC=9A=B0=EC=8A=A4?=
=?UTF-8?q?=20hover=20=EC=8B=9C,=20=EC=9C=84=EB=A1=9C=20=EC=98=AC=EB=9D=BC?=
=?UTF-8?q?=EA=B0=80=EB=8A=94=20animation=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/post/Card.jsx | 4 ++++
src/pages/PostId.jsx | 4 ++++
2 files changed, 8 insertions(+)
diff --git a/src/components/post/Card.jsx b/src/components/post/Card.jsx
index 37dbde5..63d2b17 100644
--- a/src/components/post/Card.jsx
+++ b/src/components/post/Card.jsx
@@ -27,6 +27,10 @@ export const CardContentWrapper = styled.div`
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
cursor: pointer;
+ transition: all 0.5s ease-out;
+ &:hover {
+ transform: translateY(-1.2rem);
+ }
@media (max-width: 1023px) {
width: 50%;
diff --git a/src/pages/PostId.jsx b/src/pages/PostId.jsx
index b57f747..965798e 100644
--- a/src/pages/PostId.jsx
+++ b/src/pages/PostId.jsx
@@ -70,6 +70,10 @@ export const CardWrapper = styled.div`
const CardAdd = styled(CardContentWrapper)`
justify-content: center;
position: relative;
+ transition: all 0.5s ease-out;
+ &:hover {
+ transform: translateY(-1.2rem);
+ }
`;
// eslint-disable-next-line
const PlusIcon = styled.div`
From 167a12ad7930a3c67d3d747abb7392bf75164bc2 Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 16:20:36 +0900
Subject: [PATCH 6/8] =?UTF-8?q?Refactor:=20Outlined40=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B4=80?=
=?UTF-8?q?=EB=A0=A8=20=EB=B2=84=ED=8A=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Header.js | 21 ++++-----------------
src/styles/ButtonStyle.jsx | 26 ++++++++++++++++++++++++++
2 files changed, 30 insertions(+), 17 deletions(-)
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
index 309bd53..88d709f 100644
--- a/src/components/common/Header.js
+++ b/src/components/common/Header.js
@@ -1,5 +1,6 @@
import styled from 'styled-components';
import { Link } from 'react-router-dom';
+import { Outlined40 } from '../../styles/ButtonStyle';
const StyledNav = styled.nav`
width: 100%;
@@ -25,20 +26,8 @@ const StyledHeader = styled.div`
}
`;
-const ButtonContainer = styled.div`
- button {
- height: 40px;
- border-radius: 6px;
- padding: 8px 16px;
- border: 1px solid #ccc;
- background: #fff;
- cursor: pointer;
- font-size: 16px;
- line-height: 26px;
- letter-spacing: -0.16px;
- text-align: center;
- }
-`;
+const Button = styled(Outlined40)``;
+
const LogoURL = styled.a`
display: flex;
padding: 6px 0;
@@ -65,9 +54,7 @@ function Header({ showButton }) {
{showButton && (
-
-
-
+
)}
diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx
index fdb7aab..5c5cab7 100644
--- a/src/styles/ButtonStyle.jsx
+++ b/src/styles/ButtonStyle.jsx
@@ -97,3 +97,29 @@ export const Outlined36 = styled(ButtonCommon)`
border: 1px solid var(--gray500);
}
`;
+
+export const Outlined40 = styled(ButtonCommon)`
+ padding: 0.8rem 1.6rem;
+ border-radius: 0.6rem;
+ background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')});
+ color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')});
+ border: 1px solid var(--gray300);
+ /* Font/16 Regular */
+ font-family: Pretendard;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px;
+
+ &:hover:enabled {
+ background: var(--gray100);
+ }
+
+ &:active:enabled {
+ background: var(--gray100);
+ }
+
+ &:focus:enabled {
+ border: 1px solid var(--gray500);
+ }
+`;
From b4fbc688d7f76a51f39590e76998f567cd6c5a7a Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 16:25:02 +0900
Subject: [PATCH 7/8] =?UTF-8?q?Feat:=20/post=20=EB=82=B4=20color,=20image?=
=?UTF-8?q?=20hover=20=EC=8B=9C,=20animation=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/post/postmake/ColorSelection.js | 5 ++++-
src/components/post/postmake/ImageSelection.js | 5 ++++-
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/components/post/postmake/ColorSelection.js b/src/components/post/postmake/ColorSelection.js
index fb5cc7c..293a4f8 100644
--- a/src/components/post/postmake/ColorSelection.js
+++ b/src/components/post/postmake/ColorSelection.js
@@ -23,7 +23,10 @@ const ColorOption = styled.div`
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
cursor: pointer;
-
+ transition: all 0.4s ease-out;
+ &:hover {
+ transform: translateY(-1.2rem);
+ }
@media (max-width: 768px) {
width: 154px;
height: 154px;
diff --git a/src/components/post/postmake/ImageSelection.js b/src/components/post/postmake/ImageSelection.js
index f778dd0..992eac6 100644
--- a/src/components/post/postmake/ImageSelection.js
+++ b/src/components/post/postmake/ImageSelection.js
@@ -22,7 +22,10 @@ const ImageOption = styled.div`
height: 168px;
margin: 5px;
cursor: pointer;
-
+ transition: all 0.4s ease-out;
+ &:hover {
+ transform: translateY(-1.2rem);
+ }
@media (max-width: 768px) {
width: 154px;
height: 154px;
From cce6487d6fc8ebe9dd9b45dd3feed3d08bc29fb1 Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 16:33:21 +0900
Subject: [PATCH 8/8] =?UTF-8?q?Feat:=20Secondary=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9A=94?=
=?UTF-8?q?=EC=86=8C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20ToggleButton=20?=
=?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/post/postmake/ToggleButton.js | 3 ++-
src/styles/ButtonStyle.jsx | 11 +++--------
2 files changed, 5 insertions(+), 9 deletions(-)
diff --git a/src/components/post/postmake/ToggleButton.js b/src/components/post/postmake/ToggleButton.js
index d0b729e..65bcbad 100644
--- a/src/components/post/postmake/ToggleButton.js
+++ b/src/components/post/postmake/ToggleButton.js
@@ -1,4 +1,5 @@
import styled from 'styled-components';
+import { Secondary } from '../../../styles/ButtonStyle';
function ToggleButton({ state, handler, text1, text2 }) {
return state ? (
@@ -20,7 +21,7 @@ const SelectToggle = styled.div`
margin-top: 24px;
`;
-const BtnCommon = styled.button`
+const BtnCommon = styled(Secondary)`
display: flex;
width: 122px;
height: 40px;
diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx
index 5c5cab7..8f264ff 100644
--- a/src/styles/ButtonStyle.jsx
+++ b/src/styles/ButtonStyle.jsx
@@ -56,19 +56,14 @@ export const Secondary = styled(ButtonCommon)`
padding: 0.7rem 1.6rem;
border-radius: 0.6rem;
color: var(--${({ disabled }) => (disabled ? 'white' : 'purple700')});
- border: 1px solid var(--purple600);
&:hover:enabled {
- background: var(--purple700);
+ background: var(--purple100);
+ color: var(--purple700);
}
&:active:enabled {
- background: var(--purple800);
- }
-
- &:focus:enabled {
- /* border: 2px solid var(--purple900); */
- background: var(--purple800);
+ background: var(--purple100);
}
`;