[12월 10일~11일] 이슈 체크 리스트

[dusunax]

배포 단계 이후 이슈 사항 리스트

완료된 리스트는 따로 분류하겠습니다.

• 에러 핸들링 필요
  • (404등등 떴을 때 필요한 처리가 없음)
  • 통신 요청마다 try {} catch (e) {} 달아주세요.
  • Error 또는 404 페이지 필요할 것 같습니다.
• 폴더명에 맞지 않는 파일 이동하기
  • src\pages\login\OAuth.js << 페이지가 아님
  • src\pages\member\countFishTruckImages.json << 페이지가 아님
  • public\assets\customfish / public\assets\custommessage << svgs 또는 images 폴더 안으로 들어가는 게 좋을 것 같음
• 구글폼 사용성 설문조사 고려

완료된 이슈 사항 리스트

• Cloudflare 웹 애널리틱스 적용 고려 => 공유 완료
  • https://www.cloudflare.com/ko-kr/analytics/
  • https://dash.cloudflare.com/ced9fcc35a65bcb43f8ef66c971a4823/web-analytics/onboarding
• 사용하지 않는 주석 삭제 => 공유 완료
  • 실제 주석 삭제
  • 또는 vite.config.js의 주석 해제하면, console.log drop할 수 있습니다.
    • 빌드 후 배포 전 단계에서 확인 필요
      
• CustomDone, CustomFish에 있는 슈피치 uuid 삭제 필요
  • 하드코딩 uuid 삭제
  • \src\pages\customFishbread\CustomFish.jsx
  • \src\pages\customFishbread\CustomDone.jsx
  • 세션 스토리지의 fish에 저장할 수 있을 것 같습니다.
• 프록시 사용하면 백엔드 api 호출 시 405 상태 값이 뜸 → (일) 프록시 사용 여부 논의 필요
• 붕어빵 리스트의 붕어 이미지가 보이지 않음 => 수정완료
  • src에 해당 파일이 존재하지 않아서 보이지 않는 것 같습니다.
    
• 전체 사용하는 폰트 globalStyle에 옮겨놓기
• 비공개 링크를 공유할 공간 필요
  • 비공개 노션 페이지를 만들고 카톡 공유 & 초대 완료했습니다.
• 데스크탑 페이지에서 핸드폰 레이아웃 만들기
  
• 인스타 계정 만들기
  • nyangnyangletter
    
• Cloudflare 계정 새로 파기
• fish를 세션 스토리지로 이동 => 세션 말고 recoil에 저장
  • 세션이 끝난 후에도 유지할 필요가 없는 것 같습니다. 세션 스토리지로 이동하는 게 어떨까요
    
  • 마지막으로 접속했던 붕어빵의 uuid (메인페이지에 접속한 기준) 또한 fish객체에 넣어서 보관하도록 변경
• 메인페이지 요청 4번 가는거 확인하고 수정
• 프론트에서 사용자 ip 가져오는 코드 삭제 요청(둠둠칫)
  • 사용자의 ip 정보를 더 이상 사용하지 않습니다.
  • src\pages\customFishbread\CustomFish.jsx의 125~139번째 줄 삭제 예정
  • 하단 백업 코드

// ip 가져오기
const getSenderIp = async () => {
  const { data, status } = await requestApi('get', 'https://api.ipify.org?format=json');

  if (status >= 200 && status < 400) {
    setInputs((prev) => ({
      ...prev,
      // senderIp: data.ip,
    }));
  }
};

useEffect(() => {
  // getSenderIp();
  }, []);

• 현재는 useAxios에 baseURL에 백엔드 url 그대로 사용 중 → (일) env에서 관리할지 여부 논의

[dusunax]

fish 데이터 recoil에 저장 => 세부사항

• 세션이 끝난 후에도 유지할 필요가 없는 것 같습니다. 세션 스토리지로 이동하는 게 어떨까요
• 세션 스토리지에서 매번 값을 꺼내오면 기능 저하 => 전역 데이터로 관리 ex) recoil
  
• 마지막으로 접속했던 붕어빵의 uuid (메인페이지에 접속한 기준) 또한 fish객체에 넣어서 보관하도록 변경
  • 변수명이 바뀌어야할 것 같은데요

  async function fetchFishCountHandler() {
    try {
      const fetchedFish = await fetchCount.call(null, `${pageUuid}`);
      // fetchedFish = {
      //   totalCount,
      //   unreadCount,
      //   nickname,
      // }
      // 여기에 uuid 추가

      if (fetchedFish?.nickname !== fishData?.nickname || !fishData) {
        saveFish(fetchedFish);
        setFishData(fetchedFish); // 이거 두 개 recoil로 대체
        matchCatTruckImage(fetchedFish.unreadCount);
      }
    } catch (e) {
      console.log(e);
    }
  }

• 저장 => 한 번에 저장할 수 있음
• 사용 => uuid랑 nickname < 거의 전역 / count < 메인에서만

---

변경 사항

• fishCart => recoil에서 관리
• fishCart 로컬 또는 세션 스토리지에 저장하지 않음
  • 해당 코드가 있는 파일 삭제 : src\utils\fishCart.js
  • 삭제 내용

/** response의 붕어빵 갯수 정보를 localStorage에 string으로 저장합니다. return void */
const saveFish = (fetchedFishData) => {
  // 이거 recoil에 저장
  localStorage.setItem(
    'fish',
    JSON.stringify({
      totalCount: fetchedFishData.totalCount,
      unreadCount: fetchedFishData.unreadCount,
      nickname: fetchedFishData.nickname,
    }),
  );
};

// localStorage의 붕어빵 갯수를 꺼내와서 객체 형태로 return => 닉네임/토큰/uuid
/** 유저 정보를 객체로 return합니다. | null */
const getFish = () => {
  if (localStorage.getItem('fish') === null) {
    return null;
  }

  const locals = localStorage.getItem('fish');
  const fish = JSON.parse(locals);

  return fish;
};

export { saveFish, getFish };

요약(공유 사항)

• recoil에서 fishCart 꺼내서 사용해주세요.

import { fishCartState } from '../../atoms/fishCartData';
import { useRecoilValue } from 'recoil';

const fishCart = useRecoilValue(fishCartState);
console.log(fishCart);
// 데이터 없음: 
// {totalCount: 0, unreadCount: 0, nickname: 'name', uuid: null}

// 데이터 있음: 
// {totalCount: 10, unreadCount: 6, nickname: '고양이', uuid: 'U184ce3ac09d0003'}