diff --git a/src/components/calculation/index.tsx b/src/components/calculation/index.tsx index 652b01c..557c0d4 100644 --- a/src/components/calculation/index.tsx +++ b/src/components/calculation/index.tsx @@ -131,9 +131,9 @@ const SmilePepeImage = styled.img` width: 30vw; bottom: 0vh; - @media (max-width: 1023px) { + /* @media (max-width: 1023px) { display: none; - } + } */ @media (max-width: 480px) { display: block; height: 50vh; @@ -215,7 +215,7 @@ export function Calculation() { - + - + {dateToString(new Date(coinPrice?.minPrice?.atMillis))}에 풀매수해서 - + {dateToString(new Date(coinPrice?.maxPrice?.atMillis))}에 풀매도 했다면..? @@ -249,7 +249,7 @@ export function Calculation() { {!calculateButton.isClicked ? ( - + 행복회로 ON diff --git a/src/components/common/ViewportTypography.tsx b/src/components/common/ViewportTypography.tsx index e7a97e1..c74dbe6 100644 --- a/src/components/common/ViewportTypography.tsx +++ b/src/components/common/ViewportTypography.tsx @@ -1,7 +1,7 @@ import styled, { DefaultTheme } from 'styled-components'; type ViewportTypographyProps = { - size?: '2' | '4' | '6' | '10'; + size?: '2' | '3' | '5' | '4' | '6' | '10'; weight?: '400' | '500' | '600' | '700' | '900'; color?: string; marginBottom?: number; diff --git a/src/components/mainTitle/index.tsx b/src/components/mainTitle/index.tsx index 4e8b775..b9533a0 100644 --- a/src/components/mainTitle/index.tsx +++ b/src/components/mainTitle/index.tsx @@ -14,6 +14,9 @@ import downarrow from '../../assets/images/downarrow.svg'; const S = { Container: styled.div` + height: 100vh; + `, + TextContainer: styled.div` position: absolute; top: 25vh; left: 5vw; @@ -27,9 +30,9 @@ const S = { @media (max-width: 1439px) { right: -27%; } - @media (max-width: 1023px) { + /* @media (max-width: 1023px) { display: none; - } + } */ `, SelectCoinContainer: styled.div` margin-top: 3vh; @@ -223,19 +226,19 @@ function SelectCoinContainer() { function MainTitle(): any { return ( - <> - + + 라고 할 때 - + - + ); } diff --git a/src/components/price/index.tsx b/src/components/price/index.tsx index c0ff7cc..98fc790 100644 --- a/src/components/price/index.tsx +++ b/src/components/price/index.tsx @@ -9,129 +9,131 @@ import { coinPriceAtom, selectedCoinAtom, } from '../../atoms'; -import { ISelectedCoin } from '../../types/coin'; import { axiosGet } from '../../api'; - -const Wrapper = styled.div` - position: relative; - height: 90vh; - width: 80%; - margin: 0 auto; - padding-top: 13vh; -`; - -const PriceBox = styled.div` - height: 60vh; -`; - -// 현재 가격 -const CurrentPrice = styled.div` - text-align: center; - margin-bottom: 14vh; -`; - -const CurrentPriceInfo = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 2vh; - padding: 0 1.5vw; -`; - -const CurrentPriceTitle = styled.div` - font-size: 2vw; - font-weight: 700; -`; - -const CurrentPriceText = styled.div` - font-size: 10.5vw; - font-weight: 700; - color: #43841f; -`; - -// 최대가, 최저가 -const PastPrice = styled.div` - display: flex; - justify-content: space-between; -`; - -const PastDateText = styled.p` - font-size: 3.2vw; - font-weight: 700; -`; - -const PastPriceText = styled.p` - font-size: 3.7vw; - font-weight: 700; - margin: 2vh 0 2vh 0; - color: ${(props) => props.color}; -`; - -const TermText = styled.p` - font-size: 1.6vw; - color: lightgray; -`; - -// 하단 컴포넌트 ------------- - -const NextPage = styled.div` - position: absolute; - left: 50%; - bottom: 15%; - transform: translate(-50%, 0); - width: fit-content; - color: black; - text-align: center; - font-size: x-large; - font-weight: 700; - display: flex; - flex-direction: column; - @media (hover: hover) { - &:hover { - transform: translate(-50%, 10px); - transition-duration: 0.7s; - transition-delay: 0s; +import { BlueColor, RedColor } from '../../constants'; + +const S = { + Container: styled.div` + position: relative; + height: 90vh; + width: 80%; + margin: 0 auto; + padding-top: 13vh; + `, + + PriceBox: styled.div` + height: 60vh; + `, + + // 현재 가격 + CurrentPrice: styled.div` + text-align: center; + margin-bottom: 14vh; + `, + + CurrentPriceInfo: styled.div` + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 2vh; + padding: 0 1.5vw; + `, + + CurrentPriceTitle: styled.div` + font-size: 2vw; + font-weight: 700; + `, + + CurrentPriceText: styled.div` + font-size: 10.5vw; + font-weight: 700; + color: #43841f; + `, + + // 최대가, 최저가 + PastPrice: styled.div` + display: flex; + justify-content: space-between; + `, + + PastDateText: styled.p` + font-size: 3.2vw; + font-weight: 700; + `, + + PastPriceText: styled.p` + font-size: 3.7vw; + font-weight: 700; + margin: 2vh 0 2vh 0; + color: ${(props) => props.color}; + `, + + TermText: styled.p` + font-size: 1.6vw; + color: lightgray; + `, + + // 하단 컴포넌트 ------------- + + NextPage: styled.div` + position: absolute; + left: 50%; + bottom: 15%; + transform: translate(-50%, 0); + width: fit-content; + color: black; + text-align: center; + font-size: x-large; + font-weight: 700; + display: flex; + flex-direction: column; + @media (hover: hover) { + &:hover { + transform: translate(-50%, 10px); + transition-duration: 0.7s; + transition-delay: 0s; + } + } + `, + + NextPageArrowImgBox: styled.div` + margin-right: 15px; + animation: slideArrow 1.7s linear infinite; + padding-right: 20px; + @keyframes slideArrow { + from { + opacity: 1; + transform: translateY(-20px); + } + to { + opacity: 0; + transform: translateY(0); + } } - } -`; - -const NextPageArrowImgBox = styled.div` - margin-right: 15px; - animation: slideArrow 1.7s linear infinite; - padding-right: 20px; - @keyframes slideArrow { - from { - opacity: 1; - transform: translateY(-20px); + `, + + NextPageArrowImg: styled.img` + border-style: none; + background-color: transparent; + position: absolute; + width: 3.5vh; + cursor: pointer; + filter: opacity(0.25) drop-shadow(0 0 0 gray); + + &.arrow1 { + margin-top: 15px; + opacity: 0.6; } - to { - opacity: 0; - transform: translateY(0); + &.arrow2 { + margin-top: 30px; + opacity: 0.8; } - } -`; - -const NextPageArrowImg = styled.img` - border-style: none; - background-color: transparent; - position: absolute; - width: 3.5vh; - cursor: pointer; - filter: opacity(0.25) drop-shadow(0 0 0 gray); - - &.arrow1 { - margin-top: 15px; - opacity: 0.6; - } - &.arrow2 { - margin-top: 30px; - opacity: 0.8; - } - transition-duration: 0.7s; -`; - -const Lowest = styled.div``; -const Highest = styled.div``; + transition-duration: 0.7s; + `, + + Lowest: styled.div``, + Highest: styled.div``, +}; function Price() { // 전역상태관리 @@ -171,63 +173,65 @@ function Price() { }; return ( - - - - - - {coinCurrentPrice?.label} 현재 가격 - + + + + + + {coinCurrentPrice?.label} 현재 가격 + {coinCurrentPrice ? new Date(coinCurrentPrice?.lastUpdated).toLocaleString() : ''} - - + + - {coinCurrentPrice?.price?.won?.toLocaleString()}원 - + + {coinCurrentPrice?.price?.won?.toLocaleString()}원 + + - - - - + + + + {coinPrice ? dateToString(new Date(coinPrice?.minPrice?.atMillis)) : ''}에 살걸.. - + - + {coinPrice?.minPrice.won?.toLocaleString()}원 - + - + {monthAgo} ~ {today} 간 최저가 - - + + - - - + + + {coinPrice ? dateToString(new Date(coinPrice?.maxPrice?.atMillis)) : ''}에 팔걸.. - + - + {coinPrice?.maxPrice?.won?.toLocaleString()}원 - + - + {monthAgo} ~ {today} 간 최고가 - - + + - - - - + + + +

행복회로 가동하기

- - - - - + + + + + - + ); } diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index 6b5db7c..9aae30f 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -8,34 +8,38 @@ import { IProduct, IProductProps } from '../../types/coin'; import { calculationPriceAtom } from '../../atoms'; import gunPepeImg from '../../assets/images/gunPepe.svg'; import { ProductContainer } from './productContainer'; +import PepeImage from '../common/PepeImage'; -const Wrapper = styled.div``; +const S = { + Container: styled.div``, -const PepeContainer = styled.div` - display: block; - float: right; - position: -webkit-sticky; - position: sticky; - top: 0; - width: 40%; - overflow: hidden; -`; -const PepeImage = styled.img` - transform: scaleX(-1); - height: 100vh; -`; + PepeContainer: styled.div` + display: block; + float: right; + position: -webkit-sticky; + position: sticky; + top: 0; + width: 40%; + overflow: hidden; + `, + PepeImage: styled.img` + transform: scaleX(-1); + height: 100vh; + `, -const WhiteContainer = styled.div` - height: 100vh; -`; + WhiteContainer: styled.div` + height: 100vh; + `, -const GunPepe = styled.div` - height: 100vh; - text-align: center; - .gunPepe { + GunPepe: styled.div` height: 100vh; - } -`; + text-align: center; + .gunPepe { + height: 100vh; + } + `, +}; + function Product() { const calculationPrice = useRecoilValue(calculationPriceAtom); const [productProps, setProductProps] = useState([ @@ -66,14 +70,14 @@ function Product() { // setRandomProducts([]); // calculationPrice 바뀔때마다 상품 바뀌도록 }, [calculationPrice]); return ( - +
- + - + - - + + {productProps?.map((item) => ( ))} - +
- - + + + {/* gunPepe - - + */} + ); } diff --git a/src/components/product/productContainer.tsx b/src/components/product/productContainer.tsx index 003a161..b1b39d4 100644 --- a/src/components/product/productContainer.tsx +++ b/src/components/product/productContainer.tsx @@ -1,24 +1,25 @@ import styled from 'styled-components'; +import ViewportTypography from '../common/ViewportTypography'; -const Wrapper = styled.div` - position: relative; - height: 150vh; -`; +const S = { + Container: styled.div` + position: relative; + height: 150vh; + `, -const ProductText = styled.p` - position: absolute; - top: 30vh; - left: 3vw; - font-size: 3vw; - font-weight: 700; -`; -const ProductImg = styled.img` - position: absolute; - top: 40vh; - left: 12vw; - width: 28vw; -`; + ProductText: styled.p` + position: absolute; + top: 24vh; + left: 3vw; + `, + ProductImg: styled.img` + position: absolute; + top: 40vh; + left: 12vw; + width: 28vw; + `, +}; type ProductContainerProps = { productName: string; unit: string; @@ -28,12 +29,17 @@ type ProductContainerProps = { export function ProductContainer({ productName, unit, num, img }: ProductContainerProps) { return ( - - - {productName} {num} - {unit}을(를) 살 수 있었을텐데.. - - - + + + + {productName} + + + {num.toLocaleString()} + {unit}을(를) 살 수 있었을텐데.. + + + + ); } diff --git a/src/constants.ts b/src/constants.ts index 5b2cee3..e5a8835 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,2 +1,4 @@ export const GreenColor = '#43841f'; export const BlackColor = '#000000'; +export const RedColor = '#E92C2C'; +export const BlueColor = '#0085FF';