From c744e72caebf8dbb24223d406a992de64aa8f4e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=82=A8=EC=A3=BC=EC=98=81=20=28Finn=29?= Date: Fri, 6 Oct 2023 09:30:39 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20=EB=94=94=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90=20>=20=ED=86=A0=ED=81=B0=20=EB=B3=B5?= =?UTF-8?q?=EC=82=AC=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0=20(#1019)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 토큰 복사 버튼 추가 * chore: 디버그 패널 스타일 개선 * refactor: 스타일 중복 제거 * chore: 디버그 패널 스타일 개선 --- src/components/debug/Panel.tsx | 21 ++++++-- src/components/debug/SideBar.tsx | 7 ++- .../debug/panels/AccessTokenPanel.tsx | 50 +++++++++++-------- .../debug/panels/NavigationPanel.tsx | 21 ++++---- src/components/debug/styles.ts | 25 ++++++++++ 5 files changed, 88 insertions(+), 36 deletions(-) create mode 100644 src/components/debug/styles.ts diff --git a/src/components/debug/Panel.tsx b/src/components/debug/Panel.tsx index 579eb1028..658e55119 100644 --- a/src/components/debug/Panel.tsx +++ b/src/components/debug/Panel.tsx @@ -1,8 +1,11 @@ import { css } from '@emotion/react'; +import styled from '@emotion/styled'; import * as Collapsible from '@radix-ui/react-collapsible'; import { colors } from '@sopt-makers/colors'; import { FC, ReactNode, useState } from 'react'; +import { textStyles } from '@/styles/typography'; + const ARROW_DOWN_SYMBOL = `\u25bc`; const ARROW_UP_SYMBOL = `\u25b2`; @@ -15,9 +18,9 @@ const Panel: FC = ({ title, children }) => { const [open, setOpen] = useState(true); return ( - + - {title} + {title} {open ? ARROW_UP_SYMBOL : ARROW_DOWN_SYMBOL} {children} @@ -25,24 +28,28 @@ const Panel: FC = ({ title, children }) => { ); }; +const rootStyle = css` + padding: 0 15px; +`; + const disclosureButtonStyle = css` display: flex; justify-content: space-between; - margin: 0 15px; + margin-bottom: 15px; border-radius: 5px; background-color: ${colors.blue50}; cursor: pointer; padding: 8px 16px; - width: calc(100% - 30px); + width: 100%; color: ${colors.gray20}; `; const collapsibleContentStyle = css` - margin: 8px 15px; padding: 5px 0 0; overflow: hidden; &[data-state='open'] { + padding: 0; animation: slide-down 200ms ease-out; } @@ -71,4 +78,8 @@ const collapsibleContentStyle = css` } `; +const Title = styled.div` + ${textStyles.SUIT_17_SB} +`; + export default Panel; diff --git a/src/components/debug/SideBar.tsx b/src/components/debug/SideBar.tsx index d2407f209..b3229c3f9 100644 --- a/src/components/debug/SideBar.tsx +++ b/src/components/debug/SideBar.tsx @@ -66,19 +66,22 @@ const StyledSidePanel = styled.div<{ isOpen: boolean }>` const Header = styled.div` display: flex; align-items: center; + margin-top: 3px; `; const HeaderTitle = styled.h2` flex-grow: 1; - margin-left: 10px; + margin-left: 15px; `; const Content = styled.div` + display: flex; + flex-direction: column; + gap: 15px; padding: 15px 0 0; `; const CloseButton = styled.button` - /* padding: 8px 10px; */ display: flex; align-items: center; justify-content: center; diff --git a/src/components/debug/panels/AccessTokenPanel.tsx b/src/components/debug/panels/AccessTokenPanel.tsx index b3331f5d4..27a890223 100644 --- a/src/components/debug/panels/AccessTokenPanel.tsx +++ b/src/components/debug/panels/AccessTokenPanel.tsx @@ -6,15 +6,19 @@ import { useRecoilState } from 'recoil'; import { accessTokenAtom } from '@/components/auth/states/accessTokenAtom'; import { safeDecodeAccessToken } from '@/components/auth/util/accessToken'; -import Button from '@/components/common/Button'; import TextArea from '@/components/common/TextArea'; +import useToast from '@/components/common/Toast/useToast'; import Panel from '@/components/debug/Panel'; +import { ActionBox, ActionButton, PanelContent } from '@/components/debug/styles'; +import { copyToClipboard } from '@/utils'; const AccessTokenPanel: FC = () => { const [accessToken, setAccessToken] = useRecoilState(accessTokenAtom); const [editState, dispatchEdit] = useReducer(reducer, { type: 'idle' }); + const toast = useToast(); + const applyEdit = () => { if (editState.type !== 'editing') { return; @@ -43,39 +47,51 @@ const AccessTokenPanel: FC = () => { return safeDecodeAccessToken(editState.value) === null; }, [editState]); + const handleClickCopyButton = () => { + if (!accessToken) { + return null; + } + copyToClipboard(accessToken, { onSuccess: () => toast.show({ message: '토큰이 복사되었습니다.' }) }); + }; + return ( {editState.type === 'editing' ? ( - <> + dispatchEdit({ type: 'change', value: e.target.value })} error={isEditError} /> - - + - + ) : ( - <> + - + - 디코드된 토큰 정보 - - +
+ 디코드된 토큰 정보 + +
+ )} ); @@ -94,13 +110,7 @@ const StyledTextArea = styled(TextArea)` : ''} `; -const ActionBox = styled.div` - display: flex; - flex-direction: row-reverse; - margin-top: 8px; -`; - -const InSectionTitle = styled.h3` +const InSectionTitle = styled.div` margin: 5px 0; `; diff --git a/src/components/debug/panels/NavigationPanel.tsx b/src/components/debug/panels/NavigationPanel.tsx index 392761cf1..e2d119e20 100644 --- a/src/components/debug/panels/NavigationPanel.tsx +++ b/src/components/debug/panels/NavigationPanel.tsx @@ -2,20 +2,22 @@ import styled from '@emotion/styled'; import Link from 'next/link'; import { FC } from 'react'; -import Button from '@/components/common/Button'; import Panel from '@/components/debug/Panel'; +import { ActionBox, ActionButton } from '@/components/debug/styles'; import { playgroundLink } from '@/constants/links'; const NavigationPanel: FC = () => { return ( - - - - - - + + + 홈 + + + 로그인 + + ); @@ -25,6 +27,7 @@ export default NavigationPanel; const PanelContent = styled.div` display: flex; - flex-wrap: wrap; - column-gap: 10px; + gap: 10px; + padding-bottom: 15px; + width: 100%; `; diff --git a/src/components/debug/styles.ts b/src/components/debug/styles.ts new file mode 100644 index 000000000..1e2404190 --- /dev/null +++ b/src/components/debug/styles.ts @@ -0,0 +1,25 @@ +import styled from '@emotion/styled'; + +import Button from '@/components/common/Button'; +import { textStyles } from '@/styles/typography'; + +export const PanelContent = styled.div` + display: flex; + flex-direction: column; + gap: 10px; + padding-bottom: 15px; + width: 100%; +`; + +export const ActionBox = styled.div` + display: flex; + gap: 10px; + width: 100%; +`; + +export const ActionButton = styled(Button)` + width: 100%; + line-height: 100%; + + ${textStyles.SUIT_16_M} +`;