-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat: Flex 레이아웃 컴포넌트 구현 * design: PC 반응형 디자인 개선 임시 저장 * refactor: Flex 컴포넌트 개선 프로젝트 반응형 사이즈 대응 prop 추가 및 type 선언 * feat: breakPoint type 추가 * design: youtube 컴포넌트의 flex wrapping 제거 * fix: 스타일 컴포넌트가 잘못 참조했던 Flex 컴포넌트 수정 ref 정상 동작하도록 변경 * design: 1페이지 단위의 높이를 가지도록 디자인 변경 * design: 인터페이스 상단 수평선 맞춤 * design: 모든 디바이스에서 스크롤 스냅 적용 * design: 전체 컨테이너의 배경색을 넣어 공간감을 줌 * design: Layout의 상하단 패딩 제거 및 스와이프 관련 컴포넌트 높이 고정 1. 기존 Header를 sticky -> fixed 로 변경하면서, 스와이프 아이템에 header 만큼의 padding-top을 부여하였음. 2. 때문에 더이상 필요하지 않은 반응형 높이 제어를 속성들을 삭제하고 100vh로 고정 3. 마찬가지로 혼동을 주는 Layout의 상하단 padding 삭제 및 0으로 고정 * design: 스크롤 이슈로 main 영역 padding 줄임 * design: 가수, 제목 텍스트 디테일 처리로 듣기 인터페이스 짤리지 않도록 함 * design: FHD 기준 좌우 padding 수정 * refactor: as prop $ 제거 및 default parameter 적용 * refactor(Flex): react 컴포넌트-> styled 컴포넌트로 변경 이미 스타일 컴포넌트가 제공하고 있는 다형성, html attribytes 관련 type 중복을 제거함. * style: 스타일 린트 적용
- Loading branch information
1 parent
790da5f
commit b03ace9
Showing
11 changed files
with
131 additions
and
72 deletions.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import styled, { css } from 'styled-components'; | ||
| import type { BreakPoints } from '@/shared/types/theme'; | ||
| import type { CSSProp } from 'styled-components'; | ||
|
|
||
| interface FlexBox { | ||
| $direction?: React.CSSProperties['flexDirection']; | ||
| $wrap?: React.CSSProperties['flexWrap']; | ||
| $gap?: number; | ||
| $align?: React.CSSProperties['alignItems']; | ||
| $justify?: React.CSSProperties['justifyContent']; | ||
| $css?: CSSProp; | ||
| } | ||
|
|
||
| interface ResponsiveFlexBox extends Partial<Record<`$${BreakPoints}`, FlexBox>> {} | ||
|
|
||
| interface FlexProps extends FlexBox, ResponsiveFlexBox {} | ||
|
|
||
| const Flex = styled.div<FlexProps>` | ||
| display: flex; | ||
| flex-direction: ${({ $direction = 'row' }) => $direction}; | ||
| flex-wrap: ${({ $wrap = 'nowrap' }) => $wrap}; | ||
| gap: ${({ $gap = 0 }) => `${$gap}px`}; | ||
| align-items: ${({ $align = 'stretch' }) => $align}; | ||
| justify-content: ${({ $justify = 'flex-start' }) => $justify}; | ||
| ${({ $css }) => $css} | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.xxl}) { | ||
| ${({ $xxl }) => flexCss($xxl)} | ||
| } | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.xl}) { | ||
| ${({ $xl }) => flexCss($xl)} | ||
| } | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.lg}) { | ||
| ${({ $lg }) => flexCss($lg)} | ||
| } | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.md}) { | ||
| ${({ $md }) => flexCss($md)} | ||
| } | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.sm}) { | ||
| ${({ $sm }) => flexCss($sm)} | ||
| } | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.xs}) { | ||
| ${({ $xs }) => flexCss($xs)} | ||
| } | ||
| @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) { | ||
| ${({ $xxs }) => flexCss($xxs)} | ||
| } | ||
| `; | ||
|
|
||
| export default Flex; | ||
|
|
||
| const flexCss = (flexBox?: FlexBox) => { | ||
| if (!flexBox) return; | ||
| const { $align, $direction, $gap, $justify, $wrap } = flexBox; | ||
|
|
||
| return css` | ||
| flex-direction: ${$direction}; | ||
| flex-wrap: ${$wrap}; | ||
| gap: ${$gap && `${$gap}px`}; | ||
| align-items: ${$align}; | ||
| justify-content: ${$justify}; | ||
| `; | ||
| }; |
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
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 |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| // eslint-disable-next-line | ||
| import theme from '@/shared/styles/theme'; | ||
| import type theme from '@/shared/styles/theme'; | ||
|
|
||
| export type ThemeType = typeof theme; | ||
| export type BreakPoints = keyof typeof theme.breakPoints; |