1. API 기본 설정 및 구현
.env에 URL을 작성한 다음 아래와 같이 설정을 해주었다. timeout은 10초로 맞춰주었다.
그 이후에 회원가입 api 호출 함수를 구현하였다.
인증에 관련된 api는 여기서 같이 관리를 할 예정이라 객체 형태로 만들었다.
미리 만들어 놓은 SignUpType을 통해 입력 받는 타입을 지정하고 회원가입시에는 response에서 필요한 데이터가 없으므로 AxiosResponse를 return하는것으로 하였다.
2. tanstack-query(react-query) hook 구현
options을 매개변수로 받고 useMutation을 리턴하는 훅을 만들었다. query관련 훅을 한곳에서 관리하기 위해 hooks/query 폴더 안에 만들었는데 생각을 해보니 useSignUp Hook은 회원가입페이지에서만 사용할건데 굳이 hook 으로 만들어서 사용해야하나 고민이 든다.
위의 글을 작성하며 react 홈페이지를 읽어보았다.
<hook 동기>
- 컴포넌사이에 상태 로직 재사용이 어려워서
- 복잡한 컴포넌트들은 이해하기 어려워서
- class는 사람과 기계를 혼동시켜서
위와 같은 3가지 이유인데 class를 사용하지 않으니 세번째는 해당이 없고 회원가입 페이지에만 사용하니 첫번째도 해당이 없다. 또한 mutation 함수가 크게 복잡하지도 않으므로 두번째도 해당이 되지 않는다.
리팩토링을 해야겠다... 회원가입 페이지내에서 하는게 불필요하게 왔다갔다 할 필요도 없을거고, hook의 동기와도 크게 상관없으므로 회원가입 페이지 내에서 함수를 다시 구현해야겠다.
위의 사진은 회원가입 페이지내에서 hook을 사용하는 코드이다. 현재는 임시로 console.log만 찍어주는것으로 만들었고 추후에 toast와 같은 라이브러리를 통해 성공, 에러 메시지를 나타내줄 예정이다.
3. Footer 구현
단순 UI만을 구현했기 때문에 작성을 하지 않으려다가 그래도 한번 써본다.
먼저 모든 페이지에서 사용될예정이기에 Components 폴더 안에 위치를 시켰다.
tailwind를 사용하여 반응형으로 간편히 만들 수 있었다.
4. 추가 필요사항
- hook 없애고 signUp페이지 내에 함수 다시 구현
