diff --git a/package.json b/package.json index 6cb6eec3..dc5dd3e6 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ "react-day-picker": "^8.10.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", + "react-image-file-resizer": "^0.4.8", + "react-loading-skeleton": "^3.4.0", "react-router-dom": "^6.21.1", "react-toastify": "^10.0.4", "styled-components": "^6.1.6", diff --git a/public/svg/img_bg.svg b/public/svg/img_bg.svg new file mode 100644 index 00000000..c30121e4 --- /dev/null +++ b/public/svg/img_bg.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/svg/ImgBg.tsx b/src/assets/svg/ImgBg.tsx new file mode 100644 index 00000000..96ab0a6b --- /dev/null +++ b/src/assets/svg/ImgBg.tsx @@ -0,0 +1,37 @@ +import type { SVGProps } from 'react'; +const SvgImgBg = (props: SVGProps) => ( + + + + + + + + + + + + + + + +); +export default SvgImgBg; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index e8bb0904..077fa6d9 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -92,3 +92,4 @@ export { default as Ranking1 } from './Ranking1'; export { default as Ranking2 } from './Ranking2'; export { default as Ranking3 } from './Ranking3'; export { default as IcEmptyThumbnailFinal } from './IcEmptyThumbnailFinal'; +export { default as ImgBg } from './ImgBg'; diff --git a/src/components/Tournament/Intro/TournamentIntroContatiner.style.tsx b/src/components/Tournament/Intro/TournamentIntroContatiner.style.tsx index d4470718..1e732d31 100644 --- a/src/components/Tournament/Intro/TournamentIntroContatiner.style.tsx +++ b/src/components/Tournament/Intro/TournamentIntroContatiner.style.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const TournamentImg = styled.div` width: 22.5rem; height: 22.5rem; - margin: 0 auto; + margin: 5.6rem auto; animation: ani 1s infinite alternate; diff --git a/src/components/Tournament/TournamentFlow/TournamentFlowContainer.style.ts b/src/components/Tournament/TournamentFlow/TournamentFlowContainer.style.ts index ea6c2c38..248d0a36 100644 --- a/src/components/Tournament/TournamentFlow/TournamentFlowContainer.style.ts +++ b/src/components/Tournament/TournamentFlow/TournamentFlowContainer.style.ts @@ -13,5 +13,8 @@ export const TournamentFlowContainerWrapper = styled.section` background-repeat: no-repeat; padding: 5.6rem 2rem; position: relative; - height: 100vh; + /* height: 100vh; */ + /* height: calc(var(--vh, 1vh) * 100); */ + /* height: -webkit-fill-available; */ + height: 100dvh; `; diff --git a/src/components/Tournament/TournamentFlow/TournamentFooter/TournamentFooter.style.ts b/src/components/Tournament/TournamentFlow/TournamentFooter/TournamentFooter.style.ts index 86d43597..b1e6f2c8 100644 --- a/src/components/Tournament/TournamentFlow/TournamentFooter/TournamentFooter.style.ts +++ b/src/components/Tournament/TournamentFlow/TournamentFooter/TournamentFooter.style.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const TournamentFooterWrapper = styled.footer` display: flex; justify-content: flex-end; - position: absolute; + position: fixed; align-items: center; width: 37.5rem; diff --git a/src/components/Tournament/TournamentResult/TournamentResultCard/TournamentResultCard.style.ts b/src/components/Tournament/TournamentResult/TournamentResultCard/TournamentResultCard.style.ts index 903abd42..1002f6ac 100644 --- a/src/components/Tournament/TournamentResult/TournamentResultCard/TournamentResultCard.style.ts +++ b/src/components/Tournament/TournamentResult/TournamentResultCard/TournamentResultCard.style.ts @@ -19,7 +19,7 @@ export const TournamentCardWrapper = styled.div` border-radius: 12px; margin: 0 auto; margin-bottom: 1.6rem; - border: 1px solid ${({ theme }) => theme.colors.G_02}; + border: 1px solid ${({ theme }) => theme.colors.P_06}; background: ${({ theme }) => theme.colors.white}; cursor: pointer; @@ -51,4 +51,7 @@ export const Price = styled.p` export const TournamentImgWrapper = styled.div` margin-bottom: 2rem; + width: 25rem; + height: auto; + aspect-ratio: 1 / 1; `; diff --git a/src/components/common/Button/Next/BtnNext.tsx b/src/components/common/Button/Next/BtnNext.tsx index 69279421..8e5e370b 100644 --- a/src/components/common/Button/Next/BtnNext.tsx +++ b/src/components/common/Button/Next/BtnNext.tsx @@ -15,7 +15,7 @@ const BtnNext = ({ disabled, children, onClick }: BtnNextProps) => {