#4 [REACT.JS] 에디터 구현하기-1

간간히 해오던 Nerator 프로젝트에서 명함에 배치할 속성을 좀 더 자유롭게 편집 하고 싶어 에디터를 구현하기로 했다.

 

핵심 기능 LIST UP!

 - 명함은 앞면과 뒷면이 있다

    - 앞/뒤에 따라 다르게 속성 x/y 위치를 구분해야한다. (기능적 측면)

    - 사용자는 쉽게 앞/뒷면을 넘나들며 편집하기 쉬워야 한다. (사용자 측면)

 - 명함 크기를 설정할 수 있다.

 - 명함 뒷면과 앞면의 디자인의 이미지를 넣을 수 있다.

 - 속성을 drag/drop 하여 쉽게 배치할 수 있도록 해야한다.

- 미리보기 화면으로 사용자에게 예시를 줘야한다.

- 마지막 결과물을 pdf저장 혹은 프린트 기능 까지 (2차개발)

 

 

현재 대략적으로 잡은 UI는 왼쪽엔 수정할 수  있는 편집 화면, 오른쪽 사이드 바에는 설정할 수 있는 옵션들로 배치했다.

 

구현 기능

1. 명함 크기

사용자가 원하는 크기를 입력했을 때 바로 크기가 바뀌면 더 편리성을 가져다 줄 것 같아 해당 기능을 추가했다.

 

INPUT 박스에서 값이 변경될 때마다 handleChangeForm 함수를 통해 state로 관리할 수 있도록 해준다.

 const handleChangeForm = useCallback(
    (parent, e) => {
      const { name, value } = e.target; 
      setForm({
        ...form,
        [parent]: {
          ...form[parent],
          [name]: value,
        },
      });
    },
    [form]
  );

 

현재 옵션을 관리하고 있는 form json 형식은 1차원적이 아니라 부모와 하위 자식들로 구성된 form이라 parent의 name을 parameter 값에 넘겨주도록 했다.

 

이렇게 이미지의 크기가 변경되면 바로 반영될 수 있도록 해당 명함 카드 컴포넌트에 form의 사이즈를 넘겨줬다. 

const Card = styled.div`
  width: ${({ size }) => size.w}px;
  height: ${({ size }) => size.h}px;
  background: white;
`;

 

Card는 이 props를 받아 바로 크기가 변경되도록 해준다.

 

2. 이미지 앞면/뒷면 지정

해당 기능은 명함엔 앞면과 뒷면이 서로 다르기 때문에 이를 구분하여 이미지 파일을 관리해줘야한다. 

  <div className="child">
                        <div className="name">앞면</div>
                        <div className="value">
                          <input
                            type={"file"}
                            id={"front"}
                            onChange={handleUploadNameTag}
                          />
                        </div>
                      </div>

                      <div className="child">
                        <div className="name">뒷면</div>
                        <div className="value">
                          <input
                            type={"file"}
                            id={"back"}
                            onChange={handleUploadNameTag}
                          />
                        </div>
        </div>

 

나는 앞면과 뒷면을 front/back으로 명칭을 정하고 이미지 파일이 등록될때 handleUploadNameTag 함수를 호출해주도록 했다. 

  const handleUploadNameTag = (e) => {
    const item = { id: e.target.id, data: e.target.files[0] };
    setForm({ ...form, image: { ...form.image, [e.target.id]: item } });
  };

file의 id 값을 가져와 form에 front, back마다 다른 이미지파일을 가지고  있도록 해줬다.

 

이제 사용자가 앞/뒤 버튼을 누를때마다 이 이미지를 보여줘야하므로

<Image
                data-key="1"
                src={
                  form.image[editorView]?.data &&
                  URL.createObjectURL(form.image[editorView]?.data)
                }
                draggable={false}
              />

 

front와 back 을 관리해주는 editorView가 있다. 이 editorView state 값으로 어떤 이미지 파일을 뿌려주게 해줄지 설정해주는 코드다.

 

앞/뒤를 눌러서 이미지가 다르게 보여지는 기능과 명함 크기 변경해주는 기능을 추가해줬다. 이제 속성 값을 drag&drop 하여 명함에 배치할 수 있도록 개발할 것이다~~~ 굳ㅎ