chore: 디버그 패널 > 토큰 복사 기능 추가 및 스타일 개선 (#1019)

* chore: 토큰 복사 버튼 추가 * chore: 디버그 패널 스타일 개선 * refactor: 스타일 중복 제거 * chore: 디버그 패널 스타일 개선
sopt-makers · Oct 6, 2023 · c744e72 · c744e72
1 parent 51e5c4f
commit c744e72
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 36 deletions.
diff --git 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,34 +18,38 @@ const Panel: FC<PanelProps> = ({ title, children }) => {
   const [open, setOpen] = useState(true);
 
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
+    <Collapsible.Root open={open} onOpenChange={setOpen} css={rootStyle}>
       <Collapsible.Trigger css={disclosureButtonStyle}>
-        <span>{title}</span>
+        <Title>{title}</Title>
         <span>{open ? ARROW_UP_SYMBOL : ARROW_DOWN_SYMBOL}</span>
       </Collapsible.Trigger>
       <Collapsible.Content css={collapsibleContentStyle}>{children}</Collapsible.Content>
     </Collapsible.Root>
   );
 };
 
+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
@@ -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
@@ -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 (
     <Panel title='저장된 액세스 토큰'>
       {editState.type === 'editing' ? (
-        <>
+        <PanelContent>
           <StyledTextArea
             value={editState.value}
             onChange={(e) => dispatchEdit({ type: 'change', value: e.target.value })}
             error={isEditError}
           />
           <ActionBox>
-            <Button
+            <ActionButton
               variant='primary'
               onClick={() => dispatchEdit({ type: 'end' })}
               css={{ backgroundColor: colors.gray100, marginLeft: '5px' }}
             >
               취소
-            </Button>
-            <Button variant='primary' onClick={applyEdit}>
+            </ActionButton>
+            <ActionButton variant='primary' onClick={applyEdit}>
               확인
-            </Button>
+            </ActionButton>
           </ActionBox>
-        </>
+        </PanelContent>
       ) : (
-        <>
+        <PanelContent>
           <StyledTextArea value={accessToken ?? ''} disabled />
           <ActionBox>
-            <Button variant='primary' onClick={() => dispatchEdit({ type: 'change', value: accessToken ?? '' })}>
+            <ActionButton variant='primary' onClick={handleClickCopyButton}>
+              복사
+            </ActionButton>
+            <ActionButton variant='primary' onClick={() => dispatchEdit({ type: 'change', value: accessToken ?? '' })}>
               변경
-            </Button>
+            </ActionButton>
           </ActionBox>
-          <InSectionTitle>디코드된 토큰 정보</InSectionTitle>
-          <StyledTextArea value={JSON.stringify(decodedToken, null, 2)} disabled />
-        </>
+          <div>
+            <InSectionTitle>디코드된 토큰 정보</InSectionTitle>
+            <StyledTextArea value={JSON.stringify(decodedToken, null, 2)} disabled />
+          </div>
+        </PanelContent>
       )}
     </Panel>
   );
@@ -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
@@ -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 (
     <Panel title='주요 페이지 이동'>
       <PanelContent>
-        <Link href={playgroundLink.memberList()} passHref legacyBehavior>
-          <Button variant='primary'>홈</Button>
-        </Link>
-        <Link href={playgroundLink.login()} passHref legacyBehavior>
-          <Button variant='primary'>로그인</Button>
-        </Link>
+        <ActionBox>
+          <Link href={playgroundLink.memberList()} passHref legacyBehavior>
+            <ActionButton variant='primary'>홈</ActionButton>
+          </Link>
+          <Link href={playgroundLink.login()} passHref legacyBehavior>
+            <ActionButton variant='primary'>로그인</ActionButton>
+          </Link>
+        </ActionBox>
       </PanelContent>
     </Panel>
   );
@@ -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
@@ -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}
+`;