+ );
+};
+
+export default PenSettings;
\ No newline at end of file
diff --git a/src/components/SidebarButton.jsx b/src/components/SidebarButton.jsx
index c1b0f3f..448ae2d 100644
--- a/src/components/SidebarButton.jsx
+++ b/src/components/SidebarButton.jsx
@@ -1,5 +1,6 @@
import React from 'react';
-import 'assets/css/SidebarButton.css';
+// ======================= css ===============================
+import 'assets/css/SketchHome.css';
const SidebarButton = ({ icon, label, onClick }) => {
return (
diff --git a/src/components/TextSettings.jsx b/src/components/TextSettings.jsx
index 2af2b25..3f88f73 100644
--- a/src/components/TextSettings.jsx
+++ b/src/components/TextSettings.jsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import 'assets/css/ToolSettings.css';
-const TextSettings = ({ onAddText, selectedText, canvasWidth, canvasHeight }) => {
+const TextSettings = ({ onAddText, selectedText, canvasWidth, canvasHeight, closeSettings}) => {
const [text, setText] = useState('');
const [fontSize, setFontSize] = useState(20); // 픽셀 단위로 설정
const [color, setColor] = useState('#000000');
@@ -45,51 +45,51 @@ const TextSettings = ({ onAddText, selectedText, canvasWidth, canvasHeight }) =>
};
return (
-
+
diff --git a/src/pages/SketchToolHome.jsx b/src/pages/SketchToolHome.jsx
index 1fda6ca..17a787a 100644
--- a/src/pages/SketchToolHome.jsx
+++ b/src/pages/SketchToolHome.jsx
@@ -2,13 +2,13 @@ import React, { useState, useRef } from 'react';
import SidebarButton from 'components/SidebarButton';
import CanvasComponent from './CanvasComponent';
import TextSettings from 'components/TextSettings';
-import ToolSettings from 'components/ToolSettings';
+import PenSettings from 'components/PenSettings';
import ShapeSelectionModal from 'services/threeD/ShapeSelectionModal';
import ThreeDModal from 'services/threeD/ThreeDModel';
// ======================= css ===============================
-import 'assets/css/SketchHome.css';
-
+import 'assets/css/SketchHome.css';
+import 'assets/css/ToolSettings.css'
// ====================== 아이콘 ==============================
// Topbar
import homeIcon from 'assets/icon/home.png';
@@ -31,16 +31,15 @@ import EmojiSettings from 'components/EmojiSettings';
const SketchToolHome = () => {
const canvasRef = useRef(null);
- const [selectedTool, setSelectedTool] = useState('pen');
+ const [selectedTool, setSelectedTool] = useState(null);
const [image, setImage] = useState(null);
const [toolSize, setToolSize] = useState(5);
const [selectedColor, setSelectedColor] = useState('#000000');
const [emojiUrl, setEmojiUrl] = useState(null);
- const [activeTool, setActiveTool] = useState(''); // 현재 활성화된 도구 상태 관리
// 선택 창 표시 관련
const [showTextTool, setShowTextTool] = useState(false);
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
- const [showToolSettings, setShowToolSettings] = useState(false);
+ const [showPenSettings, setShowPenSettings] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [is3DModalOpen, setIs3DModalOpen] = useState(false);
const [selectedShape, setSelectedShape] = useState(null);
@@ -48,6 +47,7 @@ const SketchToolHome = () => {
const [history, setHistory] = useState([]);
const [redoHistory, setRedoHistory] = useState([]);
const [imageUrl, setImageUrl] = useState(null);
+ const [isWrapperOpen, setIsWrapperOpen] = useState(false);
const handleImageUpload = (event) => {
const file = event.target.files[0];
@@ -174,28 +174,30 @@ const SketchToolHome = () => {
};
const handleButtonClick = (tool) => {
+
+ setIsWrapperOpen(true);
+
setShowTextTool(false);
setShowEmojiPicker(false);
- setShowToolSettings(false);
-
- setActiveTool(tool);
+ setShowPenSettings(false);
+ setSelectedTool(tool);
if (tool === 'text') {
- setSelectedTool('text');
setShowTextTool(true);
- } else {
- setSelectedTool(tool);
-
- if (tool === 'emoji') {
- setShowEmojiPicker(true);
- } else if (tool === 'pen') {
- setShowToolSettings(true);
- }
+ }
+ else if (tool === 'emoji') {
+ setShowEmojiPicker(true);
}
- };
+ else if (tool === 'pen') {
+ setShowPenSettings(true);
+ }
+
+ }
+
const closeSettings = () => {
- setShowToolSettings(false);
+ setIsWrapperOpen(false);
+ setShowPenSettings(false);
setShowTextTool(false);
setShowEmojiPicker(false);
};
@@ -245,55 +247,59 @@ const SketchToolHome = () => {
image={image}
selectedColor={selectedColor}
onHistoryChange={handleHistoryChange}
- activeTool={activeTool} // activeTool을 CanvasComponent에 전달
+ activeTool={selectedTool} // activeTool을 CanvasComponent에 전달
/>
-
-
+
+
+
+
handleButtonClick('text')} />
handleButtonClick('emoji')} />
handleButtonClick('pen')} />
- handleButtonClick('hand')} />
- handleButtonClick('panning')} />
- handleZoom(false)}/>
- handleZoom(true)}/>
+ setSelectedTool('hand')} />
+ setSelectedTool('panning')} />
+ handleZoom(false)}/>
+ handleZoom(true)}/>
-
+
- {(selectedTool === 'pen') && showToolSettings && (
-
+ {showPenSettings && (
+
+ )}
+ {showTextTool && (
+
+ )}
+ {showEmojiPicker && (
+
+ )}
+
+