남은작업

• 서버사이드에서 검색 결과 fetch해서 보내주기

• skeleton UI

• PagenationNavigator - SearchText 컴포넌트 중복 제거하기

• propTypes 고도화하기

• 검색 타입 별 Minimi Component 만들기
  전체 결과 화면에서 몇개만 보여줄
  

• 검색 타입 별 컴포넌트 하나로 Refactoring하기

검색 화면 구현하기

전역 상태를 이용하지 않는다.
전역 상태를 가져야할 만큼 컴포넌트 구조가 복잡하지 않다. 오히려 개발 비용이 커질 것이라 판단하여, Redux는 사용하지 않고 구현하기로 결정하였다.

각 타입 별로 검색 결과를 보여주는 기능 구현 완료

하지만 5개의 파일로 분할하여 구현하게되었다.

내부 코드는 5개의 파일 다 같은 형태인데, 백엔드에서 데이터를 줄 때의 속성명이 각기 달라 이를 적절히 하나로 만들기 어려웠음.

다음 작업은 이 5개의 파일을 하나의 파일로 만들어 보여주는 것.

느낀점

• 백엔드의 속성이 각기 다른 점이 하나로 만들기 어렵게 하고있다. 이는 백엔드 개발자의 문제라기 보단, 소통의 문제로 보인다. 앞으로의 개발에선 다른 데이터라도, 데이터의 구조가 유사하다면 같은 속성명으로 디자인 해달라고 해야겠다. (물론 의견을 강요하는 것이 아닌)

• None 컴포넌트의 위력은 대단했다.

// 감싼 텍스트가 None의 children으로 전달된다.
<None>검색 결과가 존재하지 않습니다.</None>

//... molecules/None/index.js

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const NoneWrapper = styled.div`
  ...
`;
function None({ children }) {
  return <NoneWrapper>{children}</NoneWrapper>;
}

None.propTypes = {
  children: PropTypes.node,
};
export default None;

검색 화면 기능 개발에 있어 따로 None 컴포넌트를 만들지 않아도 됨. 아토믹으로 디자인 하지 않았더라면.. 수백개 생겼을 컴포넌트.. 후후