Intro

최근 백오피스 작업중 고민했던 내용입니다.

현상

백오피스에서 서비스를 관리하는 리스트 메뉴가 있습니다.
해당 메뉴는 서비스 > 돌봄 > 게시물 > 구인/구직/업체 계층으로 구조화 되어 있습니다.
최초 작업을 했을 때 서비스 > 돌봄 > 게시물 까지만 페이지 라우팅을 시키고 게시물 페이지 내부에서 분기처리를 통해 컴포넌트를 라우팅하자 (url path 가 붙지 않습니다.) 생각했습니다.

아래는 그렇게 작성한 게시물 컴포넌트 입니다.

const Posting = () => {
  const [activeType, setActiveType] = useState('JOB_OFFER' as CaringServiceType);
  const [keyword, setKeyword] = useState('');

  const handleClickChip = (value: CaringServiceType) => () => {
    setActiveType(value);
  };

  const List = {
    JOB_SEEKER: <PostingJobSeeker keyword={keyword} />,
    JOB_OFFER: <PostingJobOffer keyword={keyword} />,
    COMPANY: <PostingCompany keyword={keyword} />,
  };

  return (
    <Container>
      <section className="user-interface">
        <div className="chips">
          {caringTypes.map(({ label, value }) => (
            <Chip
              label={label}
              variant="filled"
              color={(value as CaringServiceType) === activeType ? 'primary' : 'default'}
              onClick={handleClickChip(value as CaringServiceType)}
              css={css`
                cursor: pointer;
              `}
            />
          ))}
        </div>
        <SearchBar
          onPressEnter={(value) => setKeyword(value)}
          placeholder="활동명 또는 제목을 입력해주세요."
        />
      </section>
      {List[activeType]}
    </Container>
  );
};

export default Posting;

디자인 된 화면을 보면 Chip 을 통해서 구인/구직/업체 화면을 확인할 수 있으며 같은 Box 레벨에서 검색할 수 있는 검색바가 위치합니다.

그래서 처음 코드를 작성할 때 Chip 과 Keyword 컴포넌트를 같은 div 로 묶고 입력받는 keyword 는 props 로 분기될 리스트 컴포넌트에 내려주는 식으로 설계를 했습니다.

문제점

이렇게 List 를 컴포넌트로 분기를 시키니 문제가 생겼습니다.
구직 리스트에서 새로고침 시 기본값으로 설정된 구인으로 돌아간다는 것 입니다.
이는 페이지 라우팅이 아닌 컴포넌트 라우팅으로 되어지고 있기 때문에 당시의 상태를 기억하지 못하기 때문입니
다.

문제해결

이를 해결하기 위해 여러가지 방법을 생각해봤습니다.
query string 으로 Keyword 를 넘겨주는 방식이 존재하지만 이 방식은 Keyword 가 리액트의 state 이기 때문에 문제가 됩니다.
하여 컴포넌트를 페이지 라우팅으로 변경을 하는 방식으로 문제를 해결했습니다.
먼저 Chips 컴포넌트와 SearchBar 컴포넌트가 디자인 상 동일 레벨에 위치하고 있습니다.
하지만 페이지 컴포넌트 계층 상 같은 div 로 묶을 수 없습니다.
이를 해결하기 위해 Chips 를 묶고 있는 div 를 absolute 포지션으로 두고 Tabs 바로 아래 붙였습니다.
그리고 SearchBar 자체를 리스트 페이지에 놓음으로써 페이지 디자인을 변경하지 않고 해당 문제를 해결했습니다.

느낀점

디자인된 화면을 작업을 하면서 코드상으로 비효율적으로 작업된 화면을 마주하면 여러 고민이 듭니다.
디자이너분께 어떻게 설명해드려야 할까? 또 막상 이렇게 되면 안된다고 하거나 어렵다고 말씀드리면 매번 안된다고 하는것 같아서 죄송스럽기도 하구요.
오죽하면 이런 책이 나올까 싶습니다.

하여 가급적이면 디자인된 화면을 그대로 구현하려고 노력합니다.
요즘 느끼는 것은 개발자로써 코드에 너무 애착을 갖는것 보다는 협업으로 비즈니스를 해결하는것이 어떨까 싶습니다.