@@ -1,7 +1,246 @@
-import React from 'react';
+import React, { Component } from 'react';
+import CommentList from './CommentList/CommentList';
+import IconList from './IconList/IconList';
+import userImg from '../../../assets/images/IMG_2625.jpg';
+import feedImg from '../../../assets/images/feed.jpg';
+import './Main.scss';
 
-function Main() {
-  return <div>Nav bar</div>;
+class Main extends Component {
+  render() {
+    return (
+      <div className="main-wrapper">
+        {/*  nav  */}
+        <nav>
+          <a href="#" id="logo">
+            <i className="fab fa-instagram icon"></i>
+            <h2>westagram</h2>
+          </a>
+          {/* search-form  */}
+          <form className="search-form">
+            <i className="fas fa-search icon"></i>
+            <input
+              type="text"
+              className="search-form__input"
+              aria-label="검색"
+              placeholder="검색"
+            />
+          </form>
+
+          {/* right icons */}
+          <ul className="right-icons">
+            <li>
+              <a href="#">
+                {/* <span className="ir_pm">explore</span> */}
+                <i className="far fa-compass icon"></i>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                {/* <span className="ir_pm">heart</span> */}
+                <i className="far fa-heart icon"></i>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                {/* <span className="ir_pm">profile</span> */}
+                <i className="far fa-user icon"></i>
+              </a>
+            </li>
+            {/*  right icons */}
+          </ul>
+        </nav>
+        {/*  nav  */}
+        <main>
+          {/*  feeds  */}
+          <div className="feeds">
+            <article className="user-feeds">
+              <div className="user-feeds__profile">
+                <a href="#" className="user-feeds__profile--me">
+                  <div className="user-feeds__profile--img">
+                    <img src={userImg} alt="피드사진" />
+                  </div>
+                  <strong className="user-feeds__profile--name">
+                    wecode_bootcamp
+                  </strong>
+                </a>
+                <a href="#" className="user-feeds__profile--option">
+                  <span className="ir_pm">option plus</span>
+                  <i className="fas fa-ellipsis-h icon"></i>
+                </a>
+              </div>
+              <div className="feeds-content__img">
+                <img src={feedImg} alt="피드사진" />
+              </div>
+              {/* feeds content */}
+              <div className="feeds__content">
+                <IconList />
+                <div className="feeds__likes">
+                  <div className="user-feeds__profile--img">
+                    <img src={userImg} alt="피드사진" />
+                  </div>
+                  <p>
+                    <b className="user-feeds__name--others">vi2920va</b>님
+                    <b> 외 10명</b>이 좋아합니다.
+                  </p>
+                </div>
+                {/*  feeds content */}
+                <div className="feeds-comment">
+                  <p className="feeds-comment__text">
+                    <strong>wecode_bootcamp</strong>
+                    <em>위코드에서 인스타그램 클론 코딩하는 중</em>
+                    <button>더 보기</button>
+                  </p>
+                  <CommentList />
+                </div>
+              </div>
+              <form className="add-comment" onSubmit={this.handleClickbtn}>
+                <input
+                  type="text"
+                  id="add-input"
+                  placeholder="댓글 달기..."
+                  aria-label="댓글추가"
+                  name="conent"
+                />
+                <button type="submit" className="add-btn">
+                  게시
+                </button>
+              </form>
+            </article>
+          </div>
+          {/* feeds  */}
+          {/*  main-right  */}
+          <div className="main-right">
+            {/*  main-right my info */}
+            <div className="main-right__myProfile">
+              <h2 className="main-right__myProfile__Img">
+                <i className="profile-img icon"></i>
+              </h2>
+              <div className="main-right__myProfile__info">
+                <span className="main-right__myProfile__info--name">
+                  wecode_bootcamp
+                </span>
+                <span className="main-right__myProfile__info--place">
+                  Wecode | 위코드
+                </span>
+              </div>
+            </div>
+            {/* main-right my info */}
+            {/* main-right friends story */}
+            <div className="main-right__story">
+              <div className="main-right__story__title">
+                <h2>스토리</h2>
+                <a href="#">모두 보기</a>
+              </div>
+              <ul className="main-right__story__list">
+                <li>
+                  <a href="#">
+                    <figure>
+                      <img src={userImg} alt="user vi2920va" />
+                      <figcaption>
+                        <strong>_yum_s</strong>
+                        <span>16분전</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <figure>
+                      <img src={userImg} alt="user vi2920va" />
+                      <figcaption>
+                        <strong>_yum_s</strong>
+                        <span>16분전</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <figure>
+                      <img src={userImg} alt="user vi2920va" />
+                      <figcaption>
+                        <strong>_yum_s</strong>
+                        <span>16분전</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+                <li>
+                  <a>
+                    <figure>
+                      <img src={userImg} alt="user vi2920va" />
+                      <figcaption>
+                        <strong>_yum_s</strong>
+                        <span>16분전</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            {/* friend story */}
+            {/* friend for you */}
+            <div className="main-right__forYou">
+              <div className="main-right__forYou__title">
+                <h2>회원님을 위한 추천</h2>
+                <a href="#">모두 보기</a>
+              </div>
+              <ul className="main-right__forYou__list">
+                <li>
+                  <a href="#">
+                    <figure>
+                      <img src={userImg} alt="musinsa standard" />
+                      <figcaption>
+                        <strong>musina_standard</strong>
+                        <em>_ieqnd_a님 외2명이</em>
+                        <span>팔로우</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+                <li>
+                  <a href="#">
+                    <figure>
+                      <img src={userImg} alt="yoona" />
+                      <figcaption>
+                        <strong>yoona_09</strong>
+                        <em>_ieqnd_a님 외2명이</em>
+                        <span>팔로우</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+                <li>
+                  <a href="#">
+                    <figure>
+                      <img src={userImg} alt="starbucks korea" />
+                      <figcaption>
+                        <strong>starbucks_korea</strong>
+                        <em>_ieqnd_a님 외2명이</em>
+                        <span>팔로우</span>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            {/* friend for you */}
+            {/* footer */}
+            <footer>
+              <p>
+                westagram 정보, 지원 홍보 센터·API· <br />
+                채용정보·개인정보처리방침 약관·
+                <br />
+                디렉터리·프로필·해시태그 언어
+              </p>
+              <p className="copyright">@ 2019 WESTAGRAM</p>
+            </footer>
+          </div>
+          {/*  main-right */}
+        </main>
+      </div>
+    );
+  }
 }
 
 export default Main;

리뷰: 이렇게 반복되는 UI는 Array.map을 활용해서 표현해보세요 정적인 컨텐츠라면  상수데이터와 조합하면 표현 가능해보입니다.