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

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/feature/auth/auth.login/components/ButtonKakaoLogin.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+const KAKAO_LOGIN_URL = "http://localhost:8000/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,80 @@
+import styled from "@emotion/styled";
+import Button from "components/button/Button";
+import TextInput from "components/inputs/TextInput/TextInput";
+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 = "/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,45 @@
+import styled from "@emotion/styled";
+import Button from "components/button/Button";
+import { useRouter } from "next/router";
+
+const ViewRegisterSuccess = () => {
+  const { push } = useRouter();
+
+  const foodhubNickname = "을지문덕"; // TODO: API 에서 받아오는 닉네임으로 변경
+
+  const handleGotoMain = () => {
+    push("/");
+  };
+  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/login/index.tsx

@@ -1,14 +1,11 @@
 import styled from "@emotion/styled";
-import PageMarker from "components/pageMarker/PageMarker";
+import ViewLogin from "feature/auth/auth.login/views/ViewLogin";
 import { GetServerSideProps } from "next";
 
 const PageLogin = () => {
   return (
     <EmotionWrapper>
-      <PageMarker
-        title="로그인 페이지"
-        description="카카오 계정을 이용해 로그인할 수 있는 페이지"
-      />
+      <ViewLogin />
     </EmotionWrapper>
   );
 };

src/pages/register/index.tsx

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
-import PageMarker from "components/pageMarker/PageMarker";
+import ViewRegister from "feature/auth/auth.register/views/ViewRegister";
 import { GetServerSideProps } from "next";
 
 const PageRegister = () => {
   return (
     <EmotionWrapper>
-      <PageMarker title="회원가입 페이지" description="회원가입 (닉네임 세팅) 하는 페이지" />
+      <ViewRegister />
     </EmotionWrapper>
   );
 };

src/pages/register/success.tsx

@@ -1,14 +1,11 @@
 import styled from "@emotion/styled";
-import PageMarker from "components/pageMarker/PageMarker";
+import ViewRegisterSuccess from "feature/auth/auth.register/views/ViewRegisterSuccess";
 import { GetServerSideProps } from "next";
 
 const PageRegisterSuccess = () => {
   return (
     <EmotionWrapper>
-      <PageMarker
-        title="회원가입 성공 페이지"
-        description="회원가입 (닉네임 세팅) 하고 나서 랜딩되는 페이지"
-      />
+      <ViewRegisterSuccess />
     </EmotionWrapper>
   );
 };