[Design] Mobile ver. - 결과 페이지 반응형

src/common/constants/zIndex.ts

@@ -5,4 +5,5 @@ export const Z_INDEX = {
  applyCategory: 99,
  applyHeader: 99,
  resultContent: 2,
+ resultGrad: 3,
 };

src/views/ResultPage/components/FinalResult.tsx

@@ -1,55 +1,94 @@
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
 import { useContext, useEffect } from 'react';
 
 import Title from '@components/Title';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import BigLoading from 'views/loadings/BigLoding';
 
-import { bottomAnimation, bottomImg, bottomSvg, container, content, contentWrapper, strongText } from './style.css';
+import {
+ bottomAnimation,
+ bottomImg,
+ bottomSvg,
+ container,
+ contentVar,
+ contentWrapperVar,
+ link,
+ scrollBottomGradVar,
+ 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';
 
 const Content = ({ pass }: { pass?: boolean }) => {
+ const DEVICE_TYPE = useDevice();
  const {
- recruitingInfo: { name, soptName, season, group, isMakers },
+ recruitingInfo: { name, soptName, season, group, isMakers, finalPassConfirmStart },
  } = useContext(RecruitingInfoContext);
 
  if (!name) return;
 
+ const finalDate = new Date(finalPassConfirmStart || '');
+ const formattedFinalPassConfirmStart = format(finalDate, 'M월 dd일 EEEE', {
+ locale: ko,
+ });
+
  return (
  <>
  {pass ? (
- <p className={content}>
- <span>{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}</span>
+ <p className={contentVar[DEVICE_TYPE]}>
+ <span>{`안녕하세요. SOPT ${soptName} 입니다.\n\n`}</span>
  <strong className={strongText[isMakers ? 'makers' : 'sopt']}>{`축하드립니다!`}</strong>
  <span>
  {`
- ${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 모집에 최종 합격하셨습니다.
+ ${name}님은 ${season}기 SOPT ${soptName} ${!isMakers ? group : ''} 신입회원 모집에 최종 합격하셨습니다.
 
  ${name}님과 함께하게 되어 진심으로 기쁩니다.
- 향후 활동은 ${soptName} 공식 노션과 카카오톡 단체 대화방, SOPT 공식 디스코드를 통해
- 운영 및 진행됩니다.
+ 향후 활동은 SOPT ${soptName} 공식 노션과 슬랙,카카오톡 단체 대화방, SOPT ${soptName} 공식 디스코드 등을 통해 운영 및 진행됩니다.
 
- 오늘 중으로 카카오톡 단체 대화방에 초대해드릴 예정이니 참고 부탁드립니다.\n
+ 아래 구글 폼으로 각 워크스페이스 이메일 계정 및 필수 정보를 제출해주시길 바랍니다.
+ ( 제출 마감 : ${formattedFinalPassConfirmStart} 오후 11:59 )
+ `}
+ </span>
+ <span>{`( 구글폼 : `}</span>
+ <a
+ className={link}
+ href={`https://${import.meta.env.VITE_FINAL_PASS_LINK}`}
+ target="_blank"
+ rel="noreferrer noopener">
+ {`https://${DEVICE_TYPE !== 'DESK' && '\n'}${import.meta.env.VITE_FINAL_PASS_LINK}`}
+ </a>
+ <span>{` )\n`}</span>
+ <br />
+ <span>
+ {`
+ 제출해주신 구글 폼을 통해 순차적으로 워크스페이스 초대해드릴 예정이며
+ 금일 중으로 카카오톡 단체 대화방에 초대해드릴 예정이니 참고 부탁드립니다. 
+
+ 다시 한 번 SOPT ${soptName} ${season}기 합류를 진심으로 축하드립니다! 
+
+ SOPT ${soptName} 운영진 드림
  `}
  </span>
- <strong
- className={
- strongText[isMakers ? 'makers' : 'sopt']
- }>{`SOPT의 ${season}번째 열정이 되신 것을 축하드립니다!`}</strong>
  </p>
  ) : (
- <p className={content}>
- {`안녕하세요. ${soptName} 입니다.
-  
-  ${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 모집에 불합격하셨습니다.
+ <p className={contentVar[DEVICE_TYPE]}>
+ {`안녕하세요, SOPT ${soptName}입니다.
+
+ SOPT makers에 관심을 갖고 지원해 주셔서 감사드립니다.
 
- 지원자님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 최종 합격 소식을
- 전해드리지 못하게 되었습니다.
+ ${name}님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 합격 소식을 전해드리지 못하게 되었습니다.
 
- 한 분 한 분에게 개별적인 피드백을 드리기는 어렵겠으나 저희 SOPT에 지원하셨던
- 경험이 한 사람의 IT 창업인으로서 멋진 역할을 해나가시는 데 큰 도움이 되기를 바랍니다.
+ 비록 이번 ${season}기 ${soptName}에 모시지 못하게 되었으나, ${soptName}에 지원하시고자 쓰인 소중한 시간과 노력이 지원자님께서 IT 창업인으로서 멋진 역할을 해나가시는 데 작게나마 도움이 되는 경험이 되시길 바랍니다.
+
+ SOPT ${soptName}에 귀한 시간을 내어주셔서 다시 한 번 깊이 감사드립니다 :)
+ 향후에 더 좋은 인연으로 뵙기를 기다리겠습니다.
+ 감사합니다. 
+
+ SOPT ${soptName} 운영진 드림
  `}
  </p>
  )}
@@ -58,6 +97,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
 };
 
 const FinalResult = () => {
+ const DEVICE_TYPE = useDevice();
  const { finalResult, finalResultIsLoading } = useGetFinalResult();
  const {
  recruitingInfo: { isMakers },
@@ -76,11 +116,13 @@ const FinalResult = () => {
 
  return (
  <section className={container}>
- <div className={contentWrapper}>
- <Title>결과 확인</Title>
- <Content pass={pass} />
+ <div style={{ overflow: 'auto', height: '100%' }}>
+ <div className={contentWrapperVar[DEVICE_TYPE]}>
+ <Title>결과 확인</Title>
+ <Content pass={pass} />
+ </div>
  </div>
- {pass && (
+ {DEVICE_TYPE !== 'MOB' && pass && (
  <>
  <div className={bottomAnimation[isMakers ? 'makers' : 'sopt']} />
  {isMakers ? (
@@ -95,6 +137,7 @@ const FinalResult = () => {
  )}
  </>
  )}
+ <div className={scrollBottomGradVar[DEVICE_TYPE]} />
  </section>
  );
 };

src/views/ResultPage/components/ScreeningResult.tsx

@@ -3,6 +3,7 @@ import { ko } from 'date-fns/locale';
 import { useContext, useEffect } from 'react';
 
 import Title from '@components/Title';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import BigLoading from 'views/loadings/BigLoding';
 
@@ -12,7 +13,7 @@ import {
  bottomSvg,
  container,
  content,
- contentWrapper,
+ contentWrapperVar,
  link,
  strongText,
 } from './style.css';
@@ -22,17 +23,9 @@ import imgSoptLogoWebp from '../assets/imgSoptLogo.webp';
 import useGetScreeningResult from '../hooks/useGetScreeningResult';
 
 const Content = ({ pass }: { pass?: boolean }) => {
+ const DEVICE_TYPE = useDevice();
  const {
- recruitingInfo: {
- name,
- soptName,
- season,
- group,
- interviewStart,
- interviewEnd,
- applicationPassConfirmStart,
- isMakers,
- },
+ recruitingInfo: { name, soptName, season, interviewStart, interviewEnd, applicationPassConfirmStart, isMakers },
  } = useContext(RecruitingInfoContext);
 
  if (!name) return;
@@ -41,54 +34,70 @@ const Content = ({ pass }: { pass?: boolean }) => {
  const applicationPassConfirmNextDay = new Date(applicationDate);
  applicationPassConfirmNextDay.setDate(applicationDate.getDate() + 1);
 
- const formattedInterviewStart = format(new Date(interviewStart || ''), 'M/dd(E)', { locale: ko });
- const formattedInterviewEnd = format(new Date(interviewEnd || ''), 'M/dd(E)', { locale: ko });
- const formattedApplicationPassConfirmStart = format(applicationDate, 'dd일 EEEE', {
+ const formattedInterviewStart = format(new Date(interviewStart || ''), 'M월 dd일', { locale: ko });
+ const formattedInterviewEnd = format(new Date(interviewEnd || ''), 'M월 dd일', { locale: ko });
+ const formattedApplicationPassConfirmStart = format(applicationDate, 'M월 dd일 EEEE', {
  locale: ko,
  });
- const formattedApplicationPassConfirmNextDay = format(new Date(applicationPassConfirmNextDay || ''), 'dd일 EEEE', {
+ const formattedApplicationPassConfirmNextDay = format(new Date(applicationPassConfirmNextDay || ''), 'M월 dd일', {
  locale: ko,
  });
 
  return (
  <>
  {pass ? (
  <p className={content}>
- <span>{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}</span>
+ <span>{`안녕하세요. SOPT ${soptName} 입니다.\n\n`}</span>
  <strong className={strongText[isMakers ? 'makers' : 'sopt']}>{`축하드립니다!`}</strong>
  <span>
  {`
- 서류 검토 결과, ${name}님은 면접 대상자로 선정되셨습니다.
+ 서류 검토 결과, ${name}님은 인터뷰 대상자로 선정되셨습니다.
+
+ ${season}기 SOPT ${soptName} 인터뷰는 ${formattedInterviewStart} ~ ${formattedInterviewEnd} 기간 중 진행될 예정입니다.
 
- ${season}기 ${soptName} ${!isMakers ? group : ''} 면접은 ${formattedInterviewStart} ~ ${formattedInterviewEnd} 양일 간 오프라인 으로 진행될 예정입니다.
- 모든 면접 대상자 분들은 아래 구글폼을 제출해주세요.
+ 원할한 면접 진행을 위해, 아래 구글 폼에 불가능한 시간대를 모두 선택해 제출 부탁드립니다.
+ ( 제출 마감 : ${formattedApplicationPassConfirmStart} 오후 8시 )
  `}
  </span>
- <a className={link} href="https://sopt.org" target="_blank" rel="noreferrer noopener">
- {import.meta.env.VITE_PASS_LINK}
+ <span>{`( 구글폼 : `}</span>
+ <a
+ className={link}
+ href={`https://${import.meta.env.VITE_SCREENING_PASS_LINK}`}
+ target="_blank"
+ rel="noreferrer noopener">
+ {`https://${DEVICE_TYPE !== 'DESK' && '\n'}${import.meta.env.VITE_SCREENING_PASS_LINK}`}
  </a>
+ <span>{` )\n`}</span>
  <br />
  <span>
  {`
- 위 구글폼은 금일 20시 정각(${formattedApplicationPassConfirmStart} 오후 8시)까지 제출해주셔야 합니다.
- 면접 안내 사항 및 폼 제출 내용을 기반으로 한 면접 시간표를 
- 내일(${formattedApplicationPassConfirmNextDay}) 오후 12시 전으로 이메일을 통해 전해드리겠습니다.
-
+ 제출해주신 폼 내용을 기반으로 확정된 면접 일정 및 면접 안내를 내일(${formattedApplicationPassConfirmNextDay}) 오후 12시 전으로 이메일을 통해 공유드리겠습니다. 
+
+ 다시 한 번 진심으로 축하드리며, 인터뷰에서 뵙겠습니다! 
+
+ 문의 사항 및 궁금한 점은 아래 연락처로 문의 부탁드립니다.
+ 정동규 : 010-8696-3713 
+ 감사합니다. 
+
+ SOPT makers 운영진 드림
  `}
  </span>
- <span>{`다시 한 번 진심으로 축하드리며, 면접에서 뵙도록 하겠습니다. :)`}</span>
  </p>
  ) : (
  <p className={content}>
- {`안녕하세요. ${soptName}입니다.
-
- ${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 서류 모집에 불합격하셨습니다.
+ {`안녕하세요, SOPT ${soptName}입니다.
+
+ SOPT makers에 관심을 갖고 지원해 주셔서 감사드립니다.
+
+ ${name}님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 합격 소식을 전해드리지 못하게 되었습니다.
 
- 지원자님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 합격 소식을
- 전해드리지 못하게 되었습니다.
+ 비록 이번 ${season}기 ${soptName}에 모시지 못하게 되었으나, ${soptName}에 지원하시고자 쓰인 소중한 시간과 노력이 지원자님께서 IT 창업인으로서 멋진 역할을 해나가시는 데 작게나마 도움이 되는 경험이 되시길 바랍니다.
 
- 한 분 한 분에게 개별적인 피드백을 드리기는 어렵겠으나 저희 SOPT에 지원하셨던
- 경험이 한 사람의 IT 창업인으로서 멋진 역할을 해나가시는 데 큰 도움이 되기를 바랍니다.
+ SOPT ${soptName}에 귀한 시간을 내어주셔서 다시 한 번 깊이 감사드립니다 :)
+ 향후에 더 좋은 인연으로 뵙기를 기다리겠습니다.
+ 감사합니다. 
+
+ SOPT ${soptName} 운영진 드림
  `}
  </p>
  )}
@@ -97,6 +106,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
 };
 
 const ScreeningResult = () => {
+ const DEVICE_TYPE = useDevice();
  const {
  recruitingInfo: { isMakers },
  handleSaveRecruitingInfo,
@@ -117,7 +127,7 @@ const ScreeningResult = () => {
 
  return (
  <section className={container}>
- <div className={contentWrapper}>
+ <div className={contentWrapperVar[DEVICE_TYPE]}>
  <Title>결과 확인</Title>
  <Content pass={pass} />
  </div>