-
Notifications
You must be signed in to change notification settings - Fork 3
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
#233 카테고리 배너 재조정 #235
Merged
Merged
#233 카테고리 배너 재조정 #235
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
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
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,56 +1,68 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| import { ImgCategoryBanner } from "../../asset/image"; | ||
| import { OriginImgCategoryBanner } from "../../asset/image/origin"; | ||
|
|
||
| export const St = { | ||
| Root: styled.main` | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-bottom: 4rem; | ||
| margin-top: -2.4rem; | ||
| `, | ||
|
|
||
| CategoryBanner: styled.section` | ||
| height: 17.9rem; | ||
| padding: 2rem 0 0 1.6rem; | ||
|
|
||
| background-image: url(${ImgCategoryBanner}); | ||
| background-image: image-set( | ||
| ${ImgCategoryBanner} type("image/webp"), | ||
| ${OriginImgCategoryBanner} type("image/png"), | ||
| ) | ||
| background-size: cover; | ||
|
|
||
| position: relative; | ||
| `, | ||
|
|
||
| BannerTitle: styled.h2` | ||
| ${({ theme }) => theme.newFonts.graphic1}; | ||
| color: ${({ theme }) => theme.colors.darkblue}; | ||
| `, | ||
|
|
||
| BannerSubTitle: styled.p` | ||
| ${({ theme }) => theme.newFonts.h2}; | ||
| color: ${({ theme }) => theme.colors.gray800}; | ||
| `, | ||
|
|
||
| GoBestPiickleBtn: styled.button` | ||
| position: absolute; | ||
|
|
||
| height: 1.5rem; | ||
| right: 1.6rem; | ||
| bottom: 1.2rem; | ||
|
|
||
| color: ${({ theme }) => theme.colors.gray900}; | ||
| ${({ theme }) => theme.newFonts.btn2}; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| `, | ||
|
|
||
| BtnTitle: styled.p` | ||
| margin-right: 0.8rem; | ||
| `, | ||
| const Root = styled.main` | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-bottom: 4rem; | ||
| margin-top: -2.4rem; | ||
| `; | ||
|
|
||
| const CategoryBanner = styled.section` | ||
| height: 17.9rem; | ||
| padding: 2rem 0 0 1.6rem; | ||
|
|
||
| position: relative; | ||
| `; | ||
|
|
||
| const BgImg = styled.img` | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
|
|
||
| width: 100%; | ||
| height: 17.9rem; | ||
|
|
||
| object-fit: cover; | ||
|
|
||
| z-index: -10; | ||
| `; | ||
|
|
||
| const BannerTitle = styled.h2` | ||
| ${({ theme }) => theme.newFonts.graphic1}; | ||
| color: ${({ theme }) => theme.colors.darkblue}; | ||
| `; | ||
|
|
||
| const BannerSubTitle = styled.p` | ||
| ${({ theme }) => theme.newFonts.h2}; | ||
| color: ${({ theme }) => theme.colors.gray800}; | ||
| `; | ||
|
|
||
| const GoBestPiickleBtn = styled.button` | ||
| position: absolute; | ||
|
|
||
| height: 1.5rem; | ||
| right: 1.6rem; | ||
| bottom: 1.2rem; | ||
|
|
||
| color: ${({ theme }) => theme.colors.gray900}; | ||
| ${({ theme }) => theme.newFonts.btn2}; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| const BtnTitle = styled.p` | ||
| margin-right: 0.8rem; | ||
| `; | ||
|
|
||
| const St = { | ||
| Root, | ||
| CategoryBanner, | ||
| BgImg, | ||
| BannerTitle, | ||
| BannerSubTitle, | ||
| GoBestPiickleBtn, | ||
| BtnTitle, | ||
| }; | ||
| export default St; |
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.
메인 페이지뿐만 아니라, 카테고리 배너도
<Helmet />에 넣어주는 이유는 무엇일까용?-?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.
이미지 파일을 한 파일에서만 import 하고 싶었어요...!
페이지마다, 혹은 html에 그냥 하는 게 나으려나요?!
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.
혹은- 정적 파일들을 이미지 파일로 불러오는 데에도 리소스가 들어서,
정적 파일이라면 base64로 바꿔서 html을 파싱할 때 바로 로드되게끔 하는 방법도 있을 것 같아요!
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.
이미지 파일을 한 파일에서 import 한다는 게 잘 이해가 안됐습니다😂 좀 더 설명해주실 수 있을까용?!
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.
제가 질문을 잘 이해를 못한 것 같아요.
메인 페이지, 카테고리 배너 각각 다른 이미지 파일을 프리로드 하기 위해 각각 Helmet을 선언한 건데,
어떤 다른 방법이 있는 걸까요??!
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.
옷 카테고리 배너도 프리로드 하는 이유가 궁금하다는 질뭉이었어요,,!
제가 질문을 아리까리하게 했네요 ㅎㅎ,,
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.
아하!!!! 카테고리 페이지에 들어갈 때 배너 이미지가 빨리 보이게 하기 위함이었어요