style :: deployDetail page publish

src/pages/Team/deploy/Container/Detail.tsx

@@ -0,0 +1,130 @@
+import styled from '@emotion/styled';
+import { theme } from '@/style/theme';
+import { Sidebar } from '@/components/common/sidebar';
+import { Tag } from '@/components/Team/Tag';
+
+export const TeamDeployContainerDetail = () => {
+  return (
+    <Wrapper>
+      <Sidebar />
+      <ContainerWrapper>
+        <Container>
+          <TitleContainer>
+            <TeamName>에일리언즈</TeamName>
+            <Title>
+              컨테이너 dms-backend
+              <Tag tag="활성" />
+            </Title>
+            <Describtion>
+              <div>team-aliens/DMS-Backend</div>
+              <div>https://prod-server.xquare.app/dms</div>
+              <div>마지막 배포: 2023-03-06 17:57</div>
+            </Describtion>
+          </TitleContainer>
+          <LogContainer>
+            <Label>로그</Label>
+            <Log>
+              <div></div>
+            </Log>
+          </LogContainer>
+        </Container>
+      </ContainerWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  margin-top: 80px;
+  width: 100%;
+  display: flex;
+`;
+
+const ContainerWrapper = styled.div`
+  width: 100%;
+  height: calc(100vh - 80px + 200px);
+  padding-left: 100px;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 1120px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+`;
+
+const TitleContainer = styled.div`
+  width: 100%;
+  max-width: 1120px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 80px;
+`;
+
+const TeamName = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+  color: ${theme.color.gray5};
+`;
+
+const Title = styled.div`
+  font-size: 30px;
+  font-weight: 600;
+  color: ${theme.color.gray8};
+  display: flex;
+  align-items: center;
+  gap: 14px;
+`;
+
+const Describtion = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  > div:nth-of-type(1) {
+    font-size: 20px;
+    color: ${theme.color.gray6};
+  }
+  > div:nth-of-type(2) {
+    font-size: 16px;
+    color: ${theme.color.gray6};
+  }
+  > div:nth-of-type(3) {
+    font-size: 16px;
+    color: ${theme.color.gray6};
+  }
+`;
+
+const LogContainer = styled.div`
+  width: 100%;
+  max-width: 1120px;
+`;
+
+const Label = styled.label`
+  width: 100%;
+  height: 22px;
+  cursor: default;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${theme.color.gray6};
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  margin-left: 6px;
+`;
+
+const Log = styled.div`
+  width: 100%;
+  height: 332px;
+  border-radius: 10px;
+  border: 1px solid ${theme.color.gray4};
+  > div:nth-of-type(1) {
+    width: 100%;
+    height: 36px;
+    border-bottom: 1px solid ${theme.color.gray4};
+  }
+`;

src/router/router.tsx

@@ -10,6 +10,8 @@ import { TeamDeployInformation } from '@/pages/Team/deploy/Information';
 import { TeamDeploy } from '@/pages/Team/deploy';
 import { TeamDeployCreate } from '@/pages/Team/deploy/Create';
 import { TeamDeployContainer } from '@/pages/Team/deploy/Container';
+import { TeamDeployContainerDetail } from '@/pages/Team/deploy/Container/Detail';
+import { Login } from '@/pages/Login';
 
 export const Router = createBrowserRouter([
   {
@@ -37,7 +39,13 @@ export const Router = createBrowserRouter([
                     path: ':id',
                     children: [
                       { index: true, element: <TeamDeployInformation /> },
-                      { path: 'container', element: <TeamDeployContainer /> },
+                      {
+                        path: 'container',
+                        children: [
+                          { index: true, element: <TeamDeployContainer /> },
+                          { path: ':id', element: <TeamDeployContainerDetail /> },
+                        ],
+                      },
                     ],
                   },
                 ],
@@ -47,8 +55,8 @@ export const Router = createBrowserRouter([
         ],
       },
       {
-        path: 'deploy',
-        children: [{ index: true }],
+        path: 'login',
+        element: <Login />,
       },
       {
         path: '*',