2024.01.22 TIL

1. 중간발표
2. 코드 수정

오늘은 중간발표를 진행했습니다.
튜터님들께 피드백을 받고, 부족한 점을 채우면 됩니다.

전체적으로 부족한 점이 많았지만, 정리를 하면

1. 커머스 페이지 수정

• 각 상품의 전시를 위해 서버 사이드 렌더링을 진행한다

• 각각 크로울링을 진행

• 상품별 페이지를 달리한다.

  정도입니다.

  ---

  추가로 구현해야 할 부분들은

1. 카카오 로그인 구현: Firebase에는 카카오 로그인이 제공이되지 않아 nextauth에서 제공하는 provider에 카카오가 있으므로 nextauth를 사용해서 구현해 볼 예정

2. 실시간 유저간 상호작용: 웹 소켓을 통해 채팅 기능을 구현하여, 긴급 상황시 '긴급상황' 글을 작성하고 유저들에게 알림 후 실시간으로 채팅을 통해 정보 제공

3. 상품 구매 활성화: 상품별 상세페이지를 구현하고, 구매하기 클릭 시 유저정보와 유저가 구매한 제품 및 가격을 컬렉션에 저장하게 하기 (장바구니)

4. UI,MVP 기능 발전

   입니다.

   ---

5. 맵 코드 부분 수정

export const createMarkers = (
 map: kakao.maps.Map | null,
 places: any[],
 category: string,
 handleMarkerClick: (
   marker: kakao.maps.Marker,
   infowindow: kakao.maps.InfoWindow
 ) => void
): kakao.maps.Marker[] => {
 if (!map) {
   return [];
 }

 const markers: kakao.maps.Marker[] = [];

 places.forEach((place) => {
   const imageSrc = markerImagePaths[category]; // 카테고리에 맞는 이미지 경로
   const imageSize = new kakao.maps.Size(24, 35); // 마커 이미지 크기 설정
   const markerImage = new kakao.maps.MarkerImage(imag
```eSrc, imageSize); // 마커 이미지 생성

   const marker = new kakao.maps.Marker({
     map: map,
     position: new kakao.maps.LatLng(place.y, place.x),
     image: markerImage // 마커에 이미지 설정
   });

   const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
   kakao.maps.event.addListener(marker, 'click', () => {
     if (map) {
       infowindow.setContent(`
         <div style="padding:5px;font-size:12px;">
           ${place.place_name}<br>
           <a href="#" onclick="searchOnGoogle('${place.place_name}')">검색하기</a>
         </div>
       `);
       infowindow.open(map, marker);
     }
   });

   markers.push(marker);
 });

  return markers;
};

// searchOnGoogle 함수 전역 스코프로 내보내기
(window as any).searchOnGoogle = (query: string) => {
  const googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
  window.open(googleSearchUrl, "_blank");
};

// handleMarkerClick 함수 구현
function handleMarkerClick(marker: kakao.maps.Marker, infowindow: kakao.maps.InfoWindow) {
  // handleMar
```kerClick 함수의 로직을 여기에 구현합니다.;

기존의 코드를 수정하였고, 마커별로 다른 이미지를 보낼 수 있도록 설정하였습니다.