[trip planner 프로젝트] 4. 메인 페이지 구성

저는 trip planner를 기획하면서 메인페이지는 나라소개를 넣었고, 컨텐츠로는 동행찾기 게시판 / 계획짜기 / 회원관리 ( 로그인, 회원가입, 아이디 비밀번호 찾기 등) 을 생각하였습니다.

 

* App.js

      <div>
          <Route path="/" component={Main} exact/>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={SignUp}/>
          <Route path="/search" component={Search}/>
          <Route path="/plan" component={Plan} />
          <Route path="/board" component={Board}/>
      </div>

App.js는 react 에서의 메인시작이다.

 

Main - 메인페이지

login - 로그인 페이지

signup - 회원가입 페이지

search - 아이디 / 비밀번호 찾기 페이지

plan - 계획짜기 페이지

board - 일행찾기 게시판

 

 

Main 은 Header + SubHeader + 나라소개 페이지로 구성되어 있다.

Header에는 로고 & 멤버 관련 ( 로그인 + 회원가입 ) 으로 구성되어 있다.

 

 

&Header에서는 로그인 관리로 session을 사용하였다.

//관련 url : https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

{window.sessionStorage.nickname} 

 

&SubHeader에서는 컨텐츠를 나누었다

- 계획 짜기 / 홈 / 게시판

 

&Main에서는 google map을 통해 나라소개/나라를 나눴다.

메인화면 페이지

 

나라소개와 나라정보는 기존에 데이터를 수집한거에서  restful api를 통해 데이터를 불러와서 output한다.

    useEffect( () => {
        fetch(api.serverAPI+"/main/country")
            .then(res=>res.json())
            .then(data=> {
                setCountry(data);
            });
    }, []);