@@ -1,2 +1,219 @@
-.MainKang {
+@mixin center {
+  display: flex;
+  justify-content: center;
+}
+
+@mixin middle {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin boxes {
+  width: 100%;
+  margin: 5px auto;
+  border: 1px solid rgb(220, 219, 219);
+  background-color: white;
+}
+
+.entire-area {
+  @include center;
+  background-color: rgb(250, 250, 250);
+
+  main {
+    @include center;
+
+    .feeds {
+      @include middle;
+      padding: 5px 20px 5px 20px;
+
+      .stories {
+        @include boxes;
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 23px 5px 23px;
+
+        div {
+          @include middle;
+
+          img {
+            width: 50px;
+            margin: 5px 5px;
+            border-radius: 100%;
+          }
+
+          span {
+            font-size: 13px;
+          }
+        }
+      }
+
+      article {
+        @include boxes;
+        max-width: 600px;
+        padding: 10px 15px;
+
+        .uploader-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          font-size: 18px;
+
+          .uploader-profile {
+            width: 50px;
+            margin-right: 10px;
+            border-radius: 100%;
+          }
+        }
+
+        .upload-img {
+          width: 100%;
+        }
+
+        .activity {
+          display: flex;
+          justify-content: space-between;
+          padding: 10px 0px;
+
+          .far {
+            width: 25px;
+            margin-right: 8px;
+            font-size: 25px;
+          }
+        }
+
+        .liked-num {
+          margin: 15px 0 12px 0;
+          font-weight: 700;
+          font-size: 15px;
+        }
+
+        .uploader-comment {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin-bottom: 10px;
+
+          .my-id {
+            margin-right: 10px;
+            font-weight: 700;
+            font-size: 15px;
+          }
+          .my-write {
+            font-size: 15px;
+            font-weight: 300;
+          }
+        }
+
+        ul {
+          @include middle;
+          justify-content: flex-start;
+          height: 120px;
+
+          li {
+            display: block;
+
+            .comments-id {
+              font-weight: 700;
+            }
+
+            span {
+              margin: 8px 10px 8px 0;
+              font-size: 15px;
+            }
+          }
+        }
+      }
+
+      .upload-time {
+        margin: 5px 0;
+        padding-left: 15px;
+        color: rgb(142, 142, 142);
+        font-size: 12px;
+      }
+
+      .add-comments {
+        display: flex;
+        align-items: center;
+        z-index: 0;
+        width: 100%;
+        padding: 25px 20px;
+        border-top: 1px solid rgb(220, 219, 219);
+
+        span {
+          margin-right: 15px;
+          font-size: 30px;
+        }
+
+        .comment-input {
+          width: 100%;
+          height: 30px;
+          border: none;
+        }
+
+        button {
+          border: none;
+          cursor: pointer;
+          background-color: transparent;
+          color: rgb(81, 155, 240);
+          font-size: 15px;
+        }
+      }
+    }
+  }
+
+  .aside {
+    max-width: 200px;
+    padding: 5px 10px 5px 10px;
+
+    .user-id {
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      padding: 10px 20px 10px 10px;
+
+      img {
+        width: 50px;
+        margin-right: 10px;
+        border-radius: 100%;
+      }
+
+      span {
+        margin: 40px 0;
+        font-weight: 300;
+        font-size: 17px;
+      }
+    }
+
+    .recommend-header {
+      margin: 20px auto;
+      color: rgb(143, 142, 142);
+      font-weight: 700;
+      font-size: 15px;
+
+      .other-user {
+        display: flex;
+        align-items: center;
+        margin: 15px auto;
+
+        img {
+          width: 50px;
+          border-radius: 100%;
+        }
+
+        span {
+          margin: auto 10px;
+          font-weight: 700;
+          font-size: ㅁㅁㅁㅁㅁㅁㅁㅁ15px;
+          color: black;
+        }
+
+        button {
+          border: none;
+          background-color: transparent;
+          color: rgb(81, 155, 240);
+          font-weight: 700;
+        }
+      }
+    }
+  }
 }

리뷰: 다른 부분에서는 잘 해주셨는데, 선택자 간에는 한 줄 띄워주세요!

그리고 `id` 선택자보다는, `className` 을 활용해주시기 바랍니다. 이유는 다음과 같습니다.

- HTML에서  `id` 는 문서 내에서 유일해야 합니다. 이러한 이유로 단일 요소를 다루는 경우 `id`를 사용할 수 있습니다.
- 하지만 정말로 해당 요소에 대한 이벤트나 스타일 핸들링이 프로젝트 전체에서 단 한번만 사용 되는지 충분히 고민해야합니다. 일반적으로 컴포넌트는 재사용 될 수 있기 때문에 같은 요소가 여러번 생성될 수 있습니다. 이러한 이유로 보통의 경우에는 `className` 을 사용합니다.
- 성능, 혹은 기타 이유로 `id` 를 반드시 사용해야 하는 경우가 생긴다면 충분히 unique한 네이밍을 해주셔야 합니다.