폴더 구조

전반적으로 리덕스 관련 폴더와 일부 파일들을 제외하면 한눈에 보기 쉬운 구조로 되어 있는 것 같습니다. 특히 관련 컴포넌트들을 하나의 폴더에 모아 관리를 하면서 더 쉽게 구조를 파악할 수 있었습니다.

utils로 뽑아낼 수 있는 코드들 뽑아봤습니다.

api 폴더

기본적으로 api 관련 함수들은 굉장히 자주 쓰이기 때문에 미리 따로 설정을 했습니다.

1. client.js

axios를 이용해 기본 설정을 했습니다.

const client = axios.create()
client.defaults.baseURL = BASE_URL
// BASE_URL : <https://www.googleapis.com/books/v1/volumes>

2. data.js

axios를 이용해 리팩토링을 진행했습니다. url을 client.defaults.baseURL를 이용해 구현했습니다.

export const fetchBooksAPI = (search, startIndex) => {
  const { q, ...rest } = parse(search)

  const input = stringifyUrl({
    url: client.defaults.baseURL,
    query: {
      q: `${q}`,
      startIndex,
      projection: 'full',
      ...rest
    }
  })

  return client.get(`${input}`)
}

constants 파일

상수로 뽑아낸 코드들을 모았습니다.

export const BASE_URL = '<https://www.googleapis.com/books/v1/volumes>'
export const FILTER_GAP = [0, 20, 20, 40]
export const SORT_GAP = [0, 20, 20]
export const BUTTON_GAP = [0, 10]
export const INIT_INDEX = 0

export const ROUTES = {
  HOME: '/',
  RESULT: '/result',
  FILTERS: '/filters'
}

export const STATUS = {
  Idle: 'idle',
  Loading: 'loading',
  Success: 'success',
  Failure: 'failure'
}

export const FILTERINGS = [
  ['', '없음'],
  ['partial', '미리보기 가능'],
  ['full', '전체 공개'],
  ['ebooks', '전체 eBooks'],
  ['free-ebooks', '무료 eBooks'],
  ['paid-ebooks', '유료 eBooks']
]