✨ Feat: 이미지 업로더 / 미리보기 기능 컴포넌트 추가 (#63, #61)

prgrms-web-devcourse-final-project · Dec 9, 2024 · 41d8efb · 41d8efb
1 parent 601ed30
commit 41d8efb
Show file tree

Hide file tree

Showing 13 changed files with 444 additions and 335 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
         "react-dom": "^18.3.1",
         "react-kakao-maps-sdk": "^1.1.27",
         "react-router-dom": "^7.0.1",
+        "shortid": "^2.2.16",
         "sweetalert2": "^11.14.5",
         "sweetalert2-react-content": "^5.0.7",
         "swiper": "^11.1.15",

diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/assets/stylesheets/components/_buttons.scss b/src/assets/stylesheets/components/_buttons.scss
@@ -83,148 +83,4 @@ button {
     }
 }
 
-.button-post-controls {
-    // 포스트 하단 컨트롤러 버튼
-    --button-icon-color: currentColor; // 버튼 마우스 오버시 변경될 컬러
-
-    position: relative;
-    width: 3.6rem;
-    height: 3.6rem;
-    border-radius: 0.4rem;
-    font-size: var(--fnt-sm);
-    overflow: hidden;
-    user-select: none;
-
-    > .remix {
-        position: absolute;
-        inset-block: 0;
-        inset-inline: 0;
-        margin-block: auto;
-        margin-inline: auto;
-        width: 0.8rem;
-        transition: 0.25s;
-    }
-
-    > span {
-        display: block;
-        position: absolute;
-        inset-block-start: calc(100% + 1.6rem);
-        inset-inline: 0;
-        margin: auto;
-        opacity: 0;
-        transition: 0.25s;
-    }
-
-    &:hover,
-    &:focus {
-        background-image: radial-gradient(
-            circle at top,
-            rgb(var(--button-icon-color) / 0.1),
-            rgb(var(--clr-surface-0))
-        );
-        backdrop-filter: blur(0.4rem);
-        box-shadow: 0 0 0.8rem -0.2rem rgb(var(--button-icon-color) / 0.25);
-        outline: 1px solid rgb(var(--button-icon-color) / 0.25);
-        outline-offset: 1px;
-        text-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 0.5);
-
-        > .remix {
-            inset-block: 0 1.2rem;
-            color: rgb(var(--button-icon-color));
-        }
-
-        > span {
-            inset-block-start: calc(50% + 0.2rem);
-            opacity: 1;
-        }
-    }
-}
-
-#btnSubmitReply,
-#btnSubmitGuestbook,
-.button-guestbook-reply {
-    // 댓글, 방명록 등록 버튼
-    flex-shrink: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    align-items: center;
-    gap: 0.2rem;
-    width: 4.2rem;
-    border: 1px solid rgb(var(--clr-tint-60) / 0.5);
-    border-radius: 0.2rem;
-    background-color: rgb(var(--clr-theme) / 0.1);
-    color: rgb(var(--clr-tint-60));
-    font-weight: 700;
-
-    &:hover {
-        background-color: rgb(var(--clr-tint-60));
-        color: rgb(var(--clr-if-0));
-    }
-
-    &:active {
-        background-color: rgb(var(--clr-tint-0));
-    }
-
-    &:focus {
-        border-color: rgb(var(--clr-tint-100));
-    }
-
-    &:disabled {
-        border-color: rgb(var(--clr-surface-60));
-        background-color: rgb(var(--clr-surface-0));
-        color: rgb(var(--clr-surface-60));
-        text-shadow: 1px 1px 0 rgb(255 255 255 / 0.25);
-        cursor: no-drop;
-    }
-}
-
-.buttons-blog-control {
-    // 사이드바 블로그 컨트롤러 버튼
-    flex: 1;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    align-items: center;
-    gap: 0.2rem;
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    border: 1px solid transparent;
-    border-radius: 0.4rem;
-    transition: background-color 0.15s;
-
-    > .remix {
-        width: 1rem;
-    }
-
-    > span {
-        font-size: var(--fnt-sm);
-    }
-
-    &:hover,
-    &:focus {
-        background-color: rgb(var(--clr-theme));
-        color: rgb(var(--clr-text-on-tint));
-    }
-}
-
-.button-guestbook-controls, // 방명록 글 / 답글 컨트롤러 버튼
-.button-reply-controls {
-    // 댓글 컨트롤러 버튼
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-    font-size: var(--fnt-sm);
-
-    > .remix {
-        width: 0.7rem;
-        opacity: 0.5;
-    }
-
-    &:hover {
-        text-decoration: 1px solid underline;
-        text-underline-offset: 0.2rem;
-    }
-}
-
 /* _buttons.scss */
diff --git a/src/assets/stylesheets/components/_multipleImageUploader.scss b/src/assets/stylesheets/components/_multipleImageUploader.scss
@@ -0,0 +1,102 @@
+/* _multipleImageUploader.scss */
+
+#input-multiple-image-uploader {
+    display: none;
+}
+
+#input-multiple-image-uploader-label {
+    background-color: rgb(var(--clr-black) / 0.75);
+    transition: background-color 0.15s;
+    cursor: pointer;
+
+    &:hover {
+        background-color: rgb(var(--clr-info) / 0.75);
+    }
+
+    &.limited {
+        background-color: rgb(var(--clr-alert) / 0.75);
+        cursor: no-drop;
+    }
+}
+
+#image-uploader-body {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 0.4rem;
+}
+
+#image-preview-wrapper {
+    display: contents;
+}
+
+.image-uploader-block {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: 0.4rem;
+    position: relative;
+    aspect-ratio: 1 / 1;
+    border: 1px solid rgb(var(--clr-text) / 0.05);
+    border-radius: var(--rad-sm);
+    background-color: rgb(var(--clr-gray));
+    color: rgb(var(--clr-text-on-tint));
+    font-size: var(--fnt-sm);
+    overflow: clip;
+
+    > * {
+        user-select: none;
+    }
+
+    .remix {
+        opacity: 0.5;
+    }
+
+    > img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+    }
+
+    &.empty {
+        background-color: rgb(var(--clr-black) / 0.15);
+        outline: 0.1rem dashed rgb(var(--clr-gray));
+        outline-offset: 0.2rem;
+        scale: 0.9;
+
+        .remix {
+            opacity: 0.75;
+        }
+    }
+}
+
+.button-delete-preview-image {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: 0.4rem;
+    position: absolute;
+    inset: 0;
+    background-color: rgb(var(--clr-black) / 0.75);
+    backdrop-filter: blur(0.8rem);
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 3;
+
+    &:hover {
+        opacity: 1;
+
+        .remix {
+            color: rgb(var(--clr-alert));
+            opacity: 1;
+            transition:
+                color 0.25s 0.15s,
+                opacity 0.25s 0.15s;
+        }
+    }
+}
+
+/* _multipleImageUploader.scss */
diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
@@ -417,7 +417,7 @@ a:has(#logo-primary) {
 
     &.drop-progress {
         background-color: rgb(var(--clr-black));
-        color: rgb(vaR(--clr-text-on-tint));
+        color: rgb(var(--clr-text-on-tint));
     }
 }