[클라우딩 어플리케이션 엔지니어링 TIL] 240307, 240308 - ReactJS 비디오 에디터 제작하기 프로젝트 (2)

Intro

---

이번엔 공통 컴포넌트를 구현하고 전반적인 스타일링을 주로 진행했다.

8일엔 프로젝트 중간 점검이 있어서 중간 보고서도 작성을 했고 지금까지 짠 코드들을 멘토님께 코드리뷰도 받았다.

 

 

 

 

프로젝트 진행 사항

---

공통 컴포넌트 세팅

본 프로젝트에선 페이지가 한 페이지이긴 하지만 추후 확장될 수 있기 때문에.. 공통 컴포넌트인 Header, Footer, CustomButton을 구현했다.

 

• App.css

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ececec;
  margin-bottom: 24px;
  width: 100%;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}

 

Header는 position: sticky를 이용해 스크롤을 내려도 상단에 유지되도록 구현하였다.

 

버튼 컴포넌트는 MUI 라이브러리를 사용했다.

React Button component - Material UI

다른 라이브러리에 비해 깔끔한 디자인이 마음에 들었다.

 

 

 

state context 설정하기

비디오 파일과 비디오 파일을 추가하고 삭제하는 함수는 여러 컴포넌트에서 사용될 거라 context로 관리하기로 하였다.

• App.js

import React, { useReducer } from 'react';

import './App.css';

import Header from './components/Header';
import Footer from './components/Footer';
import VideoEditorMain from './components/VideoEditorMain';

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_FILE':
      return action.newItem;
    case 'DELETE_FILE':
      return null;
    default:
      return state;
  }
};

export const VideoFileContext = React.createContext();
export const VideoFileDispatchContext = React.createContext();

function App() {
  const [videoFile, dispatch] = useReducer(reducer, null);

  const addFile = file => {
    dispatch({ type: 'ADD_FILE', newItem: file });
  };

  const deleteFile = () => {
    dispatch({ type: 'DELETE_FILE' });
  };

  return (
    <VideoFileContext.Provider value={videoFile}>
      <VideoFileDispatchContext.Provider value={{ addFile, deleteFile }}>
        <div className="App">
          <Header></Header>
          <VideoEditorMain></VideoEditorMain>
          <Footer></Footer>
        </div>
      </VideoFileDispatchContext.Provider>
    </VideoFileContext.Provider>
  );
}

export default App;

 

리액트 Context로 비디오 파일 데이터와 dispatch 함수를 모든 컴포넌트에 제공하였다.

 

 

비디오 업로드 UI 구현

비디오를 업로드하는 컴포넌트를 input[type=file] 요소로 구현하였다.

 

처음에는 이미지를 클릭하면 useRef로 input 요소를 클릭하도록 구현했는데 굳이 그럴 필요가 없다는 것을 코드리뷰를 통해 알게 되었다.

 

 

• VideoPlaceholder.js

import React from 'react';
import video_placeholder from '../assets/video_placeholder.png';

const VideoPlaceholder = ({ onChange }) => {
  return (
    <section className={'upload-layout'}>
      <label>
        <img
          className={'video-upload-img'}
          src={video_placeholder}
          alt="비디오를 업로드해주세요"
        />
        <input
          className={'video-upload-input'}
          type="file"
          accept="video/*"
          onChange={e => {
            onChange(e.target.files[0]);
          }}
        />
      </label>
    </section>
  );
};

export default VideoPlaceholder;

 

라벨로 img 태그를 감싸서 이미지를 클릭했을 때 파일 선택이 가능하도록 코드를 수정했다.

 

 

 

 

 

 

마무리

---

프로젝트를 하니까 시간이 빠르게 흘러간다.

아직도 구현해야 할 게 많이 남았는데 시간 내에 구현할 수 있을까..