인증부분 화면 구성을 진행합니다.

.gitignore

@@ -28,6 +28,8 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env.*
+.env
 
 # vercel
 .vercel

src/components/logo/Logo.tsx

@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+
+const Logo = () => {
+  return (
+    <EmotionWrapper>
+      <h1>쩝쩝대학</h1>
+      <p>우리들의 모든 맛집</p>
+    </EmotionWrapper>
+  );
+};
+
+export default Logo;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  h1 {
+    font-size: 36px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+
+  p {
+    font-size: 12px;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

src/constant/api.ts

@@ -0,0 +1,8 @@
+export const API_ENDPOINT = {
+  auth: {
+    kakao: {
+      login: "/auth/kakao/login",
+      logout: "/auth/kakao/logout",
+    },
+  },
+};

src/constant/link.ts

@@ -0,0 +1,25 @@
+/**
+ * 이 파일에서는 링크 경로를 관리합니다.
+ * autoComplete 및 검색에 도움이 되도록 `LINK_` 로 시작하는 이름을 사용합니다.
+ */
+
+// 메인 페이지 경로
+export const LINK_MAIN_PAGE = "/";
+
+// 로그인 페이지 경로
+export const LINK_LOGIN_PAGE = "/login";
+
+// 회원가입 성공 시 페이지경로
+export const LINK_REGISTER_SUCCESS = "/register/success";
+
+// 마이 페이지
+export const LINK_MYPAGE = "/mypage";
+
+// 내 정보 수정 페이지
+export const LINK_MYPAGE_EDIT = "/mypage/edit";
+
+// 계정 탈퇴 페이지
+export const LINK_ACCOUNT_DELETE = "/mypage/delete";
+
+// 계정 탈퇴 성공 시 이동할 경로
+export const LINK_ACCOUNT_DELETE_SUCCESS = "/mypage/delete/success";

src/constant/processEnv.ts

@@ -0,0 +1,4 @@
+export const processEnv = {
+  NODE_ENV: process.env.NODE_ENV,
+  NEXT_PUBLIC_API_ENDPOINT: process.env.NEXT_PUBLIC_API_ENDPOINT,
+};

src/feature/auth/auth.login/components/ButtonKakaoLogin.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import { API_ENDPOINT } from "constant/api";
+import { processEnv } from "constant/processEnv";
+
+const KAKAO_LOGIN_URL = processEnv.NEXT_PUBLIC_API_ENDPOINT + API_ENDPOINT.auth.kakao.login;
+
+const ButtonKakaoLogin = () => {
+  return (
+    <a href={KAKAO_LOGIN_URL}>
+      <Image
+        alt="카카오 로그인 버튼"
+        src="/images/buttons/kakao_login_large_wide.png"
+        width={300}
+        height={45}
+      />
+    </a>
+  );
+};
+
+export default ButtonKakaoLogin;

src/feature/auth/auth.login/views/ViewLogin.tsx

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+import Logo from "components/logo/Logo";
+import ButtonKakaoLogin from "feature/auth/auth.login/components/ButtonKakaoLogin";
+
+const ViewLogin = () => {
+  return (
+    <EmotionWrapper>
+      <Logo />
+      <ButtonKakaoLogin />
+    </EmotionWrapper>
+  );
+};
+
+export default ViewLogin;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  padding-top: 100px;
+
+  a {
+    display: block;
+    margin-top: 120px;
+  }
+`;

src/feature/auth/auth.register/constants/nicknameLengthLimit.ts

@@ -0,0 +1,2 @@
+export const NICKNAME_LENGTH_LIMIT_MIN = 3;
+export const NICKNAME_LENGTH_LIMIT_MAX = 20;

src/feature/auth/auth.register/functions/validateNicknameLength.ts

@@ -0,0 +1,10 @@
+import {
+  NICKNAME_LENGTH_LIMIT_MAX,
+  NICKNAME_LENGTH_LIMIT_MIN,
+} from "feature/auth/auth.register/constants/nicknameLengthLimit";
+
+export const validateNicknameLength = (nickname: string): boolean => {
+  return (
+    nickname.length >= NICKNAME_LENGTH_LIMIT_MIN && nickname.length <= NICKNAME_LENGTH_LIMIT_MAX
+  );
+};

src/feature/auth/auth.register/views/ViewRegister.tsx

@@ -0,0 +1,81 @@
+import styled from "@emotion/styled";
+import Button from "components/button/Button";
+import TextInput from "components/inputs/TextInput/TextInput";
+import { LINK_REGISTER_SUCCESS } from "constant/link";
+import {
+  NICKNAME_LENGTH_LIMIT_MAX,
+  NICKNAME_LENGTH_LIMIT_MIN,
+} from "feature/auth/auth.register/constants/nicknameLengthLimit";
+import { validateNicknameLength } from "feature/auth/auth.register/functions/validateNicknameLength";
+import { useRouter } from "next/router";
+import { useCallback, useState } from "react";
+
+const ViewRegister = () => {
+  const { push } = useRouter();
+  const [foodhubNickname, setFoodhubNickname] = useState({
+    value: "",
+    isValid: false,
+  });
+
+  const registerSuccessLink = LINK_REGISTER_SUCCESS;
+
+  const handleFoodhubNicknameChange = useCallback((value: string, isValid: boolean) => {
+    setFoodhubNickname({
+      value,
+      isValid,
+    });
+  }, []);
+
+  const handleRegisterFoodhub = () => {
+    if (!foodhubNickname.isValid) {
+      alert("닉네임을 확인해주세요."); // TODO: 모달 머지 후 모달로 변경
+      return;
+    }
+    // TODO: API 연동 , foodhubNickname.value 를 이용하여 닉네임 등록
+    // 성공 시 가입 성공 페이지로 이동
+    push(registerSuccessLink);
+  };
+
+  const messageOnErrorNicknameLength = `닉네임은 ${NICKNAME_LENGTH_LIMIT_MIN}자 이상 ${NICKNAME_LENGTH_LIMIT_MAX}자 이하로 입력해주세요.`;
+  const kakaoName = "홍길동"; // TODO: API 에서 받아오는 닉네임으로 변경
+  return (
+    <EmotionWrapper>
+      <p className="greeting">안녕하세요 {kakaoName}님, 👋</p>
+      <p className="instruction">푸드허브에서 사용할 닉네임을 설정해주세요!</p>
+
+      <TextInput
+        label="닉네임"
+        placeholder="닉네임을 설정해주세요!"
+        value={foodhubNickname.value}
+        onTextChange={handleFoodhubNicknameChange}
+        conditionCheckList={[
+          { condition: validateNicknameLength, messageOnError: messageOnErrorNicknameLength },
+        ]}
+      />
+      {/* TODO: 각 공통 컴포넌트들이 className 을 받을 수 있게 된 후로 제거 */}
+      <div className="space" />
+      <Button fullWidth onClick={handleRegisterFoodhub}>
+        가입하기
+      </Button>
+    </EmotionWrapper>
+  );
+};
+
+export default ViewRegister;
+
+const EmotionWrapper = styled.div`
+  p.greeting {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  p.instruction {
+    margin-bottom: 64px;
+  }
+
+  .space {
+    height: 64px;
+  }
+`;

src/feature/auth/auth.register/views/ViewRegisterSuccess.tsx

@@ -0,0 +1,46 @@
+import styled from "@emotion/styled";
+import Button from "components/button/Button";
+import { LINK_MAIN_PAGE } from "constant/link";
+import { useRouter } from "next/router";
+
+const ViewRegisterSuccess = () => {
+  const { push } = useRouter();
+
+  const foodhubNickname = "을지문덕"; // TODO: API 에서 받아오는 닉네임으로 변경
+
+  const handleGotoMain = () => {
+    push(LINK_MAIN_PAGE);
+  };
+  return (
+    <EmotionWrapper>
+      <p className="greeting">{foodhubNickname}님, 환영합니다!</p>
+      <p className="instruction">쩝쩝대학의 다양한 맛집을 탐험해보세요!</p>
+
+      {/* TODO: 각 공통 컴포넌트들이 className 을 받을 수 있게 된 후로 제거 */}
+      <div className="space" />
+
+      <Button fullWidth onClick={handleGotoMain}>
+        쩝쩝대학 메인으로 가기
+      </Button>
+    </EmotionWrapper>
+  );
+};
+
+export default ViewRegisterSuccess;
+
+const EmotionWrapper = styled.div`
+  p.greeting {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  p.instruction {
+    margin-bottom: 64px;
+  }
+
+  .space {
+    height: 64px;
+  }
+`;

src/pages/_error.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import styled from "@emotion/styled";
 import { NextPageContext } from "next";
+import { LINK_MAIN_PAGE } from "constant/link";
 
 interface Props {
   statusCode?: number;
@@ -13,7 +14,7 @@ const CustomError = ({ statusCode, title }: Props) => {
     <EmotionWrapper>
       <p className="status-code">{statusCode}</p>
       <p className="title">{title}</p>
-      <Link href="/">홈으로</Link>
+      <Link href={LINK_MAIN_PAGE}>홈으로</Link>
     </EmotionWrapper>
   );
 };

src/pages/login/index.tsx

@@ -1,14 +1,12 @@
 import styled from "@emotion/styled";
-import PageMarker from "components/pageMarker/PageMarker";
+import { LINK_MAIN_PAGE } from "constant/link";
+import ViewLogin from "feature/auth/auth.login/views/ViewLogin";
 import { GetServerSideProps } from "next";
 
 const PageLogin = () => {
   return (
     <EmotionWrapper>
-      <PageMarker
-        title="로그인 페이지"
-        description="카카오 계정을 이용해 로그인할 수 있는 페이지"
-      />
+      <ViewLogin />
     </EmotionWrapper>
   );
 };
@@ -25,7 +23,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
   const isLoggedIn = req.cookies.accessToken;
 
   if (isLoggedIn) {
-    res.writeHead(302, { Location: "/" });
+    res.writeHead(302, { Location: LINK_MAIN_PAGE });
     res.end();
   }
 

src/pages/register/index.tsx

@@ -1,11 +1,12 @@
 import styled from "@emotion/styled";
-import PageMarker from "components/pageMarker/PageMarker";
+import { LINK_MAIN_PAGE } from "constant/link";
+import ViewRegister from "feature/auth/auth.register/views/ViewRegister";
 import { GetServerSideProps } from "next";
 
 const PageRegister = () => {
   return (
     <EmotionWrapper>
-      <PageMarker title="회원가입 페이지" description="회원가입 (닉네임 세팅) 하는 페이지" />
+      <ViewRegister />
     </EmotionWrapper>
   );
 };
@@ -24,7 +25,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
   const hasAuthenticated = true;
 
   if (isNicknameAlreadySet || !hasAuthenticated) {
-    res.writeHead(302, { Location: "/" });
+    res.writeHead(302, { Location: LINK_MAIN_PAGE });
     res.end();
   }
 

src/pages/register/success.tsx

@@ -1,14 +1,12 @@
 import styled from "@emotion/styled";
-import PageMarker from "components/pageMarker/PageMarker";
+import { LINK_MAIN_PAGE } from "constant/link";
+import ViewRegisterSuccess from "feature/auth/auth.register/views/ViewRegisterSuccess";
 import { GetServerSideProps } from "next";
 
 const PageRegisterSuccess = () => {
   return (
     <EmotionWrapper>
-      <PageMarker
-        title="회원가입 성공 페이지"
-        description="회원가입 (닉네임 세팅) 하고 나서 랜딩되는 페이지"
-      />
+      <ViewRegisterSuccess />
     </EmotionWrapper>
   );
 };
@@ -24,7 +22,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, query }
   const hasUserAlreadyViewedSuccessPage = false;
 
   if (hasUserAlreadyViewedSuccessPage) {
-    res.writeHead(302, { Location: "/" });
+    res.writeHead(302, { Location: LINK_MAIN_PAGE });
     res.end();
   }