Skip to content

Conversation

@KimKyuHoi
Copy link
Collaborator

@KimKyuHoi KimKyuHoi commented Jan 29, 2025

Pull request

Related issue

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

  • 전체적인 채팅 레이아웃
image
  • 허들모드일 경우
image
  • ChatTextArea
image

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.

@KimKyuHoi KimKyuHoi added ✨ Feature 기능 추가 💄 Design 프론트엔드 CSS 관련 이슈 🖥️ FE 프론트엔드 무조건 스프린트내에 해야하는 것들 labels Jan 29, 2025
@KimKyuHoi KimKyuHoi added this to the 주톡피아 마일스톤 1 milestone Jan 29, 2025
@KimKyuHoi KimKyuHoi requested a review from handje January 29, 2025 15:21
@KimKyuHoi KimKyuHoi self-assigned this Jan 29, 2025
Copy link
Collaborator

@handje handje left a comment

Choose a reason for hiding this comment

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

디자인 예쁘네요!

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

@KimKyuHoi
Copy link
Collaborator Author

KimKyuHoi commented Jan 29, 2025

디자인 예쁘네요!

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

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

@handje
Copy link
Collaborator

handje commented Jan 30, 2025

디자인 예쁘네요!

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

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

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

@KimKyuHoi
Copy link
Collaborator Author

KimKyuHoi commented Jan 30, 2025

디자인 예쁘네요!

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

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

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

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

@handje handje self-requested a review January 30, 2025 10:04
Copy link
Collaborator

@handje handje left a comment

Choose a reason for hiding this comment

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

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

@KimKyuHoi
Copy link
Collaborator Author

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

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

@KimKyuHoi KimKyuHoi merged commit 22a23f0 into dev Jan 30, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

무조건 스프린트내에 해야하는 것들 💄 Design 프론트엔드 CSS 관련 이슈 🖥️ FE 프론트엔드 ✨ Feature 기능 추가

Projects

None yet

Development

Successfully merging this pull request may close these issues.

채팅 레이아웃 구성

3 participants