💄Design: 색상 및 텍스트 크기 적용 #35

src/components/navigation.tsx

@@ -22,7 +22,9 @@ export default function Navigation() {
           <Link href="/seminar">Seminar</Link>
           <Link href="/project">Project</Link>
           <Link href="/member">Member</Link>
-          <Link href="/recruit">Recruit</Link>
+          <Link href="/recruit" prefetch>
+            Recruit
+          </Link>
         </div>
       </div>
     </nav>

src/components/recruit/faq/RecruitFaq.tsx

@@ -4,17 +4,16 @@ import Link from 'next/link';
 
 const RecruitFaq = () => {
   return (
-    <section className="w-full px-10 py-28 flex-col justify-start items-center gap-32 inline-flex">
+    <section className="w-full py-28 flex-col justify-start items-center gap-32 inline-flex">
       <div className="w-4/5 mx-auto my-0 flex-col justify-start items-center gap-10 flex">
         <div className="self-stretch flex-col justify-start items-start flex">
           {/* title */}
           <div className="px-1 pb-10 gap-8 flex items-end">
-            <p className="text-5xl leading-[3.5rem]">
+            <p className="H3">
               Frequently
               <br />
               Asked Questions
             </p>
-            <p className="leading-7">자주 묻는 질문</p>
           </div>
           {/* body */}
 
@@ -25,8 +24,8 @@ const RecruitFaq = () => {
           </div>
         </div>
         <Link href="https://www.instagram.com/gdsc.dgu/" target="_blank">
-          <div className="w-80 py-4 bg-zinc-900 rounded justify-center items-center gap-2.5 inline-flex">
-            <div className="text-sm font-medium">문의하기</div>
+          <div className="w-80 py-4 bg-mono_900 rounded justify-center items-center gap-2.5 inline-flex">
+            <div className="Btn">문의하기</div>
           </div>
         </Link>
       </div>

src/components/recruit/faq/RecruitFaqBox.tsx

@@ -1,8 +1,8 @@
 const RecruiteFaqBox = ({ faq }: { faq: Faq }) => {
   return (
-    <div className="self-stretch p-7 bg-zinc-900 rounded flex-col justify-start items-start gap-3 flex">
-      <div className="text-2xl leading-7">{faq.question}</div>
-      <div className="leading-7">{faq.answer}</div>
+    <div className="self-stretch p-7 bg-mono_900 rounded flex-col justify-start items-start gap-3 flex">
+      <div className="H5">{faq.question}</div>
+      <div className="B1">{faq.answer}</div>
     </div>
   );
 };

src/components/recruit/header/RecruitHeader.tsx

@@ -1,6 +1,7 @@
 import BannerImg from '@/images/recruit_banner.png';
 import BannerImg2 from '@/svg/recruit_banner2.svg';
 import ChervonDownIcon from '@/svg/icons/common/chervon_down.svg';
+import Link from 'next/link';
 
 /**
  * @description
@@ -17,27 +18,31 @@ const RecruitHeader = () => {
   return (
     <header className="h-lvh flex flex-col">
       {/* Main section */}
+
       <div
         className="w-full flex-col justify-center items-center gap-2.5 inline-flex h-[35.75rem] 2xl:h-[40rem] min-h-fit mt-10"
         style={{
           backgroundImage: `url(${BannerImg.src})`,
-          backgroundSize: 'cover', // Sets the background image to cover the div
-          backgroundPosition: 'center', // Aligns the background image to the center
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
         }}
       >
-        <article className="flex flex-col items-center">
-          <BannerImg2 className="scale-75" />
+        <article className="flex flex-col items-center w-full">
+          <BannerImg2 className="scale-75 max-md:scale-50" />
           <div className="flex-col items-center flex mt-14">
-            <p className="text-center text-xs font-normal leading-[14px] tracking-wide">
-              2023/08/28 ~ 2023/09/14
-            </p>
-            <p className="border mt-8 py-2 px-28 border-solid text-zinc-500 text-sm font-medium">
-              모집 기간이 아닙니다.
+            <p className="text-center Cap tracking-wide">
+              2기 모집 기간 <br />
+              2024/08/28 ~ 2024/09/14
             </p>
+            <Link href="https://forms.gle/MGWVqDKK5zwUTjes5" target="_blank">
+              <p className="border mt-8 py-4 px-28 border-solid text-mono_500 Btn">
+                2기 모집 사전 알림 신청 하기
+              </p>
+            </Link>
           </div>
         </article>
       </div>
-      <ChervonDownIcon className="self-center " />
+      <ChervonDownIcon className="self-center" />
     </header>
   );
 };

src/components/recruit/part/RecruitPartKeyword.tsx

@@ -11,10 +11,8 @@ interface RecruitPartKeywordProps {
  */
 const RecruitPartKeyword: FC<RecruitPartKeywordProps> = ({ keyword }) => {
   return (
-    <div className="px-3 py-2 bg-zinc-700 rounded-lg border border-zinc-700 justify-center items-center gap-2.5 flex">
-      <div className="text-center text-sm font-medium leading-none">
-        {keyword}
-      </div>
+    <div className="px-3 py-2 bg-mono_700 rounded-lg border border-mono_700 justify-center items-center gap-2.5 flex">
+      <div className="text-center Btn">{keyword}</div>
     </div>
   );
 };

src/components/recruit/part/RecruitPartRow.tsx

@@ -7,12 +7,12 @@ import { RecruitPart } from '@/interfaces/recruit/recruitPart';
 
 const RecruitPartRow = ({ recruitPart }: { recruitPart: RecruitPart }) => {
   return (
-    <section className="self-stretch justify-start items-start gap-8 flex">
-      <div className=" w-96 h-60 p-8 bg-black rounded flex-col justify-start items-start gap-5 relative  overflow-hidden">
+    <section className="self-stretch justify-start  gap-8 flex max-md:flex-col">
+      <div className="p-8 bg-black rounded flex-col justify-start  gap-5 relative overflow-hidden max-md:w-full">
         {/* 배경으로 사용할 div */}
         <div className="absolute top-0 left-0 w-full h-full z-0">
           <div
-            className={`w-96 h-60 relative opacity-40 ${
+            className={`w-full h-60 relative opacity-40 ${
               recruitPart.id == 1
                 ? 'bg-[#33A852]'
                 : recruitPart.id == 2
@@ -22,8 +22,8 @@ const RecruitPartRow = ({ recruitPart }: { recruitPart: RecruitPart }) => {
           />
         </div>
         {/* 배경 위에 올라갈 내용 */}
-        <div className="relative z-10">
-          <div className="mb-10">
+        <div className="relative z-10 max-md:flex-row flex flex-col">
+          <div className="mb-10 max-md:mr-8">
             {recruitPart.id == 1 ? (
               <WebAppIcon />
             ) : recruitPart.id == 2 ? (
@@ -32,23 +32,17 @@ const RecruitPartRow = ({ recruitPart }: { recruitPart: RecruitPart }) => {
               <AiMlIcon />
             )}
           </div>
-          <div className="flex-col justify-start items-start gap-3 flex">
-            <div className="text-xl font-medium leading-7 tracking-tight">
-              {recruitPart.title}
-            </div>
-            <div className="text-sm leading-normal">
-              {recruitPart.description}
-            </div>
+          <div className="flex-col justify-start  gap-3 flex">
+            <div className="H6">{recruitPart.title}</div>
+            <div className="B2">{recruitPart.description}</div>
           </div>
         </div>
       </div>
 
-      <div className="grow p-8 bg-zinc-900 rounded flex-col justify-start items-start gap-6 flex">
-        <div className="self-stretch flex-col justify-start items-start gap-2 flex">
-          <div className=" text-xl font-medium  leading-7 tracking-tight">
-            Preferred
-          </div>
-          <div className="leading-7">
+      <div className="grow p-4 bg-mono_900 rounded flex-col justify-start  gap-6 flex">
+        <div className="self-stretch flex-col justify-start  gap-2 flex">
+          <div className="H6">Preferred</div>
+          <div className="B1">
             {recruitPart.preferred[0]}
             <br />
             {recruitPart.preferred[1]}
@@ -57,8 +51,8 @@ const RecruitPartRow = ({ recruitPart }: { recruitPart: RecruitPart }) => {
           </div>
         </div>
 
-        <div className="self-stretch justify-start items-start gap-2.5 inline-flex">
-          <div className="justify-start items-start gap-3 flex">
+        <div className="self-stretch justify-start  gap-2.5 inline-flex">
+          <div className="justify-start  gap-3 flex">
             {recruitPart.keywords.map((keyword, index) => (
               <RecruitPartKeyword key={index} keyword={keyword} />
             ))}

src/components/recruit/recommand/RecruitRecommand.tsx

@@ -11,29 +11,31 @@
  */
 const RecruitRecommand = () => {
   return (
-    <section className="w-full py-16 bg-[#1C1D1F] flex-col items-center justify-center gap-10 flex">
+    <section className="w-full py-16 bg-mono_900 flex-col items-center justify-center gap-10 flex">
       {/* title */}
-      <div className="justify-center gap-2 inline-flex text-2xl font-normal leading-7">
-        <p>같이해서 가치를 만들고 세상에 스며들다</p>
-      </div>
-      {/* body */}
-      <div className="flex-col gap-5 flex leading-7">
-        <div className="tracking-tight">
-          <p>
-            혼자만의 성장이 아닌, 언제든 사람들과 만나 서로의 이야기를
-            공유하고자 커뮤니티를 만들었습니다.
-          </p>
+      <div className="max-md:w-4/5 flex-col items-center justify-center gap-10 flex">
+        <div className="justify-center gap-2 inline-flex H5 max-md:H6">
+          <p>같이해서 가치를 만들고 세상에 스며들다</p>
         </div>
-        <div className="text-center">
-          <p>
-            공유를 통해 같이 성장하며, 사회의 문제점을 해결하기 위한 공간을
-            지향합니다.
-            <br />
-            우리는 단순한 개발실력 향상과 프로젝트 진행이 아닌,
-            <br />
-            모두가 함께 열정적으로 지식을 공유하며 더 많은 사람들과 함께
-            성장하고자 합니다.
-          </p>
+        {/* body */}
+        <div className="flex-col gap-5 flex">
+          <div className="tracking-tight">
+            <p className="Sh1">
+              혼자만의 성장이 아닌, 언제든 사람들과 만나 서로의 이야기를
+              공유하고자 커뮤니티를 만들었습니다.
+            </p>
+          </div>
+          <div className="text-center B1">
+            <p>
+              공유를 통해 같이 성장하며, 사회의 문제점을 해결하기 위한 공간을
+              지향합니다.
+              <br />
+              우리는 단순한 개발실력 향상과 프로젝트 진행이 아닌,
+              <br />
+              모두가 함께 열정적으로 지식을 공유하며 더 많은 사람들과 함께
+              성장하고자 합니다.
+            </p>
+          </div>
         </div>
       </div>
     </section>

src/components/recruit/schedule/RecruitSchedule.tsx

@@ -3,14 +3,15 @@ import { RECRUIT_SCHEDULE } from '@/constants/recruit/recruitSchedule';
 
 const RecruitSchedule = () => {
   return (
+    // <section className="grid  desktop:grid-cols-4 tablet:grid-cols-2  grid-cols-1 gap-x-8 gap-y-8">
     <section className="w-full bg-[#F7F8FA] flex-col justify-start items-center gap-2.5 inline-flex">
-      <div className="w-4/5 px-10 py-40 bg-gray-50">
+      <div className="w-4/5 py-40 bg-gray-50">
         <div className="flex-col items-center gap-2.5 flex">
           <div className="self-stretch flex-col flex">
             <div className="px-1 pb-10">
-              <p className="text-black text-5xl leading-10">Schedule</p>
+              <p className="text-mono_black H3">Schedule</p>
             </div>
-            <section className="gap-5 inline-flex">
+            <section className="gap-5 inline-flex desktop:flex-row tablet:flex-col max-sm:flex-col ">
               <RecruitScheduleBox schedules={RECRUIT_SCHEDULE['document']} />
               <RecruitScheduleBox
                 schedules={RECRUIT_SCHEDULE['firstPresentation']}

src/components/recruit/schedule/RecruitScheduleBox.tsx

@@ -7,13 +7,11 @@ const RecruitScheduleBox = ({
 }) => {
   return (
     <div className="grow shrink basis-0 px-5 py-8 bg-gray-200 rounded flex-col justify-start items-center gap-1 inline-flex">
-      <div className="text-black text-xl font-medium  leading-7 tracking-tight">
-        {schedules.title}
-      </div>
+      <div className="text-mono_black H6">{schedules.title}</div>
       <div className="mt-2 w-20 flex-col justify-center items-center flex grow">
-        <div className="text-black leading-7">{schedules.startDate}</div>
+        <div className="text-mono_black B1">{schedules.startDate}</div>
         {schedules.endDate && (
-          <div className="text-black leading-7">~{schedules.endDate}</div>
+          <div className="text-mono_black B1">~{schedules.endDate}</div>
         )}
       </div>
     </div>

src/components/recruit/target/RecruitTarget.tsx

@@ -4,17 +4,17 @@ import RecruitTargetRowText from '@/components/recruit/target/RecruitTargetRowTe
 
 const RecruitTarget = () => {
   return (
-    <section className="w-4/5 flex flex-col  mx-auto my-32 ">
-      <section className="flex justify-between">
-        <div className="pb-8 flex-col justify-start ">
+    <section className="w-4/5 flex flex-col  mx-auto my-32">
+      <section className="flex justify-between max-md:flex-col">
+        <div className="pb-8 flex-col justify-start">
           {/* 모집 타겟div */}
           <div className="flex flex-col gap-6 self-start justify-start">
-            <p className="text-5xl leading-[3.5rem]">
+            <p className="H3">
               Recruitment
               <br />
               Target
             </p>
-            <p className="leading-7">
+            <p className="B1">
               아래 3가지 모두 해당 되는 분이라면, 누구든 지원 가능해요!
               <br />
               이런 분들과 함께 하고 싶어요!
@@ -24,9 +24,7 @@ const RecruitTarget = () => {
         {/* 지원 자격 div */}
         <div className="flex-col justify-start items-start inline-flex gap-7">
           <div className="justify-center items-center gap-2.5 inline-flex">
-            <div className="text-xl font-medium leading-7 tracking-tight">
-              지원 자격
-            </div>
+            <div className="H6">지원 자격</div>
           </div>
           <div className="leading-7 flex-col justify-start items-start gap-2 flex ">
             <RecruitTargetRowText
@@ -43,7 +41,7 @@ const RecruitTarget = () => {
             />
             <RecruitTargetRowText
               title="열정"
-              content="개발에 열정이 있으며, 팀활동에 적극적으로 참여할 수 있는 사람"
+              content="개발 열정과 활동에 적극적으로 참여할 수 있는 사람"
             />
           </div>
         </div>

src/components/recruit/target/RecruitTargetRowText.tsx

@@ -20,8 +20,8 @@ interface Props {
 const RecruitTargetRowText: FC<Props> = ({ title, content }) => {
   return (
     <div className="inline-flex">
-      <p className="tracking-tight pr-3">{title}</p>
-      <p className="">{content}</p>
+      <p className="Sh1 pr-3">{title}</p>
+      <p className="B1">{content}</p>
     </div>
   );
 };