@@ -0,0 +1,156 @@
+@import '../Styles/common.scss';
+
+.entire-container {
+  @include flex-set(row, center, center);
+  width: 100%;
+  height: 100vh;
+  background-color: $background-default-color;
+
+  .entire {
+    width: 350px;
+    background-color: $background-default-color;
+
+    .entire_top {
+      height: 380px;
+
+      &.content {
+        padding: 10px 0;
+        margin: 0 0 10px;
+        border: $border-default-set;
+
+        .login_container {
+          @include flex-set(column, center, center);
+
+          h1 {
+            width: 175px;
+            height: 51px;
+            line-height: 51px;
+            margin: 22px auto 12px;
+            font-family: 'Lobster', cursive;
+            @include font-set(40px, 100, null);
+          }
+
+          .form_container {
+            @include flex-set(column);
+            margin: 20px 0 0;
+
+            form {
+              @include flex-set(column);
+
+              input {
+                width: 268px;
+                height: 38px;
+                padding: 9px 0 7px 8px;
+                margin: 0 0 7px 0;
+                border: $border-default-set;
+
+                background: $background-default-color;
+                color: #8e8e8e;
+
+                @include font-set($font-small-size, inherit, 36px);
+                overflow: hidden;
+                outline: 0;
+                text-overflow: ellipsis;
+              }
+
+              a {
+                margin: 9px 0 18px;
+
+                .login-button {
+                  width: 268px;
+                  height: 30px;
+                  background-color: rgb(0, 149, 246);
+                  border-radius: 4px;
+                  color: #fff;
+                  font-weight: $font-bold-weight;
+                  opacity: 1;
+
+                  &:disabled {
+                    cursor: default;
+                    opacity: 0.3;
+                  }
+                }
+              }
+            }
+
+            .line_container {
+              display: flex;
+              width: 268px;
+              margin: 0 0 28px 0;
+
+              .line {
+                position: relative;
+                top: 0.45em;
+                height: 1px;
+                flex-grow: 1;
+                background-color: #dbdbdb;
+              }
+
+              .line-word {
+                color: #8e8e8e;
+                @include font-set($font-small-size, $font-bold-weight, 15px);
+                margin: 0 25px;
+              }
+            }
+
+            .social-login-button {
+              display: inline;
+              margin-bottom: 20px;
+              border: none;
+              background-color: #fff;
+
+              &:hover {
+                cursor: pointer;
+              }
+
+              img {
+                position: relative;
+                top: 3px;
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                margin-right: 8px;
+              }
+
+              span {
+                color: rgb(56, 81, 133);
+                @include font-set($font-default-size, $font-bold-weight);
+              }
+            }
+          }
+
+          .search-password {
+            color: #00376b;
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    .entire_bottom {
+      @include flex-set();
+      height: 63px;
+      color: $font-default-color;
+
+      @include font-set($font-default-size, inherit, 63px);
+      text-align: center;
+
+      &.content {
+        padding: 10px 0;
+        margin: 0 0 10px;
+        border: $border-default-set;
+      }
+
+      p {
+        color: $font-default-color;
+        font-size: $font-default-size;
+
+        a {
+          color: #0095f6;
+          font-weight: 600;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

리뷰: 컴포넌트 이름으로 nesting 적용해주세요!
이렇게 되면 다른 컴포넌트들의 스타일에도 영향을 미칠 수 있습니다!