[feat] add mypage layout and responsive CSS #26

najitwo · 2024-11-18T09:59:12Z

📌 Related Issue

close #15

📝 Description

마이페이지 완성 🎉
모달기능 추가(공용을 염두에 두고 만들어 봤는데 보시고 의견주세요...😊)

📸 Screenshot

모달

📢 Notes

말씀하신대로 (with-header-sidebar)에 mypage 폴더 옮겼습니다.
폴더 이사를해서 파일체인지가 많습니다....

Implemented Modal component

devmanta

아니.. 손가락 혹싀 20개신가요?
엄청 빠르게 먼가를 많이 만드셨네요.. 대단쓰... 👍
모달 저두 쓸수있게 만들어주세요....🥹
근데 저 닉네임 한글로 되던가요....!?

devmanta · 2024-11-18T12:56:46Z

src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx

+      await axios.put('/auth/password', {
+        password: data.currentPassword,
+        newPassword: data.newPassword,
+      });


몬가.. 저는 api호출하는 부분은 별도로 빼서 컴포넌트에서는 함수 호출만해서 쓰는 방향으로 하고있는데
어떠신가요~?

@devmanta 유저 수정 포스트 요청시 한글 닉네임 잘되던데요???
별도로 빼면 좋죠!!! 귀찮아서 안했습니다.. 🤐

@najitwo 그런이유라면 빼.주.세.요. 😇

등록만 그럼 한글이안되는건가. . . . . .

devmanta · 2024-11-18T12:57:15Z

src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx

+      });
+      reset();
+    } catch (error) {
+      if (error instanceof Error) {


Error 인스턴스가 아닐경우도 있나요..!?

catch의 error 타입이 unkown이라 타입 좁히기로 사용한 것 입니다.!!

devmanta · 2024-11-18T13:00:37Z

src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx

+        if (error.message === ERROR_MESSAGES.CURRENT_PASSWORD_INCORRECT) {
+          openModal(<AlertModal>{error.message}</AlertModal>);
+          setError('currentPassword', {
+            type: 'manual',
+            message: error.message,
+          });
+        }
+        if (error.message === ERROR_MESSAGES.SAME_AS_OLD_PASSWORD) {
+          openModal(<AlertModal>{error.message}</AlertModal>);
+          setError('newPassword', {
+            type: 'manual',
+            message: error.message,
+          });
+        }


몬가..if문안에 if문은 지양하는 느낌이여서
switch 문을 쓰면 더 보기 편할것같아요!
아니면 요런느낌도 좋을것같아요~!

Suggested change

if (error.message === ERROR_MESSAGES.CURRENT_PASSWORD_INCORRECT) {

openModal(<AlertModal>{error.message}</AlertModal>);

setError('currentPassword', {

type: 'manual',

message: error.message,

});

}

if (error.message === ERROR_MESSAGES.SAME_AS_OLD_PASSWORD) {

openModal(<AlertModal>{error.message}</AlertModal>);

setError('newPassword', {

type: 'manual',

message: error.message,

});

}

const errorHandlingMap = {

[ERROR_MESSAGES.CURRENT_PASSWORD_INCORRECT]: 'currentPassword',

[ERROR_MESSAGES.SAME_AS_OLD_PASSWORD]: 'newPassword',

};

const field = errorHandlingMap[error.message];

if (field) {

openModal(<AlertModal>{error.message}</AlertModal>);

setError(field, {

type: 'manual',

message: error.message,

});

}

devmanta · 2024-11-18T13:16:21Z

src/app/(with-header-sidebar)/mypage/_components/AlertModal.tsx

요 파일이 모달인거죠..!?
공용을 염두에 두고 만드셨다고 한거여서 추가 의견 드립니다..!
모달 보면은 위에 타이틀이랑 x버튼 있거나 없거나 이것도 고려해주시면 좋을것같아요
확인 버튼부분도 있을수도 있고, 없을수도 있는거여서 내용+하단버튼 까지를 children으로 받고,
모달위에 타이틀이랑 x 버튼 이거를 모달에서 컨트롤하면 좋을것같습니다.

뒤에 검은 배경에 스크롤 막는건 되어있을까요?
그리고 검은배경 클릭하면은 모달이 닫히는것두요! (이건 닫힐건지 안닫힐건지는 모달 props로 컨트롤하면 더 사용성 높을것같아요)
모달 띄울때 약간 스르륵 애니매이션 추가하면 더 있어보일것같습니다~

더 만약에 여유가 된다면
모달 내에서는 탭 누르면 모달 내용에서만 포커스 돌게끔 하는것도 있더라고요 focusTrap 이라고 하던데 이것도 고려해보면 좋을것같아요
그리고 모달 띄우면 focus가능한 친구중에 첫번째 요소에 포커스 가게하면 모바일 화면에서 몬가 그나마 짤리는현상? 이런게 덜한것 같더라구요

제가 저번 프로젝트 때 모달에 집착(?)해서 제가 구현했던 내용위주로 말씀드려봅니다...ㅎㅎㅎ
혹시 말씀드린거중에 이미 구현되어있는데 제가 못 알아?본것도 있을것같아요

잘만들어주시면... 저는 najitwo-modal 라이브러리 쓰고싶네요...🤗🤗

헤더, 메인, 푸터 영역 이런건 진짜 모달 마다 다달라서
껍데기만 만들고 헤더, 메인, 푸터를 아예 커스텀(children)으로 다 받는건 어떻게 생각하시나요?

스크롤 막는것,애니메이션,포커스 인지하고 있습니다.!
검은배경 클릭하면은 모달이 닫힌다 << 이것도 고려해봤는데 대시보드 추가하다가 잘못클릭하면 허망할것 같습니다..🙄

그럼 닫을지말지도 프롭스로 받아서 처리하는건요!?

헤더,메인,푸터 다 자식으로 받아도될것..같은데
헤더정도는 모달에서 하는건어때요 !?
(헤더는 있거나 없거나 말고 스타일상 다른상황은 크게? 없을것같아요)

근데 그거 뒤에 딤처리된거 클릭하고 닫아도
모달 닫힐때 따로 input친구들 초기화 안해주면 값은 남아잇더라고요 ㅋㅋㅋㅋ 이건 여담.. 저번프로젝트때 그래서 리셋 로직 추가햇어요..

devmanta · 2024-11-18T13:18:35Z

src/app/(with-header-sidebar)/mypage/_components/modal.tsx

+
+  return createPortal(
+    <div className={styles.overlay}>
+      {modals.map((content, index) => (


이건 여러개의 모달을 띄우는..건가요!?

근데 이파일이랑.. AlertModal이랑.. 모달이 두갠건가요...? 모지..ㅋㅋㅋ
잘 이해가 안갔습니다....

껍데기라고 보면 됩니다..
overlay로 배경 검게 해주고
그냥 진짜 모달 요소 가운데에 잡아주기만하는???

Alert모달은 그냥 비밀번호 오류 용으로 만든거고
이 modal을 만약에 사용한다고하면
EditModal, AddModal 이렇게 만들어 질거같습니다.

껍데기....?🤔
Modal 컴포넌트 하나로 퉁치기엔 무리가 있나요?

뭔가뭔가 설명이 잘안되고있는거 같습니다.😥
내일 팀미팅때 얘기해보시죠...

devmanta · 2024-11-18T13:19:17Z

src/app/(with-header-sidebar)/mypage/_components/modal.tsx

이친구 파일명 대문자 시작안한거는 의도된건가요!?

실수입니다... 😱

* ✨ feat: add mypage layout and responsive CSS Implemented Modal component * 🐛 fix: correct typo * 🐛 fix: correct filename casing * 💡 comment: temporarily comment out

✨ feat: add mypage layout and responsive CSS

85a4179

Implemented Modal component

najitwo added ✨Feature Request for a new feature or functionality 🎨HTML&CSS Issues or tasks specifically related to HTML structure or CSS styling labels Nov 18, 2024

najitwo requested review from a user, devmanta and naseungyeop November 18, 2024 09:59

najitwo self-assigned this Nov 18, 2024

najitwo linked an issue Nov 18, 2024 that may be closed by this pull request

[feat] add mypage layout and finalize styling #15

Closed

3 tasks

🐛 fix: correct typo

e7eacee

devmanta approved these changes Nov 18, 2024

View reviewed changes

najitwo added 2 commits November 18, 2024 22:56

🐛 fix: correct filename casing

808690e

💡 comment: temporarily comment out

206b08c

najitwo merged commit 2f8670a into develop Nov 18, 2024

[feat] add mypage layout and responsive CSS #26

[feat] add mypage layout and responsive CSS #26

Uh oh!

Conversation

najitwo commented Nov 18, 2024

📌 Related Issue

📝 Description

📸 Screenshot

📢 Notes

Uh oh!

devmanta left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

najitwo Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devmanta Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

devmanta left a comment •

edited

Loading

najitwo Nov 18, 2024 •

edited

Loading

devmanta Nov 18, 2024 •

edited

Loading