고마워써 프로젝트 - #2-2. 홈 화면

 

고마워써 홈 화면은 사실 비로그인인 상태에서 접근할 일이 잘 없다.

특정 사용자가 공유한 고유 링크를 통해 접근하고,

그 경로에서 신청을 완료한 뒤 원하는 사용자만 추가적으로 로그인 / 회원가입을 하게끔 구현했기 때문이다.

그래서 간단하게 카카오 로그인을 할 수 있는 버튼을 추가하고,

session을 확인하여 userId 값이 존재할 경우 로그인한 상태로 간주하여

연하장 설문을 생성하는 경로로 이동하는 버튼을 출력되게 했다.

const userId = parseInt(sessionStorage.getItem("userId") || "0");

// ...

// jsx
{userId ? (
	<>
		<ButtonS category="pink" onClick={() => nav.push(`/create-form`)}>
		연하장 신청받기
		</ButtonS>
	</>
) : (
	<ImgWrapper onClick={kakaoLogin}>
		<Img src={kakao} width="50%" alt="Kakao Login" />
	</ImgWrapper>
)}

간단하게 삼항연산자를 사용한 출력을 사용했다.

 

그리고 카카오 로그인 뒤에 redirect 될 경로는 상황별로 세 종류가 있었는데,

1. 기본 home

2. 회원가입일 경우 회원정보 수정

3. 고유 링크로 접근시 다시 고유링크로 이동

 

if (response.data.tel === null) {
	nav.push(`/update-info`);
} else if (link != null) {
	sessionStorage.removeItem("apply_kakao");
	sendToApplyPage(link); // 고유링크 암호화 검증
} else {
	nav.push(`/`);
}

 

if문을 사용해서 분기했다!

신청 경로에서 로그인했을 경우 해당 경로를 session에 저장하고,

그 경로를 재검증해서 이동하는 방식을 사용했다.

 

추가적으로 footer를 구현하는 데 있어서, 출력되는 본문 내용이 짧으면 맨 아래에 위치하고

본문 내용이 길면 내용 뒤에 출력되게 하고 싶었는데 sticky 패턴이라고 이름도 있는 구현 방식이었다... ㅋㅋ

const AppContainer = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  width: 100%;
  max-width: 428px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
`;

const MainContent = styled.main`
  flex: 1;
  padding: 20px;
`;

const FooterContainer = styled.footer`
  height: 13vh;
  font-size: 15px;
  font-family: Nanum Pen Script;
  color: black;
  text-align: center;
`;

styled-component를 사용해서 구현했다.