ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: 옆집에서 구경왔습니다:)코드가 정말 섬세하세요!! 덕분에 bind, 유효성 검증 관련해서 배우고 갑니다:)! 감사합니다~
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: 송현님, 이해했습니다! 저는 bind를 하지 않고도 잘 실행되어서 의아했는데, arrow function을 사용했었네요~! 링크까지 걸어주시는 상세한 설명에 감동했습니다~ ㅠㅠ
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: 맞습니다. input 태그에 name, value 속성을 이용해서 onChange이벤트가 발생하면 원하는 곳에 값을 넣어주기 위해서 입니다. 리액트 사이트에서 [다중 입력 제어하기](https://ko.reactjs.org/docs/forms.htmll) 읽으시면 도움 되실 거 같네요!
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: this에 대해서 잘 고민해보시고 bind 메소드까지 잘 찾아서 적용해주셨네요!
- 다만 여기서 handleInput 함수는 이미 arrow function으로 작성을 했기에 내부적으로 this를 가지지않고 상위 스코프의 this를 사용하기에 필수적이지 않습니다
- 함수선언 + bind method로 this가 바인딩된 새로운 함수 재생성 보다는 arrow function 으로 한번 작성하는게 간편하고 가독성이 좋기에 arrow function 사용을 권장드립니다.
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: 👍
구조분해할당까지 해주시면 더 깔끔하겠네요
```
const {name, value} = event;
this.setState{{[name] : value}}
```
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: [공식문서 React로 사고하기](https://ko.reactjs.org/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state) 를 보시면 어떤 값들이 state가 되어야하는지에 대해 적혀있습니다.

> 각각 살펴보고 어떤 게 state가 되어야 하는 지 살펴봅시다. 이는 각 데이터에 대해 아래의 세 가지 질문을 통해 결정할 수 있습니다

> 1. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.

> 2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.

> 3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

validation state는 위 케이스 중 다른 state로 계산 가능한 값이기에 state로 관리안해도 되는 값입니다.
렌더시에 바로 계산해서 활용하는게 좋아보입니다.
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: - snake-case를 이용해서 className 부여하고 계시군요, nesting을 위해서 최상위 태그에 부여하는 클래스네임은 클레스네임의 중복을 피하고, 일반적인 클래스네임과 구분하기 위해서 PascalCase로 작성해주는것도 좋아보이네요
- 이런 부분은 컨벤션적인 부분이기에 팀끼리 합의해서 진행해주시면 되지만 위코드내에서는 컴포넌트 이름과 동일하게 PascalCase를 사용하는것을 권장하고있습니다(권장일 뿐 필수는 아니기에 컨벤션은 팀원끼리 합의해서 적용하시면 됩니다.)
@@ -1,7 +1,77 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Login.scss';
 
-function Login() {
-  return <div>Nav bar</div>;
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: '',
+      pwd: '',
+    };
+  }
+
+  handleInput = event => {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.handleValidate();
+
+    this.setState({
+      id: '',
+      pwd: '',
+    });
+  };
+
+  render() {
+    const { id, pwd } = this.state;
+    return (
+      <div className="login">
+        <div className="login-container">
+          <h2 className="westagram-logo">westagram</h2>
+          <form className="login-form" onSubmit={this.handleSubmit}>
+            <input
+              type="email"
+              className="login-input"
+              name="id"
+              value={this.state.id}
+              placeholder="전화번호, 사용자 이름 또는 이메일"
+              onChange={this.handleInput}
+              aria-label="이메일"
+            />
+            <input
+              type="password"
+              className="login-input"
+              name="pwd"
+              value={this.state.pwd}
+              placeholder="비밀번호"
+              autoComplete="off"
+              aria-label="비밀번호"
+              onChange={this.handleInput}
+            />
+            <button
+              type="submit"
+              className={
+                id.includes('@') && pwd.length >= 5
+                  ? 'login-btn--active'
+                  : 'login-btn'
+              }
+            >
+              로그인
+            </button>
+          </form>
+          <p className="singUp">
+            <span>비밀번호 찾기</span> / <a href="/signup">가입하기</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Login;

리뷰: autoComplete, aria-label 등의 속성까지 세심하게 신경쓰셨네요👍
@@ -0,0 +1,78 @@
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  border: 1px solid #bdbdbd;
+  text-align: center;
+  background: rgb(250, 250, 250);
+
+  .login-container {
+    width: 350px;
+    height: 350px;
+    padding: 0 40px;
+    border: 1px solid silver;
+    border-radius: 5px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    .westagram-logo {
+      font-size: 45px;
+      font-family: "Lobster",
+        cursive;
+      color: black;
+    }
+
+    .login-form {
+
+      .login-input {
+        width: 100%;
+        height: 38px;
+        font-size: 12px;
+        padding: 0 20px;
+        margin-bottom: 10px;
+        border: 1px solid silver;
+        box-sizing: border-box;
+        border-radius: 5px;
+        background: rgba(238, 238, 238, 0.534);
+        color: #929292;
+        outline: 0;
+      }
+
+      .login-btn {
+        display: block;
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border-radius: 5px;
+        color: #fff;
+        background: #b2dffc;
+        border: 1px solid #b2dffc;
+      }
+
+      .login-btn--active {
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border: 1px solid #0095f6;
+        border-radius: 5px;
+        background: #0095f6;
+        color: #fff;
+      }
+    }
+
+    color: #0f5086;
+
+    .singUp {
+      font-size: 12px;
+      color: #0f5086;
+
+      a {
+        color: #0f5086;
+        text-decoration: none;
+      }
+    }
+  }
+}
\ No newline at end of file

리뷰: 이렇게 자주 사용되는 반복되는 속성은 mixin 형태로 만들어서 사용하는것도 좋습니다.
@@ -0,0 +1,78 @@
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  border: 1px solid #bdbdbd;
+  text-align: center;
+  background: rgb(250, 250, 250);
+
+  .login-container {
+    width: 350px;
+    height: 350px;
+    padding: 0 40px;
+    border: 1px solid silver;
+    border-radius: 5px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    .westagram-logo {
+      font-size: 45px;
+      font-family: "Lobster",
+        cursive;
+      color: black;
+    }
+
+    .login-form {
+
+      .login-input {
+        width: 100%;
+        height: 38px;
+        font-size: 12px;
+        padding: 0 20px;
+        margin-bottom: 10px;
+        border: 1px solid silver;
+        box-sizing: border-box;
+        border-radius: 5px;
+        background: rgba(238, 238, 238, 0.534);
+        color: #929292;
+        outline: 0;
+      }
+
+      .login-btn {
+        display: block;
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border-radius: 5px;
+        color: #fff;
+        background: #b2dffc;
+        border: 1px solid #b2dffc;
+      }
+
+      .login-btn--active {
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border: 1px solid #0095f6;
+        border-radius: 5px;
+        background: #0095f6;
+        color: #fff;
+      }
+    }
+
+    color: #0f5086;
+
+    .singUp {
+      font-size: 12px;
+      color: #0f5086;
+
+      a {
+        color: #0f5086;
+        text-decoration: none;
+      }
+    }
+  }
+}
\ No newline at end of file

리뷰: css 속성 순서 가이드라인에 맞춰주세요
@@ -0,0 +1,78 @@
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  border: 1px solid #bdbdbd;
+  text-align: center;
+  background: rgb(250, 250, 250);
+
+  .login-container {
+    width: 350px;
+    height: 350px;
+    padding: 0 40px;
+    border: 1px solid silver;
+    border-radius: 5px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    .westagram-logo {
+      font-size: 45px;
+      font-family: "Lobster",
+        cursive;
+      color: black;
+    }
+
+    .login-form {
+
+      .login-input {
+        width: 100%;
+        height: 38px;
+        font-size: 12px;
+        padding: 0 20px;
+        margin-bottom: 10px;
+        border: 1px solid silver;
+        box-sizing: border-box;
+        border-radius: 5px;
+        background: rgba(238, 238, 238, 0.534);
+        color: #929292;
+        outline: 0;
+      }
+
+      .login-btn {
+        display: block;
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border-radius: 5px;
+        color: #fff;
+        background: #b2dffc;
+        border: 1px solid #b2dffc;
+      }
+
+      .login-btn--active {
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border: 1px solid #0095f6;
+        border-radius: 5px;
+        background: #0095f6;
+        color: #fff;
+      }
+    }
+
+    color: #0f5086;
+
+    .singUp {
+      font-size: 12px;
+      color: #0f5086;
+
+      a {
+        color: #0f5086;
+        text-decoration: none;
+      }
+    }
+  }
+}
\ No newline at end of file

리뷰: style을 부여하지 않는 경우에는 굳이 className 부여 및 네스팅 할 필요 없습니다!
@@ -0,0 +1,78 @@
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  border: 1px solid #bdbdbd;
+  text-align: center;
+  background: rgb(250, 250, 250);
+
+  .login-container {
+    width: 350px;
+    height: 350px;
+    padding: 0 40px;
+    border: 1px solid silver;
+    border-radius: 5px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    .westagram-logo {
+      font-size: 45px;
+      font-family: "Lobster",
+        cursive;
+      color: black;
+    }
+
+    .login-form {
+
+      .login-input {
+        width: 100%;
+        height: 38px;
+        font-size: 12px;
+        padding: 0 20px;
+        margin-bottom: 10px;
+        border: 1px solid silver;
+        box-sizing: border-box;
+        border-radius: 5px;
+        background: rgba(238, 238, 238, 0.534);
+        color: #929292;
+        outline: 0;
+      }
+
+      .login-btn {
+        display: block;
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border-radius: 5px;
+        color: #fff;
+        background: #b2dffc;
+        border: 1px solid #b2dffc;
+      }
+
+      .login-btn--active {
+        width: 100%;
+        height: 32px;
+        margin-top: 10px;
+        border: 1px solid #0095f6;
+        border-radius: 5px;
+        background: #0095f6;
+        color: #fff;
+      }
+    }
+
+    color: #0f5086;
+
+    .singUp {
+      font-size: 12px;
+      color: #0f5086;
+
+      a {
+        color: #0f5086;
+        text-decoration: none;
+      }
+    }
+  }
+}
\ No newline at end of file

리뷰: 여기서 부여하고 있었네요 해당 셀렉터의 스타일은 셀렉터 바로 하위에 적어주세요 이렇게 네스팅이 쭉 있고 그 뒤에 있으면 가독성측면에서 좋지않습니다.