♻️ Refactor: ImageGallery 컴포넌트 스타일 및 동작 개선, 동물 구조 요청 글타래에 슬라이더 적용 (#61)

prgrms-web-devcourse-final-project · Dec 8, 2024 · 0d93c37 · 0d93c37
1 parent fe14007
commit 0d93c37
Show file tree

Hide file tree

Showing 6 changed files with 285 additions and 129 deletions.
diff --git a/src/assets/stylesheets/components/_imageGallery.scss b/src/assets/stylesheets/components/_imageGallery.scss
@@ -1,33 +1,95 @@
-.gallery {
-    &-swiper.swiper {
+/* _imageGallery.scss */
+
+.gallery-container {
+    position: relative;
+    width: 100%;
+    height: fit-content;
+    border-radius: var(--rad-lg);
+    overflow: hidden;
+}
+
+.image-gallery-slider {
+    width: 100%;
+    // height: 8rem;
+    overflow: hidden;
+}
+
+.image-gallery-slide-item {
+    height: 100%;
+    border-radius: var(--rad-lg);
+    overflow: clip;
+
+    img {
         width: 100%;
-        height: 8rem;
-
-        .swiper-pagination-bullet {
-            width: 0.5rem;
-            height: 0.5rem;
-            background: rgb(var(--clr-white) / 0.5);
-            border: 0.1rem solid rgb(var(--clr-gray));
-            opacity: 1;
-            transition: all 0.25s;
-
-            &-active {
-                border-color: rgb(var(--clr-info));
-                background: rgb(var(--clr-white));
-                transform: scale(1.2);
-                opacity: 1;
-            }
-        }
+        height: 100%;
+        object-fit: cover;
     }
+}
 
-    &-slide {
-        height: 100%;
+.image-gallery-slider-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    inset: 0 0.4rem;
+    margin-block: auto;
+    height: 0;
+    z-index: 2;
+}
 
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            border-radius: var(--rad-lg);
+.button-slider-prev,
+.button-slider-next {
+    display: grid;
+    place-items: center;
+    width: 1.8rem;
+    height: 3.2rem;
+    border-radius: var(--rad-sm);
+    background-color: rgb(var(--clr-black) / 0.75);
+    backdrop-filter: blur(1.8rem);
+    outline: 0.1rem solid rgb(var(--clr-white) / 0.15);
+    color: rgb(var(--clr-white));
+    transition: opacity 0.25s;
+
+    &.swiper-button-disabled {
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.image-gallery-slider-pagination {
+    display: flex;
+    gap: 0.6rem;
+    position: absolute;
+    inset-block-end: 0.8rem;
+    inset-inline: 0;
+    margin-inline: auto;
+    width: fit-content;
+    height: fit-content;
+    z-index: 2;
+}
+
+.gallery-slider-pagination-bullet {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: var(--rad-full);
+    background-color: rgb(var(--clr-white) / 0.75);
+    backdrop-filter: blur(0.4rem);
+    outline: 1px solid rgb(var(--clr-black) / 0.15);
+    transition: width 0.15s;
+
+    &:not(.swiper-pagination-bullet-active) {
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgb(var(--clr-white));
         }
     }
+
+    &.swiper-pagination-bullet-active {
+        width: 1.2rem;
+        background-color: rgb(var(--clr-white));
+        outline: 0.2rem solid rgb(var(--clr-info) / 0.75);
+    }
 }
+
+/* _imageGallery.scss */
diff --git a/src/assets/stylesheets/components/_mainModal.scss b/src/assets/stylesheets/components/_mainModal.scss
@@ -91,6 +91,7 @@
     flex: 1;
     display: flex;
     flex-flow: column nowrap;
+    overflow: hidden;
 }
 
 #main-modal-navigation {
@@ -143,32 +144,6 @@
     overflow-y: auto;
 }
 
-.user-common-item-list {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 0.8rem;
-    padding: 0.8rem;
-}
-
-.user-common-labeled-input {
-    flex: 1;
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 0.4rem;
-}
-
-.common-input-labels {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-    font-size: var(--fnt-sm);
-    font-weight: 200;
-
-    > .remix {
-        opacity: 0.5;
-    }
-}
-
 /* 모달 외부에서 사용할 확률이 적은 컴포넌트들 */
 
 /* 모달 섹션 타이틀 */

diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
@@ -100,6 +100,33 @@ a:has(#logo-primary) {
     opacity: 0.5;
 }
 
+.user-common-item-list {
+    // 공통 아이템 리스트
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.8rem;
+    padding: 0.8rem;
+}
+
+.user-common-labeled-input {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4rem;
+}
+
+.common-input-labels {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    font-size: var(--fnt-sm);
+    font-weight: 200;
+
+    > .remix {
+        opacity: 0.5;
+    }
+}
+
 .user-common-table {
     // 데이터 테이블
     display: flex;

diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css
@@ -661,6 +661,31 @@ a:has(#logo-primary) {
   opacity: 0.5;
 }
 
+.user-common-item-list {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.8rem;
+  padding: 0.8rem;
+}
+
+.user-common-labeled-input {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.4rem;
+}
+
+.common-input-labels {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: var(--fnt-sm);
+  font-weight: 200;
+}
+.common-input-labels > .remix {
+  opacity: 0.5;
+}
+
 .user-common-table {
   display: flex;
   flex-flow: column nowrap;
@@ -3556,6 +3581,7 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   flex: 1;
   display: flex;
   flex-flow: column nowrap;
+  overflow: hidden;
 }
 
 #main-modal-navigation {
@@ -3594,31 +3620,6 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   overflow-y: auto;
 }
 
-.user-common-item-list {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 0.8rem;
-  padding: 0.8rem;
-}
-
-.user-common-labeled-input {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 0.4rem;
-}
-
-.common-input-labels {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  font-size: var(--fnt-sm);
-  font-weight: 200;
-}
-.common-input-labels > .remix {
-  opacity: 0.5;
-}
-
 /* 모달 외부에서 사용할 확률이 적은 컴포넌트들 */
 /* 모달 섹션 타이틀 */
 .modal-section-title {
@@ -5602,31 +5603,98 @@ input[type=checkbox]:is([data-checkbox-type=toggle]):focus + label .switch-rail
   color: rgb(var(--clr-alert));
 }
 
-.gallery-swiper.swiper {
+/* _imageGallery.scss */
+.gallery-container {
+  position: relative;
   width: 100%;
-  height: 8rem;
-}
-.gallery-swiper.swiper .swiper-pagination-bullet {
-  width: 0.5rem;
-  height: 0.5rem;
-  background: rgb(var(--clr-white)/0.5);
-  border: 0.1rem solid rgb(var(--clr-gray));
-  opacity: 1;
-  transition: all 0.25s;
+  height: -moz-fit-content;
+  height: fit-content;
+  border-radius: var(--rad-lg);
+  overflow: hidden;
 }
-.gallery-swiper.swiper .swiper-pagination-bullet-active {
-  border-color: rgb(var(--clr-info));
-  background: rgb(var(--clr-white));
-  transform: scale(1.2);
-  opacity: 1;
+
+.image-gallery-slider {
+  width: 100%;
+  overflow: hidden;
 }
-.gallery-slide {
+
+.image-gallery-slide-item {
   height: 100%;
+  border-radius: var(--rad-lg);
+  overflow: clip;
 }
-.gallery-slide img {
+.image-gallery-slide-item img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: var(--rad-lg);
-}
+}
+
+.image-gallery-slider-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  inset: 0 0.4rem;
+  margin-block: auto;
+  height: 0;
+  z-index: 2;
+}
+
+.button-slider-prev,
+.button-slider-next {
+  display: grid;
+  place-items: center;
+  width: 1.8rem;
+  height: 3.2rem;
+  border-radius: var(--rad-sm);
+  background-color: rgb(var(--clr-black)/0.75);
+  -webkit-backdrop-filter: blur(1.8rem);
+          backdrop-filter: blur(1.8rem);
+  outline: 0.1rem solid rgb(var(--clr-white)/0.15);
+  color: rgb(var(--clr-white));
+  transition: opacity 0.25s;
+}
+.button-slider-prev.swiper-button-disabled,
+.button-slider-next.swiper-button-disabled {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.image-gallery-slider-pagination {
+  display: flex;
+  gap: 0.6rem;
+  position: absolute;
+  inset-block-end: 0.8rem;
+  inset-inline: 0;
+  margin-inline: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  z-index: 2;
+}
+
+.gallery-slider-pagination-bullet {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: var(--rad-full);
+  background-color: rgb(var(--clr-white)/0.75);
+  -webkit-backdrop-filter: blur(0.4rem);
+          backdrop-filter: blur(0.4rem);
+  outline: 1px solid rgb(var(--clr-black)/0.15);
+  transition: width 0.15s;
+}
+.gallery-slider-pagination-bullet:not(.swiper-pagination-bullet-active) {
+  cursor: pointer;
+}
+.gallery-slider-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
+  background-color: rgb(var(--clr-white));
+}
+.gallery-slider-pagination-bullet.swiper-pagination-bullet-active {
+  width: 1.2rem;
+  background-color: rgb(var(--clr-white));
+  outline: 0.2rem solid rgb(var(--clr-info)/0.75);
+}
+
+/* _imageGallery.scss */