[ 공모전 ] 지도 페이지 : 어떻게 API 데이터들을 처리 할것인가? - UI의 계획

최문길·2024년 6월 23일

공모전

목록 보기

18/46

이전 글에서 사용자의 행동을 가정 했을 때

난관에 부딪혔다.
서울시 공공데이터 API들을 활용해서도 데이터를 지도 위에 뿌려줘야 하는데 어떻게 데이터를 불러들이고,
사용자에게 무슨 UI를 보여주고 문제를 풀어가야 할지 가닥이 잡히지 않았다.

API들은 각각 url에 queryString으로 지역구별을 선별하고 데이터를 조회할 수 있게 되어있다.
http://openapi.seoul.go.kr:8088/(인증키)/json/LOCALDATA_020302_${지역구} /1/1000/01

사용할 API 명세서에는 데이터를 불러들일 수 있는 조건이 있는데

각 지역구 마다 불러들일 수 있는 데이터는 최대 1000개이고 그 이후에 추가적으로 데이터를 호출 할 수 있다.

현재의 상황을 점검하기

API들의 공통점은 지역구가 같다.
동물병원&동물약국 / 산책로 2개로 구별해서 API를 사용해야 한다.

원하는 것은

사용자가 단번에 이해하기 ----> "아 이건 각 지역구 별로 보여주는 것이군" 등....

사용자가 사용하기에 불편함이 없어야 함 ---> 무언가를 찾거나, 러닝커브가 없어야 함

다른 개발자들이 보기에도 쉽고 직관적이였으면 하기 ----> "이건 각 지역구 별로 API를 호출 하는 거군

공모전 관계자들이 보기에도 API들을 어디에 사용했는지 직관적이기 ----> "지도 페이지에서 사용했다는데... 여기 부분이군"

확장성이 있었으면 좋겠다. ----> "창업 당첨되서 확장성이 더 있어야겠다." , " 문제 없음 "

글로 풀어보니 진짜 어렵게 느껴지긴 한다.

다시 한번더 예상하고 결정

서울시 공공데이터를 가지고 공모전을 하므로, 서울시에 있는 사람들이 사용할 거라고 우선 가정해 본다.

서울 거주하는 특정 사람이 지도페이지로 들어온다. 지도 페이지에서 보여지는 UI는

탭메뉴
검색창
지도
총 3가지 이다.

여기에 위의 5가지가 다 들어가려면 직관적인 것이 필요한다.

직관적이라 함은 개발자들, 사용자들, 심사위원(공모전)들이 보기에도 이건 지역구별로 나누어 논 거고 무언가 액션이 나오겠다라고 생각 할 수 있게 유도하는 UI일 것이다.
지역구별로 분류 해야 하고, 분류되어있는 지역구별로 클릭이 일어날 시 지역구데이터가 호출되어 map에 뿌려져야 할것같다는 생각이 든다.

SubTab을 만들어보자

SubTab을 만들어 각 지역구별 API 호출을 할 수 있게 하고, 사용자가 클릭 할 수 있게 만들어 처리 하기로 결정 하였다.
그리고 지역구가 25개가 되므로 마우스 휠로 스크롤 할 수 있게 하는데 horizontal 형식으로 스크롤 할 수 있게 처리하여 마우스클릭 후 움직여 지역구 선택하는 불편함을 없애기로 하였다.

정리하면

여러 지역구를 볼 수 있게 마우스 휠로 horizontal scroll 형식의 UI를 만들기
-> 스크롤 bar 부분을 클릭 후 움직여서 지역구를 선택할 수 있게 하는 "불편함"을 줄이기 위해

// .../searchAreaTabs.tsx
const SCROLL_HORIZONTAL_CONTAINER = 'relative h-[40px] mb-6';
const SearchAreaTabs = () => {
  return (
    <div className={SCROLL_HORIZONTAL_CONTAINER}>
      <SeoulLocation />
    </div>
  );
};

// .../SeoulLocation.tsx
import { SEOUL_LOCATION } from '@/data/map/seoul-area';
import useSeoulLocation from '@/hooks/client/map/search-location/useSeoulLocation';
import { cn } from '@/lib/utils';

const SCROLL_HORIZONTAL_WRAPPER =
  'top-0 -left-[56px] absolute overflow-x-hidden overflow-y-auto origin-top-right w-[60px] h-[450px] -rotate-90 scroll-smooth scrollbar-hide';
const SCROLL_HORIZONTAL_ELEMENT = 'rotate-90 origin-right-top my-11  w-[60px] h-[24px]';
const FOCUS_ITEM = 'bg-primary text-white';

const SeoulLocation = () => {
  const { clickGetSeoulLocation, currentIndex } = useSeoulLocation({ initialValue: null, allTabs: SEOUL_LOCATION });

  return (
    <div className={SCROLL_HORIZONTAL_WRAPPER}>
      {SEOUL_LOCATION.map(({ location, api_query }, idx) => (
        <Button
          key={location}
          type="button"
          name={api_query}
          className={cn(
           //...,
            SCROLL_HORIZONTAL_ELEMENT,
            idx === currentIndex && FOCUS_ITEM,
          )}
          onClick={() => clickGetSeoulLocation(idx, api_query)}
        >
          {location}
        </Button>
      ))}
    </div>
  );
};

export default SeoulLocation;