✂️ 분배된 이슈

• 북마크 추가/삭제(#48)
• 사이드 바 - 북마크 리스트(최대 5개) 출력(#40)

🚩 구현 목표

북마크 api를 만들고 상세 정보 모달 및 사이드바에 UI 적용

🍀 세부 목표

• MongoDB user 스키마에 북마크(배열) 추가
• 북마크 api 구현
• 상세정보 창에서 북마크 추가, 삭제 기능 구현
• 사이드바에서 북마크 불러오기, 삭제 기능 구현

🖥️ 구현 내용

• MongoDB User 스키마 변경

  • bookmarks(배열)와 nickname(문자열) 추가
  • nickname의 경우 passport에서 user 정보 생성할 때 넣어줌
  • profile이 네이버 Oauth에서 받은 사용자 정보

  // server/src/apis/passport/naverStrategy.ts
  const newUser = await User.create({
  	snsId: profile.id,
  	provider: 'naver',
  	email: profile.email,
  	nickname: profile.nickname
  });
  

• 로그인 User 정보는 로그인과 동시에 client에서 계속 가지고 있음

  • 이전에 isLoggedIn로 로그인 여부를 관리 했음
  • 전역 상태 userInfo로 client에서 로그인 정보를 계속 가지고 있음

  // client/src/pages/MainPage/MainPage.tsx
  useEffect(() => {
      // 로그인 여부 확인하기 -> '로그아웃' 기능 구현 시 재사용 여부를 판단하여 커스텀 훅으로 빼야함
      const checkLoggedInFunction = async () => {
        const logInStatus = await apis.getWhetherUserLoggedIn();
  
        if (logInStatus.ok === true) {
          setIsLoggedIn(true);
          setUserInfo(logInStatus.data);
          setIsLoginModalOpen(false);
          return;
        }
        setIsLoggedIn(false);
        setUserInfo(null);
      };
  
      checkLoggedInFunction();
    }, []);
  

• bookmark 관련 api는 우선 /api/auth 아래에 설정

  • areaName과 userId를 받아 유저별로 북마크 등록, 삭제 수행
  • client에서 유저 정보 들고 있어도 server에서 authMiddleware.authorizationUser 미들웨어 통과해야 해당 기능 사용 가능함
  • 북마크 5개 초과 막는 기능은 client에서 설정

• 상세 정보 모달에서 북마크 삭제, 추가

  • client에서 유저의 북마크 관련 내용은 전부 userInfo에 배열로 들어 있어서, 해당 배열을 수정하는 방식으로 북마크 삭제, 추가 구현

  // client/src/components/InfoDetailModal/InfoDetail.tsx
  const onClickBookmark = async () => {
      if (!firstLevelInfo || !userInfo) {
        alert('북마크는 로그인 후 사용 가능합니다.');
        return;
      }
      const [areaName] = firstLevelInfo;
      const { _id: userId, bookmarks } = userInfo;
  
      if (bookmarks.includes(areaName)) {
        await apis.deleteBookmark(areaName, userId);
        setUserInfo({
          ...userInfo,
          bookmarks: bookmarks.filter(bookmark => bookmark !== areaName)
        });
      } else {
        if (bookmarks.length >= 5) {
          alert('북마크는 최대 5개까지 등록 가능합니다.');
          return;
        }
        await apis.addBookmark(areaName, userId);
        setUserInfo({
          ...userInfo,
          bookmarks: bookmarks.concat(areaName)
        });
      }
    };
  

• 사이드 바에서 각 지역의 혼잡도를 가져오기 위해 areas를 지역 상태에서 전역 상태로 변경

  • 사이드 바에서 삭제 클릭 시 북마크 삭제, 원리는 상세 정보 모달과 동일
  • 사이드 바에서 장소명 클릭 시 위치 이동 시키고 싶은데 논의 해보기

📖 학습 내용

• MongoDB에서 array type을 설정하기 위해서는 interface에는 Types로 걸어줘야하고 스키마에는 [string]으로 걸어주면 됨

  • 몽구스 타입 설정 : https://mongoosejs.com/docs/typescript/schemas.html

• mongoose에서 array값 push하는 방법

  • 삭제할 경우에는 pull로 바꿔주면 됨

  Nft.findOneAndUpdate(
  			{ tokenId : tokenId },		
  			{ $push: { bids:bid}},
  			(err, result) => {
  				console.log('autcion is normal, Do not Worry');
  				res.json({
  					success: true,
  					detail: 'success set highstbid',
  				});
  				if (err) console.log(err);
  			}
  		)
  

🩺 의사결정

• 사이드 바에서 장소명 클릭 했을 때 지도 위치 바꿀지?
  • 지금 주석 처리 해놓은 방식으로 구현하면 중간에 위치가 한 번 이동함
  • naverMap을 가져와야는데 이것도 전역으로 선언하면 너무 복잡함

❓ 궁금한 점

• setState의 비동기성에 대해 이해할 필요가 있음