-
Notifications
You must be signed in to change notification settings - Fork 0
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
[NDD-135] Interview 페이지 UI 구현 #57
Conversation
1. 최소한의 반응형을 지원할것, 2. height를 고정후 width를 변화시키지만 over-flow : hidden 속성으로 x축 스크롤 방지 3. Question div 와 Answer Div 에 대한 기능 구현
1. 최소 기능 부여 (녹화 시작, 녹화 종료, 녹화 저장)
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
position: absolute; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
position: absolute; | |
position: �fixed; |
아까 말씀드린 변경사항입니다! 동영상 영역이 스크롤되어도 질문이 고정되게 변경해주세요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반영완료!!
Deploying with Cloudflare Pages
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p-4] 구두로 이야기한 내용
Media 처리 관련된 로직은 useMedia라는 훅을 생성해서 관리하면 좋겠습니다!
예를들어 미디어 스트림을 가져오고 레코드를 중지하는 등의 미디어 컨트롤 함수는 훅으로 분리해서 관리하는 것이 좋다고 생각합니다.
이렇게 하면 페이지에서는 미디어 관련 컨트롤 함수를 트리거하는 이벤트만 관리할 수 있습니다.
하지만 이건 기능 구현이 완료된 후에 리펙터링으로 진행할 사항이라서 메모용으로만 커맨트 남겨놓겠습니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
마크업 작업에 반응형까지 고려하시느냐고 고생 많으셨습니다!!
|
||
export default RecordTimer; | ||
|
||
const formatTime = (time: number): string => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p-5] dayJS를 추후에 적용해 봅시다!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네네!! 한방에 쫘악 해버리죠!
const RecordTimer: React.FC<RecordTimerProps> = ({ isRecording }) => { | ||
const [curTime, setCurTime] = useState<number>(0); | ||
|
||
useEffect(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p-5] 요것도 hook으로 관리한다면 할 수 있을것 같아요 지금도 너무너무 좋지만 timer라는 기능만 하는 hook을 만들게 나중에 한번 리펙토링 해봐요!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
맞아요... 이게 살짝 고민이었거든요! 나누긴 해야할듯합니다!
Why
Interview 페이지에 대한 UI 기능을 구현합니다.
최소한의 반응형과 테스트 할 수 있는 최소한의 기능을 추가했습니다.
전역 상태관리, 유저 등록 등 미리 처리 되지 않은 부분이 있어, 초기 계획한 테스크에서 변경되어 테스크 규모가 축소되었습니다.
How
프로젝트트는 다음과 같은 구조로 구성되어 있습니다.1. Header (사진의 가장상단 보라색 영역)
ntervieweeName
Header 가장 중앙부분이며 면접자의 이름을 받아서 반환합니다. 최소한의 반응형을 구현하였으며, UI 정책에 따라 변경될 예정입니다.
RecrodStatus
Header의 왼쪽 영역에 있으며, 현재 record여부를 반환합니다.
수민님의
LeadingDot
컴포넌트를 사용하여 구현합니다.RecordTimer
사진의 오른쪽 부분으로 면접자에게 현재 시간을 알려줍니다.
isRecording을 트리거로 동작하며, 다른 전역으로 time state가 동작하지 않도록 유도했습니다.
2. Main (사진의 가장 중앙 붉은색 영역)
InterviewQuestion
Interview 페이지의 Question을 UI를 반환합니다.
InterviewAnswer
Interview 페이지의 답변을 반환하는 컴포넌트 입니다. 내부 Y축 스크롤이 있어 Answer를 관리합니다.
Mirror
프로젝트 내부에서 거울의 역할을 수행합니다.
3. Footer (사진의 가장 하단 파란색 영역)
Footer로서 페이지 전체의 이벤트를 관리하는 컴포넌트 입니다.
InterviewExitButton
인터뷰를 종료하는 컴포넌트 입니다.
클릭시 위와 같은 Modal 이 출력되며 종료 됩니다.
AnswerToggleButton
InterviewMain 의 Answer의 Toggle을 관리하는 컴포넌트 입니다.
Answer의 Toggle을 관리합니다.
RecordControlButton
녹화의 시작과 종료를 통제하는 버튼입니다.
NextButton
다음 면접으로 넘어 갈 수 있도록 개발 된 컴포넌트 입니다.
Result
Desktop
2023-11-16.1.24.06.mov
Mobile
2023-11-16.1.30.05.mov