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

src/common/constants/zIndex.ts

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

src/views/MyPage/index.tsx

@@ -36,6 +36,7 @@ const StatusButton = ({ label, to, trackingEvent }: { label: string; to: string;
 
   const handlePreventMobile = (e: MouseEvent<HTMLButtonElement>) => {
     track(trackingEvent);
+    if (label === '지원상태') return;
 
     const isMobile = /Mobi/i.test(window.navigator.userAgent);
     if (isMobile) {
@@ -82,19 +83,7 @@ const MyPage = ({ part, applicationPass }: MyPageProps) => {
         <MyInfoItem label="기수" value={season} />
         <MyInfoItem label="이름" value={name} />
         <MyInfoItem label="지원파트" value={part} />
-        {NoMoreScreeningResult && NoMoreFinalResult && (
-          <MyInfoItem
-            label="지원상태"
-            value={applicationPass == null ? '제출 완료' : applicationPass ? '서류 합격' : '서류 불합격'}
-          />
-        )}
-        {!NoMoreScreeningResult && <StatusButton label="지원상태" to="/result" trackingEvent="click-my-result" />}
-        {!NoMoreFinalResult &&
-          (applicationPass ? (
-            <StatusButton label="지원상태" to="/result" trackingEvent="click-my-result" />
-          ) : (
-            <MyInfoItem label="지원상태" value="서류 불합격" />
-          ))}
+        <StatusButton label="지원상태" to="/result" trackingEvent="click-my-result" />
         {NoMoreReview ? (
           <MyInfoItem label="지원서" value="제출 완료" />
         ) : (

src/views/ResultPage/components/FinalResult.tsx

@@ -1,55 +1,95 @@
+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,
+  });
+
+  const SOPT_NAME = isMakers ? `SOPT ${soptName}` : soptName;
   return (
     <>
       {pass ? (
-        <p className={content}>
-          <span>{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}</span>
+        <p className={contentVar[DEVICE_TYPE]}>
+          <span>{`안녕하세요. ${SOPT_NAME}입니다.\n\n`}</span>
           <strong className={strongText[isMakers ? 'makers' : 'sopt']}>{`축하드립니다!`}</strong>
           <span>
             {`
-              ${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 모집에 최종 합격하셨습니다.
+              ${name}님은 ${season}기 ${SOPT_NAME} ${!isMakers ? group : ''} 신입회원 모집에 최종 합격하셨습니다.
 
               ${name}님과 함께하게 되어 진심으로 기쁩니다.
-              향후 활동은 ${soptName} 공식 노션과 카카오톡 단체 대화방, SOPT 공식 디스코드를 통해
-              운영 및 진행됩니다.
+              향후 활동은 ${SOPT_NAME} 공식 노션과 슬랙,카카오톡 단체 대화방, ${SOPT_NAME} 공식 디스코드 등을 통해 운영 및 진행됩니다.
 
-              오늘 중으로 카카오톡 단체 대화방에 초대해드릴 예정이니 참고 부탁드립니다.\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_NAME} ${season}기 합류를 진심으로 축하드립니다! 
+
+            ${SOPT_NAME} 운영진 드림
             `}
           </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_NAME}입니다.
+
+          ${SOPT_NAME}에 관심을 갖고 지원해 주셔서 감사드립니다.
 
-            지원자님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 최종 합격 소식을
-            전해드리지 못하게 되었습니다.
+          ${name}님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 합격 소식을 전해드리지 못하게 되었습니다.
 
-            한 분 한 분에게 개별적인 피드백을 드리기는 어렵겠으나 저희 SOPT에 지원하셨던
-            경험이 한 사람의 IT 창업인으로서 멋진 역할을 해나가시는 데 큰 도움이 되기를 바랍니다.
+          비록 이번 ${season}기 ${soptName}에 모시지 못하게 되었으나, ${soptName}에 지원하시고자 쓰인 소중한 시간과 노력이 지원자님께서 IT 창업인으로서 멋진 역할을 해나가시는 데 작게나마 도움이 되는 경험이 되시길 바랍니다.
+
+          ${SOPT_NAME}에 귀한 시간을 내어주셔서 다시 한 번 깊이 감사드립니다 :)
+          향후에 더 좋은 인연으로 뵙기를 기다리겠습니다.
+          감사합니다. 
+
+          ${SOPT_NAME} 운영진 드림
           `}
         </p>
       )}
@@ -58,6 +98,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
 };
 
 const FinalResult = () => {
+  const DEVICE_TYPE = useDevice();
   const { finalResult, finalResultIsLoading } = useGetFinalResult();
   const {
     recruitingInfo: { isMakers },
@@ -76,11 +117,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 +138,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';
 
@@ -11,9 +12,10 @@ import {
   bottomImg,
   bottomSvg,
   container,
-  content,
-  contentWrapper,
+  contentVar,
+  contentWrapperVar,
   link,
+  scrollBottomGradVar,
   strongText,
 } from './style.css';
 import IconMakersLogo from '../assets/IconMakersLogo';
@@ -22,17 +24,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 +35,71 @@ 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,
   });
 
+  const SOPT_NAME = isMakers ? `SOPT ${soptName}` : soptName;
   return (
     <>
       {pass ? (
-        <p className={content}>
-          <span>{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}</span>
+        <p className={contentVar[DEVICE_TYPE]}>
+          <span>{`안녕하세요. ${SOPT_NAME} 입니다.\n\n`}</span>
           <strong className={strongText[isMakers ? 'makers' : 'sopt']}>{`축하드립니다!`}</strong>
           <span>
             {`
-              서류 검토 결과, ${name}님은 면접 대상자로 선정되셨습니다.
+              서류 검토 결과, ${name}님은 인터뷰 대상자로 선정되셨습니다.
+
+              ${season}기 ${SOPT_NAME} 인터뷰는 ${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_NAME} 운영진 드림
             `}
           </span>
-          <span>{`다시 한 번 진심으로 축하드리며, 면접에서 뵙도록 하겠습니다. :)`}</span>
         </p>
       ) : (
-        <p className={content}>
-          {`안녕하세요. ${soptName}입니다.
-
-            ${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 서류 모집에 불합격하셨습니다.
+        <p className={contentVar[DEVICE_TYPE]}>
+          {`안녕하세요, ${SOPT_NAME}입니다.
+
+          ${SOPT_NAME}에 관심을 갖고 지원해 주셔서 감사드립니다.
+
+          ${name}님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 합격 소식을 전해드리지 못하게 되었습니다.
 
-            지원자님의 뛰어난 역량과 잠재력에도 불구하고 안타깝게도 귀하의 합격 소식을
-            전해드리지 못하게 되었습니다.
+          비록 이번 ${season}기 ${soptName}에 모시지 못하게 되었으나, ${soptName}에 지원하시고자 쓰인 소중한 시간과 노력이 지원자님께서 IT 창업인으로서 멋진 역할을 해나가시는 데 작게나마 도움이 되는 경험이 되시길 바랍니다.
 
-            한 분 한 분에게 개별적인 피드백을 드리기는 어렵겠으나 저희 SOPT에 지원하셨던
-            경험이 한 사람의 IT 창업인으로서 멋진 역할을 해나가시는 데 큰 도움이 되기를 바랍니다.
+          ${SOPT_NAME}에 귀한 시간을 내어주셔서 다시 한 번 깊이 감사드립니다 :)
+          향후에 더 좋은 인연으로 뵙기를 기다리겠습니다.
+          감사합니다. 
+
+          ${SOPT_NAME} 운영진 드림
           `}
         </p>
       )}
@@ -97,6 +108,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
 };
 
 const ScreeningResult = () => {
+  const DEVICE_TYPE = useDevice();
   const {
     recruitingInfo: { isMakers },
     handleSaveRecruitingInfo,
@@ -117,11 +129,13 @@ const ScreeningResult = () => {
 
   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 ? (
@@ -136,6 +150,7 @@ const ScreeningResult = () => {
           )}
         </>
       )}
+      <div className={scrollBottomGradVar[DEVICE_TYPE]} />
     </section>
   );
 };