ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: import 순서 맞춰주세요
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: peer review에 학습자료로 제공된 리팩토링 체크리스트 확인해보시면 됩니다.
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: [공식문서 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가 아닙니다.

- userIdCheck, passwordCheck는 모두 userName, password 값으로부터 계산 가능한 값입니다 -> state로 관리할 필요 없습니다.
- 렌더할 때 계산해서 사용할 수 있어 보입니다.
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: 주석 삭제해주세요~
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: ```suggestion
    const { name, value } = e.target;
    this.setState({[name]:value});
    }
```
계산된 속성명 사용해서 줄일 수 있어보입니다, passwordCheck, userIdCheck는 필요없는 값이니까 없애도 되보입니다.
그리고 check는 뭔가 체크박스가 체크되고 안되고 같지 않나요? isPasswordValid 등의 의미가 드러나고, boolean임을 알아볼 수 있는 네이밍을 해주세요
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: 반복되는 UI로 보입니다, 상수데이터 + Array.map method 활용해서 표현해보세요
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: - `id` 보다는 `className` 을 활용해주시기 바랍니다.
- HTML에서  `id` 는 문서 내에서 유일해야 합니다. 이러한 이유로 단일 요소를 다루는 경우 `id`를 사용할 수 있습니다.
- 하지만 정말로 해당 요소에 대한 이벤트나 스타일 핸들링이 프로젝트 전체에서 단 한번만 사용 되는지 충분히 고민해야합니다. 일반적으로 컴포넌트는 재사용 될 수 있기 때문에 같은 요소가 여러번 생성될 수 있습니다. 이러한 이유로 보통의 경우에는 `className` 을 사용합니다.
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import InputBox from './InputBox/InputBox';
+import './JaehyunLogin.scss';
+
+class JaehyunLogin extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userName: '',
+      password: '',
+    };
+  }
+
+  inputChangeHandler = e => {
+    const { name, value } = e.target;
+    let userIdCheck = true;
+    if (name === 'userName') {
+      this.setState({
+        userName: value,
+      });
+      userIdCheck = value.indexOf('@') === -1;
+    }
+    if (name === 'password') {
+      let passwordCheck = true;
+      this.setState({
+        password: value,
+      });
+      passwordCheck = value.length < 5;
+    }
+  };
+
+  goToMain = e => {
+    e.preventDefault();
+    fetch('http://10.58.0.158:8000/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.userName,
+        password: this.state.password,
+      }),
+    })
+      .then(response => response.json())
+      .then(result => console.log('결과: ', result));
+
+    this.props.history.push('./JaehyunMain');
+  };
+
+  render() {
+    return (
+      <main className="container">
+        <div className="titleText">Westagram</div>
+        <form action="summit">
+          <InputBox
+            name="userName"
+            type="email"
+            placeholder="전화번호, 사용자 이름 또는 이메일"
+            recivedValue={this.inputChangeHandler}
+          />
+          <InputBox
+            name="password"
+            type="password"
+            placeholder="비밀번호"
+            recivedValue={this.inputChangeHandler}
+          />
+          <button
+            id="loginButton"
+            onClick={this.goToMain}
+            disabled={this.userIdCheck || this.passwordCheck}
+            style={
+              this.userIdCheck || this.passwordCheck
+                ? { opacity: '10%' }
+                : { opacity: '100%' }
+            }
+          >
+            로그인
+          </button>
+        </form>
+        <h3 className="passwordText">비밀번호를 잊으셨나요?</h3>
+      </main>
+    );
+  }
+}
+
+export default withRouter(JaehyunLogin);

리뷰: inline-style보다 className을 동적으로 바꾸는 식으로 스타일링 해주세요
@@ -0,0 +1,20 @@
+import React from 'react';
+
+class Content extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <li key={this.props.key} style={{ listStyle: 'none' }}>
+        <span style={{ fontWeight: 'bold', marginRight: '20px' }}>
+          {this.props.userName}
+        </span>
+        <span>{this.props.content}</span>
+      </li>
+    );
+  }
+}
+
+export default Content;

리뷰: state를 만들지 않을 경우 constructor 안해주셔도 됩니다!
@@ -0,0 +1,20 @@
+import React from 'react';
+
+class Content extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <li key={this.props.key} style={{ listStyle: 'none' }}>
+        <span style={{ fontWeight: 'bold', marginRight: '20px' }}>
+          {this.props.userName}
+        </span>
+        <span>{this.props.content}</span>
+      </li>
+    );
+  }
+}
+
+export default Content;

리뷰: key props은 Array.map method를 활용하여 여러 엘리먼트를 생성할 때 부여해아하는 것인데 여기서는 map을 사용하고 있지 않습니다. key prop 부여하는 의미가 없어보입니다,
그리고 inline-style은 지양해주시고 className을 통한 스타일링 해주세요, 나머지 부분도 마찬가지입니다,
@@ -0,0 +1,26 @@
+import React from 'react';
+
+class InputForm extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.addContent}>
+        <input
+          name="comment"
+          className="replyInput"
+          type="text"
+          placeholder="댓글달기..."
+          onKeyUp={this.currentState}
+        />
+        <button className="postButton" type="submit">
+          게시
+        </button>
+      </form>
+    );
+  }
+}
+
+export default InputForm;

리뷰: currenState라는 함수는 보이지 않습니다! undefined가 할당되고 있을 것 같네요
@@ -0,0 +1,26 @@
+import React from 'react';
+
+class InputForm extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.addContent}>
+        <input
+          name="comment"
+          className="replyInput"
+          type="text"
+          placeholder="댓글달기..."
+          onKeyUp={this.currentState}
+        />
+        <button className="postButton" type="submit">
+          게시
+        </button>
+      </form>
+    );
+  }
+}
+
+export default InputForm;

리뷰: addContent도 마찬가지로 없어보입니다!
@@ -0,0 +1,45 @@
+//
+//  WelcomeViewController.swift
+//  GO_SOPT_Seminar_Assingment
+//
+//  Created by 김다예 on 2023/04/12.
+//
+
+import UIKit
+
+final class WelcomeViewController: BaseViewController {
+    
+    // MARK: - Property
+
+    private let mainView = WelcomeView()
+    
+    // MARK: - Target
+
+    private func target() {
+        mainView.goToMainBtn.addTarget(self, action: #selector(tappedGoToMainBtn), for: .touchUpInside)
+    }
+
+    // MARK: - Lift Cycle
+
+    override func loadView() {
+        self.view = mainView
+    }
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        target()
+    }
+}
+
+extension WelcomeViewController {
+    
+    func idDataBind(idOrNick: String) {
+        mainView.welcomeLabel.text = "\(idOrNick)님\n반가워요!"
+    }
+    
+    @objc
+    func tappedGoToMainBtn() {
+        self.navigationController?.popToRootViewController(animated: true)
+    }
+}

리뷰: 제가 최근에 생각 없이 버튼 이벤트 연결 함수 호출을 viewWillAppear 쪽에서 했다가... 문제가 생겼는데
viewDidLoad에 너무 잘 해두셨네요 ^~^
@@ -0,0 +1,100 @@
+@import '../../../styles/variable.scss';
+
+p {
+  font-family: 'Roboto';
+  letter-spacing: 0.2px;
+}
+
+.Main {
+  background-color: $backGroundColor;
+
+  .main {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 100px;
+
+    .main-right {
+      width: 250px;
+      height: 500px;
+
+      .id-info-box {
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        padding-left: 5px;
+        margin-bottom: 15px;
+
+        .my-image {
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          background-color: black;
+          margin-right: 10px;
+        }
+
+        .my-info {
+          p {
+            font-size: 14px;
+          }
+
+          #my-id {
+            font-weight: 500;
+            margin-bottom: 3px;
+          }
+
+          #my-id-text {
+            color: #adafb1;
+          }
+        }
+      }
+
+      .site-info {
+        width: 220px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .site-info-list {
+          color: #c3c5c7;
+          font-size: 12px;
+          margin-bottom: 5px;
+
+          a {
+            color: #c3c5c7;
+          }
+
+          &:not(:last-child)::after {
+            content: '\00B7';
+            color: lightgray;
+            margin: 0 3px;
+          }
+        }
+
+        p {
+          color: #c3c5c7;
+          font-size: 12px;
+          margin-top: 15px;
+          line-height: 15px;
+        }
+      }
+    }
+  }
+}
+
+/* media query */
+@media screen and (max-width: 750px) {
+  .header-wrap {
+    max-width: 750px;
+  }
+
+  .main {
+    display: block;
+
+    .feeds {
+      margin: 0 auto;
+    }
+  }
+
+  .main-right {
+    display: none;
+  }
+}

리뷰: - body는 다른 페이지에도 영향을 줄 수 있겠네요
- 필요한 부분이라면 common.scss에서 진행되거나 팀원들과 논의 후 진행하시면 됩니다.