오늘은 포스팅 페이지를 만들어 봤어요. 포스팅 페이지는 사진을 업로드하기 쉽게 최대한 UX를 고려하여 제작했어요.

<br/>
>디자인한 포스팅 페이지

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/f52fb84b-41ed-4861-f7b0-c36100bb4200/public)

<br/>
위 이미지는 피그마로 디자인해둔 페이지에요. UI는 제목 인풋, 날짜 인풋, 이미지 미리보기 및 업로드, 내용 인풋, 태그를 구현해야 합니다.
<br/>

## <span style="color: #7360BD">📷 이미지 미리보기 및 업로드 구현</span>
이미지 미리보기는 이미지 슬라이더가 필요하고 업로드는 드래그앤 드랍이 필요해요.
그래서 먼저 라이브러리를 선정했습니다.
<br/>
[react-simple-image-slider](https://www.npmjs.com/package/react-simple-image-slider)
[React Drag and Drop Files](https://www.npmjs.com/package/react-drag-drop-files)
<br/>
해당 라이브러리들이 기능 구현에 있어 불필요한 기능 없이 필요한 기능만 가지고 있었고 사용법도 간단해서 사용하기로 했습니다.

<br/>

### 이미지 업로드
```ts
// import
import { FileUploader } from "react-drag-drop-files";

// image list 관리
const [imageList, setImageList] = useState<File[]>([]);

// image 추가 시 핸들링 함수
const imageRegistHandler = (files: File[]) => {
  let tempImagelist = [...imageList];
  for (let i = 0; i < files.length; i++) {
    tempImagelist.push(files[i]);
  }
  setImageList(tempImagelist);
};

// 렌더링 파트
<ul className={styles.imageRegistWrap}>
  {imageList.map((image, index) => {
    return (
      <li key={index} className={styles.imageRegistItem}>
        <div className={styles.imageRegistItemCover}>
          <MdClose onClick={() => imageDeleteHandler(index)} />
        </div>
        <img
          alt="갤러리 이미지"
          src={URL.createObjectURL(image)}
        />
      </li>
    );
  })}
  <FileUploader
    handleChange={imageRegistHandler}
    name="file"
    types={fileTypes}
    multiple={true}
    hoverTitle="놓으세요!"
    onDraggingStateChange={(dragging: boolean) =>
      setIsDrag(dragging)
    }
  >
    <button type="button" className={styles.BtnImageRegist}>
      {!isDrag && <MdUploadFile />}
    </button>
  </FileUploader>
</ul>
```
이미지는 이미지 추가 버튼을 눌러서 직접 올릴 수도 있지만 버튼을 FileUploader의 자식으로 넣어줌으로써 이미지를 드래그 앤 드랍으로 추가할 수 있도로 구현했어요. 드래그 앤 드랍의 장점은 여러장을 한번에 올릴 수 있다는 점인데 imageRegistHandler 함수에서 여러장을 처리할 수 있도록 작업했습니다.
등록된 이미지는 마우스를 올리면 이미지를 지울 수 이는 아이콘이 보일 수 있도록 hover css 처리를 해줬습니다.
<br/>
### 이미지 슬라이더
```ts
// 렌더링 파트
<div className={styles.imagePrevBox}>
  <SimpleImageSlider
    style={{
      backgroundSize: "contain",
      backgroundRepeat: "none",
    }}
    width={"100%"}
    height={"100%"}
    images={imageList.map((item) => {
      return { url: URL.createObjectURL(item) };
    })}
    showBullets={true}
    showNavs={true}
    bgColor="#E1DFE9"
  />
</div>
```
이미지 슬라이더는 imageList에 있는 이미지를 보여줬어요.
크기는 가로 세로 3:2 비율로 제가 제일 좋아하는 사진 비율을 사용했고 다른 비율의 이미지가 올라온다면 이미지가 잘리지 않고 잘 보일 수 있도록 css에서 image를 contain하도록 처리했습니다.
<br/>
>완성한 이미지 추가 기능

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/3865f62a-4c30-4607-c346-d4b7424a5c00/public)

<br/>

## <span style="color: #7360BD">🤭 태그 편집 컴포넌트 구현</span>
태그 등록은 태그를 쉽고 빠르게 추가하는 것에 중점을 두고 구현했어요. 그리고 블로그 포스트에서도 사용할 수 있도록 공통 컴포넌트로 분리했습니다.

> TagEditor component
```ts
import React, { useRef, useState } from "react";
import styles from "@styles/post.module.css";
import { MdClose } from "react-icons/md";

interface Props {
  tags: string[];
  setTags: React.Dispatch<React.SetStateAction<string[]>>;
}

export default function TagEditor({ tags, setTags }: Props) {
  const [text, setText] = useState<string>("");
  const addTag = () => {
    if (text.length === 0) return;
    setTags([...tags, text]);
    setText("");
  };
  const deleteTag = (deleteIndex: number) => {
    setTags(tags.filter((tag, index) => index !== deleteIndex));
  };
  return (
    <ul className={styles.tagList}>
      {tags.map((tag, index) => {
        return (
          <li key={index} className={styles.tagItem}>
            <div>{tag}</div>
            <MdClose onClick={() => deleteTag(index)} />
          </li>
        );
      })}
      <li>
        <div className={styles.inputWrap}>
          <input
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                addTag();
              }
            }}
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
          <button onClick={addTag} type="button">
            추가
          </button>
        </div>
      </li>
    </ul>
  );
}
```
태그는 추가 버튼을 눌러서 추가할 수도 있지만 인풋창에서 엔터를 눌러도 추가할 수 있도록 onKeyDown 이벤트를 사용했습니다. 사용자가 누른 키를 받아와 엔터키면 태그를 추가하도록 addTag 함수를 실행시켜줬어요.
추가된 태그들은 x 아이콘을 눌러 제거할 수 있도록 구현했습니다.
<br/>
> 완성한 태그 편집 기능

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/f1c933ef-c1fe-44d3-0fc9-eced1c938300/public)

<br/>

오늘은 포스팅 페이지를 만들어 봤어요. 포스팅 페이지는 사진을 업로드하기 쉽게 최대한 UX를 고려하여 제작했어요.

<br/>
>디자인한 포스팅 페이지

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/f52fb84b-41

[갤러리 만들기 #5] 포스팅 페이지를 만들어보자