[FE] feat/#46: 이슈 생성 페이지 구현 (#57)

* feat/#46: 이슈 생성 페이지 구현

* feat/#46: 타입 추가

FE/src/pages/AddIssuePage.tsx

@@ -0,0 +1,103 @@
+import { styled } from "styled-components";
+import UserProfileButton from "../components/UserProfileButton/UserProfileButton";
+import SideBar from "../components/SideBar/SideBar";
+import { useEffect } from "react";
+import Button from "../components/common/Button/Button";
+import TextInput from "../components/common/TextInput/TextInput";
+
+// type Props = {
+// };
+
+export default function AddIssuePage() {
+  useEffect(() => {});
+
+  return (
+    <Page>
+      <Main>
+        <Title>새로운 이슈 작성</Title>
+        <ContentsContainer>
+          <UserProfileButton src={"/logo/profile.jpg"} onClick={() => {}} />
+          <AddIssueForm>
+            <TextInput id={"newIssueTitle"} label={"제목"} />
+          </AddIssueForm>
+          <SideBar></SideBar>
+        </ContentsContainer>
+        <ButtonTap>
+          <Button
+            icon={"xSquare"}
+            label={"작성 취소"}
+            type={"ghost"}
+            size={"medium"}
+            onClick={() => {}}
+          />
+          <Button
+            label={"완료"}
+            type={"container"}
+            size={"large"}
+            onClick={() => {}}
+          />
+        </ButtonTap>
+      </Main>
+    </Page>
+  );
+}
+
+const Page = styled.div`
+  display: flex;
+  gap: 32px;
+  flex-direction: column;
+  align-items: center;
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: ${({ theme }) => theme.colorSystem.neutral.surface.default};
+`;
+
+const Main = styled.main`
+  width: 1280px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+const Title = styled.h1`
+  font: ${({ theme }) => theme.font.displayBold32};
+  color: ${({ theme }) => theme.colorSystem.neutral.text.strong};
+`;
+
+const ContentsContainer = styled.div`
+  position: relative;
+  display: flex;
+  gap: 24px;
+  width: 100%;
+  padding: 24px 0px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1280px;
+    height: 1px;
+    background-color: ${({ theme }) =>
+      theme.colorSystem.neutral.border.default};
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 1280px;
+    height: 1px;
+    background-color: ${({ theme }) =>
+      theme.colorSystem.neutral.border.default};
+  }
+`;
+
+const AddIssueForm = styled.form`
+  width: 912px;
+`;
+
+const ButtonTap = styled.div`
+  display: flex;
+  gap: 32px;
+  justify-content: end;
+`;

FE/src/type.tsx

@@ -0,0 +1,40 @@
+export type Filter = {
+  isOpen: boolean;
+  assigneeIds: number[];
+  labelIds: [];
+  milestoneId: number;
+  authorId: number;
+  isCommentedByMe: boolean;
+};
+
+export type NewIssue = {
+  title: string;
+  content: string;
+  assigneeIds: number[];
+  labelIds: number[];
+  milestoneId: number;
+};
+
+export type Label = {
+  title: string;
+  color: string;
+};
+
+export type Milestone = {
+  title: string;
+};
+
+export type IssueListProps = {
+  id: number;
+  title: string;
+  isOpen: boolean;
+  createAt: string;
+  author: string;
+  authorProfileUrl: string;
+  labels: Label[] | [];
+  milestone: Milestone | null;
+};
+
+export type ListDataProps = {
+  issues: IssueListProps[] | [];
+};