-
Notifications
You must be signed in to change notification settings - Fork 2
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.
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] feat: 캐러셀 구현한 후, 홈 페이지에 적용 #421
Merged
Merged
Changes from all commits
Commits
Show all changes
34 commits
Select commit
Hold shift + click to select a range
848b56c
chore: LandingPage를 HomePage로 변경
ImxYJL 60f1902
refactor: 새 HomePage의 Form 부분 퍼블리싱
ImxYJL 5a064a6
refactor: 문자열 길이 검증 함수에서 최소 길이도 검증할 수 있도록 변경
ImxYJL 827a481
test: 변경된 문자열 길이 검증 함수에 대한 테스트 추가
ImxYJL 5fd81d9
refactor: 컴포넌트에 비밀번호 유효성 검사 추가
ImxYJL d69b555
refactor: ReviewGroupDataModal 스타일 조정
ImxYJL 8c3e235
refactor: URL을 안내하는 모달 이름 수정
ImxYJL e19ec0e
feat: 리뷰미 소개 페이지 1차 퍼블리싱
ImxYJL b070350
chore: 불필요한 페이지 삭제
ImxYJL 5b80f51
refactor: 스타일 수정
ImxYJL 1488b6d
refactor: 폼 멘트 수정
ImxYJL 7f3fe82
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…
ImxYJL b720ca0
feat: 입력한 비밀번호를 확인할 수 있는 EyeButton 컴포넌트 작성
ImxYJL 441cb51
refactor: URLGeneratorForm에 EyeButton 적용
ImxYJL 834ad40
refactor: EyeButton 위치 수정
ImxYJL f85dbf9
chore: 불필요한 import 제거
ImxYJL 332374d
fix: EyeButton 위치 고정
ImxYJL 3b16f3e
refactor: 소개 페이지의 화살표 위치 조정
ImxYJL c911242
fix: EyeButton 위치 에러 수정
ImxYJL a79d31c
refactor: EyeButton 크기 조정
ImxYJL 1c75f74
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…
ImxYJL d3656e7
chore: 사용하지 않는 파일 삭제
ImxYJL 353b4ad
fix: h3 삭제
ImxYJL 775b8dc
chore: 사용하지 않는 파일을 index에서 제거
ImxYJL 88616ec
refactor: EyeButton 사이즈 상수화
ImxYJL eed9e44
refactor: OverviewItem의 배경색을 theme의 배경색으로 변경
ImxYJL f237a3c
Merge remote-tracking branch 'origin/develop' into fe/feat/397-home-p…
soosoo22 ec62da1
design: theme.ts에 palePurple 색상 추가
soosoo22 99bb08e
feat: Carousel 컴포넌트 구현
soosoo22 7981a76
refactor: 기존 OverviewItem을 Carousel 컴포넌트로 교체
soosoo22 8f68b0a
design: 홈 페이지 높이 조정
soosoo22 ac3f1b0
style: css 속성 순서 정렬
soosoo22 31efb29
Merge remote-tracking branch 'origin/develop' into fe/feat/397-home-p…
soosoo22 b8db65a
Merge remote-tracking branch 'origin/develop' into fe/feat/397-home-p…
soosoo22 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { useRef, useState } from 'react'; | ||
|
||
import * as S from './styles'; | ||
|
||
interface Slide { | ||
imageSrc: string; | ||
title: string; | ||
description: string[]; | ||
} | ||
|
||
interface CarouselProps { | ||
slides: Slide[]; | ||
pageWidth: number; | ||
pageHeight: number; | ||
gap: number; | ||
offset: number; | ||
} | ||
|
||
const Carousel = ({ slides, pageWidth, pageHeight, gap, offset }: CarouselProps) => { | ||
const [page, setPage] = useState(0); | ||
const scrollRef = useRef<HTMLDivElement>(null); | ||
|
||
const handleScroll = () => { | ||
if (scrollRef.current) { | ||
const scrollLeft = scrollRef.current.scrollLeft; | ||
const newPage = Math.round(scrollLeft / ((pageWidth + gap) * 10)); | ||
setPage(newPage); | ||
} | ||
}; | ||
|
||
const scrollToPage = (pageIndex: number) => { | ||
if (scrollRef.current) { | ||
scrollRef.current.scrollTo({ | ||
left: (pageWidth + gap) * 10 * pageIndex, | ||
behavior: 'smooth', | ||
}); | ||
setPage(pageIndex); | ||
} | ||
}; | ||
|
||
return ( | ||
<S.Layout> | ||
<S.ScrollContainer ref={scrollRef} onScroll={handleScroll} gap={gap} offset={offset}> | ||
{slides.map((slide, index) => ( | ||
<S.Page key={`slide_${index}`} width={pageWidth} height={pageHeight}> | ||
<S.PageItem onClick={() => scrollToPage(index)}> | ||
<img src={slide.imageSrc} alt={slide.title} style={{ padding: index === 2 ? '3rem' : '2rem' }} /> | ||
<S.PageTitle>{slide.title}</S.PageTitle> | ||
<S.PageDescription> | ||
{slide.description.map((desc, index) => ( | ||
<S.DescriptionItem key={index}>{desc}</S.DescriptionItem> | ||
))} | ||
</S.PageDescription> | ||
</S.PageItem> | ||
</S.Page> | ||
))} | ||
</S.ScrollContainer> | ||
<S.IndicatorWrapper> | ||
{slides.map((_, index) => ( | ||
<S.Indicator key={`indicator_${index}`} focused={index === page} onClick={() => scrollToPage(index)} /> | ||
))} | ||
</S.IndicatorWrapper> | ||
</S.Layout> | ||
); | ||
}; | ||
|
||
export default Carousel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import styled from '@emotion/styled'; | ||
|
||
export const Layout = styled.section` | ||
width: 100%; | ||
padding-left: 3rem; | ||
`; | ||
|
||
export const ScrollContainer = styled.div<{ gap: number; offset: number }>` | ||
overflow-x: auto; | ||
display: flex; | ||
gap: ${({ gap }) => `${gap}rem`}; | ||
|
||
height: 100%; | ||
padding: ${({ offset }) => `0 ${offset}rem`}; | ||
|
||
&::-webkit-scrollbar { | ||
display: none; | ||
} | ||
`; | ||
|
||
export const Page = styled.div<{ width: number; height: number }>` | ||
flex-shrink: 0; | ||
width: ${({ width }) => `${width}rem`}; | ||
height: ${({ height }) => `${height}rem`}; | ||
`; | ||
|
||
export const PageItem = styled.div` | ||
cursor: pointer; | ||
|
||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
|
||
height: 100%; | ||
|
||
background-color: ${({ theme }) => theme.colors.white}; | ||
border-radius: 0.8rem; | ||
border-radius: ${({ theme }) => theme.borderRadius.basic}; | ||
box-shadow: 0.8rem 1rem 1.6rem hsl(0deg 0% 0% / 0.25); | ||
|
||
img { | ||
width: 100%; | ||
height: 25rem; | ||
background-color: ${({ theme }) => theme.colors.palePurple}; | ||
border-radius: ${({ theme }) => theme.borderRadius.basic} ${({ theme }) => theme.borderRadius.basic} 0 0; | ||
} | ||
`; | ||
|
||
export const PageTitle = styled.p` | ||
margin: 1rem 0; | ||
font-size: ${({ theme }) => theme.fontSize.mediumSmall}; | ||
font-weight: ${({ theme }) => theme.fontWeight.bold}; | ||
`; | ||
|
||
export const PageDescription = styled.div` | ||
width: 100%; | ||
padding-left: 3rem; | ||
`; | ||
|
||
export const DescriptionItem = styled.p` | ||
margin: 0.5rem 0; | ||
font-size: ${({ theme }) => theme.fontSize.basic}; | ||
`; | ||
|
||
export const IndicatorWrapper = styled.div` | ||
display: flex; | ||
justify-content: center; | ||
margin-top: 1.6rem; | ||
`; | ||
|
||
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; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 28 additions & 37 deletions
65
frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이렇게 계산식에 들어가는 변수는 따로 변수로 빼는 것도 좋을 것 같아요!