Skip to content

feat(Message): MessagePage 작업#69

Merged
jeonghwanJay merged 4 commits intomainfrom
feature/rolling-paper-message
Mar 18, 2025
Merged

feat(Message): MessagePage 작업#69
jeonghwanJay merged 4 commits intomainfrom
feature/rolling-paper-message

Conversation

@jeonghwanJay
Copy link
Collaborator

#️⃣연관된 이슈

#68

📝작업 내용

  • MessagePage 페이지 컴포넌트 구현

    • 메시지를 작성하고 보낼 수 있는 페이지를 개발
    • From 입력 필드, 프로필 이미지 선택, 관계 드롭다운, 텍스트 에디터, 폰트 선택 기능 포함
    • 생성하기 버튼을 통해 메시지를 서버로 전송하는 기능 구현
    • 프로필 이미지 선택 기능
  • PROFILE_IMAGE_URLS를 활용하여 10개의 프로필 이미지를 동적으로 표시

    • 선택한 프로필 이미지를 selectedImage 상태에 반영
    • 선택된 프로필 버튼에 체크 아이콘 표시 및 투명도 조정
    • 관계 및 폰트 선택 드롭다운 기능
  • 드롭다운을 클릭하면 목록이 펼쳐지도록 구현

    • 외부 클릭 시 드롭다운이 닫히는 기능 추가
    • 메시지 입력 및 폼 유효성 검사
  • Input과 TextEditor에서 입력된 값을 기반으로 유효성 검사

    • sender와 content가 모두 입력되지 않으면 생성하기 버튼 비활성화
    • 메시지 생성 API 연동
  • fetch를 이용해 메시지를 서버에 POST 요청

    • API 요청 중 isLoading 상태를 활용하여 버튼 상태 업데이트 및 로딩 UI 반영
    • 요청 성공 시 /post/${id}로 페이지 이동
  • useEffect를 활용해 외부 클릭 시 드롭다운 및 에러 메시지가 정상적으로 동작하도록 수정

    • useRef를 활용하여 특정 요소 클릭 여부를 감지

@vercel
Copy link

vercel bot commented Mar 17, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
rolling-paper ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 18, 2025 7:40am

@jeonghwanJay
Copy link
Collaborator Author

아직 이미지가 로딩될 때 스피너와 이미지가 선택 되었을 때 체크 표시 관련해서는 구현이 안 된 상태입니다.
이 점 양해부탁드립니다..ㅠ

@jeonghwanJay jeonghwanJay added the component: page 페이지 컴포넌트 관련 작업 label Mar 17, 2025
- Message 페이지 컴포넌트 구현
- PROFILE_IMAGE_URLS를 활용하여 10개의 프로필 이미지를 동적으로 표시
- 드롭다운을 클릭하면 목록이 펼쳐지도록 구현
- Input과 TextEditor에서 입력된 값을 기반으로 유효성 검사
- fetch를 이용해 메시지를 서버에 POST 요청
- useEffect를 활용해 외부 클릭 시 드롭다운 및 에러 메시지가 정상적으로 동작하도록 수정
Copy link
Owner

@cozy-ito cozy-ito left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다! 👍

Copy link
Collaborator

@kwonjin2 kwonjin2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

테스트 해보고 의견 더 생기면 추가적으로 코멘트 달겠습니다! 고생하셨습니다!!

- 페이지 로딩 시, 프로필 버튼 이미지 불러올 동안 스피너 동작
- 선택한 프로필버튼에 체크 아이콘 표시
- TextEditor에서 폰트 반영 관련해서 useEffect와 인라인 중복 코드 발생해서 인라인 코드 제거
- Router에 MessagePage 반영하여 import Header 제거
@jeonghwanJay jeonghwanJay merged commit 64f4060 into main Mar 18, 2025
6 checks passed
};

// 상태 업데이트 헬퍼 함수
const updateFormData = useCallback((newData) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const formData = {...formData, ...newFormData}
const isFormValid = validateForm(
  updatedData.sender,
  updatedData.textEditorContent,
);

setFormData(formData);
setFormStatus(prevStatus => ({
  ...prevStatus,
  isFormValid,
}))

e.preventDefault();
if (!isFormValid || isLoading) return;

updateFormStatus({ isLoading: true });

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isSubmitting

Comment on lines +313 to +344
{i === 0 ? (
<div className={styles.profileButtonWrapper}>
<ProfileButton
src={image}
onClick={() => handleProfileClick(image)}
/>
{selectedImage === image && (
<img
src={CheckIcon}
alt="선택됨"
className={styles.checkIcon}
/>
)}
</div>
) : formStatus.loadingImages[image] ? (
<Spinner
size="md"
text={null}
className={styles.profileButton}
/>
) : (
<div className={styles.profileButtonWrapper}>
<ProfileButton
src={image}
onClick={() => handleProfileClick(image)}
/>
{selectedImage === image && (
<img
src={CheckIcon}
alt="선택됨"
className={styles.checkIcon}
/>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ts-pattern

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: page 페이지 컴포넌트 관련 작업

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants