[FE] feat: 캐러셀 하단에 슬라이드 위치 표시용 도트를 추가 및 피그마 컴포넌트를 사용하여 기존 슬라이드 이미지 교체 (…

…#484) * feat: 캐러셀 하단에 슬라이드 위치 표시용 도트 추가 * chore: 피그마 컴포넌트를 활용한 이미지로 교체 * design: 캐러셀 하단 Indicator bottom 위치 조정 * chore: 슬라이드 이미지 수정 * chore: 불필요한 rem 제거 * design: 캐러셀 height 수정 * chore: 슬라이드에 들어갈 이미지 텍스트 정렬 후 적용
woowacourse-teams · Aug 21, 2024 · 069306d · 069306d
1 parent 4d948ed
commit 069306d
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 75 deletions.
diff --git a/frontend/src/assets/usageCarosel1.svg b/frontend/src/assets/usageCarosel1.svg
diff --git a/frontend/src/assets/usageCarosel2.svg b/frontend/src/assets/usageCarosel2.svg
diff --git a/frontend/src/assets/usageCarosel3.svg b/frontend/src/assets/usageCarosel3.svg
diff --git a/frontend/src/pages/HomePage/components/Carousel/index.tsx b/frontend/src/pages/HomePage/components/Carousel/index.tsx
@@ -52,6 +52,15 @@ const Carousel = ({ slides }: CarouselProps) => {
           </S.SlideItem>
         ))}
       </S.SlideList>
+      <S.IndicatorWrapper>
+        {slides.map((_, index) => (
+          <S.Indicator
+            key={`indicator_${index}`}
+            focused={index === currentSlide}
+            onClick={() => scrollToSlide(index)}
+          />
+        ))}
+      </S.IndicatorWrapper>
       <S.PrevButton onClick={prevSlide}>{'<'}</S.PrevButton>
       <S.NextButton onClick={nextSlide}>{'>'}</S.NextButton>
     </S.CarouselContainer>

diff --git a/frontend/src/pages/HomePage/components/Carousel/styles.ts b/frontend/src/pages/HomePage/components/Carousel/styles.ts
@@ -7,7 +7,7 @@ export const CarouselContainer = styled.div`
 
   width: 100%;
   max-width: 80rem;
-  height: 55vh;
+  height: 60vh;
 `;
 
 export const SlideList = styled.div`
@@ -28,7 +28,6 @@ export const SlideItem = styled.div`
   justify-content: center;
 
   min-width: 100%;
-  height: 100%;
 `;
 
 export const SlideContent = styled.div`
@@ -48,12 +47,6 @@ export const SlideContent = styled.div`
   }
 `;
 
-export const Component = styled.div`
-  position: absolute;
-  top: 10rem;
-  right: 5rem;
-`;
-
 export const PrevButton = styled.button`
   cursor: pointer;
 
@@ -83,3 +76,27 @@ export const NextButton = styled.button`
   background: none;
   border: none;
 `;
+
+export const IndicatorWrapper = styled.div`
+  position: absolute;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+`;
+
+export const Indicator = styled.div<{ focused: boolean }>`
+  cursor: pointer;
+
+  width: 1rem;
+  height: 1rem;
+  margin: 0 0.5rem;
+
+  background-color: ${({ focused, theme }) => (focused ? theme.colors.black : theme.colors.placeholder)};
+  border-radius: 50%;
+
+  transition: background-color 0.3s ease;
+`;
diff --git a/frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts b/frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts
@@ -4,6 +4,7 @@ export const ReviewMeOverview = styled.section`
   position: relative;
   overflow: hidden;
   width: 65%;
+  height: 100%;
   background-color: ${({ theme }) => theme.colors.lightPurple};
 `;