04_일기만들기,참여,내 일기

 

내가 만든 프로젝트에는 밑의 3가지 기능이 존재한다!

 

 

function App() {
  return (
    <div className="All">
      <Route path="/" exact component={Index} />
      <Route path="/login" component={Login} />
      <Route path="/regist" component={Regist} />
      <Route path="/oldproject" component={OldProject} />
      <Route path="/project" component={Project} />
      <Route path="/newproject" component={NewProject} />
      <Route path="/done" component={Emaildone} />
      <Route path="/joinproject" component={JoinProject} />
      <Route path="/findid" component={FindId} />
      <Route path="/findpassword" component={FindPassword} />
      <Route path="/member/reset/password" component={ResetPassword} />
    </div>
  );
}

이전에 해당 프로젝트는 위주소드롤 이루어져 있다고 했는데, 이중 3개를 소개할 것이다.

 

 

먼저 프로젝트를 만드는 만들기 버튼을 누르면 위 페이지로 이동하게 된다.

 

참고로 프로젝트에 참여하는 페이지도 똑같이 생겼다!

 

참고로 내 프로젝트는 프로젝트를 만들면 해당 프로젝트마다 고유의 참여코드가 생성된다. 이를 사용자가 입력하면 만들어진 프로젝트에 참여할 수 있는 것이다! (discord 를 써봤다면 채널에 들어가기위해서 코드를 입력하여 들어가는것과 유사하다)

 

 

 

 

그리고 내 알바일기 버튼을 누르면 아래와 같이 사용자가 만들었거나 참여된 프로젝트들을 볼 수 있다.

 

 

 

그럼 이제 코드를 한번 뜯어보자. 먼저 알바 만드는 부분의 코드부터 살펴보자.

 

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router";
import { checkEffectiveToken, CheckTokenMoveHome } from "../api/CheckToken";
import { api, PostApi } from "../api/UserApi";
import Header from "../components/Header";
import "../css/containers/NewProject.css";
import { addProject } from "../module/User";

function NewProject() {
  CheckTokenMoveHome();
  const dispatch = useDispatch();
  const history = useHistory();
  useEffect(() => {
    checkEffectiveToken(dispatch, history);
  }, []);

  const makeNewProject = async (e: any) => {
    const token = localStorage.getItem("token");

    e.preventDefault();
    dispatch(addProject(e.target.Name.value));
    const postapi = await PostApi(
      `${api}/api/newproject`,
      token !== null ? token : "",
      { projectName: e.target.Name.value }
    )
      .then(() => {
        history.push("/oldproject");
      })
      .catch((e) => {
        console.log("makeNewProject Error!!!");
      });
  };

  return (
    <>
      <Header />
      <div className="NewProject">
        <form onSubmit={makeNewProject}>
          <div className="Stepbox">
            매장명 하나면 충분합니다!
            <input
              type="text"
              placeholder="매장명을 입력하세요"
              id="Name"
              className="question"
            ></input>
          </div>
          <button className="makeProject">만들기!</button>
        </form>
      </div>
    </>
  );
}

export default NewProject;

우선 페이지가 랜더링이 되면 토큰검사를 해서 만약 로그인이 안되어있는데 들어가졌거나 토큰 유효시간이 지난 경우에 되돌려 보낸다.

 

그리고 버튼이 눌린 경우, api요청을 해서 서버에 프로젝트를 만들고 사용자 정보를 업데이트해서 만들어진 프로젝트를 받아오는 작업을 한다.

 

 

 

import React from "react";
import { useHistory } from "react-router";
import { CheckTokenMoveHome } from "../api/CheckToken";
import { api, PostApi } from "../api/UserApi";
import Header from "../components/Header";
import "../css/containers/NewProject.css";
function JoinProject() {
  CheckTokenMoveHome();
  const token = localStorage.getItem("token");
  const history = useHistory();

  const joinProject = async (e: any) => {
    e.preventDefault();

    const success = () => {
      alert("성공적으로 참여되었습니다");
      history.push("/oldproject");
    };
    await PostApi(`${api}/api/joinproject`, token !== null ? token : "", {
      projectId: e.target.code.value,
    }).then(() => {
      localStorage.getItem("response") === "true"
        ? success()
        : alert("이미 참여되었거나 존재하지 않는 코드입니다");
    });
  };

  return (
    <>
      <Header />
      <div className="NewProject">
        <form onSubmit={joinProject}>
          <div className="Stepbox">
            참여코드 하나면 충분합니다!
            <input
              type="text"
              placeholder="참여코드를 입력하세요"
              id="code"
              className="question"
            ></input>
          </div>
          <button className="makeProject">참여하기!</button>
        </form>
      </div>
    </>
  );
}

export default JoinProject;

프로젝트에 참여하는 join 페이지도 유사한 작업을 한다. 다만 버튼을 눌렀을때 요청하는 api가 다르다! 보면 이번에는 FoinProject함수를 만들어서 제출할때 실행되는것을 확인 할 수 있는데,

 

과정자체는 프로젝트를 만들때와 유사하게 api를 보내고 유저 정보를 업데이트하는 것을 볼 수 있다.

 

 

 

 

 

그럼 마지막으로 현재 나의 프로젝트를 표시하는 페이지를 보자.

 

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { checkEffectiveToken, CheckTokenMoveHome } from "../api/CheckToken";
import { useHistory } from "react-router";
import Header from "../components/Header";
import "../css/containers/OldProject.css";
import { RootState } from "../module";
import { getCalendarApi } from "../api/UserApi";

type ProjecttitleProps = {
  projectId: string;
  projectName: string;
};

function Projecttitle({ projectId, projectName }: ProjecttitleProps) {
  const dispatch = useDispatch();
  const ongetCalendarApi = async () => {
    const token = localStorage.getItem("token");
    await getCalendarApi(token !== null ? token : "", { projectId }, dispatch);
  };
  return (
    <Link
      to={`project/?projectId=${projectId}`}
      className="diary-inner-box Select-diary-box"
      onClick={ongetCalendarApi}
    >
      {projectName}
    </Link>
  );
}

function OldProject() {
  CheckTokenMoveHome();
  const { projects } = useSelector((state: RootState) => state.Userinfo)[0];

  const dispatch = useDispatch();
  const history = useHistory();
  useEffect(() => {
    checkEffectiveToken(dispatch, history);
  }, []);

  return (
    <>
      <Header />
      <div className="diary-container">
        <Link to="/newproject" className="diary-inner-box Make-diary-box">
          새 일기 만들기
        </Link>
        {projects.map((project, index) => {
          return (
            <Projecttitle
              key={index}
              projectId={project.projectId}
              projectName={project.projectName}
            />
          );
        })}
      </div>
    </>
  );
}

export default OldProject;

 

먼저, 내 프로젝트 보는 페이지에서도 페이지를 만들 수 있는 버튼을 만들어 둔 부분을 확인할 수 있고, 이전에 가져온 유저 정보에서 해당 유저의 프로젝트 정보들을 불러와서 출력하는 것을 확인할 수 있다.

 

 

글을 쓰다보니 api와 데이터의 구조에 대해서 설명할 필요가 있을것 같다. 그에 대해서 다음 글에서 기록을 남겨보도록 하겠다!