feat: MVC 추가

src/components/Intro/SectionIntro.tsx

@@ -1,6 +1,6 @@
 interface Props {
   title: string;
-  description: string;
+  description?: string;
   linerColor: string;
   textColor: string;
 }
@@ -24,15 +24,16 @@ function SectionIntro({ title, description, linerColor, textColor }: Props) {
       <h2 className="mb-[10px] mt-10 font-jost text-[36px] font-medium tracking-[.01em] xs:mt-[15px] xs:text-[20px] sm:text-[24px] md:text-[32px] xl:font-semibold xxl:font-semibold">
         {title}
       </h2>
-      {description.split('<br />').map((des) => (
-        <p
-          key={des}
-          className={`flex justify-center text-center font-apple-neo text-[22px] font-normal leading-relaxed xs:text-[13px] sm:w-[330px] sm:text-[14px] md:w-[450px] md:text-[18px] ${textColorVariants[textColor]}`}
-        >
-          {des}
-          <br />
-        </p>
-      ))}
+      {description &&
+        description.split('<br />').map((des) => (
+          <p
+            key={des}
+            className={`flex justify-center text-center font-apple-neo text-[22px] font-normal leading-relaxed xs:text-[13px] sm:w-[330px] sm:text-[14px] md:w-[450px] md:text-[18px] ${textColorVariants[textColor]}`}
+          >
+            {des}
+            <br />
+          </p>
+        ))}
     </div>
   );
 }

src/containers/landing/MVC/SectionContainer.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+interface Props {
+  title: string;
+  children: ReactNode;
+}
+
+function SectionContainer({ title, children }: Props) {
+  return (
+    <div className="flex flex-1 flex-col gap-7">
+      <div className="relative">
+        <div className="absolute bottom-0.5 h-[20px] w-full bg-gradient-to-l from-gradient_color1-0 to-gradient_color2-0 opacity-50 xs:bottom-1.5" />
+        <h3 className="h4 xs:body4 relative z-10 h-9 w-full text-center">
+          {title}
+        </h3>
+      </div>
+      <div className="text-gray1-0">{children}</div>
+    </div>
+  );
+}
+
+export default SectionContainer;

src/containers/landing/MVC/hook.ts

@@ -0,0 +1,49 @@
+export default function useMVCDetail() {
+  const coreValueItems = [
+    {
+      title: '핵심가치 1 : 당신의 손으로 숭실대를 직접 바꿔가세요.',
+      description:
+        '당신의 역량을 마음껏, 그러나 책임감을 가지고 펼쳐보세요.\n오너십을 가지고 당신의 유어슈를, 숭실대 캠퍼스 라이프를 스스로 바꿔나가세요.',
+    },
+    {
+      title: "핵심가치 2 : '왜'라는 질문과 항상 함께합니다.",
+      description:
+        '근본적인 질문을 끊임없이 던져보세요.\n목적이 확실할 때, 신속 정확한 목표 달성이 가능합니다.',
+    },
+    {
+      title:
+        '핵심가치 3 : 개인의 강점을 살려 협업하고, 팀의 위력을 발휘하세요.',
+      description:
+        '서로의 강점을 적극적으로 활용하세요.\n다양성은 시너지를 내고 더 강력한 One Team을 만듭니다.',
+    },
+    {
+      title: '핵심가치 4 : 프로로 가는 길(Road to Pro)에 집중합니다.',
+      description:
+        '주도적으로 학습하며 성장의 기반을 마련하세요.\n자신만의 전문성을 키워가는 과정을 즐기며,\n현재 상태에 안주하기보다는 스스로의 한계를 뛰어넘어 보세요.',
+    },
+    {
+      title: '핵심가치 5 : 실패를 두려워하지 마세요.',
+      description:
+        '안되는 이유 10가지보다 되는 이유 1가지에 집중하세요. 일단 실행해보세요.\n실패에서 배우고, 더 넓은 경험과 빠른 성장을 얻을 수 있습니다.\n실패는 끝이 아니라 새로운 시작점입니다.',
+    },
+    {
+      title: '핵심가치 6 : 공유와 피드백을 일상화 합니다.',
+      description:
+        '동료가 무엇을 하고 있는지, 언제 도전과 지원이 필요한지 캐치하세요.\n상황을 먼저 공유하고, 적극적으로 피드백을 요청하며,\n서로의 성장을 지원하는 문화를 만들어가세요.',
+    },
+  ];
+
+  const items = [
+    {
+      title: 'MISSION',
+      description:
+        '유어슈는 숭실대 학생들을 공감하며, 최고의 서비스를 끊임없이 제공한다.',
+    },
+    {
+      title: 'VISION',
+      description:
+        '유어슈의 힘으로, 숭실대학교의 재학생 모두가 사용하는 서비스를 제공한다.',
+    },
+  ];
+  return { coreValueItems, items };
+}

src/containers/landing/MVC/index.tsx

@@ -0,0 +1,36 @@
+import SectionIntro from '@/components/Intro/SectionIntro';
+import SectionContainer from '@/containers/landing/MVC/SectionContainer';
+import useMVCDetail from '@/containers/landing/MVC/hook';
+
+function MVC() {
+  const { items, coreValueItems } = useMVCDetail();
+
+  return (
+    <div className="flex w-full flex-col items-center gap-[115px] bg-[#F5F5F5] py-[140px] xs:py-20 sm:py-[110px] md:py-[120px]">
+      <SectionIntro title="MVC" linerColor="gra" textColor="ver1" />
+      <div className="flex w-full max-w-[890px] flex-col gap-12 px-5 xs:max-w-[240px] xs:px-0 sm:max-w-[440px] md:max-w-[760px] ">
+        <div className="flex w-full gap-8 xs:flex-col sm:flex-col">
+          {items.map((item) => (
+            <SectionContainer key={item.title} title={item.title}>
+              <div className="body2 xs:body9 sm:body7">{item.description}</div>
+            </SectionContainer>
+          ))}
+        </div>
+        <SectionContainer title={'CORE-VALUE'}>
+          <div className="grid grid-cols-2 gap-x-7 gap-y-12 xs:grid-cols-1 sm:grid-cols-1">
+            {coreValueItems.map((item) => (
+              <div className="flex flex-col gap-2" key={item.title}>
+                <h4 className="h4 sm:body4 xs:body6">{item.title}</h4>
+                <p className="body2 sm:body7 xs:body9 whitespace-pre-wrap">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </SectionContainer>
+      </div>
+    </div>
+  );
+}
+
+export default MVC;

src/containers/select/Ideal/hook.ts

@@ -1,34 +1,20 @@
-import { graphql, useStaticQuery } from 'gatsby';
-import { getImage } from 'gatsby-plugin-image';
-
-import { ImgNodeType } from '@/types/hook';
-
-interface IdeaData {
-  idealImgData: {
-    nodes: ImgNodeType[];
-  };
-}
-
 export default function useIdealDetail() {
-  const imgData: IdeaData = useStaticQuery(graphql`
-    query {
-      idealImgData: allFile(
-        filter: { name: { eq: "departmentSelect.ideal" } }
-      ) {
-        nodes {
-          childImageSharp {
-            gatsbyImageData(placeholder: BLURRED, quality: 90)
-          }
-          name
-        }
-      }
-    }
-  `);
-
-  return {
-    image: getImage(
-      imgData.idealImgData.nodes[0].childImageSharp.gatsbyImageData,
-    ),
-    name: imgData.idealImgData.nodes[0].name,
-  };
+  const items = [
+    {
+      title: '자발적인',
+      description:
+        '학생들이 함께 만들어가는 서비스인 만큼 스스로 일을 찾아서 해야 해요. 본인이 필요한 능력을 직접 배우고 진행하고 싶은 부분을 맡아서 일해요.',
+    },
+    {
+      title: '도전적인',
+      description:
+        '유어슈에서 하는 일이 처음에는 어려워 보일 수 있어요. 하지만 도전하고 배우는 과정에서 성장한 자기 모습을 찾을 수 있을 거에요.',
+    },
+    {
+      title: '공감하는',
+      description:
+        '유어슈는 ‘숭실대 학생들을 공감하며 최고의 서비스를 끊임없이 제공한다’는 한가지 미션을 바탕으로 멤버들과 함께 공부하고, 성장해요.',
+    },
+  ];
+  return { items };
 }