월요일 오전 회의 내용

메인 페이지

1) 배너에 들어갈 내용 고민하기

• 게시판을 광고 형식으로 배너에 보여줘서 클릭하면 해당 게시판으로 들어가도록 함
  → 우선 배너 제외하고 아래 책 정보 및 게시판 정보들로 구성하는 걸로 (맨 아래 부분 : e북, 오디오북으로 구성)

마이 페이지

1) 내 페이지 - 내가 쓴 글(게시판/중고거래), 좋아요(게시판/중고거래), 팔로잉
2) 다른 유저 페이지 - 남이 쓴 글(게시판/중고거래), 팔로잉

채팅

1) 채팅 시작되었을 때 채팅방 보여줄 곳

• 고객센터 모달 밑에 다른사람과의 채팅 리스트
• 중고나라 채팅처럼 중고거래 페이지에서 채팅하기 버튼을 눌렀을 때, 모달 창이 뜨고 그 채팅은 중고거래에서만 다른 버튼으로 접근 가능. / 모달을 전역으로 관리해주면서 고객센터 문의하기 밑에 채팅 리스트. (차이점: 우측 하단의 버튼은 고객센터 전용으로 하고 중고거래 채팅을 따로 둬서 중고거래 페이지에서만 보여주냐, 아니면 하나로 합쳐서 고객센터 밑에 중고거래 채팅 리스트를 둘 것이냐)
  → 이 문제는 지예님 왔을 때 다시 의논해보는 걸로

독립서점 페이지

1) 지도 API를 어디까지 사용할 수 있을 지
2) 지도에 핀을 찍어 보여주는 형식 / 시,도 별로 분류해서 보여주기
디자이너님 의견) 독립서점을 보여주는 페이지 -> 위치에 대한 정보는 주소만으로도 충분하지 않을까. 서점에 대한 특색을 더 자세하게 다루는 게 좋지 않을까.
→ 독립서점 API에 서점 특징이 빈약함
→ 그럼 위엔 독립서점에 대한 공통적인 정보를 보여주고 아래엔 지도를 이용한 실제 독립서점의 위치와 간략한 정보를 보여주는 방식으로
검색 페이지
→ 본인 파트 구현 다 한 사람들이 맡아서 해주는 걸로 ,….

저녁 회의내용

채팅 - 관리자 아이디로 들어갔을 때에만 관리자가 랜덤 유저와 채팅 가능
5명에 대한 관리자 권한을 supabase에서 부여할 수 있음
수요일 - 맡은 파트를 다 한 사람은 검색파트 / ebook & 오디오북 같은 추가기능 구현하기
목요일 - CSS & 각자 파트 완성
금요일 - 코드리뷰 ( 한사람 당 30분 ~ 1시간 내로 준비해서 발표 ) => 이 부분은 부리더/리더 상의 후 다시 회의하기로 결정

진행한 내용

CSV데이터 수파베이스 안에 넣기

독립서점 소개해주는 api를 찾아보다가 api는 못찾고 CSV데이터는 찾게되었다. 그런데 넣는 방법을 잘 모르겠어서 여러 검색을 통해 코드로 집어 넣는 방법을 알게되었고, CSV JS 공식문서를 활용해서 parsing을 먼저 해주고 그 후에 supabase안에 table안에 column을 세팅하고 값을 한번에 넣어주는 코드를 구현했었는데,

const { promises: fs } = require('fs');
const { parse } = require('csv-parse');
const { createClient } = require('@supabase/supabase-js');
// const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
// const supabaseKey = process.env.REACT_APP_SUPABASE_KEY;
// export const supabase = createClient(supabaseUrl, supabaseKey);

async function main() {
  const supabase = createClient(
    'https://ywwmsridviznotzmkver.supabase.co',
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl3d21zcmlkdml6bm90em1rdmVyIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTcwNDcwNjUwMywiZXhwIjoyMDIwMjgyNTAzfQ.doFzvyr1uVzvxiMP_gf6NxvZRz5HJI752aivCPRSW5c',
  );
  try {
    //CSV 파일 읽기
    const content = await fs.readFile(`./data.csv`);

    // CSV 파싱
    parse(
      content,
      {
        bom: true,
        columns: true,
        groupColumnsByName: true,
      },
      async (err, records) => {
        // 레코드 배열 순회하며 Supabase에 데이터 삽입
        const insertPromises = records.map(async (record) => {
          //삽입할 데이터 생성
          const data = {
            gov_id: record.ESNTL_ID,
            name: record.FCLTY_NM,
            category1: record.LCLAS_NM,
            category2: record.MLSFC_NM,
            postal_code: record.ZIP_NO,
            address: record.FCLTY_ROAD_NM_ADDR,
            latitude: parseFloat(record.FCLTY_LA),
            longitude: parseFloat(record.FCLTY_LO),
            weekdays_open_at: record.WORKDAY_OPN_BSNS_TIME,
            weekdays_close_at: record.WORKDAY_CLOS_TIME,
            saturday_open_at: record.SAT_OPN_BSNS_TIME,
            saturday_close_at: record.SAT_CLOS_TIME,
            sunday_open_at: record.SUN_OPN_BSNS_TIME,
            sunday_close_at: record.SUN_CLOS_TIME,
            closedDay_open_at: record.RSTDE_OPN_BSNS_TIME,
            closedDay_close_at: record.RSTDE_CLOS_TIME,
            closedDay_guide: record.RSTDE_GUID_CN,
            tel_number: record.TEL_NO,
            optn_dc: record.OPTN_DC,
            adit_dc: record.ADIT_DC,
          };
          //insert 작업 완료될때까지 기다림
          const { error } = await supabase.from('independentBookStores').insert(data);
          // console.log({ error });
          // console.log(data);
        });

        await Promise.all(insertPromises);
      },
    );
  } catch (readFileError) {
    // console.error('파일 읽기 오류:', readFileError);
  }
}
const a = '카페 있음, 독립출판물 있음';
console.log(a);
main();

data.scv파일 안에 쉼표가 내가 원하지 않는곳에도 들어있고, 파일 안에 ""가 포함되어 있었다보니, 원하는 데이터가 전부 담기지 않았다.
그러다 튜터님을 찾아뵈었는데, supabase안에 import CSV버튼이 있었고, 최초 export CSV 이후 import하는 방법으로 진행을 하였었다.

이런식으로 나와있는데 여기서도 참 민감하구나 하고 느낀게,

이런식으로 수많은 카테고리가 있는데 이중에서 하나의 타입이라도 잘못 기재하거나,

이렇게 하나라도 null값이 담길 수 있는 카테고리에 is Nullable 체크가 안되어있다면 그게 오류가 나서 값이 담기지 않는 현상을 발견하였다.
참 예민한 친구구나 싶었고, 여기 담긴 주소값을 근거로 카카오톡 지도 api를 통해 마킹을 찍어줘야하는데, 아직 어떻게 해야할지 감이 안잡혀서 다양한 레퍼런스를 참고해봐야겠다 생각했다.

최종 프로젝트라 생각할게 너무 많아서 쉽지가 않다..