@@ -0,0 +1,280 @@
+.JaehyunMain {
+  .fixedTop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+    border-bottom: 2px solid #ebebeb;
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      padding: 15px;
+      max-width: 1100px;
+      width: 100%;
+      margin: 0 auto;
+
+      .westagramTitle {
+        margin: 0 15px;
+        font-size: 25px;
+        font-family: 'Lobster', cursive;
+        cursor: pointer;
+      }
+
+      .inputContainer {
+        position: relative;
+      }
+
+      .searchInput {
+        width: 250px;
+        height: 30px;
+
+        border: 1px solid #b2b4b7;
+        border-radius: 3px;
+        background-color: #fafafa;
+        padding-left: 25px;
+      }
+
+      .searchIcon {
+        position: absolute;
+        top: 10px;
+        left: 90px;
+        width: 10px;
+        height: 10px;
+      }
+
+      .searchText {
+        position: absolute;
+        top: 7px;
+        left: 100px;
+        width: 30px;
+        font-size: 14px;
+      }
+
+      .homeIcon,
+      .sendIcon,
+      .exploreIcon,
+      .heartIcon,
+      .profileIcon {
+        width: 25px;
+        height: 25px;
+        margin: 0 15px;
+      }
+
+      .homeIcon,
+      .sendIcon,
+      .exploreIcon,
+      .heartIcon,
+      .profileIcon:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .feedWraper {
+    display: flex;
+    padding-top: 100px;
+    max-width: 1100px;
+    margin: 0 auto;
+
+    article {
+      background-color: white;
+      border: 2px solid #e9e9e9;
+      border-radius: 3px;
+      margin-right: 30px;
+      width: 700px;
+      text-align: center;
+
+      .feedHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        height: 60px;
+        padding: 15px 15px;
+        border-bottom: 1px solid lightgray;
+
+        .feedProfile {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .feedProfileImage {
+          width: 35px;
+          height: 35px;
+          border-radius: 70%;
+        }
+
+        .userId {
+          margin-left: 10px;
+          font-weight: bold;
+        }
+      }
+
+      .moreButtonImage {
+        width: 13px;
+        height: 13px;
+        cursor: pointer;
+      }
+
+      .firstFeed {
+        width: 300px;
+        height: 500px;
+      }
+
+      .feedIcons {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+      }
+
+      .likeIcon,
+      .dmIcon,
+      .shareIcon,
+      .bookmarkIcon {
+        width: 25px;
+        height: 25px;
+        cursor: pointer;
+      }
+
+      .likeIcon,
+      .dmIcon,
+      .shareIcon {
+        margin-left: 15px;
+      }
+
+      .feedDescription {
+        margin-left: 20px;
+        text-align: left;
+      }
+
+      .feedReply {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid lightgray;
+        padding: 10px;
+        margin-top: 20px;
+
+        .replyContent {
+          margin-right: 100px;
+        }
+
+        .smileIcon {
+          width: 25px;
+          height: 25px;
+        }
+
+        .replyInput {
+          width: 570px;
+          height: 30px;
+          border: 0;
+        }
+        .postButton {
+          color: #0996f6;
+          border: 0;
+          margin-left: 5px;
+          cursor: pointer;
+          background-color: white;
+        }
+      }
+      .name {
+        font-weight: bold;
+      }
+
+      .delete {
+        float: right;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  aside {
+    width: calc(100% - 700px);
+
+    .account {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .accountUser {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .accountUserIcon {
+        width: 50px;
+        height: 50px;
+        margin-right: 20px;
+
+        border-radius: 70%;
+      }
+    }
+
+    .story {
+      border: 2px solid #e9e9e9;
+      border-radius: 3px;
+      margin-top: 20px;
+    }
+
+    .storyTop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+    }
+
+    .storyContent {
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      padding: 10px;
+    }
+    .otherUserId {
+      margin-left: 10px;
+      font-size: 15px;
+    }
+    .otherUserIcon {
+      width: 30px;
+      height: 30px;
+      border-radius: 70%;
+    }
+
+    .recommendUser {
+      border: 2px solid #e9e9e9;
+      border-radius: 3px;
+      margin-top: 10px;
+    }
+
+    .recommendUserTop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+    }
+
+    .recommendUserContent {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+    }
+    .recommendUserLeftContent {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    footer {
+      color: #dfdfdf;
+      font-size: 12px;
+      text-align: left;
+      margin-top: 20px;
+    }
+  }
+}

리뷰: 최상위 네스팅하는 요소의 클래스네임은 컴포넌트 명과 동일하게 부여해주시고, 클래스 네임을 이용해서 최상위 네스팅을 해주시는게 다른 컴포넌트와 css 충돌이 발생할 확률을 낮출 수 있습니다.