diff --git a/frontend/src/components/common/modals/ContentModal/index.tsx b/frontend/src/components/common/modals/ContentModal/index.tsx index faabd74cf..64733c4e2 100644 --- 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) => { +const ContentModal = ({ title, handleClose, children }: EssentialPropsWithChildren) => { return ( + {title} 모달 닫기 diff --git a/frontend/src/components/common/modals/ContentModal/styles.ts b/frontend/src/components/common/modals/ContentModal/styles.ts index 94a789847..dae5884b1 100644 --- 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 index 9416778fa..78038fded 100644 --- 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,6 +45,11 @@ const Carousel = ({ slideList }: CarouselProps) => { scrollToSlide(currentSlideIndex - 1); }; + // NOTE: // 초기 슬라이드 위치 설정 + useEffect(() => { + scrollToSlide(REAL_START_INDEX, false); + }, []); + // NOTE: 맨 처음/맨 끝 슬라이드 전환용 useEffect useEffect(() => { if (isTransitioning) { @@ -52,22 +57,17 @@ const Carousel = ({ slideList }: CarouselProps) => { // 마지막 슬라이드 처리 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 index 899158d9f..6e3424839 100644 --- 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 ( - + - 리뷰 확인을 위해 설정한 비밀번호를 입력해주세요 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`