📅 2022.11 ~ 2022.12

Github ‣

Notion Interface

Tech Stack (frontend)

TypeScript React Recoil Socket.io WebRTC Docker Nginx Github Actions

기획 의도

• 면접을 녹화하고, 다시 돌려보고, 피드백을 기록하는 과정의 어려움을 해결
• 여러 명이 체계적으로 면접을 진행하고 익명으로 피드백을 남길 수 있는 서비스
• 면접과 면접에 대한 피드백을 체계적으로 관리할 수 있는 서비스

나의 역할

• 프론트엔드 개발
• 시스템 설계
• UI/UX 디자인
• PM

기여한 내용

1. 인터뷰 영상과 피드백 목록의 시점 동기화 기능 설계 및 개발

<aside> 💡 interface 서비스의 주요 기능중 하나로 아래 기능을 수행합니다.

• 재생되는 동영상의 시점에 따라 해당 시점에 작성된 피드백 블록을 포커싱합니다.
• 피드백 블록을 클릭하면 반대로 영상이 해당 피드백을 작성한 시점으로 이동합니다. </aside>

⛑️ 다수의 이벤트에 다수의 상태가 얽혀있어 로직들의 높은 complexity가 문제

• 관련 상태들을 전역 상태로 추출해 flat하게 관리했으며, 관련 리렌더링 로직들을 hook으로 추출해 응집도를 높였습니다.
• 리랜더링에 영향을 주는 상태변화 로직과 리랜더링과 연관이 없는 로직을 구분했습니다. 리랜더링과 연관이 없는 로직의 경우에는 Recoil의 Selector를 활용해 참조하는 시점에 로직이 발동되도록 설계했습니다.

피드백 페이지 리팩터링 - 박세영

export const focusIndexSelector = selector({
	key: 'focusIndexSelector',
	get: ({ get }) => {
		const startTimeList = get(feedbackIdsState).map((ids) => +ids.slice(0, 6));
		return lowerBound(startTimeList, get(currentVideoTimeState));
	},
});

2. 라우팅 전략 설계 및 개발