[NDD-135] Interview 페이지 UI 구현

[adultlee]

Why

Interview 페이지에 대한 UI 기능을 구현합니다.
최소한의 반응형과 테스트 할 수 있는 최소한의 기능을 추가했습니다.

전역 상태관리, 유저 등록 등 미리 처리 되지 않은 부분이 있어, 초기 계획한 테스크에서 변경되어 테스크 규모가 축소되었습니다.

How

프로젝트트는 다음과 같은 구조로 구성되어 있습니다.

1. Header (사진의 가장상단 보라색 영역)

ntervieweeName

Header 가장 중앙부분이며 면접자의 이름을 받아서 반환합니다. 최소한의 반응형을 구현하였으며, UI 정책에 따라 변경될 예정입니다.

RecrodStatus

Header의 왼쪽 영역에 있으며, 현재 record여부를 반환합니다.

const RecordStatus: React.FC<RecordStatusType> = ({ isRecording }) => {
  return (
    <LeadingDot
      color={
        isRecording
          ? `${theme.colors.status.record}`
          : `${theme.colors.status.active}`
      }
    >
      <Typography
        noWrap
        paragraph
        variant={'body1'}
        color={theme.colors.text.white}
      >
        {isRecording ? '녹화중' : '녹화준비'}
      </Typography>
    </LeadingDot>
  );
};
export default RecordStatus;

수민님의 LeadingDot 컴포넌트를 사용하여 구현합니다.

RecordTimer

사진의 오른쪽 부분으로 면접자에게 현재 시간을 알려줍니다.

const [curTime, setCurTime] = useState<number>(0);

  useEffect(() => {
    let interval: NodeJS.Timeout | null = null;

    if (isRecording) {
      interval = setInterval(() => {
        setCurTime((prevTime) => prevTime + 1);
      }, 1000);
    } else {
      setCurTime(0);
    }

    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [isRecording]);

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

[milk717]

Suggested change

	position: absolute;
	position: �fixed;

아까 말씀드린 변경사항입니다! 동영상 영역이 스크롤되어도 질문이 고정되게 변경해주세요!

[adultlee]

b663055

반영완료!!

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	b663055
Status:	✅  Deploy successful!
Preview URL:	https://5caa6522.gomterview.pages.dev
Branch Preview URL:	https://feature-ndd-135.gomterview.pages.dev

View logs

[milk717]

[p-4] 구두로 이야기한 내용

Media 처리 관련된 로직은 useMedia라는 훅을 생성해서 관리하면 좋겠습니다!
예를들어 미디어 스트림을 가져오고 레코드를 중지하는 등의 미디어 컨트롤 함수는 훅으로 분리해서 관리하는 것이 좋다고 생각합니다.
이렇게 하면 페이지에서는 미디어 관련 컨트롤 함수를 트리거하는 이벤트만 관리할 수 있습니다.
하지만 이건 기능 구현이 완료된 후에 리펙터링으로 진행할 사항이라서 메모용으로만 커맨트 남겨놓겠습니다!

[milk717]

[p-4] 구두로 논의한 내용 메모

위와 같은 형식의 아이콘+라벨 형태의 버튼이 다수 존재합니다.
따라서 이를 한번에 관리할 수 있는 foundation 컴포넌트가 있다면 더 깔끔해질 것 같습니다.
이 부분도 나중에 리펙터링 단계에서 적용할 내용이라 메모용으로 남겨놓겠습니다!

[milk717]

마크업 작업에 반응형까지 고려하시느냐고 고생 많으셨습니다!!

[Yoon-Hae-Min]

[p-5] dayJS를 추후에 적용해 봅시다!!

[adultlee]

네네!! 한방에 쫘악 해버리죠!

[Yoon-Hae-Min]

[p-5] 요것도 hook으로 관리한다면 할 수 있을것 같아요 지금도 너무너무 좋지만 timer라는 기능만 하는 hook을 만들게 나중에 한번 리펙토링 해봐요!!

[adultlee]

맞아요... 이게 살짝 고민이었거든요! 나누긴 해야할듯합니다!