icon change

package.json

@@ -17,9 +17,12 @@
     "react": "^18.3.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6",
+    "react-rnd": "^10.4.12",
     "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
     "three": "^0.167.0",
+    "twemoji": "^14.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/assets/css/Model.css

@@ -62,7 +62,7 @@ canvas {
   transform: translate(-50%, -50%);
   width: 80%;
   height: 80%;
-  background-color: white;
+  background-color: rgb(0, 0, 0);
 }
 
 .ThreeD-close-button {

src/assets/css/ShapeSelectionModal.css

@@ -39,9 +39,9 @@
 }
 
 .close-button {
-  background: #dc3545;
+  background: #e07a5f;
 }
 
 .close-button:hover {
-  background: #c82333;
+  background: #e07a5f;
 }

src/assets/css/SketchHome.css

@@ -1,7 +1,5 @@
-@charset "utf-8";
-
 .sketchtoolhome-container {
-    position: relative;
+    position: absolute;
     width: 100%;
     height: 100%;
     background-color: #ffffff;
@@ -45,9 +43,10 @@
     position: fixed;
     background-color: #3d405b;
     z-index: 2; /*top-bar와 마찬가지*/
+    gap: 1rem;
 }
 
-.side-text, .side-eraser, .side-elements, .side-pen, .side-handdler, .side-Hand, .Panning{
+.side-text, .side-elements, .side-pen, .side-handdler, .side-panning, .side-zoom-out, .side-zoom-in{
     position: flex;
     display: flex;
     align-items: center;
@@ -56,47 +55,21 @@
     border: none;
     cursor: pointer;
     color: white;
-    font-size: 1rem;
+    gap: 1rem;
 } /* 사이드바 하위 개체(텍스트,지우개,펜,요소,핸들러) */
 
-.canvas-container {
-    display: block;/* 이미지 노출 영역 지정 할 수 있게 */
-    overflow: hidden;/* 컨테이너 영역보다 큰 이미지는 스크롤 할 수 있게 */
-    position: fixed;/* 모바일 및 웹 두가지 화면에서 개별 지정할 수 있게 */
-    align-items: center;/* 수직 중앙 정렬 */
-    justify-items: center;/* 수평 중앙 정렬 */
-    z-index: 1;/* top,side보다는 우선순위 다르게 */
+.canvas-window {
+    z-index: 1; 
     background-color: #f4f1de;
 }
 
 /* 변경한 CSS Redo-Button이 추가되면서 바뀜 web에서는 위치와 mobile에서 위치가 다름 */
 
-
-
-/*  ZoomIN, Out 버튼 위치 조절해야해요!!  */
-/*  ZoomIN, Out 버튼 위치 조절해야해요!!  */
-/*  ZoomIN, Out 버튼 위치 조절해야해요!!  */
-
-
-
-.undo-button,
-.redo-button {
+.control-button {
     z-index: 2;
     border: none;
     background: none;
     cursor: pointer;
-} /* 되돌리기 및 다시 실행 버튼 */
-
-.undo-button {
-    position: fixed;
-    bottom: 10%;
-    right: 0.5rem;
-}
-
-.redo-button {
-    position: fixed;
-    bottom: 10%;
-    right: 1.5rem;
 }
 
 .placeholder {
@@ -106,18 +79,20 @@
     transform: translate(-50%, -50%);
 }
 
-.canvas-container canvas {
-    position: absolute;
+.canvas-container > canvas{
+    /* position: absolute; */
     border: 1px solid #ddd;
-    cursor: grab; /* 기본 커서 스타일 */
-    transition: transform 0.2s ease; /* 부드러운 이동을 위한 트랜지션 */
-    border: 5px solid black; 
+    cursor: grab; 
+    transition: transform 0.2s ease; 
+    border: 5px solid black;
+    display: flex;
 }
 
 .inactive-canvas {
     display: none;
 }
 
+
 @media only screen and (max-width: 1000px) {
     .side-bar {
         position: fixed;
@@ -133,8 +108,7 @@
     .side-function {
         display: flex;
         flex-direction: row;
-        margin-left: 1rem;
-        gap: 0.5em;
+        gap: 0em;
     }
 
     .side-apply {
@@ -144,24 +118,35 @@
         border: none;
     }
 
-    .canvas-container{
-        height: calc(100vh);
+    .canvas-window {
+        position: relative;
+        height: calc(87vh);
         width: calc(100vw);
-        left: 0px;
-        top: 0px;
+        top: 6vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-    .undo-button{
-        position: fixed;
-        bottom: 10;
-        right: 0.5rem;
-        margin-right: 1rem;
+    .canvas-container > canvas {
+        border: 1px solid #ddd;
+        cursor: grab; 
+        transition: transform 0.2s ease; 
+        border: 5px solid black;
+        transform: translate(12.5%, 5%);
     }
-    .redo-button {
+
+    .control-button {
         position: fixed;
-        bottom: 10%;
-        right: 1.5rem;
-        margin-right: 1rem;
+        bottom: 9%;
+        right: 1%;
+    }
+
+    .undo-button, .redo-button{
+        z-index: 2;
+        border: none;
+        background: none;
+        cursor: pointer;        
     }
 
 } /* 모바일 및 타블렛 대응 */
@@ -191,25 +176,44 @@
         margin-bottom: 1rem;
     }
 
-    .canvas-container{
-        height: calc(100vh);
-        width: calc(100vw);
-        left: 0px;
-        top: 0px;
+    .canvas-window {
+        position: relative;
+        height: calc(94vh);
+        width: calc(93vw);
+        top: 6vh;
+        left: 7vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .canvas-container > canvas {
+        border: 1px solid #ddd;
+        cursor: grab; 
+        transition: transform 0.2s ease; 
+        border: 5px solid black;
+        transform: translate(12.5%, 5%);
     }
 
-    .undo-button{
+    .control-button {
         position: fixed;
         bottom: 1%;
         right: 1%;
         margin-right: 1rem;
-
     }
-    .redo-button{
-        position: fixed;
-        bottom: 1%;
-        right: 3%;
-        margin-right: 1rem;
+
+    .undo-button,.redo-button {
+        z-index: 2;
+        border: none;
+        background: none;
+        cursor: pointer;
     }
 
 } /* 웹 화면 대응 */
+
+@media only screen and (max-width: 500px) {
+    .side-function {
+        width: 250px;
+        overflow-x: auto;
+    }
+} /* 모바일 사이드바 스크롤 환경*/