✨ feat: 내 프로필 수정 페이지 구현

[Yun-Jinwoo]

📌 변경 사항 개요

• 내 프로필 수정 페이지(/profile/edit)을 구현했습니다.
• 드롭다운 컴포넌트의 props로 id를 추가했습니다.
• 테스트를 위해 프로필 페이지에 링크를 추가했습니다.(/profile)

📝 상세 내용

사용자 정보 관리

// 사용자 입력값 상태 (이름, 전화번호, 소개글)
  const [profileInfo, setProfileInfo] = useState({
    name: '',
    phone: '',
    bio: '',
  });

  // dropdown 컴포넌트에 set함수를 전달하기 위해 address는 따로 분리
  const [selectedAddress, setSelectedAddress] = useState<SeoulDistrict | ''>(
    '',
  );

api 요청에 필요한 값들을 state로 관리합니다. 다만, dropdown의 setSelect로 전달할 요소가 set함수로 정해져있어, address는 다른 state로 따로 분리하였습니다.

예외 상황 처리

• 로그인이 안된 경우

  if (!isLoggedIn || !userId) {
    setModal({
      isOpen: true,
      message: '로그인 먼저 해주세요.',
    });
    return;
  }

  '로그인 먼저 해주세요.'라는 모달을 보여준 뒤에 로그인 페이지로 이동시킵니다.

• 이름이 입력되지 않은 경우

    if (!name.trim()) {
      setModal({
        isOpen: true,
        message: '이름을 입력해주세요.',
      });
      return;
    }

'이름을 입력해주세요.'라는 모달을 보여줍니다.

• 선호 지역이 선택되지 않은 경우 (figma에는 선호 지역에 *이 없어서, 필수가 아닌줄 알았으나, 선택하지 않으면 api상에서 에러가 발생합니다. 따라서 따로 처리하였으며 *도 포함시켰습니다.)

    if (!selectedAddress) {
      setModal({
        isOpen: true,
        message: '선호 지역을 선택해주세요',
      });
      return;
    }

'선호 지역을 선택해주세요'라는 모달을 보여줍니다.

모달 관련

  const handleModalConfirm = useCallback(() => {
    if (modal.message === '등록이 완료되었습니다.') {
      setModal({ isOpen: false, message: '' });
      navigate('/profile');
    } else if (modal.message.includes('로그인')) {
      setModal({ isOpen: false, message: '' });
      navigate('/login');
    } else {
      setModal({ isOpen: false, message: '' });
    }
  }, [modal.message, navigate]);

성공적으로 등록 시에는 /profile 로 이동하며, 로그인이 안된 경우에는 /login로 이동합니다.

드롭다운 컴포넌트에 id속성 추가

페이지 내에서 label과 드롭다운을 연결시키기 위해 id속성을 추가하였습니다.

🔗 관련 이슈

• [feat] 내 프로필 등록/편집 페이지 구현 #98

🖼️ 스크린샷(선택사항)

프로필 등록/수정 기능 및 로그아웃 시 처리

-.Clipchamp.6.mp4

반응형 페이지 구현

-.Clipchamp.5.mp4

💡 참고 사항

• 로그인이 안된 상태에서 프로필 수정 페이지에 접근하면 경고 모달을 띄우고 로그인 페이지로 이동시키는 기능은 구현하였지만, 현재 알바님만 내 프로필 페이지가 존재하며 사장님은 내 프로필 페이지가 존재하지 않기 때문에, 해당 접근을 막는 것에 대한 처리도 구현해야 할 것 같습니다. 추후에 내 프로필 상세 페이지까지 구현이 되면 구현 해보겠습니다.
• 앞에도 말씀드렸듯이, 피그마 상에서는 선호 지역에 *이 없어 필수 선택이 아닌 것 처럼 나와있지만 선택하지 않을 시에 api에서 에러를 반환하기 때문에 이에 대한 예외 처리와, 선호 지역에 *를 붙여 필수 입력이라는 걸 표시했습니다.
• 현재 로컬스토리지에서 accesstoken, userId, userRole를 관리하고 있는데, 생각해보니 AuthContext에서 userId와 userRole을 저장하고, 로컬스토리지에서는 accesstoken만 관리하는 게 더 나을 것 같다는 생각이 들었습니다! 작업하시는 분들 계실까봐 수정하진 않고 그냥 생각만 해봤는데 이에 대한 의견 말씀해주시면 감사하겠습니다🙏🙏

[Moon-ju-young]

잘 만들어주셨네요! 다만 approve 하지 않은 이유는 저번에 광민님이 가게 정보 등록/편집 페이지에서 필수 속성을 어떻게 처리할까하다 빨간 테두리으로만 강조하는 방안을 제안해서 적용하신다 하셨고, 모달을 띄워서 처리할지는 논의가 안 되어서 입니다! 그리고 로그인이 되어있지 않는 등 잘못된 접근에 대해서 모달 창을 띄울 것인지, 모달창 없이 강제로 다른 페이지로 이동시킬지 이 부분에 대해서도 논의가 필요할 것 같습니다~

• 페이지 구성을 보니 프로필 상세와 편집을 다른 페이지로 하지 않고 상세 페이지 위에 해당 페이지 컴포넌트를 위에다가 띄우는 식도 가능할 것 같아요. 그렇게 된다면 페이지가 넘어갈때마다 api 요청을 하는 번거로움은 없지 않을까 싶네요?

[Moon-ju-young]

💬 figma를 보니 전화번호에 -도 들어가는데 가능하다면 구현하면 좋을 것 같습니다!

[Yun-Jinwoo]

구현이 다 끝나고 시간이 있다면 시도해보겠습니다~!

[Moon-ju-young]

💬 textarea가 쓰이는 데가 있어서 다른 공통 component로 분리해도 좋을 것 같습니다!

[Yun-Jinwoo]

이미 광민님도 이렇게 진행을 한걸로 알고있어서 추후 리팩토링때 분리 고려 해보겠습니다~!

[minimo-9]

고생하셨습니다! 부족한 부분은 리팩토링을 진행해서 변경하면 좋을 것 같습니다!

[Yun-Jinwoo]

제안사항에 맞게 다 수정 완료했습니다~
아까 회의에서 로그아웃 시 메인페이지로 이동하자고 했는데, 작성해둔 로그인이 안됐을때에 대한 처리는 추후에 로그아웃 시 이동 기능 구현할때 해당 PR에서 함께 수정/삭제하겠습니다~!

[Moon-ju-young]

별로 좋은 방식은 아닌 것 같지만... 일단 확인했습니다

[Yun-Jinwoo]

혹시 어떤 방식이 또 있을까요?? 전 저거밖에 생각이 안나서 저렇게 작성했습니다

[Moon-ju-young]

저도 마땅히 떠오르진 않네요? 초기에 말한 것처럼 Nav 컴포넌트를 page 컴포넌트 내에 넣고 h-screen으로 활용하는 게 제일 좋지 않나 생각하지만 일단 밖으로 빼서 더 좋은 방법이 생각 나지는 않네요

[Yun-Jinwoo]

으흠 알겠습니다 일단 이렇게 가겠습니다~!