2차 캘픽 프로젝트 회고

👊 2차 프로젝트 회고

1️⃣ 프로젝트를 시작하며

1차 프로젝트때 아쉬운 점은 프론트엔드 공통 컨벤션을 기획단계부터 만들어 놓지 않은 것이었다. 그래서 2차 프로젝트때는 어떤 컨벤션이 필요한지 누가 무엇을 만들건지 첫 회의부터 기획했다.
같이 공유할 수 있는 템플릿이 무엇일까 고민하다 프로젝트 기획의 문서화는 노션으로 하기로 결정했고, 필요한 내용만 만들어 팀원들에게 공유하였다.

또 각 팀마다 공유되는 내용이 다르기때문에 팀 페이지를 따로 만들어서 갤러리화해 편하게 사용할 수 있게 했다.

(팀 노션 페이지)

---

2️⃣ 프로젝트를 진행하며

나는 소셜로그인 / 시험리스트 페이지 / 고사장안내 페이지를 맡았다.

😡 구글로그인 너 뭐 돼..?

처음 기획단계에서는 카카오 API를 사용해서 소셜 로그인을 진행하기로 했다. 그러다 프로젝트 캘린더 기능때문에 구글 로그인으로 변경했는데,,, 우선 구글 로그인은 공식문서가 매우 불친절하다 🙂 "아 이건가..?" 하고 읽을만하면 자꾸 다른 링크 주면서 넘어가라고 하고.. (타고 가면? 또 관련된 내용 아님) 그리고 이건 내 문제지만 영어로 된 복잡한 공식문서? 나 너무 어려워~~ 🤓

결국 이틀 고생하고 인가코드 잘 보내준줄 알았는데 웬열 나 토.큰. 보내주고 있었네?
그걸 프로젝트 마감 3일 전에 알아서 다시 구글 로그인과의 싸움.. 결국 건호님이 잘 도와주셔서 금방 해결했는데.. 아니 잘 해결한줄 알았으나..

프로젝트 마감 하루 전 갑.자.기 구글 로그인 인가 코드는 받아와지는데 jwt 왜 안 와..?
저녁먹고 9시부터 12시까지 멘토님 도움도 받으면서 고통 받았지만 해결 안됨..

결국 구글 버리고 카카오라도 하자!! 라는 마음으로 성재님 도움받아 했는데.. 왜 똑같아..? 🙁 이때는 진짜 아 왜 다른 사람들 잘되는데 나만 이래!!!! 하면서 속으로 울었다.. ㅠ

알고보니 백엔드랑 나랑 요청 method가 달랐었다..! 맙소사 새벽 한시에 알아버려서 결국 일단 카카오로 킵고잉하기로 하고 구글 로그인은 다음 프로젝트에서 광휘님이랑 같이 해보기로했다.

엄청 고생한 덕에 이제 소셜로그인은 마스터한듯 싶다..^^ 오히려 좋아

---

✍️ 시험 리스트 페이지

시험리스트 페이지는 고사장안내 페이지를 마무리하고 추가구현사항으로 작업한 페이지이다.
사실 1차때와 크게 다른건 없어서 어려운점은 없었다.

👉 시험별 예약 가능한 리스트 보여주기
시험 별 카테고리 분류하여 조건부 렌더링을 통해 접수 가능한 시험 리스트 보여주기
👉 searchParams를 사용해 시험 정보 넘겨주기
유저가 "접수하기" 버튼을 누르면 선택한 정보를 고사장 안내 페이지로 넘겨주는 로직 구현

추가적으로 시도해봤던 기능은 searchParams를 사용해서 유저가 선택한 정보를 넘겨주는 것이다!

처음에는 searchParams.set을 사용해서 정보를 넘기려고 했는데 아래처럼 navigate의 url에 정보를 입력해서 간편하게 넘기는 방법이 있다고 평안님이 알려주셨다 👍

  const clickHandler = () => {
    navigate(`/examInfo?examName=${examName}&testDate=${info.testDate}`);
  };

---

📅 고사장 안내 페이지

👉 searchParams 를 통해 넘어온 시험 정보 선택해놓기
메인, 시험 리스트 페이지에서 유저가 시험 일정을 선택해서 해당 페이지로 넘어 온 경우 선택한 시험의 시험명/날짜를 미리 선택해 해당 정보를 또 클릭하지 않고 바로 볼 수 있도록하여 사용자 경험을 높임.
👉 카카오 MAP API 사용
카카오 MAP API를 사용하여 유저가 선택한 고사장의 약도를 제공하는 기능 구현 완료.
유저가 선택한 고사장의 좌표를 클릭할때마다 변경하여 약도 제공

고사장 안내 페이지는 한 컴포넌트로 조건부 렌더링을 걸어 최대한 UI들을 반복해서 사용하지 않으려고 노력했다.하지만,, 오히려 추가해야될 조건들이 늘어나면서 오히려 가독성이 더 떨어졌다 😅

state를 사용해서 유저가 정보를 클릭하면 아래 바로 값이 변경되면서 선택한 정보를 바로 확인할 수 있게 하였다.

(선택된 요소들을 관리하는 함수)

 const selectHandler = (e, titleData) => {
    const isRadioChecked = e.target.checked;
    isRadioChecked && setCheckRdoId(e.target.id);

    setSelectedData({
      ...selectedData,
      [e.target.name]: e.target.value,
      testSiteId: e.target.id,
    });

    titleData === '시험일' && districtsData(e.target.value);
    titleData === '서울' && testSitesData(e.target.value);
  };

마지막으로 카카오 MAP API를 사용하여 선택한 고사장에 대한 지도를 표시해줬다.
카카오 공식문서가 친절해서 크게 어려움은 없었고 좌표 또한 state로 관리해서 나타낼 수 있게 구현하였다.

(카카오 MAP API 코드)

export default function MapContainer({ selectedData, testSites }) {
  let lngValue = testSites.find(data => {
    return selectedData.name === data.name;
  })?.lng;

  let latValue = testSites.find(data => {
    return selectedData.name === data.name;
  })?.lat;

  useEffect(() => {
    const { kakao } = window;

    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(lngValue, latValue),
      level: 3,
    };
    let map = new kakao.maps.Map(container, options);

    //마커 위치
    let markerPosition = new kakao.maps.LatLng(lngValue, latValue);
    let marker = new kakao.maps.Marker({
      position: markerPosition,
    });
    marker.setMap(map);

    //지도 타입
    let mapTypeControl = new kakao.maps.MapTypeControl();

    //지도 컨트롤
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
    let zoomControl = new kakao.maps.ZoomControl();
    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
  }, [lngValue, latValue]);

  return <S.PlaceMap id="map"></S.PlaceMap>;

---