@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from "react";
+import MainFeeds from "./MainFeeds";
+import "./Main.scss";
+import compass from "../assets/icon/compass.png";
+import heart from "../assets/icon/heart.png";
+import instagram from "../assets/icon/instagram.png";
+import search from "../assets/icon/search.png";
+import user from "../assets/icon/user.png";
+import userimg from "../assets/images/test.jpg";
+import feedimg from "../assets/images/test.jpg";
+
+const INFO_LIST = [
+  { id: 1, link: "https://instargram.com", text: "소개" },
+  { id: 1, link: "https://instargram.com", text: "소개" },
+  { id: 1, link: "https://instargram.com", text: "소개" },
+  { id: 1, link: "https://instargram.com", text: "소개" },
+  { id: 1, link: "https://instargram.com", text: "소개" },
+  { id: 1, link: "https://instargram.com", text: "소개" },
+  { id: 1, link: "https://instargram.com", text: "소개" },
+];
+
+const Main = () => {
+  return (
+    <>
+      <nav className="nav">
+        <div className="navLeft">
+          <img className="navIcon iconInstagram" alt="." src={instagram} />
+          <span className="logo">Westagram</span>
+        </div>
+        <div className="searchBar">
+          <img className="iconSearch" alt="." src={search} />
+          <input
+            className="searchBox"
+            type="text"
+            aria-label="검색창"
+            placeholder="검색"
+          />
+        </div>
+        <div className="navRight">
+          <img className="navIcon" alt="." src={compass} />
+          <img className="navIcon" alt="." src={heart} />
+          <img className="navIcon" alt="." src={user} />
+        </div>
+      </nav>
+      <div className="main">
+        <MainFeeds />
+        <div className="mainRight">
+          <div className="mainRightTop">
+            <div className="photo">
+              <img src={userimg} alt="."></img>
+            </div>
+            <div className="name">
+              <p className="username">jini</p>
+              <p className="username2">지니지니</p>
+            </div>
+          </div>
+          <div className="stories">
+            <div className="storiesTop">
+              <p className="story">스토리</p>
+              <p>모두 보기</p>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+            </div>
+          </div>
+          <div className="recommend">
+            <div className="storiesTop">
+              <p className="story">회원님을 위한 추천</p>
+              <p>모두 보기</p>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+              <button>팔로우</button>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+              <button>팔로우</button>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+              <button>팔로우</button>
+            </div>
+            <div className="storyPeople">
+              <div className="photo">
+                <img src={userimg} alt="."></img>
+              </div>
+              <div className="name">
+                <p className="username">jini</p>
+                <p className="username2">지니지니</p>
+              </div>
+              <button>팔로우</button>
+            </div>
+          </div>
+          <div>
+            <ul>
+              {INFO_LIST.map((info) => {
+                return (
+                  <li key={info.id}>
+                    <a href="{info.link}">{info.text}</a>
+                  </li>
+                );
+              })}
+            </ul>
+            <p className="copyright">ⓒ 2023 WESTAGRAM</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Main;

리뷰: map 메서드에 콜백함수의 두번 째 인자, 즉 진희님의 코드에서 user라고하는 변수는 기준배열(commnetArray)의 value(배열의 각각의 요소)마다의 index(배열내의 순서)를 나타냅니다.  리액트에서 반복문을 사용해서 key 속성을 꼭 부여하라고 하는 이유는 해당요소를 리액트가 명확이 인식하기 위함인데, 배열의 index를 key값으로 부여하는것은 조금 지양하는 방법입니다. 어떤 값으로 key 속성을 부여해야할 지 조금 더 고민해보세요!