@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react';
+import './Feed.scss';
+import Comment from './Comment';
+
+function Feed(props) {
+  const [comment, setComment] = useState('');
+  const [addCommentList, setAddCommentList] = useState([]);
+  const [cmtContList, setCmtContList] = useState([]);
+  const userName = 'test01';
+
+  const onChange = event => {
+    setComment(event.target.value);
+  };
+
+  const addComment = event => {
+    event.preventDefault();
+    setAddCommentList([
+      ...addCommentList,
+      {
+        name: userName,
+        content: comment,
+      },
+    ]);
+    setComment('');
+  };
+
+  useEffect(() => {
+    fetch('http://localhost:3000/data/younghyunHan/commentData.json')
+      .then(res => res.json())
+      .then(data => {
+        setCmtContList(data);
+      });
+  }, []);
+
+  return (
+    <article className="feed">
+      <div className="feedTop">
+        <div className="feedTopOne">
+          <div className="profileLogo">
+            <img className="profileLogoImg" src={props.profileLogo} />
+          </div>
+          <div className="profileName">
+            <div className="profileNameOne">{props.userName}</div>
+            <span className="profileNameTwo">Wecode - 위코드</span>
+          </div>
+        </div>
+        <i className="fas fa-ellipsis-h" />
+      </div>
+      <img alt="피드 이미지" className="feedImg" src={props.feedImg} />
+      <div className="feedThree">
+        <div>
+          <i className="far fa-heart" />
+          <i className="far fa-comment" />
+          <i className="fas fa-upload" />
+        </div>
+        <i className="far fa-bookmark" />
+      </div>
+      <div className="feedFour">
+        <img alt="좋아요 누른 사람" className="man" src={props.userMan} />
+        <span className="feedFourWord">seungyoun_iain</span>
+        &nbsp;외&nbsp;
+        <span className="feedFourWordTwo">4명</span>이 좋아합니다.
+      </div>
+      <div className="feedFive">
+        <span className="feedFiveWord">wecode_bootcamp</span>"위코드는 단순
+        교육업체가 아닌 개발자 커뮤니티입니다. Wecode에서 배우고 저는 총 5개
+        회사에서 오퍼를 받았습니다.
+      </div>
+      <div className="comment">
+        {cmtContList.map(content => {
+          return (
+            <Comment
+              key={content.id}
+              userName={content.userName}
+              content={content.content}
+            />
+          );
+        })}
+        {addCommentList.map((content, index) => {
+          return (
+            <div key={index}>
+              <Comment content={content.content} userName={content.name} />
+            </div>
+          );
+        })}
+      </div>
+      <span className="postTime">54분 전</span>
+      <form className="commentSection" onSubmit={addComment}>
+        <input
+          type="text"
+          placeholder="댓글 달기..."
+          className="comment"
+          onChange={onChange}
+          value={comment}
+        />
+        <button className="postButton">게시</button>
+      </form>
+    </article>
+  );
+}
+
+export default Feed;

리뷰: - input의 value가 들어오는 부분인데, 초기값이 string이 아닌 배열이 들어있음
- cmtContents라는 변수명과 배열인 초기값의 조합이 배열 데이터를 연상시킴
- 명확하지만 간결한 state명으로 수정. ex) `comment` / `commentList`