From fa297daa4bb2d44d741864b9d70171813a3c7750 Mon Sep 17 00:00:00 2001
From: qkdflrgs <qkdflrgs@gmail.com>
Date: Thu, 10 Aug 2023 20:23:42 +0900
Subject: [PATCH] =?UTF-8?q?feat/#146:=20=EB=A7=88=EC=9D=BC=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A4=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80(?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/pages/MilestonesPage.tsx | 90 +++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 FE/src/pages/MilestonesPage.tsx

diff --git a/FE/src/pages/MilestonesPage.tsx b/FE/src/pages/MilestonesPage.tsx
new file mode 100644
index 000000000..5b1d767c3
--- /dev/null
+++ b/FE/src/pages/MilestonesPage.tsx
@@ -0,0 +1,90 @@
+import { styled } from "styled-components";
+import Button from "../components/common/Button/Button";
+import { useNavigate } from "react-router-dom";
+
+export default function MilestonesPage() {
+  const navigate = useNavigate();
+  const goLabelsPage = () => {
+    navigate("/labels");
+  };
+
+  const goMilestonesPage = () => {
+    navigate("/milestones");
+  };
+
+  return (
+    <Main>
+      <Tap>
+        <TapButtonWrapper>
+          <Button
+            icon={"label"}
+            label={`레이블`}
+            type={"ghost"}
+            size={"medium"}
+            width={"50%"}
+            onClick={goLabelsPage}
+          />
+          <Button
+            icon={"milestone"}
+            label={`마일스톤`}
+            type={"ghost"}
+            size={"medium"}
+            width={"50%"}
+            onClick={goMilestonesPage}
+          />
+        </TapButtonWrapper>
+        <Button icon={"plus"} label={"마일스톤 추가"} onClick={() => {}} />
+      </Tap>
+    </Main>
+  );
+}
+
+const Main = styled.div`
+  padding: 32px 0px;
+  display: flex;
+  flex-direction: column;
+  width: 1280px;
+`;
+
+const Tap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const TapButtonWrapper = styled.div`
+  position: relative;
+  display: flex;
+  width: 320px;
+  height: 40px;
+  border: ${({ theme }) =>
+    `${theme.border.default} ${theme.colorSystem.neutral.border.default}`};
+  border-radius: ${({ theme }) => theme.radius.medium};
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    bottom: 0;
+    left: 159px;
+    width: 1px;
+    background-color: ${({ theme }) =>
+      theme.colorSystem.neutral.border.default};
+  }
+  > button {
+    &:hover {
+      background-color: ${({ theme }) =>
+        theme.colorSystem.neutral.surface.bold};
+    }
+  }
+  > button:first-child {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+  > button:last-child {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    font: ${({ theme }) => theme.font.selectedBold16};
+    color: ${({ theme }) => theme.colorSystem.neutral.text.strong};
+    background-color: ${({ theme }) => theme.colorSystem.neutral.surface.bold};
+  }
+`;