API 연결 및 화면 구성하기

서론

인증 인가와 토큰 발행 작업은 프론트와 벡을 연결한 후에 진행해볼 예정이다.

추가로 간편 로그인(카카오 or 구글) 또한 연결해서 사용해보려고 한다.

앞으로의 계획은 다음과 같다.

1. 프론트에 만든 API 모두 연결하고 화면에 정상 작동 시키기
2. Tanstack Query 학습 및 적용해보기
3. 프론트 성능 최적화 학습 및 적용해보기
4. 간편 로그인 구현 및 인증 인가 학습 및 적용하기

추가로 프론트 상에서 서비스를 사용하는데 필수적인 모달창(예를 들면 회원 가입이 완료 되었다는 문구 / 비밀번호가 일치 하지 않는다는 문구) 구현은 배제하고 해보지 않았던 부분들을 학습하고 적용하는 방향성으로 잡았다.

프론트 화면 구성

• 회원가입 화면
• 로그인 화면
• 메인 화면 (할일 작성 페이지)

회원가입과 로그인 화면은 모두 tailwind component를 이용하여 스타일링 하는데 시간을 절약하였고 추가적으로 손봐줄 CSS 부분만 고쳐서 사용하였다.

프론트 부분에서는 새로 학습하거나 접해본 문법 혹은 잘못 알고 있었던 부분 등을 정리해보려고 한다.

단순 API 연결 / 화면 뿌려주기 등은 많이 해봤던 작업인 만큼 새로운 부분에 집중하려고 한다.

화면 구성은 다음과 같이 했고 아직 구현 안된 기능은
1. 할일 삭제 ✅
2. 상태에 따른 할일 나타내기 ✅
3. 로그인 상태 관리에 따른 화면 구성
정도이다.

남은 기능 구현을 마무리하고 Tanstack Query를 학습하고 프론트 코드에 적용해볼 예정이다.

추가 구현 사항

위의 1,2번은 구현을 마쳤다. 상태에 따라서 할일을 구분해서 화면에 뿌려주기를 해주었고 할일 삭제도 추가했다.

zustand로 헤더의 상태관리를 해주었더니 상태에 따른 할일 나타내기를 해줄 때

import { create } from "zustand";

interface StateStore {
  currentState: string;
  setCurrentState: (state: string) => void;
  isDarkMode: boolean;
  toggleDarkMode: () => void;
}

const useStateStore = create<StateStore>((set) => ({
  currentState: "all",
  setCurrentState: (state) => set({ currentState: state }),

  // 다크 모드 상태 추가
  isDarkMode: false,
  toggleDarkMode: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
}));

export default useStateStore;

// MainPage.tsx
const { currentState } = useStateStore();

위와 같이 상태 관리를 전역적으로 간단하게 관리해서 뽑아 사용하니 무척 편했다.

아마 3번인 로그인 상태에 따른 화면 구성도 zustand를 이용할 것 같다.

3번 마무리하면서 tanstack query 학습을 병행해야겠다.