03_Index 첫페이지

http://54.180.70.202/

 

 

먼저, 글을 작성하기 전에 아마존 서버를 이용해서 직접 올리는 과정까지 진행해봤다! 링크는 위에 올려두었으니 한번 둘러봐도 좋을 것 같다.

 

 

첫 페이지

 

 

Index 페이지의 컨테이너는 아래와 같다.

 

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUserinfoApi } from "../api/UserApi";
import Header from "../components/Header";
import Introduce from "../components/Introduce";
import MkProject from "../components/MkProject";

function Index() {
  const dispatch = useDispatch();

  useEffect(() => {
    const token = localStorage.getItem("token");
    getUserinfoApi(token, dispatch);
  }, []);

  return (
    <>
      <Header />
      <MkProject />
      <Introduce />
    </>
  );
}

export default Index;

 

페이지가 렌더링 된 이후 유효토큰 검사를 해서 토큰이 있는지 없는지 검사한다. 만약 이전에 로그인된 기록이 남아있어 localStorage 안에 토큰값이 들어있다면, 그대로 로그인상태를 유지하고, 토큰 유효성이 지났다고 반환이 돌아오면 다시 로그아웃 상태로 만들어준다.

 

또한 Index페이지에는 Header, MKProject, Introduce 세개의 컴포넌트로 이루어져 있는것을 볼 수 있다.

 

먼저 Header컴포넌트는

 

Header

말 그대로 페이지의 맨 윗부분을 담당하는 부분이다.

 

 

import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import CheckToken from "../api/CheckToken";
import "../css/components/Header.css";

function Header() {
  const [ScrollY, setScrollY] = useState(0); // window 의 pageYOffset값을 저장
  const [ScrollActive, setScrollActive] = useState(false);
  const history = useHistory();
  function handleScroll() {
    if (ScrollY > 10) {
      setScrollY(window.pageYOffset);
      setScrollActive(true);
    } else {
      setScrollY(window.pageYOffset);
      setScrollActive(false);
    }
  }
  useEffect(() => {
    function scrollListener() {
      window.addEventListener("scroll", handleScroll);
    } //  window 에서 스크롤을 감시 시작
    scrollListener(); // window 에서 스크롤을 감시
    return () => {
      window.removeEventListener("scroll", handleScroll);
    }; //  window 에서 스크롤을 감시를 종료
  });

  const onlogout = () => {
    if (CheckToken()) {
      localStorage.clear();
      history.go(0);
    }
  };

  return (
    <>
      <header className={"Header" + (ScrollActive ? " onScrolled" : "")}>
        <Link to="/" className="left">
          <div className="logo-icon"></div>
          <div className="logo"></div>
        </Link>
        <Link
          to={CheckToken() ? "/" : "/login"}
          onClick={onlogout}
          className="right"
        >
          {CheckToken() ? "로그아웃" : "로그인"}
        </Link>
      </header>
    </>
  );
}

export default Header;

 

 

Header 컴포넌트에는 크게 2가지 기능이 있다. 첫번째로 로그인, 로그아웃에 따라 달라지는 버튼을 보여주게 하는 부분과 페이지가 스크롤이 되었을때 그림자가 지면서 상단에 고정되게 하는 부분이다.

 

평소

스크롤 되었을때

 

 

 

그래서 scroll을 감지하였을때 setscrollactive 를 true로 만들어서 css에 클래스를 추가하는 방식으로 넣어주었다.

 

사실 이러한 비슷한 기능들을 많이 썻는데 Header에서는 useState를 사용하고 어떤 부분에서는 css 를 직접바꾸고 또 어떤부분에서는 그냥 삼항연산자를 쓰는 방식으로 통일되지 못하게 한게 살짝 아쉽다. 공부 목적으로 다 써본 것도 있지만 다음 번 프로젝트를 준비할때는 좀더 통일된 방식으로 써야겠다.

 

두번째 컴포넌트는 MkProject이다. 

 

import React from "react";
import { Link } from "react-router-dom";
import CheckToken from "../api/CheckToken";
import "../css/MkProject.css";

function MkProject() {
  return (
    <div className="MkProject">
      <div className="description">
        <div className="logo-title"></div>
        <p>그날의 알바 스케줄과 ,</p>
        <br />
        <p>그날의 기록을 써내려가는</p>
        <br />
        <br />
        <p>매장전용 스케쥴러</p>

        <div className="project">
          <Link
            to={CheckToken() ? "/newproject" : "/login"}
            className="indexbtn"
          >
            일기 만들기
          </Link>
          <Link
            to={CheckToken() ? "/oldproject" : "/login"}
            className="indexbtn"
          >
            내 알바일기
          </Link>
          <Link
            to={CheckToken() ? "/joinproject" : "/login"}
            className="indexbtn"
          >
            일기 참여
          </Link>
        </div>
      </div>
      <div className="icon"></div>
    </div>
  );
}

export default MkProject;

 

 

밑의 부분을 랜더링해주는 컴포넌트이다. 크게 특별한건 없다!

 

 

마지막 컴포넌트는 그아래 설명들을 넣어둔 컴포넌트이다.

import React from "react";
import { Link } from "react-router-dom";
import "../css/containers/Introduce.css";
function Introduce() {
  return (
    <div className="Introduce">
      <div className="comment">함께 만들어 나가는 ,</div>
      <div className="shadowBox intro">
        <div className="Box first">
          아르바이트생도
          <div className="staff">
            <img
              className="img"
              src="https://img.icons8.com/external-icongeek26-flat-icongeek26/100/000000/external-waiter-food-and-delivery-icongeek26-flat-icongeek26-1.png"
            />
            <img
              className="img"
              src="https://img.icons8.com/external-icongeek26-flat-icongeek26/100/000000/external-waiter-food-and-delivery-icongeek26-flat-icongeek26.png"
            />
          </div>
        </div>
        <div className="Box first">
          관리자도
          <img
            className="img"
            src="https://img.icons8.com/external-filled-outline-icons-maxicons/100/000000/external-boss-office-space-filled-outline-filled-outline-icons-maxicons.png"
          />
        </div>
      </div>

      <div className="comment">가장 직관적인 ,</div>
      <div className="shadowBox intro">
        <div className="Box">
          그날의 기록을 일기처럼!
          <div className="schedule-img img"></div>
        </div>
      </div>

      <div className="comment">가장 편리한 ,</div>
      <div className="shadowBox intro">
        <div className="Box">
          일일히 카카오톡, 수기로 스케줄을 작성하셨나요?
          <div className="fixedschedule img"></div>
        </div>
      </div>

      <div className="comment">오직 매장만을 위한 스케줄러 ,</div>
      <div className="logo-title"></div>
      <Link to="/login" className="btn start-btn">
        로그인하고 시작하기
      </Link>
    </div>
  );
}

export default Introduce;

 

 

 

css까지는 따로 설명하지 않을 것 같고 궁금하다면 

 

https://github.com/supersfel

supersfel - Overview

나의 깃 계정을 참고해봐도 좋을 것 같다!