📚 Part 6 API

---

📁 비밀번호 초기화

export const resetRequest = async (data: SignupProps) => {
    const response = await httpClient.post("/users/reset", data);
    return response.data;
};

export const resetPassword = async (data: SignupProps) => {
    const response = await httpClient.put("/users/reset", data);
    return response.data;
};

비밀번호 초기화 api 생성

---

📁 로그인과 전역 상태 관리

이메일과 password를 이용해서 로그인을 한 뒤 로그인에 성공하게 되면 서버에서 토큰을 날려준다. (토큰을 획득할 수 있음) 획득한 토큰으로 로그인 성공에 대해서 전역 상태를 update 준다. 전역 변수인 isLoggedIn의 true 선언에 따라서 header에 어떤 내용들이 저장되는지 알 수 있고, 전체 로그인이 필요한 서비스들을 분기할 수 있다. 전역 상태를 update하고, local storage에 토큰을 저장함. 저장한 토큰은 이미 만들어놓은 http client의 headers의 Authorization이라는 키에 넣음.

http client에서 local storage에서 토큰을 받아서 setting을 하고, 인증이 필요한 매 요청마다 토큰을 실어 보냄

• zustand 설치

npm i zustand --save

가지고 있는 상태 정보와 action 함수를 같이 선언함

import { create } from 'zustand';

interface StoreState {
    isloggedIn: boolean;
    storeLogin: (token: string) => void;
    storeLogout: () => void;
};

export const useAuthStore = create<StoreState>((set) => ({
    isloggedIn: false,  // 초기값 
    storeLogin: (token: string) => {
        set({
            isloggedIn: true
        });
    },
    storeLogout: () => {
        set({
            isloggedIn: false
        });
    }
}));

📚 Part 7 목록 구현

---

📁 도서 목록 페이지

📌 도서 목록 화면 요구 사항

1. 도서(book)의 목록을 fetch하여 화면에 렌더
2. fetch한 화면에 맞게 페이지네이션 구현
3. 검색 결과가 없을 때, 결과없음 화면 노출
4. 카테고리 및 신간 필터 기능을 제공
5. 목록의 view는 그리드 형태, 목록 형태로 변경 가능

📌 Book Item

📌 Empty

📌 BooksFilter

상태
1. 카테고리
2. 신간 여부 true false

일반적으로 접근하는 방식은 react의 useState 또는 global State를 통해서 내부 상태로 작성할 수 있음. 일반적인 목록들은 query string을 이용함.

• query string을 이용하는 방법의 장점
  • 1) 상태 공유
    • query string을 그대로 복사해서 다른 브라우저에 그대로 붙여넣기 했을 때 상태를 유지할 수 있다.
  • 2) 재사용성 보장
  • 3) 검색 엔진 최적화에 유리
  • 4) 특정 마케팅 측면에서 데이터 추적과 분석에 용이

따라서 fiter 컴포넌트는 query string을 이용하여 작성함

📌 query string 업데이트

Filter 컴포넌트에서 각 필드(category와 news)에 query string을 변경하도록 요청함. 브라우저의 쿼리스트링이 실제로 반영됨. 그리고 그 대상은 category, news, view임
ex) /books?category_id=0&news=true&view=grid
변경된 쿼리스트링의 변경 감지를 useBooks에서 함. useBooks는 books에 대한(검색결과에 대한) 목록 api를 반환하는 hooks임. 이 커스텀 hooks에서 쿼리스트링의 변화를 감지함. 감지된 변화를 fetch 함수에 파라미터로 전달하여 새로운 데이터로 갱신하고 이를 books라는 상태로 갱신함. 이 갱신된 데이터는 books render 화면에 그대로 나타나게 됨.

즉, 필터에서 쿼리스트링을 변경하고, 쿼리스트링은 상태를 유지한다. 그 상태를 useBooks에서 감지하여 나머지 변화를 전파한다.

📌 Filter 버튼

📌 Pagination

📌 list와 grid

interface Props {
   book: Book;
   view?: ViewMode;
}

//생략
 const BookItemStyle = styled.div<Pick<Props, 'view'>>`
 // 생략
 `;

Props 중 고르고 싶다면 Pick 사용