[Feat] 랜딩페이지 (로그인, 회원가입)

[ramrami-B]

📝 작업 내용

구현 화면

• 로그인 안된 상태라면 로그인 화면이 뜨도록 함

• 구글, 네이버, 카카오 소셜 로그인 버튼 중앙에 위치

  

• 소셜 로그인 이후 회원 가입 진행 화면

• 무쑥이 이름과 대분류, 소분류를 선택하면 user(LandingProvider) 상태에 저장

• 대분류 선택 후 소분류 선택 화면으로 갔다가 다시 뒤로가기 하면 선택했던 대분류가 그대로 선택 되어 있도록 설정

• 대분류 선택 화면에서 기타 혹은 skip 버튼을 누르면 바로 나의 미션방으로 이동

• 소분류 선택까지 마친 후 완료 버튼을 누르면 나의 미션방으로 이동

코드 참고사항

1. 버튼에 짙은 초록색('dark-green') 배경도 설정 할 수 있도록 변경했습니다!

backgroundColor === "green"
      ? "bg-green text-white "
      : backgroundColor === "dark-green"
        ? "bg-dark-green text-white "
        : "bg-white text-gray ";

사용 예)

<Button
  backgroundColor="dark-green" // 배경색 설정 dark-green, green(default), white 있음
  label="버튼" // 버튼에 들어갈 텍스트
  size="medium" //  small, medium(default), large 있음 
  style={{ width: "100%" }} // 추가 속성 정의 가능
  onClick={() => {}}
/>

2. useCategorySelector : 대분류와 소분류를 선택하는 코드 커스텀 훅으로 분리

import { useState } from "react";
import { categories } from "../utils/utils";

export const useCategorySelector = () => {
  const [selectedCategory, setSelectedCategory] = useState("공부");
  const [selectedsubcategory, setSelectedSubcategory] = useState("");

  const changeCategory = category => {
    setSelectedCategory(category);
    setSelectedSubcategory(categories[category][0]);
  };

  const changeSubCategory = subCategory => {
    setSelectedSubcategory(subCategory);
  };

  return { selectedCategory, changeCategory, selectedsubcategory, changeSubCategory };
};

사용 예)

const { selectedsubcategory, changeSubCategory } = useCategorySelector();

필요한 변수(상태) 혹은 함수만 가져와서 사용 가능 합니다!

3. 랜딩페이지에서 공통으로 사용하는 상태 공유를 위한 커스텀 Context 생성

LandingProvier

코드 구현에 해당 포스팅을 참고했습니다! 다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

사용자 정보인 user 상태는 회원가입 절차가 모두 완료되면 request 보낼 수 있도록 api 명세와 동일하게 정의했습니다! src/utils/datas.js

export const user = {
  email: "",
  name: "",
  nickname: "",
  oauthServerType: "KAKAO",
  mainCategory: "",
  subCategory: null,
};

🔗 연관 이슈

36

✅ 리뷰 요구사항

• API 소통을 제외한 화면은 모두 구현 했습니다!
• useCategorySelector와 새롭게 수정된 버튼을 Tab 컴포넌트에도 적용하면 좋을 것 같습니다!
• 코드 관련 궁금한 점 있으면 물어보세요 :)