Add scss for layout

@@ -28,7 +28,7 @@ export class PostService {
   async findSome(input: Partial<GetPostInput>): Promise<Post[]> {
     return this.postRepository
       .createQueryBuilder('post')
-      .where('post.id like :id', { id: input.id })
+      .orWhere('post.id = :id', { id: input.id })
       .orWhere('post.author like :author', { author: input.author })
       .orWhere('post.category like :category', { category: input.category })
       .getMany()

+@import './shared.scss';
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+#__next {
+  height: 100%;
+  min-width: 236px;
+}
+
+.app-layout {
+  min-height: 100vh;
+  height: auto;
+  display: block;
+}
+
+.app-header {
+  @media screen and (max-width: $medium_tablet_width) {
+    padding: 0px;
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+
+    .ant-menu-submenu-horizontal {
+      float: right;
+    }
+  }
+}
+
+.outer-container {
+  width: 100%;
+  max-width: $window_max_width;
+  min-height: calc(100vh - 64px);
+  padding: 12px 50px;
+  margin: 0 auto;
+
+  overflow-y: scroll;
+
+  @media screen and (max-width: $medium_tablet_width) {
+    padding: 76px 16px 12px 16px;
+    min-height: 100vh;
+  }
+
+  @media screen and (max-width: $small_smart_phone_width) {
+    padding: 10px 8px;
+  }
+}

+@import './shared.scss';
+
+.category-table-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+
+  .ant-table {
+    border-radius: $border_radius;
+    overflow: hidden;
+
+    .ant-table-title {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      margin: 0 4px;
+      @media screen and (max-width: $medium_smart_phone_width) {
+        h2 {
+          font-size: 14px;
+        }
+      }
+    }
+
+    tr {
+      @media screen and (max-width: $small_tablet_width) {
+        .ant-table-cell:nth-child(3) {
+          display: none;
+        }
+      }
+
+      @media screen and (max-width: $medium_smart_phone_width) {
+        .ant-table-cell:nth-child(1) {
+          display: none;
+        }
+
+        .ant-table-cell:nth-child(2) {
+          width: 100%;
+        }
+      }
+
+      @media screen and (max-width: $small_smart_phone_width) {
+        .ant-table-cell:nth-child(2) {
+          font-size: 12px;
+        }
+        .ant-table-cell:nth-child(4) {
+          font-size: 11px;
+        }
+      }
+    }
+  }
+}

+@import './shared.scss';
+
+.create-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+
+  .form-container {
+    border-radius: $border_radius;
+    background-color: white;
+    padding: 24px;
+
+    form {
+      height: 100%;
+
+      .form-button {
+        float: right;
+
+        &.cancel-button {
+          margin-right: 8px;
+        }
+      }
+
+      #form-textarea {
+        height: 50vh;
+      }
+    }
+  }
+}

+@import './shared.scss';
+
+.main-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  @media screen and (max-width: $medium_tablet_width) {
+    display: block;
+  }
+
+  .main-card {
+    width: 47%;
+    height: 48%;
+
+    border-radius: $border_radius;
+
+    @media screen and (max-width: $medium_tablet_width) {
+      width: 100%;
+      height: 300px;
+      margin-bottom: 12px;
+    }
+
+    @media screen and (max-width: $large_smart_phone_width) {
+      height: 240px;
+    }
+
+    @media screen and (max-width: $medium_smart_phone_width) {
+      height: 220px;
+    }
+
+    .ant-card-body {
+      height: calc(100% - 58px);
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: stretch;
+
+      padding: 18px;
+
+      .card-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: $border_radius;
+        padding: 5px 18px;
+        height: 45px;
+
+        @media screen and (max-width: $medium_tablet_width) {
+          &:nth-child(4),
+          &:nth-child(5) {
+            display: none;
+          }
+        }
+
+        &.has-content {
+          transition: background-color 0.3s;
+          padding: 2px 12px;
+
+          &:hover {
+            background-color: rgba(26, 144, 255, 0.2);
+            transition: background-color 0.3s;
+          }
+        }
+
+        .card-row-title {
+          margin: 0;
+          font-size: 17px;
+          font-weight: 400;
+
+          @media screen and (max-width: $large_smart_phone_width) {
+            font-size: 14px;
+          }
+        }
+
+        .card-row-recomment {
+          color: $red;
+          font-weight: 600;
+          margin-left: 16px;
+
+          @media screen and (max-width: $large_smart_phone_width) {
+            font-size: 13px;
+          }
+
+          @media screen and (max-width: $medium_smart_phone_width) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

+@import './shared.scss';
+
+.post-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+
+  height: 100%;
+
+  .post-content {
+    flex: 1;
+    border-radius: $border_radius;
+    margin-bottom: 24px;
+  }
+
+  .post-comments {
+    min-height: $comment_height;
+    border-radius: $border_radius;
+    overflow-y: scroll;
+
+    .post-comments-num {
+      font-size: 14px;
+      color: #888;
+    }
+  }
+}
+
+.comments-textarea {
+  margin-top: 12px;
+}
+
+.comments-submit-button {
+  float: right;
+  margin-top: 8px;
+}

+$window_max_width: 1240px;
+$header_height: 64px;
+$border_radius: 10px;
+
+$comment_height: 158px;
+
+// color
+$black: #333;
+$red: #eb4d4b;
+
+// media query
+$large_tablet_width: 1024px;
+$medium_tablet_width: 768px;
+$small_tablet_width: 500px;
+$large_smart_phone_width: 444px;
+$medium_smart_phone_width: 370px;
+$small_smart_phone_width: 300px;

@@ -20,7 +20,8 @@
     "graphql": "15.3.0",
     "next": "latest",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "sass": "^1.34.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.17.8",

@@ -18,7 +18,19 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "target": "esnext",
-    "strict": false
+    "strict": false,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@src/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@config/*": ["src/config/*"],
+      "@constants/*": ["src/constants/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@gql/*": ["src/gql/*"],
+      "@views/*": ["src/views/*"],
+      "@shared/*": ["src/shared/*"]
+    }
   },
   "exclude": [
     "node_modules"

@@ -5007,7 +5007,7 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chokidar@3.5.1, chokidar@^3.4.2, chokidar@^3.5.1:
+chokidar@3.5.1, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
   integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
@@ -12191,6 +12191,13 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sass@^1.34.1:
+  version "1.34.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.34.1.tgz#30f45c606c483d47b634f1e7371e13ff773c96ef"
+  integrity sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"