Skip to content

Commit

Permalink
feat: match style to design file
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinho-choi123
jinho-choi123 committed Oct 27, 2023
1 parent a724893 commit c2a35ef
Show file tree
Hide file tree
Showing 20 changed files with 100 additions and 31 deletions.
6 changes: 4 additions & 2 deletions src/components/Background/Background.animation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { AnimationDuration } from "@/config";

export const backgroundFadeIn = {
to: {
opacity: 1,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};

Expand All @@ -12,6 +14,6 @@ export const backgroundFadeOut = {
opacity: 0,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};
5 changes: 4 additions & 1 deletion src/components/Background/Background.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type BackgroundProps, ZaboState } from "@/types";
import { animated, useSpring } from "@react-spring/web";
import { animated, useSpring, easings } from "@react-spring/web";
import { useEffect } from "react";
import { backgroundFadeIn, backgroundFadeOut } from "./Background.animation";
import style from "./Background.module.scss";
Expand All @@ -11,6 +11,9 @@ export const Background = (backgroundProps: BackgroundProps) => {
from: {
opacity: 0,
},
config: {
easings: easings.easeInOutSine,
},
}));

useEffect(() => {
Expand Down
3 changes: 2 additions & 1 deletion src/components/Board/Board.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Info } from "@/components/Info";
import { Background } from "@/components/Background";
import { Qr } from "@/components/Qr";
import { Logo } from "@/components/Logo";
import { TransitionInterval } from "@/config";
import style from "./Board.module.scss";

export const Board = () => {
Expand All @@ -28,7 +29,7 @@ export const Board = () => {
} else {
dispatch(fetchZaboThunk());
}
}, 3000);
}, TransitionInterval);

return (
<main className={style.board}>
Expand Down
6 changes: 4 additions & 2 deletions src/components/Info/Info.animation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { AnimationDuration } from "@/config";

export const infoFadeIn = {
to: {
opacity: 1,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};

Expand All @@ -12,6 +14,6 @@ export const infoFadeOut = {
opacity: 0,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};
23 changes: 19 additions & 4 deletions src/components/Info/Info.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,34 @@
.text {
display: flex;
flex-direction: column;
gap: 28px;
color: $white;
position: absolute;
left: 100px;
top: 300px;
bottom: 861px;
left: 216px;


h1 {
font-size: 140px;
font-weight: 900;
margin-bottom: 28px;
}

p {
.description {
font-size: 80px;
font-weight: 400;
opacity: 0.6;
margin-bottom: 126px;

}

.date {
display: flex;
flex-direction: row;
align-items: center;
gap: 69px;
p {
font-size: 138px;
font-weight: 900;
}
}
}
8 changes: 6 additions & 2 deletions src/components/Info/Info.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { type InfoProps, ZaboState } from "@/types";
import { useSpring, animated } from "@react-spring/web";
import { useEffect } from "react";
import eventBtn from "@/public/eventBtn.svg";
import { infoFadeIn, infoFadeOut } from "./Info.animation";
import style from "./Info.module.scss";

Expand All @@ -25,8 +26,11 @@ export const Info = (infoProps: InfoProps) => {
return (
<animated.div className={style.text} style={{ ...springs }}>
<h1>{title}</h1>
<p>{description}</p>
<p>{date}</p>
<p className={style.description}>{description}</p>
<div className={style.date}>
<img src={eventBtn} alt="행사" />
<p>{date}</p>
</div>
</animated.div>
);
};
7 changes: 7 additions & 0 deletions src/components/Logo/Logo.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

.logo {
display: inline-block;
position: absolute;
top: 132px;
left: 232px;
}
9 changes: 8 additions & 1 deletion src/components/Logo/Logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
export const Logo = () => <div>Zabo Boards Beta</div>;
import LogoSVG from "@/public/logo.svg";
import style from "./Logo.module.scss";

export const Logo = () => (
<div className={style.logo}>
<img src={LogoSVG} alt="Logo" />
</div>
);
6 changes: 4 additions & 2 deletions src/components/Qr/Qr.animation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { AnimationDuration } from "@/config";

export const qrFadeIn = {
to: {
opacity: 1,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};

Expand All @@ -12,6 +14,6 @@ export const qrFadeOut = {
opacity: 0,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};
4 changes: 2 additions & 2 deletions src/components/Qr/Qr.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
gap: 50px;

position: absolute;
left: 100px;
top: 1000px;
left: 197.26px;
bottom: 113.7px;

p{
color: #F9F9F9;
Expand Down
8 changes: 5 additions & 3 deletions src/components/Zabo/Zabo.animation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { AnimationDuration } from "@/config";

export const zaboMoveToBefore = {
to: {
x: 3145,
opacity: 1,
},
config: {
duration: 1800,
duration: AnimationDuration,
},
};

Expand All @@ -14,7 +16,7 @@ export const zaboMoveToCurrent = {
opacity: 1,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};

Expand All @@ -24,6 +26,6 @@ export const zaboFadeOut = {
x: 1731,
},
config: {
duration: 1500,
duration: AnimationDuration,
},
};
2 changes: 2 additions & 0 deletions src/config/animation.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const AnimationDuration = 3200;
export const TransitionInterval = 10000;
1 change: 1 addition & 0 deletions src/config/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./animation";
4 changes: 4 additions & 0 deletions src/public/eventBtn.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/public/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/public/registrationBtn.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions src/redux/zabos/fetchZaboThunk.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ZaboState } from "@/types";
import { pushZabos } from "./zaboSlice";

export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
await fetch("http://localhost:5175");
await fetch("http://localhost:5173");

const currentDate = new Date();
const timestamp = currentDate.getTime();
Expand All @@ -13,7 +13,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
{
title: "33333333333",
description: "설명",
date: "date",
date: "08.03",
qrUrl: "https://zabo.sparcs.org/s/86f104",
imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
timestamp + 10
Expand All @@ -23,7 +23,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
{
title: "444444444444",
description: "다음자보설명",
date: "다음date",
date: "08.03",
qrUrl: "https://zabo.sparcs.org/s/86f104",
imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
timestamp + 22
Expand All @@ -33,7 +33,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
{
title: "555555555555",
description: "다음자보설명",
date: "다음date",
date: "08.03",
qrUrl: "https://zabo.sparcs.org/s/17e13c",
imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
timestamp + 33
Expand All @@ -43,7 +43,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
{
title: "666666",
description: "다음자보설명",
date: "다음date",
date: "08.03",
qrUrl: "https://zabo.sparcs.org/s/17e13c",
imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
timestamp + 44
Expand All @@ -53,7 +53,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
{
title: "777777777",
description: "다음자보설명",
date: "다음date",
date: "08.03",
qrUrl: "https://zabo.sparcs.org/s/17e13c",
imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
timestamp + 55
Expand All @@ -63,7 +63,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
{
title: "888888",
description: "다음자보설명",
date: "다음date",
date: "08.03",
qrUrl: "https://zabo.sparcs.org/s/17e13c",
imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
timestamp + 66
Expand Down
4 changes: 2 additions & 2 deletions src/redux/zabos/zaboSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const initialState: ZaboListState = {
{
title: "1111111111",
description: "Z111111111",
date: "SOON",
date: "08.03",
imageUrl:
"https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=1sdf23tg",
qrUrl: "https://zabo.sparcs.org/s/86f104",
Expand All @@ -20,7 +20,7 @@ const initialState: ZaboListState = {
{
title: "2222222222",
description: "Z2222222",
date: "SOON",
date: "08.03",
imageUrl:
"https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=1wef3gfwe",
qrUrl: "https://zabo.sparcs.org/s/86f104",
Expand Down
2 changes: 1 addition & 1 deletion src/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
$white: #FFFFFF;
$white: #F9F9F9;
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"useDefineForClassFields": true,
"baseUrl": "src",
"paths": {
"@/*": ["*"]
"@/*": ["*"],
},
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false, //do not allow import of js files
Expand Down

0 comments on commit c2a35ef

Please sign in to comment.