[FE] fix: 홈 페이지 캐러셀 초기 슬라이드 위치를 조정하고 ConfirmModal에 props로 title을 받아서 …

…디자인을 수정한다. (#530) * feat: ContentModal에 title prop을 추가해서 헤더에 표시 * fix: 캐러셀 초기 슬라이드 위치 조정
woowacourse-teams · Aug 22, 2024 · 9fec135 · 9fec135
1 parent 7163132
commit 9fec135
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/frontend/src/components/common/modals/ContentModal/index.tsx b/frontend/src/components/common/modals/ContentModal/index.tsx
@@ -7,15 +7,17 @@ import ModalPortal from '../ModalPortal';
 import * as S from './styles';
 
 interface ContentModalProps {
+  title?: string;
   handleClose: () => void;
 }
 
-const ContentModal = ({ handleClose, children }: EssentialPropsWithChildren<ContentModalProps>) => {
+const ContentModal = ({ title, handleClose, children }: EssentialPropsWithChildren<ContentModalProps>) => {
   return (
     <ModalPortal>
       <ModalBackground closeModal={handleClose}>
         <S.ContentModalContainer>
           <S.ContentModalHeader>
+            <S.Title>{title}</S.Title>
             <S.CloseButton onClick={handleClose}>
               <img src={CloseIcon} alt="모달 닫기" />
             </S.CloseButton>

diff --git a/frontend/src/components/common/modals/ContentModal/styles.ts b/frontend/src/components/common/modals/ContentModal/styles.ts
@@ -23,14 +23,22 @@ export const ContentModalContainer = styled.div`
 
 export const ContentModalHeader = styled.div`
   display: flex;
-  justify-content: flex-end;
+  gap: 2rem;
+  align-items: center;
+  justify-content: space-between;
+
   width: 100%;
   height: 3rem;
 `;
 
+export const Title = styled.span`
+  font-size: 1.8rem;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+`;
+
 export const Contents = styled.div`
   overflow-y: auto;
-  padding-right: 1.2rem;
+  width: 100%;
 `;
 
 export const CloseButton = styled.button`

diff --git a/frontend/src/pages/HomePage/components/Carousel/index.tsx b/frontend/src/pages/HomePage/components/Carousel/index.tsx
@@ -26,12 +26,12 @@ const Carousel = ({ slideList }: CarouselProps) => {
   // NOTE: 첫 슬라이드와 마지막 슬라이드의 복제본을 각각 맨 뒤, 맨 처음에 추가
   const clonedSlideList = [slideList[slideLength - 1], ...slideList, slideList[0]];
 
-  const scrollToSlide = (index: number) => {
+  const scrollToSlide = (index: number, withTransition = true) => {
     if (slideRef.current) {
       setIsTransitioning(true);
 
       const slideWidth = slideRef.current.clientWidth;
-      slideRef.current.style.transition = 'transform 0.5s ease-in-out';
+      slideRef.current.style.transition = withTransition ? `transform ${TRANSITION_DURATION}ms ease-in-out` : 'none';
       slideRef.current.style.transform = `translateX(-${slideWidth * index * 0.1}rem)`;
     }
     setCurrentSlideIndex(index);
@@ -45,29 +45,29 @@ const Carousel = ({ slideList }: CarouselProps) => {
     scrollToSlide(currentSlideIndex - 1);
   };
 
+  // NOTE: // 초기 슬라이드 위치 설정
+  useEffect(() => {
+    scrollToSlide(REAL_START_INDEX, false);
+  }, []);
+
   // NOTE: 맨 처음/맨 끝 슬라이드 전환용 useEffect
   useEffect(() => {
     if (isTransitioning) {
       if (currentSlideIndex === slideLength + 1) {
         // 마지막 슬라이드 처리
         setTimeout(() => {
           setIsTransitioning(false);
-          slideRef.current!.style.transition = 'none';
-          slideRef.current!.style.transform = `translateX(-${slideRef.current!.clientWidth * 0.1}rem)`;
-          setCurrentSlideIndex(REAL_START_INDEX);
+          scrollToSlide(REAL_START_INDEX, false);
         }, TRANSITION_DURATION); // NOTE: 애니메이션 트랜지션 시간과 동일하게 설정 (0.5초)
-      }
-      if (currentSlideIndex === 0) {
+      } else if (currentSlideIndex === 0) {
         // 첫 번째 슬라이드 처리
         setTimeout(() => {
           setIsTransitioning(false);
-          slideRef.current!.style.transition = 'none';
-          slideRef.current!.style.transform = `translateX(-${slideRef.current!.clientWidth * slideLength * 0.1}rem)`;
-          setCurrentSlideIndex(slideLength);
+          scrollToSlide(slideLength, false);
         }, TRANSITION_DURATION);
       }
     }
-  }, [currentSlideIndex, slideLength]);
+  }, [currentSlideIndex, slideLength, isTransitioning]);
 
   // NOTE: 슬라이드 자동 이동용
   useEffect(() => {

diff --git a/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx b/frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx
@@ -7,6 +7,9 @@ import { ROUTE } from '@/constants/route';
 import { useCheckPasswordValidation, useEyeButton, useGroupAccessCode } from '@/hooks';
 
 import * as S from './styles';
+
+const REVIEW_PASSWORD_INPUT_MESSAGE = '리뷰 확인을 위해 설정한 비밀번호를 입력해주세요';
+
 interface PasswordModalProps {
   closeModal: () => void;
   reviewRequestCode: string;
@@ -52,9 +55,8 @@ const PasswordModal = ({ closeModal, reviewRequestCode }: PasswordModalProps) =>
   };
 
   return (
-    <ContentModal handleClose={closeModal}>
+    <ContentModal title={REVIEW_PASSWORD_INPUT_MESSAGE} handleClose={closeModal}>
       <S.PasswordModal>
-        <S.ModalTitle>리뷰 확인을 위해 설정한 비밀번호를 입력해주세요</S.ModalTitle>
         <S.InputContainer>
           <S.PasswordInputContainer>
             <Input

diff --git a/frontend/src/pages/ReviewZonePage/components/PasswordModal/styles.ts b/frontend/src/pages/ReviewZonePage/components/PasswordModal/styles.ts
@@ -3,12 +3,7 @@ import styled from '@emotion/styled';
 export const PasswordModal = styled.div`
   display: flex;
   flex-direction: column;
-  height: 14rem;
-`;
-
-export const ModalTitle = styled.h3`
-  margin-bottom: 2rem;
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  margin-top: 2rem;
 `;
 
 export const InputContainer = styled.form`
@@ -27,6 +22,8 @@ export const Label = styled.label`
 export const PasswordInputContainer = styled.div`
   position: relative;
   display: flex;
+  gap: 30rem;
+  width: 70%;
 `;
 
 export const ErrorMessage = styled.p`