From af6129f7c22c7fe61757c90beb323e89391063f0 Mon Sep 17 00:00:00 2001
From: Minhyeok Park <pmh_only@pmh.codes>
Date: Sun, 20 Aug 2023 20:20:37 +0900
Subject: [PATCH] fix: use modern layout

---
 src/components/InstanceTable/index.tsx |  22 ++++-
 src/components/TopNav/index.tsx        |   8 +-
 src/pages/Invites.tsx                  | 130 +++++++++++++------------
 3 files changed, 91 insertions(+), 69 deletions(-)

diff --git a/src/components/InstanceTable/index.tsx b/src/components/InstanceTable/index.tsx
index be6abb0..bffae39 100644
--- a/src/components/InstanceTable/index.tsx
+++ b/src/components/InstanceTable/index.tsx
@@ -1,4 +1,4 @@
-import { StatusIndicator, Table } from '@cloudscape-design/components'
+import { Alert, StatusIndicator, Table } from '@cloudscape-design/components'
 import { useReducer, type FC, useState } from 'react'
 import { type InstancesType } from '../../utils/interfaces'
 import Button from '@cloudscape-design/components/button'
@@ -9,6 +9,7 @@ import showStatus from '../../utils/showStatus'
 import { useRefreshNotifier } from '../RefreshNotifier'
 
 import style from './style.module.scss'
+import { toast } from 'react-hot-toast'
 
 interface Props {
   instances: InstancesType[]
@@ -19,6 +20,7 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
   const { refresh } = useRefreshNotifier()
   const [uuid, setUuid] = useState('')
   const [updateModalStatus, setUpdateModal] = useState(false)
+  const [isInviteLoading, setIsInviteLoading] = useState(false)
   const [isUpdateLoading, setIsUpdateLoading] = useState(false)
   const [event, dispatch] = useReducer(updateModalReducer, {
     category: '',
@@ -107,6 +109,9 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
   }
 
   async function inviteInstance (uuid: string): Promise<void> {
+    if (isInviteLoading) return
+    setIsInviteLoading(true)
+
     await axios('/api/invites', {
       method: 'POST',
       data: {
@@ -114,8 +119,19 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
       }
     }).then((res) => {
       void navigator.clipboard.writeText(`${window.location.origin}/invites/${res.data.body.id as string}`)
-      alert('초대링크를 복사했습니다.')
+      toast.custom((t) => (
+        <div style={{
+          opacity: t.visible ? 1 : 0,
+          transition: 'opacity 100ms ease-in-out'
+        }}>
+          <Alert type='success'>
+            초대 링크를 복사했습니다!
+          </Alert>
+        </div>
+      ))
     })
+
+    setIsInviteLoading(false)
   }
 
   return (
@@ -160,7 +176,7 @@ const InstanceTable: FC<Props> = ({ instances, isLoading }) => {
               cell: (item: InstancesType) => (
                 <div style={{ display: 'flex', flexWrap: 'nowrap', gap: '8px', lineBreak: 'auto' }}>
                   <Button className='greenButton ButtonList' variant="primary" onClick={() => { void inviteInstance(item.id) }}>
-                    초대링크 복사
+                    {isInviteLoading ? '생성 중...' : '초대링크 복사'}
                   </Button>
 
                   <Button className='blueButton ButtonList' variant="primary" onClick={() => { void restartInstance(item.id) }}>
diff --git a/src/components/TopNav/index.tsx b/src/components/TopNav/index.tsx
index a2dc667..3ca2dc4 100644
--- a/src/components/TopNav/index.tsx
+++ b/src/components/TopNav/index.tsx
@@ -72,9 +72,11 @@ const TopNav: FC = () => {
           개발자
         </a>
 
-        <button className={style.text} onClick={onLogout}>
-          로그아웃
-        </button>
+        {isSearchablePage && (
+          <button className={style.text} onClick={onLogout}>
+            로그아웃
+          </button>
+        )}
       </div>
     </motion.nav>
   )
diff --git a/src/pages/Invites.tsx b/src/pages/Invites.tsx
index d173b98..1397af0 100644
--- a/src/pages/Invites.tsx
+++ b/src/pages/Invites.tsx
@@ -7,6 +7,7 @@ import invitesReducer from '../modules/InvitesReducer'
 import { styled } from 'styled-components'
 import { Box, Container, Header, Link, SpaceBetween } from '@cloudscape-design/components'
 import ButtonCloudScape from '@cloudscape-design/components/button'
+import ContainerComponent from '../components/Container'
 
 const Invites: FC = () => {
   const [event, dispatch] = useReducer(invitesReducer, {
@@ -84,71 +85,74 @@ const Invites: FC = () => {
   }
 
   return (
-    <Body>
-      <Top>
-        <Title>인스턴스</Title>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <Button style={{ backgroundColor: '#3c8700', color: 'white' }} onClick={() => { void downloadKeypair() }}>키 페어 설치</Button>
-          <Button style={{ backgroundColor: '#007dbc', color: '#fff' }} onClick={() => { void restartInstance() }}>서버 재시작</Button>
-          <Button style={{ backgroundColor: '#df3312', color: '#fff' }} onClick={() => { void resetInstance() }}>초기화</Button>
-        </div>
-      </Top>
-      <Main>
-        <Left>
-          <Container
-            media={{
-              content: (
-                <img
-                  src="/assets/icon/ec2-1.png"
-                  alt="placeholder"
-                />
-              ),
-              position: 'side',
-              width: '33%'
-            }}
-          >
-            <SpaceBetween direction="vertical" size="s">
-              <SpaceBetween direction="vertical" size="xxs">
-                <Box variant="h2">
-                  <Link fontSize="heading-m" href="https://aws.gbsw.hs.kr">
-                    GBSW AWS 메뉴얼
-                  </Link>
-                </Box>
-                <Box variant="small">경북소프트웨어고등학교</Box>
-              </SpaceBetween>
-              <Box variant="p">
+    <ContainerComponent>
+      <Body>
+        <Top>
+          <Title>인스턴스</Title>
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <Button style={{ backgroundColor: '#3c8700', color: 'white' }} onClick={() => { void downloadKeypair() }}>키 페어 설치</Button>
+            <Button style={{ backgroundColor: '#007dbc', color: '#fff' }} onClick={() => { void restartInstance() }}>서버 재시작</Button>
+            <Button style={{ backgroundColor: '#df3312', color: '#fff' }} onClick={() => { void resetInstance() }}>초기화</Button>
+          </div>
+        </Top>
+        <Main>
+          <Left>
+            <Container
+              media={{
+                content: (
+                  <img
+                    src="/assets/icon/ec2-1.png"
+                    alt="placeholder"
+                  />
+                ),
+                position: 'side',
+                width: '33%'
+              }}
+            >
+              <SpaceBetween direction="vertical" size="s">
+                <SpaceBetween direction="vertical" size="xxs">
+                  <Box variant="h2">
+                    <Link fontSize="heading-m" href="https://aws.gbsw.hs.kr">
+                      GBSW AWS 메뉴얼
+                    </Link>
+                  </Box>
+                  <Box variant="small">경북소프트웨어고등학교</Box>
+                </SpaceBetween>
+                <Box variant="p">
 
-              </Box>
-              <SpaceBetween direction="vertical" size="xxs">
-                <Box fontWeight="bold">혹시 메뉴얼이 필요하신가요?</Box>
+                </Box>
+                <SpaceBetween direction="vertical" size="xxs">
+                  <Box fontWeight="bold">혹시 메뉴얼이 필요하신가요?</Box>
+                </SpaceBetween>
+                <ButtonCloudScape href="https://aws.gbsw.hs.kr" variant='primary' fullWidth>이동</ButtonCloudScape>
               </SpaceBetween>
-              <ButtonCloudScape href="https://aws.gbsw.hs.kr" variant='primary' fullWidth>이동</ButtonCloudScape>
-            </SpaceBetween>
-          </Container>
-        </Left>
-        <Right>
-          <Container
-            footer={
-              <React.Fragment>
-                {event.ip}
-                <br />
-                {event.ports}
-              </React.Fragment>
-            }
-            header={
-              <Header
-                variant="h2"
-                description={`${event.type as string} SSD ${event.storage as string}GB, ${event.owner as string}`}
-              >
-                {event.name}
-              </Header>
-            }
-          >
-            인스턴스 수정 관련은 관리자 문의
-          </Container>
-        </Right>
-      </Main>
-    </Body>
+            </Container>
+          </Left>
+          <Right>
+            <Container
+              footer={
+                <React.Fragment>
+                  IP 주소: {event.ip}<br />
+                  열린 포트: {event.ports}<br />
+                  유저 아이디: ubuntu
+                </React.Fragment>
+              }
+              header={
+                <Header
+                  variant="h2"
+                  description={`${event.type as string} SSD ${event.storage as string}GB, ${event.owner as string}`}
+                >
+                  {event.name}
+                </Header>
+              }
+            >
+              인스턴스 수정 관련은 관리자 문의
+            </Container>
+          </Right>
+        </Main>
+      </Body>
+
+    </ContainerComponent>
   )
 }