[FEAT] #1 : 패턴 만들기

- 설정 컴포넌트들 분리
- 캔버스 사이즈: 최소값, 전체화면 리사이즈 시 처리 적용
- 패턴 영역: 캔버스 사이즈에 맞게 클립 적용

- #2 : 설정 컴포넌트들, 스타일 분리

src/components/container/CanvasContainer.js

@@ -28,9 +28,9 @@ const CanvasContainer = () => {
       type: canvasMode,
       src: myCanvas.drawnImgSrc,
     };
-    if (myCanvas.drawnImgTitle) {
-      payload.title = myCanvas.drawnImgTitle;
-    }
+    // if (myCanvas.drawnImgTitle) {
+    //   payload.title = myCanvas.drawnImgTitle;
+    // }
     dispatch(addPicture(payload));
   };
 

src/components/container/ImagesContainer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   getPictures,
@@ -31,7 +31,7 @@ const addTypeList = (pictures, typeList) => {
   }
 
   for (let pic of pictures) {
-    // canvasMode: origin, crop, pattern
+    // type: origin, crop, pattern
     let optionName = '';
     if (pic.type === 'crop') optionName = '크롭';
     else if (pic.type === 'pattern') optionName = '패턴';
@@ -45,6 +45,7 @@ const addTypeList = (pictures, typeList) => {
 };
 
 const ImagesContainer = () => {
+  //console.log('ImagesContainer');
   const dispatch = useDispatch();
   const { pictures, drawnPicture } = useSelector(state => state.pictures);
 
@@ -58,8 +59,6 @@ const ImagesContainer = () => {
   // pictures가 바뀌었을 때만 실행
   typeList = useMemo(() => addTypeList(pictures, typeList), [pictures]);
 
-  //console.log('ImagesContainer', pictures, typeList);
-
   // 첫 마운트 후 indexedDB 값 리덕스 스토어에 셋팅
   useEffect(() => {
     if (!pictures || !pictures.length) {
@@ -73,17 +72,18 @@ const ImagesContainer = () => {
 
   // 선택 이미지 리스트(삭제용) 관리
   const [selectedList, setSelectedList] = useState([]);
-  const onToggle = id => {
-    if (selectedList.includes(id)) {
-      setSelectedList(selectedList.filter(item => item !== id));
-      dispatch(deleteSelectedPictures(id));
-    } else {
-      setSelectedList(selectedList.concat(id));
-      dispatch(addSelectedPictures(id));
-    }
-    dispatch(changeDrawnPicture(id));
-    dispatch(changeCanvasMode(null));
-  };
+  const onToggle = useCallback(
+    id => {
+      if (selectedList.includes(id)) {
+        setSelectedList(selectedList.filter(item => item !== id));
+        dispatch(deleteSelectedPictures(id));
+      } else {
+        setSelectedList(selectedList.concat(id));
+        dispatch(addSelectedPictures(id));
+      }
+    },
+    [selectedList, dispatch],
+  );
 
   const onDelete = () => {
     dispatch(deletePicture(selectedList));
@@ -98,10 +98,11 @@ const ImagesContainer = () => {
   };
 
   const onCrop = () => {
-    if (!drawnPicture) {
-      alert('⚠ 이미지를 선택해주세요 ⚠');
+    if (selectedList.length > 1) {
+      alert('⚠ 하나의 이미지만 크롭할 수 있습니다 ⚠');
       return;
     }
+    dispatch(changeDrawnPicture(selectedList[0]));
     dispatch(changeCanvasMode('crop'));
   };