Skip to content

Commit

Permalink
Merge pull request #262 from 100-hours-a-week/feature/lucy
Browse files Browse the repository at this point in the history 
Feature/lucy
  • Loading branch information
@yzooop
yzooop authored Oct 7, 2024
2 parents 421817d + 2d24f7e commit c84bb11
Show file tree
Hide file tree
Showing 28 changed files with 1,058 additions and 1,013 deletions.
62 changes: 62 additions & 0 deletions src/Component/Calculator/calculData.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
export const year = [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
];

export const month = [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
];

export const day = [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
];
271 changes: 87 additions & 184 deletions src/Component/Calculator/calculResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,198 +3,101 @@ import Candy from "../../img/candy.png";
import Soul from "../../img/Gukbap.png";
import Chicken from "../../img/chicken.png";
import Iphone from "../../img/iphone.png";
import styled from "styled-components";
import Skrrr from "../../img/SkerrImg.png";
import { CalculResultProps } from "../../constants/interface";
import { ValueProps } from "../../constants/interface";
import { formatPrice } from "../../util/util";

const Container = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
padding: 50px;
border-top: 2px solid rgb(0, 0, 0, 0.2);
margin-bottom: 1rem;
/* background-color: yellow; */
`;

const ResultContainer = styled.div`
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
position: relative;
`;

const DivContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
`;

const ImgStyle = styled.img`
width: 25px;
height: 25px;
`;

const SpanContainer = styled.div`
display: flex;
flex-direction: row;
gap: 3px;
font-size: 20px;
white-space: nowrap;
`;
const SpanStyle = styled.div<ValueProps>`
font-weight: bold;
color: ${(props) => (props.$isNegative ? "#615EFC" : "#FF5759")};
`;

const SkrrrBird = styled.img`
position: absolute;
top: 45px;
left: 115px;
width: 260px;
opacity: 0.5;
z-index: -1;
`;

const NeverBuySkrrrBird = styled.img`
margin-right: 5rem;
width: 460px;
opacity: 0.5;
`;

const SkrrrText = styled.div`
position: absolute;
top: 70px;
left: 270px;
z-index: 3;
color: #ff5759;
font-size: 25px;
white-space: nowrap;
`;

const NeverBuyText = styled.div`
/* position: absolute; */
top: 670px;
left: 470px;
z-index: 3;
color: #ff5759;
font-size: 25px;
white-space: nowrap;
`;

const BirdContainer = styled.div`
display: flex;
height: 400px;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
`;
import * as S from "./calculResultStyle";

const CalculResult: React.FC<CalculResultProps> = ({
price,
slave,
candy,
soul,
chicken,
iphone,
price,
slave,
candy,
soul,
chicken,
iphone,
}) => {
let userName: string = "사용자";
let userName: string = "사용자";

const userData = localStorage.getItem("user");
if (userData) {
userName = JSON.parse(userData).name;
}
const userData = localStorage.getItem("user");
if (userData) {
userName = JSON.parse(userData).name;
}

return (
<>
{price !== 0 ? (
<Container>
<SpanContainer>
<SpanStyle $isNegative={true}>{userName}</SpanStyle>
님은
<SpanStyle $isNegative={price < 0}>
{formatPrice(Math.abs(price))}
</SpanStyle>
원을{" "}
<span>
{price >= 0 ? "벌었습니다." : "잃었습니다.."}
</span>
</SpanContainer>
<ResultContainer>
<DivContainer>
<ImgStyle src={Salary} alt="" />
<SpanContainer>
2024년 최저시급 기준{" "}
<SpanStyle $isNegative={price < 0}>
{slave}
</SpanStyle>
시간
</SpanContainer>
</DivContainer>
<DivContainer>
<ImgStyle src={Candy} alt="" />
<SpanContainer>
새콤달콤{" "}
<SpanStyle $isNegative={price < 0}>
{candy}
</SpanStyle>
개
</SpanContainer>
</DivContainer>
<DivContainer>
<ImgStyle src={Soul} alt="" />
<SpanContainer>
국밥
<SpanStyle $isNegative={price < 0}>
{soul}
</SpanStyle>
그릇
</SpanContainer>
</DivContainer>
<DivContainer>
<ImgStyle src={Chicken} alt="" />
<SpanContainer>
치킨{" "}
<SpanStyle $isNegative={price < 0}>
{chicken}
</SpanStyle>
마리
</SpanContainer>
</DivContainer>
<DivContainer>
<ImgStyle src={Iphone} alt="" />
<SpanContainer>
아이폰{" "}
<SpanStyle $isNegative={price < 0}>
{iphone}
</SpanStyle>
대
</SpanContainer>
</DivContainer>
<SkrrrBird src={Skrrr} alt="" />
<SkrrrText>
{price >= 0 ? "살껄!@" : "팔껄!@"}
</SkrrrText>
</ResultContainer>
</Container>
) : (
<BirdContainer>
<NeverBuyText>
그 돈으론 1주도 사지 못했~스껄~,,,@
</NeverBuyText>
<NeverBuySkrrrBird src={Skrrr} alt="" />
</BirdContainer>
)}
</>
);
return (
<>
{price !== 0 ? (
<S.Container>
<S.SpanContainer>
<S.SpanStyle $isNegative={true}>{userName}</S.SpanStyle>
님은
<S.SpanStyle $isNegative={price < 0}>
{formatPrice(Math.abs(price))}
</S.SpanStyle>
원을 <span>{price >= 0 ? "벌었습니다." : "잃었습니다.."}</span>
</S.SpanContainer>
<S.ResultContainer>
<S.DivContainer>
<S.ImgStyle src={Salary} alt="" />
<S.SpanContainer>
2024년 최저시급 기준{" "}
<S.SpanStyle $isNegative={price < 0}>
{formatPrice(parseInt(slave))}
</S.SpanStyle>
시간
</S.SpanContainer>
</S.DivContainer>
<S.DivContainer>
<S.ImgStyle src={Candy} alt="" />
<S.SpanContainer>
새콤달콤
<S.SpanStyle $isNegative={price < 0}>
{formatPrice(parseInt(candy))}
</S.SpanStyle>
개
</S.SpanContainer>
</S.DivContainer>
<S.DivContainer>
<S.ImgStyle src={Soul} alt="" />
<S.SpanContainer>
국밥
<S.SpanStyle $isNegative={price < 0}>
{formatPrice(parseInt(soul))}
</S.SpanStyle>
그릇
</S.SpanContainer>
</S.DivContainer>
<S.DivContainer>
<S.ImgStyle src={Chicken} alt="" />
<S.SpanContainer>
치킨{" "}
<S.SpanStyle $isNegative={price < 0}>
{formatPrice(parseInt(chicken))}
</S.SpanStyle>
마리
</S.SpanContainer>
</S.DivContainer>
<S.DivContainer>
<S.ImgStyle src={Iphone} alt="" />
<S.SpanContainer>
아이폰
<S.SpanStyle $isNegative={price < 0}>
{formatPrice(parseInt(iphone))}
</S.SpanStyle>
대
</S.SpanContainer>
</S.DivContainer>
<S.SkrrrBird src={Skrrr} alt="" />
<S.SkrrrText>{price >= 0 ? "살껄!@" : "팔껄!@"}</S.SkrrrText>
</S.ResultContainer>
</S.Container>
) : (
<S.BirdContainer>
<S.NeverBuyText>그 돈으론 1주도 사지 못했~스껄~,,,@</S.NeverBuyText>
<S.NeverBuySkrrrBird src={Skrrr} alt="스껄무새 이미지" />
</S.BirdContainer>
)}
</>
);
};

export default CalculResult;
Loading

0 comments on commit c84bb11

Please sign in to comment.