Feat/#382 EditProfilePage 구현 및 회원 탈퇴 기능 추가 #392

ukkodeveloper · 2023-09-10T13:51:17Z

📝작업 내용

회원탈퇴 기능을 위해, 프로필 편집 페이지를 구현했습니다. 현재 프로필 닉네임이나 소개의 경우 변경할 수 없기 때문에, disabled 처리 했습니다.
회원 탈퇴 모달을 구현했습니다. 회원 탈퇴의 경우 취소를 primary 색으로 하긴 했는데, 이렇게 해도 괜찮은 지 의견을 듣고 싶습니다.
회원 탈퇴 시에 delete 요청을 보낸 다음, localstorage 에 accessToken을 비우고 전역 상태를 초기화해주었습니다.

#️⃣연관된 이슈

close #382

github-actions · 2023-09-10T13:53:02Z

Unit Test Results

  73 files   73 suites 9s ⏱️
287 tests 287 ✔️ 0 💤 0 ❌
290 runs 290 ✔️ 0 💤 0 ❌

Results for commit 7e7600f.

♻️ This comment has been updated with latest results.

Creative-Lee

고생 많으셨어요 우코 짱코!😀
이미 만들어진 페이지에 코드 스타일 맞춰가며 기능을 얹는 거라 더 힘들었을텐데 정말 감사합니다~
코멘트 확인해주시고 재요청주세요~

회원탈퇴 기능을 위해, 프로필 편집 페이지를 구현했습니다. 현재 프로필 닉네임이나 소개의 경우 변경할 수 없기 때문에, disabled 처리 했습니다.

굿 굿 입니당 ㅎ

회원 탈퇴 모달을 구현했습니다. 회원 탈퇴의 경우 취소를 primary 색으로 하긴 했는데, 이렇게 해도 괜찮은 지 의견을 듣고 싶습니다.

이거는 사용자는 쪼까... 싫어할 수 있지만, 저희 입장에서는 좋고... 저는 좋은 것 같아요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
팀원 의견도 들어보죠~ ㅎㅎ

회원 탈퇴 시에 delete 요청을 보낸 다음, localstorage 에 accessToken을 비우고 전역 상태를 초기화해주었습니다.

확인해 봤는데, delete요청, 스토리지 삭제까지 잘되네요!

Creative-Lee · 2023-09-10T15:49:27Z

frontend/.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .env
+.idea


eol 설정이 꺼진것 같네용

헉 그렇네요! 바로 수정~

Creative-Lee · 2023-09-10T15:54:03Z

frontend/src/features/profile/components/WithdrawalModal.tsx

+        <ModalContent>{WITHDRAWAL_MESSAGE.ERASE}</ModalContent>
+        <ModalContent>{WITHDRAWAL_MESSAGE.ASK_CONFIRM}</ModalContent>


💬 상수화 + 메세지 1, 2번 라인 분리의 이유가 있나요?

다른 모달에서 메세지가 2줄이 넘어갈때의 처리방식이랑 다른 방식이라 궁금해서 물어봅니다~

모달에서 여러 줄 줄 때는 이런식으로 적용하긴 했었어요! 하나의 ModalContent에 text를 다 넣는 게 더 좋을 지 생각해봐야겠네요. 한번 적용해보겠습니다

Creative-Lee · 2023-09-10T15:54:59Z

frontend/src/pages/EditProfilePage.tsx

+import WithdrawalModal from '@/features/profile/components/WithdrawalModal';
+import useModal from '@/shared/components/Modal/hooks/useModal';
+import Spacing from '@/shared/components/Spacing';
+import ROUTE_PATH from '@/shared/constants/path';


아래 네비게이션 경로에 / 대신 root 를 적용하면 알람도 사라지겠네요!

Creative-Lee · 2023-09-10T15:59:30Z

frontend/src/pages/EditProfilePage.tsx

+  const { user, logout } = useAuthContext();
+  const { isOpen, openModal, closeModal } = useModal();
+
+  const { mutateData } = useMutation(() => fetcher(`/members/${user?.memberId}`, 'DELETE'));


💬 인자를 받아 url로 fetch 하는 함수로 한번 분리되면 좋을 것 같아요~
네이밍을 잘 지어 분리한다면, 어떤 통신함수를 받아 mutate 하는지 더 알기 쉬울 것 같네요!
개인적으로는 컴포넌트는 통신 함수의 url 까지는 모르는게 자연스럽다고 생각합니다~

Creative-Lee · 2023-09-10T16:02:19Z

frontend/src/pages/EditProfilePage.tsx

+      <Spacing direction={'vertical'} size={16} />
+      <SubTitle>소개</SubTitle>
+      <Spacing direction={'vertical'} size={4} />
+      <TextArea value={''} disabled maxLength={100} />


textArea 리사이징을 못하도록 막아주면 좋을 것 같네요~

아주 좋구요!

Creative-Lee · 2023-09-10T16:11:37Z

frontend/src/pages/MyPage.tsx

@@ -9,6 +9,7 @@ import Flex from '@/shared/components/Flex';
 import Spacing from '@/shared/components/Spacing';
 import SRHeading from '@/shared/components/SRHeading';
 import useToastContext from '@/shared/components/Toast/hooks/useToastContext';
+import ROUTE_PATH from '@/shared/constants/path';


여기도 만든 경로 상수 사용하면 되겠어요!

이거 조금 할말이 있긴한데 ㅋㅋㅋ 캠퍼스에서 이야기 하시죵

Creative-Lee · 2023-09-10T16:15:52Z

frontend/src/pages/MyPage.tsx

@@ -41,6 +42,10 @@ const MyPage = () => {
    navigate('/');
  };

+  const editProfileRedirect = () => {


버튼을 눌러 단순히 페이지 이동을 하는거라면, redirect 라고 부르기에는 다소 어색한것 같아요.
ex) goXXXPage, 같은 단순한 네이밍도 괜찮겠네요!

💬 Link 태그를 사용하지 않고 함수를 만들어 Button에 바인딩하신 이유가 있나요~?
페이지 이동 외에 추가적인 작업이 없다면 Link 태그를 사용해도 될것 같아요~

goXXPage 좋은 것 같아요! 해당 함수명으로 변경했고요. 저도 uri 이동 외에 다른 일을 하지 않아 Link가 더 적절하다곤 생각하지만, 그렇다고 반드시 구분해야 할 정도인 지는 모르겠습니다. 따라서 해당 프로필 편집 UI가 로그아웃 버튼과 동일하기 때문에 재사용하는 게 더 낫다고 판단했습니다.

Creative-Lee · 2023-09-10T16:18:14Z

frontend/src/router.tsx

@@ -37,6 +38,10 @@ const router = createBrowserRouter([
        path: `${ROUTE_PATH.MY_PAGE}`,
        element: <MyPage />,
      },
+      {
+        path: `${ROUTE_PATH.EDIT_PROFILE}`,


Creative-Lee · 2023-09-10T16:18:22Z

frontend/src/shared/constants/path.ts

@@ -4,6 +4,7 @@ const ROUTE_PATH = {
  SONG_DETAILS: 'songs',
  LOGIN_REDIRECT: '/login/redirect',
  MY_PAGE: 'my-page',
+  EDIT_PROFILE: 'my-page/edit',


Creative-Lee · 2023-09-10T16:19:45Z

frontend/src/features/profile/components/WithdrawalModal.tsx

+
+const ModalContent = styled.div`
+  font-size: 16px;
+  color: #b5b3bc;


💬💬💬 저희 컬러칩에 비슷한 색상 없던가요? ㅋㅋㅋㅋㅋㅋ 색이 많아져서 큰일이네요 🤣🤣🤣

ㅋㅋㅋㅋㅋ 💬💬💬 3개인걸 보니까 뭔가 강한 요구 같네요 ㅋㅋㅋㅋㅋㅋㅋ subText로 두어도 괜찮을 것 같아서 해당 컬러를 가져왔습니다.

Creative-Lee

코멘트 반영 확인했습니다~ 고생 많으셨습니다~

Creative-Lee · 2023-09-11T11:21:33Z

frontend/src/features/songs/components/VoteInterface.tsx

@@ -32,7 +33,7 @@ const VoteInterface = () => {

    await createKillingPart(songId, { startSecond: partStartTime, length: interval });
    if (error) {
-      window.location.href = googleAuthUrl;
+      navigate(ROUTE_PATH.LOGIN);


💬 토큰 관련 error에 대한 처리를 위해 로그인 페이지로 보내는 거라면, 추후에 변경되어야 하겠네요!
모든 error에 대해 로그인 페이지로 가게 되니까요!

Creative-Lee · 2023-09-11T11:23:54Z

frontend/src/pages/AuthPage.tsx

@@ -35,7 +35,7 @@ const AuthPage = () => {
    getAccessToken();
  }, []);

-  return <Navigate to="/" />;
+  return <Navigate to="/" replace />;


뒤로가기 시 history가 남아있던 AuthPage로 이동해버리는 이슈를 해결하기 위해 변경되었습니다.

ukkodeveloper added 10 commits September 10, 2023 13:58

config: webstorm 설정 파일 git 무시 (gitignore)

f29b6b2

feat: EditProfilePage 선언

0b6df35

feat: EditProfilePage ui 구현

3367888

feat: modal 컨텐츠 내용 변경

7b4ce28

feat: 유저 목 데이터 제거 및 디자인 수정

e3b0155

refactor: 회원 탈퇴 메세지 상수화

0337cc6

refactor: 회원탈퇴 확인 모달 별도 컴포넌트로 분리

db0f61b

feat: 회원 탈퇴 요청 핸들러 구현

18a3d7b

feat: 프로필 편집 버튼 클릭 시 편집 페이지로 이동

a7068ae

fix: EditProfile 페이지 이동 경로 변경

5a8f62e

ukkodeveloper added [ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠 labels Sep 10, 2023

ukkodeveloper added this to the 1차 이벤트 대비 단기 스프린트 milestone Sep 10, 2023

ukkodeveloper self-assigned this Sep 10, 2023

ukkodeveloper requested review from Creative-Lee and cruelladevil as code owners September 10, 2023 13:51

Creative-Lee requested changes Sep 10, 2023

View reviewed changes

ukkodeveloper added 8 commits September 11, 2023 09:05

design: text area 리사이징 차단

38aea1b

fix: gitignore eol 적용

bbbd312

refactor: 모달 내용을 line-height 로 줄간격 주도록 변경

c6e4186

refactor: Modal content subText 컬러칩 사용

6a54477

chore: feature 폴더명을 profile에서 member로 변경

2d6a6db

refactor: api 요청 함수 별도의 레이어로 분리

bb3bcb2

design: input label 적용 및 스타일 변경

60e75a9

refactor: 프로필 편집 이동 핸들러 함수명 변경

4bf1ed1

ukkodeveloper force-pushed the feat/#382 branch from 66392c0 to d3ac56f Compare September 11, 2023 04:50

refactor: route_path 상수화 적용

efafafb

ukkodeveloper force-pushed the feat/#382 branch from d3ac56f to efafafb Compare September 11, 2023 04:54

ukkodeveloper requested a review from Creative-Lee September 11, 2023 04:59

Creative-Lee approved these changes Sep 11, 2023

View reviewed changes

ukkodeveloper added 6 commits September 11, 2023 16:08

Merge branch 'main' into feat/#382

6c1fa49

Merge branch 'main' into feat/#382

6ab8170

feat: 로그인 필요시 로그인 페이지로 이동하기

406f15d

fix: fetcher 함수에 router dom 상태 제거

e0eeabd

fix: login history replace 로 변경

88fc833

Merge branch 'main' into feat/#382

11b1c5f

ukkodeveloper force-pushed the feat/#382 branch from bbba155 to 11b1c5f Compare September 11, 2023 11:38

Creative-Lee mentioned this pull request Sep 11, 2023

Refactor/#400 비로그인 상태로 댓글 작성 시도 시 로그인 권유 모달이 표시되도록 변경 #401

Merged

Merge branch 'main' into feat/#382

7e7600f

Creative-Lee reviewed Sep 12, 2023

View reviewed changes

ukkodeveloper merged commit cdf56e0 into main Sep 12, 2023

ukkodeveloper deleted the feat/#382 branch September 12, 2023 18:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/#382 EditProfilePage 구현 및 회원 탈퇴 기능 추가 #392

Feat/#382 EditProfilePage 구현 및 회원 탈퇴 기능 추가 #392

ukkodeveloper commented Sep 10, 2023

github-actions bot commented Sep 10, 2023 •

edited

Loading

Creative-Lee left a comment •

edited

Loading

Creative-Lee Sep 10, 2023

ukkodeveloper Sep 11, 2023

Creative-Lee Sep 10, 2023

ukkodeveloper Sep 11, 2023

Creative-Lee Sep 10, 2023

Creative-Lee Sep 10, 2023

Creative-Lee Sep 10, 2023

ukkodeveloper Sep 11, 2023

Creative-Lee Sep 10, 2023

ukkodeveloper Sep 11, 2023

Creative-Lee Sep 10, 2023

ukkodeveloper Sep 11, 2023

Creative-Lee Sep 10, 2023

Creative-Lee Sep 10, 2023

Creative-Lee Sep 10, 2023

ukkodeveloper Sep 11, 2023

Creative-Lee left a comment

Creative-Lee Sep 11, 2023

Creative-Lee Sep 11, 2023

		<ModalContent>{WITHDRAWAL_MESSAGE.ERASE}</ModalContent>
		<ModalContent>{WITHDRAWAL_MESSAGE.ASK_CONFIRM}</ModalContent>

Feat/#382 EditProfilePage 구현 및 회원 탈퇴 기능 추가 #392

Feat/#382 EditProfilePage 구현 및 회원 탈퇴 기능 추가 #392

Conversation

ukkodeveloper commented Sep 10, 2023

📝작업 내용

#️⃣연관된 이슈

github-actions bot commented Sep 10, 2023 • edited Loading

Unit Test Results

Creative-Lee left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Creative-Lee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 10, 2023 •

edited

Loading

Creative-Lee left a comment •

edited

Loading