setPreview(theme.id)}
>
-
+
{theme.image && (
)}
diff --git a/src/component/Create/getThemes.tsx b/src/component/Create/getThemes.tsx
index 9208087c..2787d454 100644
--- a/src/component/Create/getThemes.tsx
+++ b/src/component/Create/getThemes.tsx
@@ -9,6 +9,12 @@ interface Theme {
export const getThemes = (...themelist: string[]): ThemeArray[] => {
const allThemes: Record
= {
+ spring: {
+ name: '봄',
+ image: '/create/springFlower.svg',
+ bgStyle: 'bg-strcat-spring',
+ preview: '/preview/spring.png',
+ },
sul: {
name: '설날',
image: '/create/sulHat.svg',
diff --git a/src/component/Personal/BottomAnimationImage.tsx b/src/component/Personal/BottomAnimationImage.tsx
index 6eafec78..6331eb53 100644
--- a/src/component/Personal/BottomAnimationImage.tsx
+++ b/src/component/Personal/BottomAnimationImage.tsx
@@ -13,9 +13,9 @@ export default function BottomAnimationImage({
diff --git a/src/component/Personal/SakuraAnimation.tsx b/src/component/Personal/SakuraAnimation.tsx
new file mode 100644
index 00000000..ddc9aa9e
--- /dev/null
+++ b/src/component/Personal/SakuraAnimation.tsx
@@ -0,0 +1,66 @@
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
+
+const SakuraFlakes = ({
+ style,
+ animation,
+}: {
+ style: CSSProperties;
+ animation: string;
+}) => {
+ /* 꽃잎 만들기. */
+ return (
+
+ );
+};
+
+const random = (num: number) => {
+ return Math.floor(Math.random() * num);
+};
+
+const makeSakuraFlakes = () => {
+ // 50개의 꽃잎을 만들어서 배열에 담아서 반환
+ const arr = Array.from({ length: 100 });
+
+ return arr.map((_, i) => {
+ const animationDelay = `${random(16000)}ms`;
+ // 0초-40초 랜덤 딜레이
+ const size = `${random(10) + 5}px`;
+ // 5-15px 랜덤 사이즈
+ const startPosition = `${random(100)}%`;
+ // 0-100% 랜덤 시작 위치
+ const style = {
+ animationDelay: animationDelay,
+ left: startPosition,
+ width: size,
+ height: size,
+ };
+ const animation = i < 50 ? 'animate-sakura1' : 'animate-sakura2';
+ return
;
+ });
+};
+
+export default function SakuraAnimation({ themeName }: { themeName: string }) {
+ const [loaded, setLoaded] = useState(false);
+ useEffect(() => {
+ setLoaded(true);
+ }, [setLoaded]);
+ const sakuraFlakes = useMemo(() => makeSakuraFlakes(), []);
+
+ if (themeName !== 'spring') return;
+ return (
+ loaded && (
+
+ )
+ );
+}
diff --git a/src/types/boards.ts b/src/types/boards.ts
index 1ab20b94..d8a5c52f 100644
--- a/src/types/boards.ts
+++ b/src/types/boards.ts
@@ -3,6 +3,6 @@ import { content } from './content';
export interface board {
id: string;
title: string;
- theme: 'night' | 'peach' | 'lilac' | 'chris' | 'mas' | 'sul';
+ theme: 'night' | 'peach' | 'lilac' | 'chris' | 'mas' | 'sul' | 'spring';
contents: content[];
}
diff --git a/src/types/theme.ts b/src/types/theme.ts
index 01a4659b..b000d8a0 100644
--- a/src/types/theme.ts
+++ b/src/types/theme.ts
@@ -6,6 +6,7 @@ import {
nightBg,
noneBg,
peachBg,
+ springBg,
sulBg,
} from '@/utils/theme/bgTheme';
import {
@@ -15,6 +16,7 @@ import {
nightText,
noneText,
peachText,
+ springText,
sulText,
textThemeState,
} from '@/utils/theme/textTheme';
@@ -61,6 +63,12 @@ export const sul: themeState = {
bgTheme: sulBg,
};
+export const spring: themeState = {
+ name: 'spring',
+ textTheme: springText,
+ bgTheme: springBg,
+};
+
export const noneTheme: themeState = {
name: '',
textTheme: noneText,
@@ -74,4 +82,5 @@ export const themeObj = {
chris: chris,
mas: mas,
sul: sul,
+ spring: spring,
};
diff --git a/src/utils/theme/bgTheme.ts b/src/utils/theme/bgTheme.ts
index 171fcba4..4e8f7eed 100644
--- a/src/utils/theme/bgTheme.ts
+++ b/src/utils/theme/bgTheme.ts
@@ -40,6 +40,12 @@ export const sulBg: bgThemeState = {
addRightCTA: 'bg-strcat-sul',
};
+export const springBg: bgThemeState = {
+ highlight: 'bg-strcat-spring',
+ rightCTA: 'bg-strcat-spring',
+ addRightCTA: 'bg-strcat-spring',
+};
+
export const noneBg: bgThemeState = {
highlight: '',
rightCTA: '',
diff --git a/src/utils/theme/textTheme.ts b/src/utils/theme/textTheme.ts
index c9103f91..4215e5cf 100644
--- a/src/utils/theme/textTheme.ts
+++ b/src/utils/theme/textTheme.ts
@@ -47,6 +47,13 @@ export const sulText: textThemeState = {
addRightCTA: 'text-default-black',
};
+export const springText: textThemeState = {
+ writer: 'text-strcat-spring',
+ highlight: 'text-default-black',
+ rightCTA: 'text-default-black',
+ addRightCTA: 'text-default-black',
+};
+
export const noneText: textThemeState = {
writer: '',
highlight: '',
diff --git a/tailwind.config.js b/tailwind.config.js
index 986ab833..e45167ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,6 +39,7 @@ module.exports = {
'strcat-chris': '#246F50',
'strcat-mas': '#DE6565',
'strcat-sul': '#82CBFF',
+ 'strcat-spring': '#FFBACF',
},
keyframes: {
slide: {
@@ -76,8 +77,44 @@ module.exports = {
from: { backgroundColor: 'rgba(0,0,0,0.8)' },
to: { backgroundColor: 'rgba(0,0,0,0)' },
},
+ sakuraSway1: {
+ '0%': { transform: 'rotate(-5deg))' },
+ '40%': { transform: 'rotate(28deg)' },
+ '100%': { transform: 'rotate(3deg)' },
+ },
+ sakuraSway2: {
+ '0%': { transform: 'rotate(10deg))' },
+ '40%': { transform: 'rotate(43deg)' },
+ '100%': { transform: 'rotate(15deg)' },
+ },
+ sakuraFalling1: {
+ '0%': {
+ opacity: 0,
+ top: '-10%',
+ transform: 'translateX(0) rotate(0deg)',
+ },
+ '10%': { opacity: 1 },
+ '100%': {
+ opacity: 1,
+ top: '100%',
+ transform: 'translateX(210px) rotateX(180deg) rotateY(360deg)',
+ },
+ },
+ sakuraFalling2: {
+ '0%': { opacity: 0, top: '-10%', transform: 'translateX(0)' },
+ '10%': { opacity: 1 },
+ '100%': {
+ opacity: 1,
+ top: '100%',
+ transform: 'translateX(-210px) rotateX(180deg) rotateY(360deg)',
+ },
+ },
},
animation: {
+ sakura1:
+ 'sakuraSway1 2s linear 0s infinite, sakuraFalling1 10s 0s linear infinite',
+ sakura2:
+ 'sakuraSway2 2s linear 0s infinite, sakuraFalling2 10s 0s linear infinite',
slide: 'slide 0.7s linear',
fadeIn: 'fadeIn 2s ease-in-out',
textFadeIn: 'textFadeIn 0.35s ease-in-out',