Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] fix: 홈 페이지 캐러셀 초기 슬라이드 위치 조정 및 ConfirmModal에 props로 title을 받아서 디자인 수정 #530

Merged
merged 2 commits into from
Aug 22, 2024
+31 −22
Merged

[FE] fix: 홈 페이지 캐러셀 초기 슬라이드 위치 조정 및 ConfirmModal에 props로 title을 받아서 디자인 수정 #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ad4fe6
feat: ContentModal에 title prop을 추가해서 헤더에 표시
soosoo22 Aug 22, 2024
4941875
fix: 캐러셀 초기 슬라이드 위치 조정
soosoo22 Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion frontend/src/components/common/modals/ContentModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/components/common/modals/ContentModal/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/pages/HomePage/components/Carousel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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(() => {
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/pages/ReviewZonePage/components/PasswordModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
9 changes: 3 additions & 6 deletions frontend/src/pages/ReviewZonePage/components/PasswordModal/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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`
Expand Down