Add pages for allinone web

+import React from 'react';
+import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/client';
+import { GET_POST_WITH_COMMENTS } from '@src/gql/post-with-comments';
+import Content from '@src/views/Post/Content';
+import Comments from '@src/views/Post/Comment';
+
+export default function ArticlePage() {
+  const { query } = useRouter();
+
+  if (!query.num) {
+    return null; // or redirect 404 ?
+  }
+
+  const { error, data } = useQuery(GET_POST_WITH_COMMENTS, {
+    variables: {
+      post_id: Number(query.num),
+      inputComment: { post_id: Number(query.num) },
+    },
+  });
+  if (error) console.log(JSON.stringify(error, null, 2));
+
+  const post = data?.getPost || {};
+
+  return (
+    <div className={'outer-container post-container'}>
+      <Content {...post} />
+      <Comments comments={data?.getSomeComments || []} postId={post.id} />
+    </div>
+  );
+}

+import React from 'react';
+import { useRouter } from 'next/router';
+import { useMutation } from '@apollo/client';
+import { CREATE_POST } from '@src/gql/create-post';
+import { Form, Input } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+
+import { CreateButtons, CreateInputs } from '@src/views/Create';
+
+export default function CreatePage() {
+  const router = useRouter();
+  const [createPost] = useMutation(CREATE_POST);
+  const [form] = Form.useForm();
+  const [contents, setContents] = React.useState({
+    title: '',
+    description: '',
+  });
+
+  const handleChange = (e) => {
+    const {
+      target: { name, value },
+    } = e;
+
+    setContents({
+      ...contents,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { title, description } = contents;
+    const {
+      query: { name },
+    } = router;
+
+    if (!(title && description)) {
+      alert('필수항목을 모두 입력해주세요');
+      return;
+    }
+
+    const { data } = await createPost({
+      variables: {
+        input: {
+          category: name,
+          content: description,
+          title,
+        },
+      },
+    });
+
+    router.push(`/${name}/article?num=${data.createPost.id}`);
+  };
+
+  const handleCancel = () => {
+    router.back();
+  };
+
+  return (
+    <div className={'outer-container create-container'}>
+      <div className={'form-container'}>
+        <Form form={form} layout={'vertical'}>
+          <CreateInputs
+            forms={[
+              {
+                form: {
+                  label: '글제목',
+                  tooltip: '게시글 제목은 필수항목입니다',
+                },
+                input: {
+                  Item: Input,
+                  value: 'title',
+                  onChange: handleChange,
+                },
+              },
+              {
+                form: {
+                  label: '글내용',
+                  tooltip: '게시글의 내용은 필수항목입니다',
+                },
+                input: {
+                  Item: TextArea,
+                  value: 'description',
+                  id: 'form-textarea',
+                  onChange: handleChange,
+                },
+              },
+            ]}
+          />
+          <CreateButtons
+            buttons={[
+              {
+                title: 'Submit',
+                onClick: handleSubmit,
+                type: 'primary',
+                className: 'form-button submit-button',
+              },
+              {
+                title: 'Cancel',
+                onClick: handleCancel,
+                className: 'form-button cancel-button',
+              },
+            ]}
+          />
+        </Form>
+      </div>
+    </div>
+  );
+}

-import { AppProps } from "next/app";
-import { ApolloProvider } from "@apollo/client";
-import { useApollo } from "../lib/apollo";
-import "antd/dist/antd.css";
+import Router from 'next/router';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+
+import { ApolloProvider } from '@apollo/client';
+import { useApollo } from '../lib/apollo';
+
+import 'antd/dist/antd.css';
+import '../assets/styles/app.scss';
+import '../assets/styles/main.scss';
+import '../assets/styles/category.scss';
+import '../assets/styles/post.scss';
+import '../assets/styles/create.scss';
+
+import Layout from 'antd/lib/layout/layout';
+import Header from '@components/Header';
+import Loader, { startLoading, finishLoading } from '@components/Loader';
+
+Router.events.on('routeChangeStart', startLoading);
+Router.events.on('routeChangeComplete', finishLoading);
+Router.events.on('routeChangeError', finishLoading);
 
 export default function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps);
 
   return (
+    <>
+      <Head>
+        <meta
+          name={'viewport'}
+          content={
+            'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
+          }
+        />
+      </Head>
+      <Loader />
+      <Layout className={'app-layout'}>
         <ApolloProvider client={apolloClient}>
+          <Header />
           <Component {...pageProps} />
         </ApolloProvider>
+      </Layout>
+    </>
   );
 }

-import Link from "next/link";
-
-export default function About() {
-  return (
-    <div>
-      Welcome to the about page. Go to the{" "}
-      <Link href="/">
-        <a>Home</a>
-      </Link>{" "}
-      page.
-    </div>
-  );
-}

+import { useRouter } from 'next/router';
+import { useQuery } from '@apollo/client';
+
+import { GET_SOME_POSTS } from '@src/gql/get-some-posts';
+
+import Category from '@src/views/Category';
+
+export default function CategoryPage() {
+  const {
+    query: { name },
+  } = useRouter();
+
+  const { error, data } = useQuery(GET_SOME_POSTS, {
+    variables: {
+      input: { category: name },
+    },
+  });
+
+  if (error) console.log(JSON.stringify(error, null, 2));
+
+  const getCategoryPosts = data?.getSomePosts || [];
+  const articleList = getCategoryPosts.filter((post) => post.category === name);
+
+  return <Category category={name} articleList={articleList} />;
+}

-import { GetPostInput, Post } from "@graphql-community/shared";
-import { useQuery, gql } from "@apollo/client";
-import { message } from "antd";
+import { useQuery } from '@apollo/client';
 
-const GET_SOME_POST_QUERY = gql`
-  query GetSomePosts($getSomePostInput: GetPostInput!) {
-    getSomePosts(input: $getSomePostInput) {
-      author
-      category
-    }
-  }
-`;
+import { GET_ALL_POSTS } from '@src/gql/get-all-posts';
 
-const Index = () => {
-  const { data, error } = useQuery<
-    { getSomePosts: Post[] },
-    { getSomePostInput: GetPostInput }
-  >(GET_SOME_POST_QUERY, {
-    variables: {
-      getSomePostInput: {
-        id: 1,
-      },
-    },
-  });
+import Main from '@views/Main';
+
+export default function IndexPage() {
+  const { error, data } = useQuery(GET_ALL_POSTS);
   if (error) console.log(JSON.stringify(error, null, 2));
 
-  return (
-    <>
-      <div onClick={() => message.success("hi")}>index </div>
-      <div>{data?.getSomePosts[0].author}</div>
-      <div>{data?.getSomePosts[0].category}</div>
-    </>
-  );
-};
+  let categories = [];
+  let getAllPosts = data?.getAllPosts || [];
+
+  getAllPosts.forEach((post) => {
+    if (!categories.find((category) => post.category === category)) {
+      categories.push(post.category);
+    }
+  });
 
-export default Index;
+  return <Main categories={categories} posts={getAllPosts} />;
+}