diff --git a/src/views/ResultPage/assets/IconMakersLogo.tsx b/src/views/ResultPage/assets/IconMakersLogo.tsx
new file mode 100644
index 00000000..4b207ab6
--- /dev/null
+++ b/src/views/ResultPage/assets/IconMakersLogo.tsx
@@ -0,0 +1,57 @@
+const IconMakersLogo = () => {
+ return (
+
+ );
+};
+
+export default IconMakersLogo;
diff --git a/src/views/ResultPage/assets/imgMakersLogo.png b/src/views/ResultPage/assets/imgMakersLogo.png
deleted file mode 100644
index da5fe9d4..00000000
Binary files a/src/views/ResultPage/assets/imgMakersLogo.png and /dev/null differ
diff --git a/src/views/ResultPage/assets/imgMakersLogo.webp b/src/views/ResultPage/assets/imgMakersLogo.webp
deleted file mode 100644
index f7ef18e1..00000000
Binary files a/src/views/ResultPage/assets/imgMakersLogo.webp and /dev/null differ
diff --git a/src/views/ResultPage/components/FinalResult.tsx b/src/views/ResultPage/components/FinalResult.tsx
index 2e9b2e3f..05a70aaa 100644
--- a/src/views/ResultPage/components/FinalResult.tsx
+++ b/src/views/ResultPage/components/FinalResult.tsx
@@ -4,9 +4,8 @@ import Title from '@components/Title';
import { RecruitingInfoContext } from '@store/recruitingInfoContext';
import BigLoading from 'views/loadings/BigLoding';
-import { bottomAnimation, bottomImg, container, content, contentWrapper, strongText } from './style.css';
-import imgMakersLogo from '../assets/imgMakersLogo.png';
-import imgMakersLogoWebp from '../assets/imgMakersLogo.webp';
+import { bottomAnimation, bottomImg, bottomSvg, container, content, contentWrapper, strongText } from './style.css';
+import IconMakersLogo from '../assets/IconMakersLogo';
import imgSoptLogo from '../assets/imgSoptLogo.png';
import imgSoptLogoWebp from '../assets/imgSoptLogo.webp';
import useGetFinalResult from '../hooks/useGetFinalResult';
@@ -23,7 +22,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
{pass ? (
{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}
- {`축하드립니다!`}
+ {`축하드립니다!`}
{`
${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 모집에 최종 합격하셨습니다.
@@ -35,7 +34,10 @@ const Content = ({ pass }: { pass?: boolean }) => {
오늘 중으로 카카오톡 단체 대화방에 초대해드릴 예정이니 참고 부탁드립니다.\n
`}
- {`SOPT의 ${season}번째 열정이 되신 것을 축하드립니다!`}
+ {`SOPT의 ${season}번째 열정이 되신 것을 축하드립니다!`}
) : (
@@ -64,9 +66,6 @@ const FinalResult = () => {
const { name, pass } = finalResult?.data || {};
- const imgLogo = isMakers ? imgMakersLogo : imgSoptLogo;
- const imgLogoWebp = isMakers ? imgMakersLogoWebp : imgSoptLogoWebp;
-
useEffect(() => {
handleSaveRecruitingInfo({
name,
@@ -83,11 +82,17 @@ const FinalResult = () => {
{pass && (
<>
-
-
-
- 
-
+
+ {isMakers ? (
+
+
+
+ ) : (
+
+
+ 
+
+ )}
)}
diff --git a/src/views/ResultPage/components/ScreeningResult.tsx b/src/views/ResultPage/components/ScreeningResult.tsx
index 067a16a3..8b9c475f 100644
--- a/src/views/ResultPage/components/ScreeningResult.tsx
+++ b/src/views/ResultPage/components/ScreeningResult.tsx
@@ -6,9 +6,17 @@ import Title from '@components/Title';
import { RecruitingInfoContext } from '@store/recruitingInfoContext';
import BigLoading from 'views/loadings/BigLoding';
-import { bottomAnimation, bottomImg, container, content, contentWrapper, link, strongText } from './style.css';
-import imgMakersLogo from '../assets/imgMakersLogo.png';
-import imgMakersLogoWebp from '../assets/imgMakersLogo.webp';
+import {
+ bottomAnimation,
+ bottomImg,
+ bottomSvg,
+ container,
+ content,
+ contentWrapper,
+ link,
+ strongText,
+} from './style.css';
+import IconMakersLogo from '../assets/IconMakersLogo';
import imgSoptLogo from '../assets/imgSoptLogo.png';
import imgSoptLogoWebp from '../assets/imgSoptLogo.webp';
import useGetScreeningResult from '../hooks/useGetScreeningResult';
@@ -47,7 +55,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
{pass ? (
{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}
- {`축하드립니다!`}
+ {`축하드립니다!`}
{`
서류 검토 결과, ${name}님은 면접 대상자로 선정되셨습니다.
@@ -107,9 +115,6 @@ const ScreeningResult = () => {
if (screeningResultIsLoading) return ;
- const imgLogo = isMakers ? imgMakersLogo : imgSoptLogo;
- const imgLogoWebp = isMakers ? imgMakersLogoWebp : imgSoptLogoWebp;
-
return (
@@ -118,11 +123,17 @@ const ScreeningResult = () => {
{pass && (
<>
-
-
-
-
-
+
+ {isMakers ? (
+
+
+
+ ) : (
+
+
+
+
+ )}
)}
diff --git a/src/views/ResultPage/components/style.css.ts b/src/views/ResultPage/components/style.css.ts
index faecce45..e381b865 100644
--- a/src/views/ResultPage/components/style.css.ts
+++ b/src/views/ResultPage/components/style.css.ts
@@ -1,4 +1,5 @@
-import { keyframes, style } from '@vanilla-extract/css';
+import { colors } from '@sopt-makers/colors';
+import { keyframes, style, styleVariants } from '@vanilla-extract/css';
import { calc } from '@vanilla-extract/css-utils';
import { Z_INDEX } from '@constants/zIndex';
@@ -33,32 +34,50 @@ export const content = style({
zIndex: Z_INDEX.resultContent,
});
-export const strongText = style({
- color: theme.color.primary,
-});
-
-const animatedGradient = keyframes({
- '0%': {
- width: '40%',
- boxShadow: `0px 100px 100px 70px ${theme.color.primary}`,
+export const strongText = styleVariants({
+ sopt: {
+ color: theme.color.primary,
},
-
- '100%': {
- width: '80%',
- boxShadow: `0px 100px 100px 100px ${theme.color.primary}`,
+ makers: {
+ color: colors.secondary,
},
});
-export const bottomAnimation = style({
+const bottomAnimationBase = style({
position: 'absolute',
bottom: '-100px',
left: '50%',
transform: 'translateX(-50%)',
height: 100,
borderRadius: '100%',
- animation: `${animatedGradient} ease-in-out 3s alternate infinite`,
});
+const animatedGradient = (bgColor: string) =>
+ keyframes({
+ '0%': {
+ width: '40%',
+ boxShadow: `0px 100px 100px 70px ${bgColor}`,
+ },
+
+ '100%': {
+ width: '80%',
+ boxShadow: `0px 100px 100px 100px ${bgColor}`,
+ },
+ });
+
+export const bottomAnimation = styleVariants(
+ {
+ sopt: theme.color.primary,
+ makers: '#d8d8d8',
+ },
+ (color) => [
+ bottomAnimationBase,
+ {
+ animation: `${animatedGradient(color)} ease-in-out 3s alternate infinite`,
+ },
+ ],
+);
+
export const bottomImg = style({
position: 'absolute',
bottom: 0,
@@ -67,6 +86,14 @@ export const bottomImg = style({
// height: 556,
});
+export const bottomSvg = style({
+ position: 'absolute',
+ bottom: 0,
+ right: 0,
+ margin: '0px 130px 140px 0px',
+ width: 584,
+});
+
export const link = style({
borderBottom: '1px solid currentColor',
});