✍ 오늘 한 일

💡 오늘 진행 상황을 간단하게 정리 합니다.

recomm 이벤트 연결

추천 데이터를 보내는 api를 연결하였다. 해당 버튼이 요청을 하는 경우 해당 시설의 좌표 정보를 기반으로 마커 이미지를 생성한다. 마커 이미지를 클릭하는 경우, 인포윈도우가 생성되며, 해당 시설의 상세 정보가 나타나게 된다.

import React, { useState } from 'react';
import KakaoMap from '../atoms/KakaoMap';
import tw from 'twin.macro';
import styled from 'styled-components';
import Button from '../atoms/Button';
import Text from '../atoms/Text';

import { Restaurant } from '../../mocks/handlers/festival_recomm_restaurant';
import { Lodge } from '../../mocks/handlers/festival_recomm_lodge';
import { Shopping } from '../../mocks/handlers/festival_recomm_shopping';
import { Culture } from '../../mocks/handlers/festival_recomm_culture';
import { Leisure } from '../../mocks/handlers/festival_recomm_leisure';
import { Landmark } from '../../mocks/handlers/festival_recomm_landmark';
import { UserInfo } from '../../recoil/atoms/userInfo';
import { NavigateFunction } from 'react-router-dom';

interface PropTypes {
  coord: {
    lat: number;
    lng: number;
  };
  restaurantData?: Restaurant[] | undefined;
  lodgeData?: Lodge[] | undefined;
  shoppingData?: Shopping[] | undefined;
  cultureData?: Culture[] | undefined;
  leisureData?: Leisure[] | undefined;
  // landmarkData?: Landmark[] | undefined;
  restaurantRecommClickHandler: React.MouseEventHandler<HTMLButtonElement>;
  lodgeRecommClickHandler: React.MouseEventHandler<HTMLButtonElement>;
  shoppingRecommClickHandler: React.MouseEventHandler<HTMLButtonElement>;
  cultureRecommClickHandler: React.MouseEventHandler<HTMLButtonElement>;
  leisureRecommClickHandler: React.MouseEventHandler<HTMLButtonElement>;
  // landmarkRecommClickHandler: React.MouseEventHandler<HTMLButtonElement>;
  navigate: NavigateFunction;
  user: UserInfo | undefined;
}

// 맛집 추천 position 설정용 STMP
const PositionButton = styled.button`
  ${tw`flex justify-between absolute bottom-5 right-5 z-10`}
  // 일단 그냥 고정값으로 넣음
  width: 40rem;
`;

/**
 *
 * @description
 * 맛집 추천 버튼과 카카오맵 컴포넌트가
 * 혼합된 컴포넌트
 * @author bell
 */

const FestivalMap = ({
  coord,
  restaurantRecommClickHandler,
  lodgeRecommClickHandler,
  shoppingRecommClickHandler,
  cultureRecommClickHandler,
  leisureRecommClickHandler,
  // landmarkRecommClickHandler,
  restaurantData,
  lodgeData,
  shoppingData,
  cultureData,
  leisureData,
  navigate,
  user,
}: // landmarkData,
PropTypes) => {
  const [isVisibleMarkerRestaurant, setIsVisibleMarkerRestaurant] =
    useState(false);
  const [isVisibleMarkerLodge, setIsVisibleMarkerLodge] = useState(false);
  const [isVisibleMarkerShopping, setIsVisibleMarkerShopping] = useState(false);
  const [isVisibleMarkerCulture, setIsVisibleMarkerCulture] = useState(false);
  const [isVisibleMarkerLeisure, setIsVisibleMarkerLeisure] = useState(false);
  // const [isVisibleMarkerLandmark, setIsVisibleMarkerLandmark] = useState(false);

  const checkUserInfo = (dataClickhandler: any, setIsVisible: any) => {
    if (!user) {
      if (window.confirm('로그인이 필요한 서비스입니다. 로그인 하시겠습니까?'))
        navigate('/login');
    } else {
      dataClickhandler();
      // @ts-expect-error : 매개변수를 하나 달라는데... 뭘줘야 한다는 거니...
      setIsVisible(prev => !prev);
    }
  };

  const combineRecommMarkerRestaurant = () => {
    checkUserInfo(restaurantRecommClickHandler, setIsVisibleMarkerRestaurant);
    // setIsVisibleMarkerRestaurant(prev => !prev);
  };

  const combineRecommMarkerLodge = () => {
    checkUserInfo(lodgeRecommClickHandler, setIsVisibleMarkerLodge);
    // setIsVisibleMarkerLodge(prev => !prev);
  };

  const combineRecommMarkerShopping = () => {
    checkUserInfo(shoppingRecommClickHandler, setIsVisibleMarkerShopping);
    // setIsVisibleMarkerShopping(prev => !prev);
  };

  const combineRecommMarkerCulture = () => {
    checkUserInfo(cultureRecommClickHandler, setIsVisibleMarkerCulture);
    // setIsVisibleMarkerCulture(prev => !prev);
  };

  const combineRecommMarkerLeisure = () => {
    checkUserInfo(leisureRecommClickHandler, setIsVisibleMarkerLeisure);
    // setIsVisibleMarkerLeisure(prev => !prev);
  };

  // const combineRecommMarkerLandmark = () => {
  //   //@ts-expect-error : 매개변수를 하나 달라는데... 뭘줘야 한다는 거니...
  //   landmarkRecommClickHandler();
  //   setIsVisibleMarkerLandmark(prev => !prev);
  // };
  const BLACK = 'black';
  return (
    <>
      <PositionButton>
        <Button
          color={isVisibleMarkerRestaurant ? '#DB4455' : undefined}
          isText={true}
          clickHandler={combineRecommMarkerRestaurant}
        >
          <Text
            message={'맛집 추천'}
            color={isVisibleMarkerRestaurant ? undefined : BLACK}
          />
        </Button>
        <Button
          color={isVisibleMarkerLodge ? '#DB4455' : undefined}
          isText={true}
          clickHandler={combineRecommMarkerLodge}
        >
          <Text
            message={'숙박 추천'}
            color={isVisibleMarkerLodge ? undefined : BLACK}
          />
        </Button>
        <Button
          color={isVisibleMarkerShopping ? '#DB4455' : undefined}
          isText={true}
          clickHandler={combineRecommMarkerShopping}
        >
          <Text
            message={'쇼핑 추천'}
            color={isVisibleMarkerShopping ? undefined : BLACK}
          />
        </Button>
        <Button
          color={isVisibleMarkerCulture ? '#DB4455' : undefined}
          isText={true}
          clickHandler={combineRecommMarkerCulture}
        >
          <Text
            message={'문화시설 추천'}
            color={isVisibleMarkerCulture ? undefined : BLACK}
          />
        </Button>
        <Button
          color={isVisibleMarkerLeisure ? '#DB4455' : undefined}
          isText={true}
          clickHandler={combineRecommMarkerLeisure}
        >
          <Text
            message={'레포츠 추천'}
            color={isVisibleMarkerLeisure ? undefined : BLACK}
          />
        </Button>
        {/* <Button
          color={isVisibleMarkerLandmark ? '#DB4455' : undefined}
          isText={true}
          clickHandler={combineRecommMarkerLandmark}
        >
          <Text
            message={'관광명소 추천'}
            color={isVisibleMarkerLandmark ? undefined : BLACK}
          />
        </Button> */}
      </PositionButton>
      <KakaoMap
        lodgeData={lodgeData}
        restaurantData={restaurantData}
        shoppingData={shoppingData}
        cultureData={cultureData}
        leisureData={leisureData}
        // landmarkData={landmarkData}
        isVisibleMarkerRestaurant={isVisibleMarkerRestaurant}
        isVisibleMarkerLodge={isVisibleMarkerLodge}
        isVisibleMarkerShopping={isVisibleMarkerShopping}
        isVisibleMarkerCulture={isVisibleMarkerCulture}
        isVisibleMarkerLeisure={isVisibleMarkerLeisure}
        // isVisibleMarkerLandmark={isVisibleMarkerLandmark}
        coord={coord}
      />
    </>
  );
};

export default FestivalMap;

에러 고치기 : 로딩 시간

예기치 못한 로딩 시간 지연의 원인을 찾아보았다. 게임 맵 생성 시 나타나는 console.log() 를 모두 나타내보았다. 그 결과 맵 레이어 모두를 생성하는 부분에서 로딩이 오래걸리는 것을 확인하였다.

현재 맵은 총 4개의 레이어로 구성되어 있다. collider 를 관리하는 tile1 레이어, 영토 디자인을 나타내는 land 레이어, 바다 디자인을 나타내는 sea 레이어, 기타 오브젝트들을 나타내는 etc 레이어 이다. 기존의 데이터와 확인 결과, 4MB 정도의 데이터를, 15MB 정도 까지 늘어났으니 렌더링 하는데 오래 걸릴 수 밖에 없는 것이었다.

해당 디자인을 그대로 고수하면서도, 로딩을 단축할 수 있는 방법을 어떻게 할지 고민하였다. 그러다 몇가지의 레이어를 병합시키보면서도 해당 4개의 레이어를 2개의 레이어로 줄일 수 있는 방법을 생각했다. 우선 현재 collider 는 바다 주변을 나타내기 때문에, 바다 타일에 collider 를 설정한다.

단 현재 게임 맵의 지형은 바다 아니면 땅이기 때문에 land 레이어를 기준으로 땅 타일이 아닌 곳을 모두 바다 타일로 채워준다. 이렇게 하는 경우, 기존의 collider 를 관리하는 tile1 레이어도 삭제할 수 가 있다. 이러한 방버으로 4개의 타일을 2개로 줄일 수 있었다. 용량 역시 10MB 까지 줄이면서 로딩을 2초대로 단축 시킬 수 있었다.

📢 개선 사항

💡 오늘 하루 개선하면 좋았을 부분을 작성합니다. 없다면 생략하셔도 좋습니다.

📢 내일 진행 예정

💡 내일 할 업무를 팀원들과 함께 공유해봅시다. 글이 자세할수록, 팀원 모두가 업무 흐름을 파악하기 쉬워집니다.

개발 종료

오늘을 계기로 해당 프로젝트의 모든 개발이 종료되었다. 개인적으로 아쉬운 점이 많이 남는 기간이었는데 그래도 다양한 기술을 경험하고 구현할 수 있어서 성장은 했다는 것을 느꼈던 시간이었다.