Skip to content

Feature(#42): 강의 참여 페이지 채팅 사이드바를 사용자가 확인할 수 있다 (UI 작업) #192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

Byeonjin
Copy link
Collaborator

@Byeonjin Byeonjin commented Dec 4, 2023

작업 개요

채팅 사이드바 UI 구현 close #42

작업 사항

  • 채팅 사이드바 UI 작업
  • 채팅 공백시 버튼 비활성화 기능 구현

고민한 점들(필수 X)

스크린샷(필수 X)

2023-12-04.9.46.15.mov

- 접근성을 위해 input에 label을 연결해야 하는데, 이 label의 텍스트를 디자인을 위해 숨기기만 하기위한 스타일입니다
- 채팅 사이드바 UI 작업
- 채팅 공백시 버튼 비활성화 기능 구현
@Byeonjin Byeonjin added ✨ Feat 기능 개발 FE 프론트엔드 작업 labels Dec 4, 2023
@Byeonjin Byeonjin added this to the 5주차 milestone Dec 4, 2023
@Byeonjin Byeonjin self-assigned this Dec 4, 2023
Copy link

netlify bot commented Dec 4, 2023

Deploy Preview for boarlog ready!

Name Link
🔨 Latest commit 4f42135
🔍 Latest deploy log https://app.netlify.com/sites/boarlog/deploys/656e8b43470d7a00083ca261
😎 Deploy Preview https://deploy-preview-192--boarlog.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Collaborator

@Jw705 Jw705 left a comment

Choose a reason for hiding this comment

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

고생 많으셨습니다👍👍

};

interface LogContainerInterface {
type: "question" | "prompt";
Copy link
Collaborator

Choose a reason for hiding this comment

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

type: "prompt"는 언제 사용되는 건가요?

className: string;
}

const QuestionPromptLogContainer = ({ type, className }: LogContainerInterface) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

QuestionPromptLogContainer라는 이름 대신 QuestionContainer는 어떠신가요? 확장성을 고려해서 ChatContainer라는 이름도 좋아보입니다!

Copy link
Collaborator

@LellowMellow LellowMellow left a comment

Choose a reason for hiding this comment

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

LGTM 👍👍 고생 많으셨습니다 :)

Comment on lines +125 to +137

.a11y-hidden {
overflow: hidden;
position: absolute;
clip: rect(0, 0, 0, 0);
clip-path: circle(0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

신기하네요 :) 관련 내용을 시각적으로는 숨겨놓는 용도군요

@@ -15,7 +16,10 @@ const Participant = () => {
return (
<>
<Header type="participant" />
<video className="relative w-[100vw] h-[calc(100vh-6rem)]" autoPlay muted ref={videoRef}></video>
<section className="relative">
<video className="w-[100vw] h-[calc(100vh-6rem)]" autoPlay muted ref={videoRef}></video>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기 5rem으로 수정해주시면 될 것 같습니다.

@Byeonjin Byeonjin merged commit 4050d72 into boostcampwm2023:dev Dec 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트엔드 작업 ✨ Feat 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature: 강의 참여 페이지 채팅 사이드바를 사용자가 확인할 수 있다 (UI 작업)
3 participants