[FIX] 공홈과 어드민 연동 QA fix

src/lib/types/admin.ts

@@ -33,6 +33,7 @@ export interface GetHomepageResponse {
   };
   partIntroduction: PartIntroType[];
   latestNews: LatestNewsType[];
+  recruitSchedule: RecruitScheduleType[];
 }
 
 export interface MemberType {
@@ -71,6 +72,11 @@ export interface GetAboutpageResponse {
   coreValue: CoreValueType[];
   partCurriculum: PartCurriculumType[];
   member: MemberType[];
+  activitiesRecords: {
+    activitiesMemberCount: number;
+    projectCounts: number;
+    studyCounts: number;
+  };
 }
 
 export interface PartInfoType {

src/views/AboutPage/components/Member/Section/index.tsx

@@ -7,9 +7,10 @@ import * as St from './style';
 type MemberSectionProps = {
   generation: number;
   members: MemberType[];
+  name: string;
 };
 
-const MemberSection = ({ generation, members }: MemberSectionProps) => {
+const MemberSection = ({ generation, members, name: soptName }: MemberSectionProps) => {
   return (
     <Flex
       dir="column"
@@ -20,7 +21,7 @@ const MemberSection = ({ generation, members }: MemberSectionProps) => {
       <SectionTop
         engTitle="Executives"
         korTitle={`${generation}기 임원진`}
-        description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요."
+        description={`200명의 활동 회원들이 열정을 외칠 수 있도록, ${generation}기 ${soptName}를 이끄는 임원진들이에요.`}
       />
       <Flex
         dir="column"

src/views/AboutPage/components/Record/List/index.tsx

@@ -2,30 +2,30 @@ import RecordItem from '../Item';
 import * as St from './style';
 
 const RecordList = ({
-  records,
+  activitiesRecords: { activitiesMemberCount, projectCounts, studyCounts },
 }: {
-  records: {
-    memberCount: number;
-    projectCount: number;
-    studyCount: number;
+  activitiesRecords: {
+    activitiesMemberCount: number;
+    projectCounts: number;
+    studyCounts: number;
   };
 }) => {
   return (
     <St.Wrapper>
       <RecordItem
         type="block"
         title="활동 멤버"
-        countNumber={records?.memberCount}
+        countNumber={activitiesMemberCount}
         countString="명"
       />
       <RecordItem
         type="link"
         title="프로젝트"
-        countNumber={records?.projectCount !== 0 ? records?.projectCount : undefined}
-        countString={records?.projectCount !== 0 ? '개' : '진행중'}
+        countNumber={projectCounts !== 0 ? projectCounts : undefined}
+        countString={projectCounts !== 0 ? '개' : '진행중'}
         href="/project"
       />
-      <RecordItem type="block" title="스터디" countNumber={records?.studyCount} countString="개" />
+      <RecordItem type="block" title="스터디" countNumber={studyCounts} countString="개" />
     </St.Wrapper>
   );
 };

src/views/AboutPage/components/Record/Section/index.tsx

@@ -1,15 +1,15 @@
-import { AboutInfoType } from '@src/lib/types/about';
+import { GetAboutpageResponse } from '@src/lib/types/admin';
 import SectionTop from '../../@common/SectionTop';
 import RecordList from '../List';
 import * as St from './style';
 
-type RecordSectionProps = Pick<AboutInfoType, 'generation' | 'records'>;
+type RecordSectionProps = Pick<GetAboutpageResponse, 'generation' | 'activitiesRecords'>;
 
-const RecordSection = ({ generation, records }: RecordSectionProps) => {
+const RecordSection = ({ generation, activitiesRecords }: RecordSectionProps) => {
   return (
     <St.Wrapper>
       <SectionTop engTitle="Activity Records" korTitle={`${generation}기 활동 레코드`} />
-      <RecordList records={records} />
+      <RecordList activitiesRecords={activitiesRecords} />
     </St.Wrapper>
   );
 };

src/views/AboutPage/index.tsx

@@ -41,8 +41,15 @@ const AboutPage = () => {
             }))}
           />
           <CurriculumSection curriculums={adminData.partCurriculum} />
-          <MemberSection members={adminData.member} generation={adminData.generation} />
-          {/* <RecordSection generation={adminData.generation} records={adminData.records} /> */}
+          <MemberSection
+            members={adminData.member}
+            generation={adminData.generation}
+            name={adminData.name}
+          />
+          <RecordSection
+            generation={adminData.generation}
+            activitiesRecords={adminData.activitiesRecords}
+          />
         </Root>
       </BrandingColorContext.Provider>
     </PageLayout>

src/views/MainPage/components/Banner/RecruitButton/index.tsx

@@ -1,7 +1,10 @@
 import { PropsWithChildren, useState } from 'react';
-import { BannerColor } from '..';
 import * as S from './style';
 
+interface BannerColor {
+  mainColor: string;
+  highColor: string;
+}
 export default function RecruitButton({
   children,
   mainColor,

src/views/MainPage/components/Banner/index.tsx

@@ -1,16 +1,13 @@
 import imgMainPageBanner from '@src/assets/images/img_mainBanner.png';
-import { checkIsTimeInRange } from '@src/lib/utils/date';
 import RecruitButton from './RecruitButton';
 import * as S from './style';
 
-export interface BannerColor {
+interface BannerProps {
   mainColor: string;
   highColor: string;
+  ctaText: string;
 }
-export default function Banner({ mainColor, highColor }: BannerColor) {
-  // TODO: API 필드 추가된 후에 RecruitPage처럼 바뀌어야 함
-  const isValid = checkIsTimeInRange('2024-09-08 10:00:00', '2024-09-13 18:00:00');
-
+export default function Banner({ mainColor, highColor, ctaText }: BannerProps) {
   const onScrollMoveDown = () => {
     const element = document.getElementById('nextContainer');
     if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -24,7 +21,8 @@ export default function Banner({ mainColor, highColor }: BannerColor) {
             <S.Title>함께라서 외칠 수 있는 열정</S.Title>
             <S.Title>오직 이곳 SOPT에서만.</S.Title>
             <RecruitButton mainColor={mainColor} highColor={highColor}>
-              {isValid ? '36기 YB 지원하기 ' : '모집 알림 신청하기 '}&gt;{' '}
+              {ctaText}
+              &gt;
             </RecruitButton>
           </S.Content>
           <S.DownScrollIcon onClick={onScrollMoveDown} />

src/views/MainPage/components/BottomLayout/index.tsx

@@ -20,12 +20,21 @@ export type RefHandler = {
 };
 
 interface BottomLayoutProps {
+  generation: number;
   partIntroduction: PartIntroType[];
   latestNews: LatestNewsType[];
   mainColor: string;
   highColor: string;
+  ctaText: string;
 }
-function BottomLayout({ partIntroduction, latestNews, mainColor, highColor }: BottomLayoutProps) {
+function BottomLayout({
+  generation,
+  partIntroduction,
+  latestNews,
+  mainColor,
+  highColor,
+  ctaText,
+}: BottomLayoutProps) {
   const activity = useInView();
   const part = useInView();
   const team = useInView();
@@ -71,7 +80,12 @@ function BottomLayout({ partIntroduction, latestNews, mainColor, highColor }: Bo
       <div ref={targetRef} />
       <motion.div style={{ backgroundColor: wrapperBackground }}>
         <RecentNews latestNews={latestNews} />
-        <RecruitMessage mainColor={mainColor} highColor={highColor} />
+        <RecruitMessage
+          generation={generation}
+          mainColor={mainColor}
+          highColor={highColor}
+          ctaText={ctaText}
+        />
       </motion.div>
     </>
   );

src/views/MainPage/components/RecruitMessage/index.tsx

@@ -1,27 +1,33 @@
 import { useIsMobile } from '@src/hooks/useDevice';
-import { checkIsTimeInRange } from '@src/lib/utils/date';
 import RecruitButton from '../Banner/RecruitButton';
 import * as S from './style';
 
 interface RecruitMessageProp {
+  generation: number;
   mainColor: string;
   highColor: string;
+  ctaText: string;
 }
-export default function RecruitMessage({ mainColor, highColor }: RecruitMessageProp) {
+export default function RecruitMessage({
+  generation,
+  mainColor,
+  highColor,
+  ctaText,
+}: RecruitMessageProp) {
   const isMobileSize = useIsMobile('48rem');
-  // TODO: API 필드 추가된 후에 RecruitPage처럼 바뀌어야 함
-  const isValid = checkIsTimeInRange('2024-09-08 10:00:00', '2024-09-13 18:00:00'); // 모집 여부
 
   return (
     <S.Background>
-      <S.Title>솝트의 36번째{isMobileSize ? <br /> : ' '}열정이 되어주세요!</S.Title>
-      {!isValid && (
+      <S.Title>
+        솝트의 {generation}번째{isMobileSize ? <br /> : ' '}열정이 되어주세요!
+      </S.Title>
+      {ctaText === '모집 알림 신청하기 ' && (
         <S.Description>
           아직 모집기간이 아니예요.{isMobileSize && <br />}알림 신청을 하시면, 봄에 찾아갈게요!
         </S.Description>
       )}
       <RecruitButton mainColor={mainColor} highColor={highColor}>
-        {isValid ? '36기 YB 지원하기 ' : '모집 알림 신청하기 '}&gt;{' '}
+        {ctaText}&gt;
       </RecruitButton>
     </S.Background>
   );

src/views/MainPage/components/TopBanner/index.tsx

@@ -5,8 +5,13 @@ import { useIsMobile } from '@src/hooks/useDevice';
 import useGetVisitor from '../../hooks/useGetVisitor';
 import * as S from './style';
 
-export default function TopBanner() {
-  const TARGET_DATE = new Date('2024-09-13 18:00:00');
+interface TopBannerProps {
+  targetTime?: string;
+  generation: number;
+}
+
+export default function TopBanner({ targetTime, generation }: TopBannerProps) {
+  const TARGET_DATE = targetTime ? new Date(targetTime) : new Date();
   const isMobile = useIsMobile();
   const CHANGE_POSITION = isMobile ? 495 : 605;
   const { data } = useGetVisitor(); // 방문자 조회
@@ -30,7 +35,7 @@ export default function TopBanner() {
     <S.Container href="/recruit" isKeyColor={isKeyColor}>
       <S.Wrapper>
         <div>
-          <S.Title>솝트의 36번째 열정이 되어주세요!</S.Title>
+          <S.Title>솝트의 {generation}번째 열정이 되어주세요!</S.Title>
         </div>
         <S.Description>
           <S.Timer>

src/views/MainPage/index.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import { remoteAdminAPI } from '@src/lib/api/remote/admin';
 import { GetHomepageResponse } from '@src/lib/types/admin';
@@ -13,36 +13,63 @@ import Introduce from './components/Introduce';
 import ScrollInteractiveLogo from './components/ScrollInteractiveLogo';
 
 function MainPage() {
-  // TODO: API 필드 추가된 후에 RecruitPage처럼 바뀌어야 함
-  const isValid = checkIsTimeInRange('2024-09-08 10:00:00', '2024-09-13 18:00:00');
+  const { data: adminData } = useQuery<GetHomepageResponse>({
+    queryKey: ['homepage'],
+    queryFn: remoteAdminAPI.getHomepage,
+  });
+
+  const isOBRecruiting = checkIsTimeInRange(
+    adminData?.recruitSchedule[0].schedule.applicationStartTime ?? '',
+    adminData?.recruitSchedule[0].schedule.applicationEndTime ?? '',
+  );
+  const isYBRecruiting = checkIsTimeInRange(
+    adminData?.recruitSchedule[1].schedule.applicationStartTime ?? '',
+    adminData?.recruitSchedule[1].schedule.applicationEndTime ?? '',
+  );
+  const isRecruiting = isOBRecruiting || isYBRecruiting;
+
+  const ctaText = useMemo(() => {
+    if (adminData?.generation === undefined) return '모집 알림 신청하기 ';
+    if (isOBRecruiting) return `${adminData.generation}기 OB 지원하기 `;
+    if (isYBRecruiting) return `${adminData.generation}기 YB 지원하기 `;
+    return '모집 알림 신청하기 ';
+  }, [isOBRecruiting, isYBRecruiting, adminData]);
 
   const postVisiter = usePostVisitor();
 
   useEffect(() => {
+    if (!isRecruiting) return;
     postVisiter();
-  }, [postVisiter]);
-
-  const { data: adminData } = useQuery<GetHomepageResponse>({
-    queryKey: ['homepage'],
-    queryFn: remoteAdminAPI.getHomepage,
-  });
+  }, [isRecruiting, postVisiter]);
 
   return (
     <PageLayout>
-      {!isValid && <TopBanner />}
+      {isRecruiting && (
+        <TopBanner
+          targetTime={
+            isYBRecruiting
+              ? adminData?.recruitSchedule[1].schedule.applicationEndTime
+              : adminData?.recruitSchedule[0].schedule.applicationEndTime
+          }
+          generation={adminData?.generation ?? 0}
+        />
+      )}
       <Banner
         mainColor={'#' + adminData?.brandingColor.main ?? ''}
         highColor={'#' + adminData?.brandingColor.high ?? ''}
+        ctaText={ctaText}
       />
       <Introduce />
       <IntroSection />
       <ScrollInteractiveLogo />
       {adminData && (
         <BottomLayout
+          generation={adminData?.generation ?? 0}
           partIntroduction={adminData.partIntroduction}
           latestNews={adminData.latestNews}
           mainColor={'#' + adminData?.brandingColor.main ?? ''}
           highColor={'#' + adminData?.brandingColor.high ?? ''}
+          ctaText={ctaText}
         />
       )}
     </PageLayout>

src/views/RecruitPage/components/BottomLogo/index.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import { logoAndSoptDark } from '@src/assets/mainLogo';
 
 const BottomLogo = () => {
-  return <ScaledImage src={logoAndSoptDark} alt="35기 솝트 로고" />;
+  return <ScaledImage src={logoAndSoptDark} alt="솝트 로고" />;
 };
 
 const ScaledImage = styled(Image)`

src/views/RecruitPage/components/ChapterInfo/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import Flex from '@src/components/common/Flex';
-import { PartInfoType, PartType } from '@src/lib/types/admin';
+import { PartInfoType } from '@src/lib/types/admin';
 import { Part } from '@src/lib/types/universal';
 import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
 import { parseStringToPart } from '@src/lib/utils/parseStringToPart';
@@ -9,7 +9,7 @@ import TabBar from '../common/Tabs';
 import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/style';
 import * as S from './style';
 
-const ChapterInfo = ({ info }: { info: PartInfoType[] }) => {
+const ChapterInfo = ({ info, generation }: { info: PartInfoType[]; generation: number }) => {
   const { main, point } = useContext(BrandingColorContext);
   const [selectedTab, setSelectedTab] = useState<Part>(Part.PLAN);
   const parsedPart = parsePartToKorean(selectedTab);
@@ -24,7 +24,7 @@ const ChapterInfo = ({ info }: { info: PartInfoType[] }) => {
       <SectionTitleWrapper>
         <SectionTitleTranslate mainColor={'#' + main}>Positions</SectionTitleTranslate>
         <S.SectionWrapper>
-          <SectionTitle>SOPT 35기는</SectionTitle>
+          <SectionTitle>SOPT {generation}기는</SectionTitle>
           <SectionTitle>총 6개의 파트로 이루어져 있어요.</SectionTitle>
         </S.SectionWrapper>
       </SectionTitleWrapper>

src/views/RecruitPage/index.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 import { useQuery } from '@tanstack/react-query';
 import { Suspense, createContext, lazy } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import { remoteAdminAPI } from '@src/lib/api/remote/admin';
 import { GetRecruitpageResponse } from '@src/lib/types/admin';
 import { checkIsTimeInRange } from '@src/lib/utils/date';
 import ActivityReview from './components/ActivityReview';
 import ApplySection from './components/ApplySection';
 import BottomLogo from './components/BottomLogo';
 import ChapterInfo from './components/ChapterInfo';
 import Contact from './components/Contact';
 import FaqInfo from './components/FAQ';
@@ -54,7 +54,7 @@
           )}
           <ContentWrapper>
             <RecruiteeInfo />
-            <ChapterInfo info={adminData.recruitPartCurriculum} />
+            <ChapterInfo info={adminData.recruitPartCurriculum} generation={adminData.generation} />
             <Schedule info={adminData.recruitSchedule[isOBRecruiting ? 0 : 1]} />
             <Suspense>
               <FaqInfo info={adminData.recruitQuestion} />