refactor: 지원 관련 페이지 레이아웃 수정

* feat: recruit 관련 페이지 footer 숨김

* refactor: recruit 관련 페이지 레이아웃 수정 (DASOMFE-33)

* refactor: hook 분리

* refactor: 일정 조회 로직 수정

Author: limtjdghks

src/App.tsx

@@ -51,6 +51,18 @@ function App() {
 function AppContent() {
   const location = useLocation()
   const hideHeaderFooter = ['/login'] // 헤더와 푸터를 숨길 페이지
+  const hideFooterOnly = [
+    '/recruit',
+    '/recruitinfo',
+    '/recruit/submit',
+    '/recruit/result',
+    '/recruit/check',
+    '/recruit/check/final',
+    '/recruit/meeting',
+    '/recruit/meeting/submit',
+    '/somkathon',
+    '/somkathon/submit',
+  ] // 푸터만 숨길 페이지
 
   return (
     <>
@@ -152,7 +164,8 @@ function AppContent() {
           }
         />
       </Routes>
-      {!hideHeaderFooter.includes(location.pathname) && <Footer />}
+      {!hideHeaderFooter.includes(location.pathname) &&
+        !hideFooterOnly.includes(location.pathname) && <Footer />}
     </>
   )
 }

src/components/UI/RecruitUI.tsx

@@ -1,49 +1,39 @@
 import React, { useEffect, useState } from 'react'
-import apiClient from '../../utils/apiClient'
-import { RecruitHeaderProps } from './types'
+import { formatKoreanDate, useRecruitSchedule } from '../../pages/recruit/useRecruitSchedule'
+import { RecruitScheduleData } from '@/pages/recruit/Recruittype'
 
 interface RecruitUIProps {
-  name: string
+  name?: string
+}
+
+interface RecruitHeaderProps {
+  title: string
 }
 
 export const RecruitHeader: React.FC<RecruitHeaderProps> = ({ title }) => {
   return (
-    <div className='w-auto bg-[#00B493] text-white font-pretendardBold text-[13px] p-1 pl-2 mx-2 mt-16'>
+    <div className='w-auto bg-[#00B493] text-white font-pretendardBold text-[13px] md:text-base p-1 pl-2 mx-2 mt-4'>
       {title}
     </div>
   )
 }
 
 export const RecruitUI: React.FC = () => {
-  const [recruitmentData, setRecruitmentData] = useState<Record<
-    string,
-    string
-  > | null>(null)
+  const { loadSchedule } = useRecruitSchedule()
+  const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(null)
 
   useEffect(() => {
     const fetchRecruit = async () => {
       try {
-        const res = await apiClient.get('/recruit')
-        const data = res.data
-        if (Array.isArray(data)) {
-          const formattedData: Record<string, string> = {}
-          data.forEach((item: any) => {
-            formattedData[item.key] = item.value
-          })
-          setRecruitmentData(formattedData)
-        } else {
-          console.error('예상하지 못한 응답 형식:', data)
-        }
+        const { scheduleData } = await loadSchedule()
+        setScheduleData(scheduleData)
       } catch (error) {
-        console.error('API 요청 오류:', error)
+        console.error('모집 기간 확인 중 오류 발생:', error)
       }
     }
     fetchRecruit()
-  }, [])
+  }, [loadSchedule])
 
-  {
-    /* 데이터 형식 번경 기능  */
-  }
   const formatDate = (isoString: string) => {
     const date = new Date(isoString)
     const options: Intl.DateTimeFormatOptions = {
@@ -55,35 +45,34 @@ export const RecruitUI: React.FC = () => {
   }
 
   return (
-    <div className='text-white font-pretendardRegular flex flex-col text-[12px] items-start w-auto shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2'>
+    <div className='text-white font-pretendardRegular flex flex-col text-[12px] md:text-sm items-start w-auto shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2'>
       <p className='pl-2 pt-2'>
         <span className='font-pretendardBold'>다솜</span>에서 개발자로서 성장해
         갈 <span className='font-pretendardBold'>34기 멤버분들</span>을
         찾습니다!
       </p>
       <div className='mt-2 pl-2'>
         <p className='text-mainColor font-pretendardSemiBold'>📅 모집 일정 :</p>
-        {recruitmentData ? (
+        {scheduleData ? (
           <p>
-            모집 폼 제출 :{' '}
-            {formatDate(recruitmentData.RECRUITMENT_PERIOD_START)} ~{' '}
-            {formatDate(recruitmentData.RECRUITMENT_PERIOD_END)}
+            모집 폼 제출 : {formatDate(scheduleData.recruitmentPeriodStart)} ~{' '}
+            {formatDate(scheduleData.recruitmentPeriodEnd)}
           </p>
         ) : (
           <p>모집 일정 불러오는 중...</p>
         )}
-        {recruitmentData ? (
+        {scheduleData ? (
           <p>
-            대면 면접 : {formatDate(recruitmentData.INTERVIEW_PERIOD_START)} ~{' '}
-            {formatDate(recruitmentData.INTERVIEW_PERIOD_END)}
+            대면 면접 : {formatDate(scheduleData.interviewPeriodStart)} ~{' '}
+            {formatDate(scheduleData.interviewPeriodEnd)}
           </p>
         ) : (
           <p>대면 일정 불러오는 중...</p>
         )}
-        {recruitmentData ? (
+        {scheduleData ? (
           <p>
             최종 합격자 발표 :{' '}
-            {formatDate(recruitmentData.INTERVIEW_PASS_ANNOUNCEMENT)}
+            {formatDate(scheduleData.interviewPassAnnouncement)}
           </p>
         ) : (
           <p>최종 합격 일정 불러오는 중...</p>
@@ -119,8 +108,23 @@ export const RecruitUI: React.FC = () => {
 }
 
 export const RecruitUI_SUB: React.FC<RecruitUIProps> = ({ name }) => {
+  const { loadSchedule } = useRecruitSchedule()
+  const [scheduleData, setScheduleData] = useState<RecruitScheduleData | null>(null)
+
+  useEffect(() => {
+    const fetchRecruit = async () => {
+      try {
+        const { scheduleData } = await loadSchedule()
+        setScheduleData(scheduleData)
+      } catch (error) {
+        console.error('모집 기간 확인 중 오류 발생:', error)
+      }
+    }
+    fetchRecruit()
+  }, [loadSchedule])
+
   return (
-    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] '>
+    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] md:text-sm'>
       <p className='pt-3 '>
         {`${name}님 안녕하세요 컴퓨터공학부 전공동아리 다솜입니다.
         먼저 다솜 34기에 많은 관심을 갖고 지원해 주셔서 감사드리며, `}
@@ -133,19 +137,17 @@ export const RecruitUI_SUB: React.FC<RecruitUIProps> = ({ name }) => {
       </p>
 
       <p>
-        {`다음 전형인 대면 인터뷰에서 뵐 수 있게 되어 기쁜 마음을 담아
-        안내드립니다.`}
+        {'다음 전형인 대면 인터뷰에서 뵐 수 있게 되어 기쁜 마음을 담아 안내드립니다.'}
       </p>
 
-      <p className='mb-3'>{`대면 인터뷰는 3/12(수)~14(금) 중에 진행 될 예정이며 편한 시간대로
-        폼을 작성해주시면 감사하겠습니다.`}</p>
+      <p className='mb-3'>대면 인터뷰는 {formatKoreanDate(scheduleData?.interviewPeriodStart)} ~ {formatKoreanDate(scheduleData?.interviewPeriodEnd)} 중에 진행 될 예정이며 편한 시간대로 폼을 작성해주시면 감사하겠습니다.</p>
     </div>
   )
 }
 
 export const RecruitUI_SUB2: React.FC<RecruitUIProps> = ({ name }) => {
   return (
-    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] '>
+    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] md:text-sm'>
       <p className='pt-3 '>
         {`${name}님 안녕하세요 컴퓨터공학부 전공동아리 다솜입니다.
         먼저 다솜 34기에 많은 관심을 갖고 지원해 주셔서 감사드리며, `}
@@ -165,7 +167,7 @@ export const RecruitUI_SUB2: React.FC<RecruitUIProps> = ({ name }) => {
 
 export const RecruitUI_FINAL: React.FC<RecruitUIProps> = ({ name }) => {
   return (
-    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2  text-[12px] '>
+    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2  text-[12px] md:text-sm'>
       <p className='pt-3 font-pretendardBold '>
         안녕하세요 {`${name}`}님, <br /> 다솜 34기에
         <span className='text-mainColor font-pretendardBold'> 최종합격</span>{' '}
@@ -189,7 +191,7 @@ export const RecruitUI_FINAL: React.FC<RecruitUIProps> = ({ name }) => {
 
 export const RecruitUI_FINAL2: React.FC<RecruitUIProps> = ({ name }) => {
   return (
-    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] '>
+    <div className='whitespace-pre-line text-white flex flex-col items-start w-auto h-[auto] shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2 font-pretendardRegular pl-2 text-[12px] md:text-sm'>
       <p className='pt-3 '>
         {`${name}님 안녕하세요. 컴퓨터공학부 전공동아리 다솜입니다.
         먼저, 다솜 34기에 관심을 갖고 지원해 주시고 소중한 시간을 내어
@@ -208,16 +210,15 @@ export const RecruitUI_FINAL2: React.FC<RecruitUIProps> = ({ name }) => {
 
       <p className='mb-3'>
         {`다시 한번 지원해 주셔서 감사드리며,
-        앞으로의 모든 도전을 응원하겠습니다.
-        수고 많으셨습니다.`}
+        앞으로의 모든 도전을 응원하겠습니다. 수고 많으셨습니다.`}
       </p>
     </div>
   )
 }
 
 export const SomRecruitUI: React.FC = () => {
   return (
-    <div className='text-white font-pretendardRegular flex flex-col text-[12px] items-start w-auto shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2'>
+    <div className='text-white font-pretendardRegular flex flex-col text-[12px] md:text-sm items-start w-auto shadow-[0px_2px_3px_rgba(255,255,255,0.2)] bg-#17171B] gap-2 mx-2'>
       <p className='pl-2 pt-2'>
         <span className='font-pretendardBold'>솜커톤</span>에서 멋진 프로젝트를
         만들어 주실 학우 여러분들을 모집합니다!

src/components/UI/Recruit_Button.tsx

@@ -12,7 +12,7 @@ export const Button: React.FC<ButtonProps> = ({
     <div className='w-full max-w-[395px] mt-20 mb-20 flex justify-center '>
       <button
         type='submit'
-        className={`bg-[#00B493] max-w-[395px] h-[30px]  text-white font-pretendardBold px-4 text-[12px] transition-all ${!disabled ? 'hover:bg-[#00937A] active:scale-95' : null}  ${className}`}
+        className={`bg-[#00B493] max-w-[395px] text-white font-pretendardBold px-4 md:px-6 md:py-2 text-[12px] md:text-base transition-all ${!disabled ? 'hover:bg-[#00937A] active:scale-95' : null}  ${className}`}
         onClick={onClick}
         disabled={disabled}
       >

src/components/UI/Recruit_InfoBanner.tsx

@@ -6,7 +6,7 @@ export const Recruit_InfoBanner: React.FC<Recruit_InfoBannerProps> = ({
   message,
 }) => {
   return (
-    <div className='w-auto  p-2 mt-3 text-white text-center text-[12px]'>
+    <div className='w-auto  p-2 mt-3 text-white text-center text-[12px] md:text-base'>
       <div className='w-auto bg-[#00B493] p-1'>
         <p className='whitespace-pre-line font-pretendardRegular'>{message}</p>
       </div>

src/components/UI/Recruit_InputField.tsx

@@ -26,11 +26,11 @@ export const InputField: React.FC<InputFieldProps> = ({
   }
 
   const containerStyles =
-    'mb-4 p-3 shadow-[0px_2px_3px_rgba(255,255,255,0.2)] text-white text-[12px]'
+    'mb-4 p-3 shadow-[0px_2px_3px_rgba(255,255,255,0.2)] text-white text-[12px] md:text-base w-full font-pretendardRegular'
   const baseInputStyles =
-    'w-full bg-mainBlack border-b border-white p-2 focus:outline-none text-[10px]'
+    'w-full bg-mainBlack border-b border-white p-2 focus:outline-none text-[10px] md:text-sm font-pretendardRegular'
   const inputStyles =
-    'w-4 h-4 bg-mainBlack border border-white focus:ring-white border-2 rounded-[3px] appearance-none checked:bg-white checked:border-white'
+    'w-4 h-4 bg-mainBlack border border-white focus:ring-white border-2 rounded-[3px] appearance-none checked:bg-white checked:border-white font-pretendardRegular'
 
   return (
     <div className={containerStyles}>

src/components/layout/MobileLayout.tsx

@@ -10,11 +10,10 @@ const MobileLayout: React.FC<Props> = ({ children }) => {
 
   return (
     <div
-      className='mx-auto bg-mainBlack overflow-auto no-scrollbar'
+      className='mx-auto bg-mainBlack overflow-auto no-scrollbar min-w-[395px]'
       style={{
-        width: width > 480 ? '395px' : '100%', // PC에서는 고정, 모바일에서는 꽉 차게
-        height: '100vh',
-        overflowY: 'auto',
+        width: width > 480 ? '40%' : '100%', // PC에서는 고정, 모바일에서는 꽉 차게
+        minHeight: 'calc(100vh - 56px)', // viewport 높이 - header 높이(56px)만 제외 (footer는 recruit 페이지에서 없음)
       }}
     >
       {children}