🪜 React-Draggable-Ts 연습 페이지입니다.

https://light9639.github.io/React-Draggable-Ts/

✨ React의 react-draggable 라이브러리를 이용하여 만든 페이지입니다. ✨

🎉 React 생성

• React 생성

npm create-react-app my-app
# or
yarn create react-app my-app

• vite를 이용하여 프로젝트를 생성하려면

npm create vite@latest
# or
yarn create vite

• 터미널에서 실행 후 프로젝트 이름 만든 후 React 선택, Typescirpt or Typescirpt - SWC 선택하면 생성 완료.

📝 vite.config.ts 수정.

• build시 이미지, CSS. js 파일을 각각 다른 파일에 저장하고 경로를 ./로 하기 위해 다음과 같이 설정한다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  base: process.env.NODE_ENV === 'development' ? '/' : './',
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name.split('.').at(1);
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          }
          return `assets/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
      },
    },
  },
})

• 작성 이후 오류가 나는 부분들을 해결하기 위해 터미널에 yarn 명령어로 vite-tsconfig-paths, @types/node파일들을 설치한다.

yarn add vite-tsconfig-paths @types/node

🚅 SCSS 라이브러리 설치.

• CSS 대신 SCSS를 사용하기 위해 SASS 라이브러리를 설치한다.

yarn add sass

• 설치가 완료되면 .css를 .scss로 바꿔서 사용이 가능하다.

✒️ App.tsx, App.scss 수정 및 작성

⚡ App.tsx

• Draggable, DraggableData 함수를 이용하면 React에서 드래그를 쉽게 구현할 수 있다.
• Opacity 값을 지정하여 드래그를 시작하여 true가 될 시 투명도가 낮아지며, 드래그를 멈춰서 false가 될 때에는 투명도가 1이 된다.
• trackPos 함수를 이용하여 드래그가 가능하며 handleStart는 클릭하여 이동시 이동을 시켜주며 handleEnd는 더 이상 클릭하지 않은 상태일 경우 이동시키지 않는 함수를 의미한다.

import React, { useState, useRef } from "react";
import reactLogo from './assets/react.svg'
import Draggable, { DraggableData } from "react-draggable";
import './App.scss'

export default function App(): JSX.Element {
  const nodeRef = useRef(null);

  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [position2, setPosition2] = useState({ x: 50, y: 50 });

  const [Opacity, setOpacity] = useState(false);
  const [Opacity2, setOpacity2] = useState(false);

  const trackPos = (data: DraggableData) => {
    setPosition({ x: data.x, y: data.y });
  };

  const trackPos2 = (data: DraggableData) => {
    setPosition2({ x: data.x, y: data.y });
  };

  const handleStart = () => {
    setOpacity(true);
  };
  const handleEnd = () => {
    setOpacity(false);
  };

  const handleStart2 = () => {
    setOpacity2(true);
  };
  const handleEnd2 = () => {
    setOpacity2(false);
  };

  return (
    <div className="App">
      <h1>React-Draggable-Ts</h1>
      <Draggable
        nodeRef={nodeRef}
        onDrag={(e, data) => trackPos(data)}
        onStart={handleStart}
        onStop={handleEnd}
      >
        <div
          ref={nodeRef}
          className="box"
          style={{ opacity: Opacity ? "0.6" : "1" }}
        >
          <div>BOX</div>
          <div>
            x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)}
          </div>
        </div>
      </Draggable>

      <Draggable
        nodeRef={nodeRef}
        onDrag={(e, data) => trackPos2(data)}
        onStart={handleStart2}
        onStop={handleEnd2}
        scale={2}
      >
        <div
          ref={nodeRef}
          className="box box2"
          style={{ opacity: Opacity2 ? "0.6" : "1" }}
        >
          <div>BOX with scale</div>
          <div>
            x: {position2.x.toFixed(0)}, y: {position2.y.toFixed(0)}
          </div>
        </div>
      </Draggable>
    </div>
  )
}

⚡ App.scss

• App.scss에 box 클래스에 스타일 추가.

.box {
  cursor: pointer;
  padding: 2.5rem 0rem;
  border-radius: 5px;
  width: 250px;
  display: flex;
  flex-direction: column;
  margin: 25px auto;
  color: #fff;
  box-shadow: 0 0 15px hsla(0deg, 0%, 0%, 0.5);
  text-shadow: 0 2px 3px hsla(0deg, 0%, 0%, 0.25);
  background-image: linear-gradient(rgb(0, 198, 251, 0.9) 0%, rgb(0, 91, 234, 0.9) 100%);
}

⚗️ 박스들을 마우스로 이동시키기.

• 박스들을 마우스나 손으로 드래그 하면 파일이 이동하면서 박스의 위치를 표시한다.

🎉 프로젝트 배포.

• 프로젝트를 전부 작성하였으면 gh-pages 라이브러리를 통해 쉽게 배포할 수 있다. 먼저 gh-pages를 설치한다.

yarn add gh-pages

• 설치 이후 package.json의 scripts 부분을 수정하고 homepage 부분에 배포 경로를 적으면 된다.

"scripts": {
  "predeploy": "yarn build",
  "deploy": "gh-pages -d dist"
},
"homepage": "http://light9639.github.io/React-Draggable-Ts",

• package.json 수정이 완료되면 yarn deploy를 실행하면 gh-pages 브랜치로 빌드된 파일이 업로드 되어 배포가 완료된다.