오전 회의 내용

1) 헤더 및 메인 페이지

헤더) 상단바에 북커 로고 / 돋보기 아이콘 / 아바타 아이콘 이미지가 필요하다.

• 헤더1) 로고는 이미지가 아닌 텍스트 형식으로 들어갈 것
• 헤더2) 돋보기 / 아바타는 피그마에서 가져올 때 이미지형식으로 가져와진다. 디자이너님이 한번 확인 해보겠다고 하셨음
  일단 파일을 받는걸로 결정하되 다른 의견있으면 그걸로 받는 걸로
• 메인) 진행 사항이 없으므로 금일은 패스 (저녁부터 구현 예정)

2) 고객센터(채팅) 모달 관련

• 중고거래에서만 접근 가능한 채팅 버튼 vs 전역적인 모달에서 접근 가능한 채팅 버튼
  → (다수결 의견)중고거래에서만 접근 가능한 채팅으로 결정. 모달에는 고객센터만 존재, 채팅방은 중고 거래에서만 사용.
  ? 왜 같은 채팅 기능인데 분리하나요?
  → (민규님)사이트의 특성 상 커뮤니티의 성격이 강한데, 중고거래 채팅을 전역적으로 사용하게 되면 사이트 성격과 맞지 않다
  → (주원님)민규님 의견에 동의
  → (건우님)채팅을 하다가 다른 페이지로 이동하는 경우, 상세 페이지에서만 접근 가능할 때 이용이 불편할 수 있다
  플로팅 액션버튼이면 스크롤을 내려도 계속 따라다니는 설정인 만큼, 그만큼의 중요도가 있는 기능이 들어가야 한다. 그런 기능이라면 고객센터의 기능보다는 실시간으로 정보를 주고받는 채팅 알림이 들어가는 것이 맞다고 생각한다.
  또한 고객센터의 신고같은 경우에는 마이페이지 하위의 기능으로 들어가도 된다. 플로팅 액션 버튼에는 실시간 알림(ex. 채팅, 댓글, 대댓글)이 들어가는 것이 맞다고 본다
  → (나연님)커뮤니티 사이트에 고객센터가 메인에 있는 게 이상하다, 그래서 전역으로 보여지는 모달을 채팅으로 묶는 게 맞다
• 알림 기능 구현/ 알림 기능의 유무에 따라 채팅창 배치가 달라질 것 같기 때문에 정하고 갈 문제로 제시
  → 알림기능 구현하는 것으로 결정
  알림 기능이 있다면
  a. 알림을 상단바(헤더)로 분리하여 벨(종)모양으로 채팅 관련 알림(고객센터, 중고거래 채팅) 기능 표시
  b. (채택!!!)우측 하단의 모달은 실시간 채팅 관련 내용 알림 기능(고객센터&중고거래 채팅내역)
  (자주묻는 질문, 1:1 게시판의 경우는 현재 구현이 모두 완료되면 추가적으로 고려해보는 것으로)
  c. 우측 하단은 고객센터(실시간 알림), 중고 거래 채팅 따로 빼서 구성(실시간 알림)
  → 이 내용은 다른 사람들에게 설문조사 해오기(인당 두명씩)

3) 마이페이지

팔로잉 / 좋아요 기능이 아직 구현되지 않아서 탭만 만들어 놓음

4) 검색결과 페이지

• 맡아주실 분. .. 저녁에 정하기로

5) 도서소개 페이지

• 카테고리 별 분류 및 해당 카테고리 별 컨텐츠 보여주기

6) 독립서점 소개 페이지

• 게시판 카테고리로 따로 빼기
• 상단에는 독립신문 인용 기사 같은 간단 소개 컨텐츠
• 하단에는 좌측 지도, 우측 해당 독립서점 상세 설명

7) 북커톡 게시글 상세페이지

• 댓글, 대댓글 관련 벨로그 형식 참고.(답글 달기 버튼을 눌러야 답글 달기 가능)
  → 댓글 입력하는 부분이 댓글 보여주는 부분보다 위에 있어야 할 듯. 그리고 댓글 나타나는 순서(최근 댓글을 밑✓ / 위)

8) 반응형 웹 및 전체적인 규격

• 반응형 웹은 시도중
• 구체적인 규격 (피그마에 있는 와이어프레임이 실제 구현할 사이즈인지 → O)

저녁 회의 내용

1) 진행상황 공유

민규님) 지도 마크 찍는 것까지 성공, 수파베이스에서 가져온 값(경도,위도)으로 마크를 찍는 작업 중. 마크에 해당하는 상세 설명을 어떻게 구현할 지 고민 중
나연님) 대댓글까지 기능 구현 완료, 검색 페이지 맡아서 구현. (내일까지 구현 완료 ?)
병택님) 모달 창에 채팅 리스트 구현 완료. 중고 거래 페이지에서 버튼 클릭 시 값 넘겨주는 로직 구현 중
주원님) 토스트 에디터를 이용한 사진 가져오는 로직 구현 중, 메인 페이지는 오늘 밤이나 내일 작업할 예정
지예님) 도서 소개 페이지에서 도서 정보 불러오는 것까지 구현 완료. 베스트셀러만 완료. 고객센터 실시간 채팅은 css 제외 완료. + 도서 소개 카테고리 : 베스트 셀러/신작도서/스페셜/북커픽(블로그베스트)로 구성

2) recoil vs zustand

→ 원래 정했던 recoil 사용하는 걸로

3) 코드리뷰에 관하여

→ 다른 팀원들의 코드를 볼 시간을 갖고, 내가 아닌 다른 팀원들의 코드에 관하여 질문을 할 수 있는 수준으로 공부해오는 걸로.(실제로 질문하고 답하는 시간을 가질 예정)
목요일까지 파트 구현하고, 목요일에 다른 팀원 파트 공부, 금요일에 테스트 진행. 코드리뷰는 하고 싶은 팀원끼리 진행
토,일,월 → 발표 준비
월 → 계속 디벨롭 할 수 있는 부분이 있을 것 같은데, 월요일까지 해놓은 기능 중에 디벨롭 하고 싶은 기능이 있다면 그것을 디벨롭하는 방향으로. 새로운 기능 구현하는 것은 비추천(튜터님의 의견). 남은 2주동안 현재까지의 코드를 어떻게 디벨롭 할 지 고민해봐야 함.

진행한 내용

• 카카오맵 공식문서에 react-kakao-maps 설치하라는 말이 없었는데, 벨로그 찾다가 해당 모듈 설치하니까 Map 사용할 수 있게 됨.

• 자꾸 팀 깃허브 pull하니깐 저런 에러가 뜨게 되어서 원인을 찾다보니 desktop / Desktop 대소문자 차이때문에 에러가 뜨고 있었음. 결국 터미널에서 cd ../../../로 빠져나와서 cd desktop이 아닌 cd Desktop으로 접근해서 yarn start를 해보니 문제 없이 실행되었다.

import { useEffect, useState } from 'react';
import { mapMarkerDataHandler } from '../../api/supabase.api';
import { mapMarkerDataTypes } from '../../types/types';

const KakaoMap = () => {
  const [makerData, setMakerData] = useState<mapMarkerDataTypes[] | undefined>();
  // const mapMarkerData = async () => {
  //   try {
  //     const result = await mapMarkerDataHandler();
  //     console.log('result', result);
  //     setData(result as mapMarkerDataTypes | undefined);
  //   } catch (err) {
  //     console.log(err);
  //   }
  // };

  useEffect(() => {
    //'map'이라는 id가진 엘리먼트 찾아 container 변수에 할당
    const container = document.getElementById('map');

    //container이 null이 아닌 경우에만 코드를 실행
    if (container) {
      //카카오 맵 생성하는 코드
      const options = {
        //첫 화면 중심 좌표 띄워줌
        center: new kakao.maps.LatLng(37.5665, 126.978),
        level: 6,
      };
      //맵과 중심화면을 정해서 띄워줌
      const map = new kakao.maps.Map(container, options);

      //가져온 데이터 상태 변수에 저장
      const fetchMapMarkerData = async () => {
        try {
          const result = await mapMarkerDataHandler();
          console.log('result', result);
          setMakerData(result as any[]);
        } catch (err) {
          console.log(err);
        }
      };

      //함수 호출하여 데이터 가져오기
      fetchMapMarkerData();

      //가져온 데이터 반복하면서 지도에 마커를 추가
      makerData?.forEach((data) => {
        // 마커가 표시될 위치입니다
        const markerPosition = new kakao.maps.LatLng(data.latitude, data.longitude);

        // 마커를 생성합니다
        const marker = new kakao.maps.Marker({
          position: markerPosition,
        });

        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);
      });
      // 아래 코드는 지도 위의 마커를 제거하는 코드입니다
      // marker.setMap(null);
    }
  }, []);

  return (
    <>
      {/* 맵이 그려질 엘리먼트를 반환 */}
      <div id="map" style={{ width: '500px', height: '400px' }}></div>
    </>
  );
};

export default KakaoMap;

해당 코드를 통해서 맵을 구현했고, 맵에 마킹을 찍을 수 있게 되었고, 마킹을 여러개 찍기 위해 수파베이스에서 데이터를 뽑아왔는데,

// mapMarkerData 가져오는 함수
export const mapMarkerDataHandler = async () => {
  const { data, error } = await supabase.from('independentBookStores').select('*');
  console.log(data);
  console.log(error);
  return data;
};

return을 넣지 않으니 데이터가 빠져나오질 않아서 몇시간동안 고생을 했었고,,

이 데이터를 useState의 안에 담았었는데, 그 type들을 일일히 설정해주냐고 또 고통받았었다

export type mapMarkerDataTypes = {
  id: number;
  gov_id: string;
  name: string;
  category1: string;
  category2: string;
  address: string;
  latitude: number;
  longitude: number;
  weekdays_open_at: number;
  weekdays_close_at: number;
  saturday_open_at: number;
  saturday_close_at: number;
  sunday_open_at: number;
  sunday_close_at: number;
  closedDay_open_at: number;
  closedDay_close_at: number;
  closedDay_guide: string;
  tel_num: number;
  optn_dc: string;
  adit_dc: string;
  postal_code: number;
};

그래도 결과적으로 마킹은 다 찍히게 되었고.. 마킹을 눌렀을때 상세설명을 넣는 방법을 이제 고민해야 할 것 같다.. 쉽지가 않다 쉽지가...