3주차 과제(프디 협업 과제 1.)

<기본 화면>

1. 신경 썼던 부분

• 한 페이지 안에서 나올 수 있는 구조를 최대한 나눈 후(ChatMessage, ChatHeader, ChatInput), Chat.tsx에서 합침
• 처음에는 말풍선들을 모두 하나로 처리했으나, 채팅방이 많아질 것을 고려하여 SenderM.tsx와 SenderOther.tsx로 나눠서 관리
• 새로운 채팅을 보내면, 해당 말풍선(마지막 말풍선)에 focus 되도록 scrollRef 를 만들어서 관리

const scrollRef = uconst scrollRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
    }
  }, [chatList])

• sender=other일 때 프로필 사진 + 닉네임(이름) + 읽은 사람 + 시간 을 모두 사용되기 떄문에 여러 <div> 를 사용해서 영역을 나눈 후 관리
• 맥북의 경우 글자 굵기를 정해진 타이포그라피대로 지정하더라도 더 굵게 보이는 현상이 나타남 → 수정

1. 더 신경써야할 것 같은 부분

• 단체 채팅방 또한 고려해서 unReadCount 함수를 따로 구성해야할 필요성을 느낌
• ‘여기까지 읽었습니다.’ 를 구현하기 위한 함수

1. 디자인 팀과 협업하면서 느낀 점

• 더욱 정교한 마진/패딩값의 중요성
• 이모티콘 크기 및 정렬의 중요성
• 글씨체 및 글자 굵기의 중요성

1. 디자인 팀 피드백 관련 주요 수정 사항

• 아이콘 자체 여백에 따른 마진값 수정