Login.js

import React, { useState } from 'react';
import { useNavigate } from 'react-router';
import './LoginOh.scss';

function Login() {
  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/main-oh');
  };

  const [inputId, setIdInput] = useState('');
  const [inputPwd, setPwdInput] = useState('');

  const handleIdInput = e => {
    setIdInput(e.target.value);
  };
  const handlePwdInput = e => {
    setPwdInput(e.target.value);
  };

  return (
    <div className="login">
      <div className="loginWrapper">
        <div className="logoWrapper">
          <div className="logo">Westagram</div>
        </div>
        <div className="input">
          <input
            className="inputId"
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            value={inputId}
            onChange={handleIdInput}
          />
          <input
            className="inputPwd"
            type="password"
            placeholder="비밀번호"
            value={inputPwd}
            onChange={handlePwdInput}
          />
          <button className="loginBtn" onClick={goToMain}>
            로그인
          </button>
        </div>
        <footer className="forgotPwd">
          <a href="/login-oh">비밀번호를 잊으셨나요?</a>
        </footer>
      </div>
    </div>
  );
}

export default Login;

Main.js

import React from 'react';
import Nav from '../../../components/Nav/Nav';
import './MainOh.scss';

function Main() {
  return (
    <div className="main">
      <Nav />
      <main>
        <div className="feeds">
          <article>
            <div className="feedUpper">
              <div className="imageAndId">
                <img
                  className="profileImage"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="profile_of_ej__oh"
                />
                <div className="profileId">ej__oh</div>
              </div>
              <i className="fas fa-ellipsis-h" />
            </div>
            <div className="feedImage">
              <img
                src="/images/eojineOh/mangorookie.jpeg"
                alt="mangoAndRookie"
              />
            </div>
            <div className="feedInfo">
              <div className="feedIcons">
                <div className="iconsLeft">
                  <img src="/images/eojineOh/heart.png" alt="heart" />
                  <img src="/images/eojineOh/reply.png" alt="reply" />
                  <img src="/images/eojineOh/dmbutton.png" alt="dmbutton" />
                </div>
                <img
                  className="iconsRight"
                  src="/images/eojineOh/save.png"
                  alt="save"
                />
              </div>
              <div className="feedLike">
                <img
                  className="profileImage"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="profile_of_ej__oh"
                />
                <div className="liketext">
                  <span>jrong.__</span> 님 외 <span>1500</span> 명이 좋아합니다
                </div>
              </div>
              <div className="feedText">
                <span className="profileId">ej__oh</span>
                <span className="feedDescription">
                  위워크에서 진행한 베이킹 클래스 ...
                </span>
                <button className="showMoreBtn">더 보기</button>
              </div>
              <div className="reply" /> <div className="hoursAgo">42분 전</div>
            </div>
            <div className="replyAndBtn">
              <input
                className="reply"
                //
                type="text"
                placeholder="댓글 달기..."
              />
              <button className="replyBtn">게시</button>
            </div>
          </article>
        </div>
        <div className="main-right">
          <div className="rightMyProfile">
            <img
              className="image"
              src="/images/eojineOh/profile_of_ej__oh.JPG"
              alt="ej__oh"
            />
            <div className="profileIdAndText">
              <div className="profileId">ej__oh</div>
              <div className="profileText">Hi || Wecoder__27</div>
            </div>
          </div>
          <div className="rightStory">
            <div className="upper">
              <div className="title">스토리</div>
              <button className="showAll">모두 보기</button>
            </div>
            <div className="othersWrapper">
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">15분 전</div>
                </div>
              </div>
            </div>
          </div>
          <div className="recommend">
            <div className="upper">
              <div className="title">회원님을 위한 추천</div>
              <button className="showMore">모두 보기</button>
            </div>
            <div className="othersWrapper">
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
              <div className="othersProfile">
                <img
                  className="image"
                  src="/images/eojineOh/profile_of_ej__oh.JPG"
                  alt="ej__oh"
                />
                <div className="others">
                  <div className="profileId">ej__oh</div>
                  <div className="ago">회원님을 위한 추천입니다.</div>
                </div>
                <button className="followOther">팔로우</button>
              </div>
            </div>
          </div>
          <div className="rightInfo">
            소개·도움말·홍보·센터·API·채용 정보·개인정보처리방침·약관·위치·인기
            계정·해시태그·언어
            <br />
            <br />© 2021 INSTAGRAM FROM META
          </div>
        </div>
      </main>
    </div>
  );
}

export default Main;

CRA로 만든 westagram 프로젝트의 폴더 구조는 다음과 같다 !

Router, index.html - index.js - Main.js 관계 등의 개념은 React Intro 글에서 더 다룰 예정 !