search

DDD-Community / hermes-web

HERMES (WEB 2) 웹 프론트 Repo입니다.
0 stars 0 forks source link

페이지 구조 설계 #8

Open bbanderson opened 3 years ago

bbanderson commented 3 years ago

페이지 구조 설계

와이어프레임을 보면서 페이지 인터랙션에 관한 이슈를 정리합니다.

Goals

페이지 경로

임의로 지은 path입니다. 협의 후 확정하면 될 것 같습니다. 경로 기능
/ 랜딩페이지
/join 회원가입
/welcome 최초 로그인 시 개인 스페이스 생성
/spaces 스페이스 대시보드
/spaces/:postId 글 상세페이지
/spaces/:postId/new 글 생성페이지
/spaces/:postId/edit 에디팅 페이지
/push 알림리스트
/notice 공지사항
/account 계정관리

페이지 구조

.
├── context
│   └── AuthContext.tsx
└── pages
    ├── _app.tsx
    ├── _document.tsx
    ├── index.tsx
    ├── join.tsx
    ├── welcome.tsx
    ├── push.tsx
    ├── notice.tsx
    ├── account.tsx
    └── spaces
        ├── index.tsx
        └── [postId]
            ├── index.tsx
            ├── new.tsx
            └── edit.tsx

contextAPI

// context/AuthContext.tsx

import { createContext, useContext, ReactNode, useState } from 'react';

type authContextType = {
  user: boolean;
  login: () => void;
  logout: () => void;
};

const authContextDefaultValues: authContextType = {
  user: false,
  login: () => undefined,
  logout: () => undefined,
};

const AuthContext = createContext<authContextType>(authContextDefaultValues);

export function useAuth() {
  return useContext(AuthContext);
}

type Props = {
  children: ReactNode;
};

export function AuthProvider({ children }: Props) {
  console.log('AuthProvider');
  const [user, setUser] = useState<boolean>(false);

  const login = () => {
    console.log('로그인');
    setUser(true);
  };

  const logout = () => {
    console.log('로그아웃');
    setUser(false);
  };

  const value = {
    user,
    login,
    logout,
  };

  return (
    <>
      <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
    </>
  );
}
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { AuthProvider, useAuth } from '@hermes/app/contexts/AuthContext';
import Head from 'next/head';

import { GlobalStyle } from '@hermes/design-system';

function MyApp({ Component, pageProps }: AppProps) {
  const { user, login, logout } = useAuth();
  return (
    <>
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>HERMES</title>
      </Head>
      <GlobalStyle />
      <AuthProvider>
        <div>
          {/* 아래 버튼들이 GNB에 있다고 가정 */}
          {user ? '로그인 상태입니다.' : '로그아웃 상태입니다.'}
          {!user ? (
            <button type="button" onClick={login}>
              로그인
            </button>
          ) : (
            <button type="button" onClick={logout}>
              로그아웃
            </button>
          )}
        </div>
        <Component {...pageProps} />
      </AuthProvider>
    </>
  );
}
export default MyApp;

랜딩페이지/

// spaces

import { useAuth } from 'contexts/AuthContext';
import { NextPage } from 'next';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

const Spaces: NextPage = () => {
  const { user } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!user) {
      router.replace('/');
    }
  }, [router, user]);

  return (
    <>
      <div>스페이스 대시보드</div>
    </>
  );
};

export default Spaces;
// spaces/:postId

import { NextPage } from 'next';
import { useRouter } from 'next/router';

const Post: NextPage = () => {
  const { query } = useRouter();
  return <div>글 {query.postId}</div>;
};

export default Post;