ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -0,0 +1,105 @@
+import styled from "@emotion/styled";
+import RestaurantExternalLinkIcon from "feature/restaurants/restaurantsDetail/components/icons/RestaurantExternalLinkIcon";
+import Link from "next/link";
+
+interface Props {
+  restaurantId: string;
+  userAuth?: number;
+  restaurantName: string;
+  restaurantAddress: string;
+  organizationName: string;
+  link?: string;
+  isMain?: boolean;
+}
+
+const RestaurantDetailHeaderSection: React.FC<Props> = ({
+  restaurantId,
+  userAuth,
+  restaurantName,
+  restaurantAddress,
+  organizationName,
+  link,
+  isMain = true,
+}) => {
+  return (
+    <EmotionWrapper>
+      <div className="over-title-div">
+        <span className="subtitle">{organizationName}</span>
+        {isMain &&
+          (userAuth === 0 || userAuth === 1 ? (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/edit"}>
+              맛집 수정
+            </Link>
+          ) : (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/copy"}>
+              맛집 수정
+            </Link>
+          ))}
+      </div>
+      <h1 className="title">{restaurantName}</h1>
+      <div className="under-title-div">
+        <span className="subtitle">{restaurantAddress}</span>
+        {link && (
+          <Link className="link-div" href={link}>
+            <RestaurantExternalLinkIcon />
+            <span className="link-span">맛집 상세 정보 &gt;</span>
+          </Link>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailHeaderSection;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: left;
+  gap: 8px;
+
+  span {
+    font-weight: 300;
+    margin-left: 2px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray600};
+  }
+
+  span.subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray300};
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .under-title-div,
+  .over-title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .link-div {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    text-decoration-line: none;
+
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .link-span {
+    font-size: 12px;
+    font-weight: 300;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

리뷰: className을 모두 kebab case로 수정완료하였습니다!
@@ -0,0 +1,120 @@
+import styled from "@emotion/styled";
+import Image from "next/image";
+import { useState } from "react";
+import Rating from "components/rating/Rating";
+import IconEditFilledWhite from "components/icons/IconEditFilledWhite";
+import Link from "next/link";
+import dayjs from "dayjs";
+
+interface Props {
+  restaurantId: string;
+  reviewId: number;
+  userId: number;
+  score: number;
+  content: string;
+  createdAt: Date;
+}
+
+const ReviewItem: React.FC<Props> = ({
+  restaurantId,
+  reviewId,
+  userId,
+  score,
+  content,
+  createdAt,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpansion = () => {
+    setIsExpanded((isExpanded) => !isExpanded);
+  };
+
+  const editLink = `/restaurants/${restaurantId}/review/${reviewId}/edit`;
+  const displayContent =
+    content.length > 100 && !isExpanded ? content.slice(0, 100) + "..." : content;
+
+  /**
+   * TODO 1: userId로 userInfo 불러오기
+   */
+  const userName = "홍길동";
+  const ImgSrc = "/images/profile-image-default-1.png";
+
+  /**
+   * TODO 2: 현재 로그인된 유저 아이디 가져오기 (리뷰 수정 권한 확인용)
+   */
+  const currentUserId = 1;
+
+  return (
+    <EmotionWrapper>
+      <div className="user-info-score-div">
+        <div className="user-info-div">
+          <Image src={ImgSrc} alt={"유저 프로필 이미지"} width={30} height={30} />
+          <span className="user-name">{userName}</span>
+          <span className="date">{dayjs(createdAt).format("YY/MM/DD")}</span>
+          {currentUserId === userId && (
+            <Link href={editLink}>
+              <IconEditFilledWhite />
+            </Link>
+          )}
+        </div>
+        <Rating value={score} />
+      </div>
+      <div className="content-div">
+        <span>{displayContent}</span>
+        {content.length > 100 && (
+          <button onClick={toggleExpansion}>{isExpanded ? "접기" : "더 보기"}</button>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default ReviewItem;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 90px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.color.white};
+  border-radius: 6px;
+
+  padding: 10px;
+
+  .user-info-score-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .user-info-div {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      align-items: center;
+
+      span.user-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${({ theme }) => theme.color.gray700};
+      }
+      span.date {
+        font-size: 12px;
+        font-weight: 300;
+        color: ${({ theme }) => theme.color.gray300};
+      }
+    }
+  }
+
+  .content-div {
+    span {
+      line-height: 1.5;
+      color: ${({ theme }) => theme.color.gray400};
+      flex-grow: 1;
+      margin-right: 8px;
+    }
+
+    button {
+      color: ${({ theme }) => theme.color.gray300};
+    }
+  }
+`;

리뷰: className을 모두 kebab case로 수정완료하였습니다!
@@ -0,0 +1,120 @@
+import styled from "@emotion/styled";
+import Image from "next/image";
+import { useState } from "react";
+import Rating from "components/rating/Rating";
+import IconEditFilledWhite from "components/icons/IconEditFilledWhite";
+import Link from "next/link";
+import dayjs from "dayjs";
+
+interface Props {
+  restaurantId: string;
+  reviewId: number;
+  userId: number;
+  score: number;
+  content: string;
+  createdAt: Date;
+}
+
+const ReviewItem: React.FC<Props> = ({
+  restaurantId,
+  reviewId,
+  userId,
+  score,
+  content,
+  createdAt,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpansion = () => {
+    setIsExpanded((isExpanded) => !isExpanded);
+  };
+
+  const editLink = `/restaurants/${restaurantId}/review/${reviewId}/edit`;
+  const displayContent =
+    content.length > 100 && !isExpanded ? content.slice(0, 100) + "..." : content;
+
+  /**
+   * TODO 1: userId로 userInfo 불러오기
+   */
+  const userName = "홍길동";
+  const ImgSrc = "/images/profile-image-default-1.png";
+
+  /**
+   * TODO 2: 현재 로그인된 유저 아이디 가져오기 (리뷰 수정 권한 확인용)
+   */
+  const currentUserId = 1;
+
+  return (
+    <EmotionWrapper>
+      <div className="user-info-score-div">
+        <div className="user-info-div">
+          <Image src={ImgSrc} alt={"유저 프로필 이미지"} width={30} height={30} />
+          <span className="user-name">{userName}</span>
+          <span className="date">{dayjs(createdAt).format("YY/MM/DD")}</span>
+          {currentUserId === userId && (
+            <Link href={editLink}>
+              <IconEditFilledWhite />
+            </Link>
+          )}
+        </div>
+        <Rating value={score} />
+      </div>
+      <div className="content-div">
+        <span>{displayContent}</span>
+        {content.length > 100 && (
+          <button onClick={toggleExpansion}>{isExpanded ? "접기" : "더 보기"}</button>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default ReviewItem;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 90px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.color.white};
+  border-radius: 6px;
+
+  padding: 10px;
+
+  .user-info-score-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .user-info-div {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      align-items: center;
+
+      span.user-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${({ theme }) => theme.color.gray700};
+      }
+      span.date {
+        font-size: 12px;
+        font-weight: 300;
+        color: ${({ theme }) => theme.color.gray300};
+      }
+    }
+  }
+
+  .content-div {
+    span {
+      line-height: 1.5;
+      color: ${({ theme }) => theme.color.gray400};
+      flex-grow: 1;
+      margin-right: 8px;
+    }
+
+    button {
+      color: ${({ theme }) => theme.color.gray300};
+    }
+  }
+`;

리뷰: 오 넵 감사합니다. 해당 방식으로 수정 완료하였습니다!
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "@emotion/styled";
 import { css, Theme } from "@emotion/react";
 import CheckIcon from "components/inputs/TextInput/CheckIcon";
-import { TConditionCheck } from "./types/TConditionCheck";
+import { TConditionCheck } from "components/inputs/TextInput/types/TConditionCheck";
 
 interface Props {
   name?: string;
@@ -12,6 +12,7 @@ interface Props {
   conditionList?: string[];
   conditionCheckList?: TConditionCheck[];
   multiline?: boolean;
+  height?: string;
   onTextChange?: (value: string, isValid: boolean) => void;
 }
 
@@ -23,6 +24,7 @@ const TextInput: React.FC<Props> = ({
   conditionList,
   conditionCheckList,
   multiline = false,
+  height,
   onTextChange,
 }) => {
   const [status, setStatus] = useState(value === "" ? "default" : "success"); // default / success / invalid / focus
@@ -76,7 +78,7 @@ const TextInput: React.FC<Props> = ({
   }, [enteredValue, status, onTextChange]);
 
   return (
-    <EmotionWrapper>
+    <EmotionWrapper height={height}>
       {label && <span className="label">{label}</span>}
       {conditionList && (
         <div className="spanList">
@@ -179,6 +181,7 @@ const EmotionWrapper = styled.div<Props>`
     ${({ theme }) => commonStyles(theme)};
     position: relative;
     resize: none;
+    height: ${({ height }) => height ?? "auto"};
   }
 `;
 

리뷰: 넵 수정했습니다!
@@ -0,0 +1,105 @@
+import styled from "@emotion/styled";
+import RestaurantExternalLinkIcon from "feature/restaurants/restaurantsDetail/components/icons/RestaurantExternalLinkIcon";
+import Link from "next/link";
+
+interface Props {
+  restaurantId: string;
+  userAuth?: number;
+  restaurantName: string;
+  restaurantAddress: string;
+  organizationName: string;
+  link?: string;
+  isMain?: boolean;
+}
+
+const RestaurantDetailHeaderSection: React.FC<Props> = ({
+  restaurantId,
+  userAuth,
+  restaurantName,
+  restaurantAddress,
+  organizationName,
+  link,
+  isMain = true,
+}) => {
+  return (
+    <EmotionWrapper>
+      <div className="over-title-div">
+        <span className="subtitle">{organizationName}</span>
+        {isMain &&
+          (userAuth === 0 || userAuth === 1 ? (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/edit"}>
+              맛집 수정
+            </Link>
+          ) : (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/copy"}>
+              맛집 수정
+            </Link>
+          ))}
+      </div>
+      <h1 className="title">{restaurantName}</h1>
+      <div className="under-title-div">
+        <span className="subtitle">{restaurantAddress}</span>
+        {link && (
+          <Link className="link-div" href={link}>
+            <RestaurantExternalLinkIcon />
+            <span className="link-span">맛집 상세 정보 &gt;</span>
+          </Link>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailHeaderSection;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: left;
+  gap: 8px;
+
+  span {
+    font-weight: 300;
+    margin-left: 2px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray600};
+  }
+
+  span.subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray300};
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .under-title-div,
+  .over-title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .link-div {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    text-decoration-line: none;
+
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .link-span {
+    font-size: 12px;
+    font-weight: 300;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

리뷰: restaurantId를 받아올 때 `const restaurantId = query.restaurantId ?? 0;` 이렇게만 했더니 props로 넘겨줄 때 타입 에러가 떠서 저렇게 설정한건데, 현재는  `const restaurantId = (query.restaurantId ?? 0) as string;` 아예 이런 식으로 타입을 명시해주어서 props로 받아올 때에도 string으로만 받아오도록 수정했습니다!
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import RestaurantsReviewForm from "feature/restaurants/restaurantsReview/components/form/RestaurantsReviewForm";
+
+interface Props {
+  restaurantId: string;
+}
+
+const ViewRestaurantReviewCreate: React.FC<Props> = ({ restaurantId }) => {
+  return (
+    <EmotionWrapper>
+      <RestaurantsReviewForm restaurantId={restaurantId} isEditMode={false} />
+    </EmotionWrapper>
+  );
+};
+
+export default ViewRestaurantReviewCreate;
+
+const EmotionWrapper = styled.div``;

리뷰: [여기](https://github.com/SystemConsultantGroup/foodhub-frontend/pull/27#discussion_r1373127345)에서 이유를 설명하였고, 해당 부분 string으로만 받아오도록 수정했습니다!
@@ -1,8 +1,100 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
+import './Login.scss';
+
+class Login extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      id: '',
+      pw: '',
+    };
+  }
+
+  handleInput = e => {
+    const { value, name } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  goToMain = e => {
+    fetch('http://10.58.0.100:8000/users/signin', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.id,
+        password: this.state.pw,
+        nick_name: '이의연',
+        phonenumber: '01012345678',
+      }),
+    })
+      .then(response => response.json())
+      .then(result => {
+        if (result.message === 'SUCCESS') {
+          this.props.history.push('/MainEuiyeon');
+        } else {
+          alert('아이디 및 비밀번호를 확인하세요!');
+        }
+      });
+  };
 
-class LoginEuiyeon extends React.Component {
   render() {
-    return <div>11</div>;
+    return (
+      <div class="Login">
+        <section className="loginBox">
+          <div className="logo">
+            <div className="logoFont">Westagram</div>
+          </div>
+
+          <form className="loginForm">
+            <div className="inputWrap">
+              <div className="inputId">
+                <input
+                  className="input"
+                  id="idInput"
+                  type="text"
+                  name="id"
+                  placeholder="전화번호, 사용자 이름 또는 이메일"
+                  onKeyUp={this.checkValid}
+                  onChange={this.handleInput}
+                />
+              </div>
+              <div className="inputPassword">
+                <input
+                  className="input"
+                  id="pwInput"
+                  type="password"
+                  name="pw"
+                  placeholder="비밀번호 (6자리 이상)"
+                  onKeyUp={this.checkValid}
+                  onChange={this.handleInput}
+                />
+              </div>
+            </div>
+
+            <div className="buttonWrap">
+              <button
+                className={
+                  this.state.id.includes('@') && this.state.pw.length >= 6
+                    ? 'loginBtn'
+                    : 'loginBtn_disabled'
+                }
+                type="button"
+                onClick={this.goToMain}
+              >
+                {' '}
+                로그인{' '}
+              </button>
+            </div>
+          </form>
+
+          <div className="forgotText">
+            <a className="forgotPassword">비밀번호를 잊으셨나요?</a>
+          </div>
+        </section>
+      </div>
+    );
   }
 }
-export default LoginEuiyeon;
+
+export default withRouter(Login);

리뷰: 리액트 관련 라이브러리 import가 더 우선순위에 위치해야 할 것 같습니다!
@@ -1,8 +1,100 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
+import './Login.scss';
+
+class Login extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      id: '',
+      pw: '',
+    };
+  }
+
+  handleInput = e => {
+    const { value, name } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  goToMain = e => {
+    fetch('http://10.58.0.100:8000/users/signin', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.id,
+        password: this.state.pw,
+        nick_name: '이의연',
+        phonenumber: '01012345678',
+      }),
+    })
+      .then(response => response.json())
+      .then(result => {
+        if (result.message === 'SUCCESS') {
+          this.props.history.push('/MainEuiyeon');
+        } else {
+          alert('아이디 및 비밀번호를 확인하세요!');
+        }
+      });
+  };
 
-class LoginEuiyeon extends React.Component {
   render() {
-    return <div>11</div>;
+    return (
+      <div class="Login">
+        <section className="loginBox">
+          <div className="logo">
+            <div className="logoFont">Westagram</div>
+          </div>
+
+          <form className="loginForm">
+            <div className="inputWrap">
+              <div className="inputId">
+                <input
+                  className="input"
+                  id="idInput"
+                  type="text"
+                  name="id"
+                  placeholder="전화번호, 사용자 이름 또는 이메일"
+                  onKeyUp={this.checkValid}
+                  onChange={this.handleInput}
+                />
+              </div>
+              <div className="inputPassword">
+                <input
+                  className="input"
+                  id="pwInput"
+                  type="password"
+                  name="pw"
+                  placeholder="비밀번호 (6자리 이상)"
+                  onKeyUp={this.checkValid}
+                  onChange={this.handleInput}
+                />
+              </div>
+            </div>
+
+            <div className="buttonWrap">
+              <button
+                className={
+                  this.state.id.includes('@') && this.state.pw.length >= 6
+                    ? 'loginBtn'
+                    : 'loginBtn_disabled'
+                }
+                type="button"
+                onClick={this.goToMain}
+              >
+                {' '}
+                로그인{' '}
+              </button>
+            </div>
+          </form>
+
+          <div className="forgotText">
+            <a className="forgotPassword">비밀번호를 잊으셨나요?</a>
+          </div>
+        </section>
+      </div>
+    );
   }
 }
-export default LoginEuiyeon;
+
+export default withRouter(Login);

리뷰: import './Login.scss'; 위로 가야될 것 같습니다!! 😎
@@ -1,8 +1,100 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
+import './Login.scss';
+
+class Login extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      id: '',
+      pw: '',
+    };
+  }
+
+  handleInput = e => {
+    const { value, name } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  };
+
+  goToMain = e => {
+    fetch('http://10.58.0.100:8000/users/signin', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: this.state.id,
+        password: this.state.pw,
+        nick_name: '이의연',
+        phonenumber: '01012345678',
+      }),
+    })
+      .then(response => response.json())
+      .then(result => {
+        if (result.message === 'SUCCESS') {
+          this.props.history.push('/MainEuiyeon');
+        } else {
+          alert('아이디 및 비밀번호를 확인하세요!');
+        }
+      });
+  };
 
-class LoginEuiyeon extends React.Component {
   render() {
-    return <div>11</div>;
+    return (
+      <div class="Login">
+        <section className="loginBox">
+          <div className="logo">
+            <div className="logoFont">Westagram</div>
+          </div>
+
+          <form className="loginForm">
+            <div className="inputWrap">
+              <div className="inputId">
+                <input
+                  className="input"
+                  id="idInput"
+                  type="text"
+                  name="id"
+                  placeholder="전화번호, 사용자 이름 또는 이메일"
+                  onKeyUp={this.checkValid}
+                  onChange={this.handleInput}
+                />
+              </div>
+              <div className="inputPassword">
+                <input
+                  className="input"
+                  id="pwInput"
+                  type="password"
+                  name="pw"
+                  placeholder="비밀번호 (6자리 이상)"
+                  onKeyUp={this.checkValid}
+                  onChange={this.handleInput}
+                />
+              </div>
+            </div>
+
+            <div className="buttonWrap">
+              <button
+                className={
+                  this.state.id.includes('@') && this.state.pw.length >= 6
+                    ? 'loginBtn'
+                    : 'loginBtn_disabled'
+                }
+                type="button"
+                onClick={this.goToMain}
+              >
+                {' '}
+                로그인{' '}
+              </button>
+            </div>
+          </form>
+
+          <div className="forgotText">
+            <a className="forgotPassword">비밀번호를 잊으셨나요?</a>
+          </div>
+        </section>
+      </div>
+    );
   }
 }
-export default LoginEuiyeon;
+
+export default withRouter(Login);

리뷰: 수정완료 😊