Chatting 레이아웃 구성하기

[KimKyuHoi]

Pull request

Related issue

• Resolve 채팅 레이아웃 구성 #66 @KimKyuHoi

Motivation and context

• 주식 상세방내에 채팅방이 필요하여 채팅방을 구현하였습니다.
• 채팅방의 layout이 필요합니다.

Solution

• ChatContainer의 전반적인 레이아웃을 구성하였습니다.
  • header와 sidebar는 임시로 놔둔 상태입니다.
  • chatSection내에서 ChatContent를 호버할 때 호버링 색이 변하도록 나타내었습니다.
• ChatContent를 구현하였습니다.
  • type을 지정하여 live또는 default로 지정하였고 live일 경우에는 허들 느낌의 컴포넌트가 표시되도록 구현하였습니다.
  • ChatContent내에서 댓글이 달릴시 댓글이 만약 5개 이상 달릴경우 숫자까지 포함하여 avatar가 보일수 있도록 표시하였습니다.
• ChatTextArea, TextArea를 조정하였습니다.
  • ChatTextArea 겉의 색과 내부 크기를 조정하였습니다.

  @handje ChatSection과 색이 너무 겹처 ChatTextArea 색을 조금 조정하긴했는데 어떠신지 궁금합니다.

  • ChatTextArea가 글씨를 쓸떄 들여쓰기를 할 경우 일정 들여쓰기가 넘어갈 경우 높이변화가 있도록 구현하였습니다.

How has this been tested

• 전체적인 채팅 레이아웃

• 허들모드일 경우

• ChatTextArea

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[handje]

디자인 예쁘네요!

1. textarea컴포넌트에서 resize-none속성으로 크기조절을 금지시키는건 어떠신가요?
2. 입력창이 일정 크기 넘어가면 화면 밖으로 넘어갑니다. 이 부분 막을 수 있을까요?
   

[KimKyuHoi]

디자인 예쁘네요!

1. textarea컴포넌트에서 resize-none속성으로 크기조절을 금지시키는건 어떠신가요?
2. 입력창이 일정 크기 넘어가면 화면 밖으로 넘어갑니다. 이 부분 막을 수 있을까요?
   

다 좋긴한데 만약에 그렇게 되면 채팅을 들여쓰기를 하게 됐을 경우 크기가 아예 안 늘어나긴합니다. 요거 트레이드오프긴한데 어떡할까요??

[handje]

디자인 예쁘네요!

1. textarea컴포넌트에서 resize-none속성으로 크기조절을 금지시키는건 어떠신가요?
2. 입력창이 일정 크기 넘어가면 화면 밖으로 넘어갑니다. 이 부분 막을 수 있을까요?
   

다 좋긴한데 만약에 그렇게 되면 채팅을 들여쓰기를 하게 됐을 경우 크기가 아예 안 늘어나긴합니다. 요거 트레이드오프긴한데 어떡할까요??

1번 문제는 변경없이 유지해도 되지만 2번도 같은 이유로 어려울까요?
크기조절은 크게 문제는 없어보이지만 2번은 레이아웃이 틀어지는 문제라 걱정이네요 😢

[KimKyuHoi]

디자인 예쁘네요!

1. textarea컴포넌트에서 resize-none속성으로 크기조절을 금지시키는건 어떠신가요?
2. 입력창이 일정 크기 넘어가면 화면 밖으로 넘어갑니다. 이 부분 막을 수 있을까요?
   

다 좋긴한데 만약에 그렇게 되면 채팅을 들여쓰기를 하게 됐을 경우 크기가 아예 안 늘어나긴합니다. 요거 트레이드오프긴한데 어떡할까요??

1번 문제는 변경없이 유지해도 되지만 2번도 같은 이유로 어려울까요? 크기조절은 크게 문제는 없어보이지만 2번은 레이아웃이 틀어지는 문제라 걱정이네요 😢

• 흠 일단 그 문제는 overflow hidden하면 문제는 막을 수 있긴한데 근본 문제를 막기가 힘듭니다.
• 딱히 서비스화를 하지 않는다는 가정하에 그렇게까지 크리티컬하지않은 이슈가 아니지 않을까요? 사실 textarea내에서 글을 쓰면 늘어나는게 전 더 우선이라고 보긴합니다.

[handje]

위에 언급된 부분은 남겨두고 추후에 리팩토링으로 진행하시죠!
저도 늘어나는게 먼저라고 생각하지만 레이아웃을 벗어나는건 좋지 못하다고 생각합니다 :)

[KimKyuHoi]

위에 언급된 부분은 남겨두고 추후에 리팩토링으로 진행하시죠! 저도 늘어나는게 먼저라고 생각하지만 레이아웃을 벗어나는건 좋지 못하다고 생각합니다 :)

넵 좋은것 같습니다! 그러면 요건 나중에 이슈 하나 달아놓겠습니다!