mds 설치, recruitButton mds 기반으로 수정 (#89)

.vscode/settings.json

@@ -2,8 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll": "explicit"
   },
   "tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Styles", ".*Style"]
 }

apps/web/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import './global.css';
+import '@sopt-makers/ui/dist/index.css';
 
 import clsx from 'clsx';
 import localFont from 'next/font/local';

apps/web/src/components/common/AboutRecruit/RecruitButton.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { IconChevronRight } from '@sopt-makers/icons';
+import { Button } from '@sopt-makers/ui';
 import dayjs from 'dayjs';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
@@ -49,21 +51,11 @@ export default function RecruitButton() {
     <>
       <Link
         href='/recruit/'
-        className='mb-[0.5rem] mt-[4rem] rounded-[1.2rem] border border-solid border-[#808388] bg-white px-[2.6rem] py-[1.6rem]'
+        className='mb-[0.5rem] mt-[4rem] rounded-[1.2rem] bg-white'
       >
-        <p className='md:text-18-semibold text-18-semibold text-black100 flex items-center justify-center gap-[0.25rem]'>
-        35기 지원하기 <RightArrow />
-        </p>
+        <Button theme='white' size='lg' RightIcon={IconChevronRight}>35기 지원하기</Button>
       </Link>
       <p className='text-16-regular text-brand-orange mb-[4.2rem] mt-[1.2rem] text-center'>{timeLeft}</p>
     </>
   );
-
-  function RightArrow(props: React.SVGProps<SVGSVGElement>) {
-    return (
-      <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-        <path d='M9 18L15 12L9 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
-      </svg>
-    );
-  }
 }

apps/web/src/components/mainpage/feedback/data.ts

@@ -33,7 +33,7 @@ export const feedbacks = [
     name: '조승희',
     position: '공식 홈페이지 팀 FE 🚀',
     content:
-      '대학생 개발자가 쉽게 경험하지 못하는 **‘실 고객을 대상으로 하는 서비스’를 빌딩**할 수 있다는 점이 메이커스의 가장 큰 장점이었어요. 특히 저희 공식 홈페이지는 솝트에 관심을 가진 예비 지원자, 예비 후원사 등 불특정 다수를 타겟으로 삼으며 **예상치 못한 트래픽** 및 이슈를 대응하는 경험을 해볼 수도 있었어요. 또한 공식 홈페이지를 통해 솝트를 지원한 이들을 대상으로 직접 VoC를 진행하고 이를 기반으로 프로턱트를 디벨롭하는 아주 소중한 경험도 가질 수 있었습니다. 작업 외적으로도 **다양한 메이커분들과 꾸준히 네트워킹**할 수 있다는 점도 너무 좋았습니다 :) ',
+      '대학생 개발자가 쉽게 경험하지 못하는 **‘실 고객을 대상으로 하는 서비스’를 빌딩**할 수 있다는 점이 메이커스의 가장 큰 장점이었어요. 특히 저희 공식 홈페이지는 솝트에 관심을 가진 예비 지원자, 예비 후원사 등 불특정 다수를 타겟으로 삼으며 **예상치 못한 트래픽** 및 이슈를 대응하는 경험을 해볼 수도 있었어요. 또한 공식 홈페이지를 통해 솝트를 지원한 이들을 대상으로 직접 VoC를 진행하고 이를 기반으로 프로덕트를 디벨롭하는 아주 소중한 경험도 가질 수 있었습니다. 작업 외적으로도 **다양한 메이커분들과 꾸준히 네트워킹**할 수 있다는 점도 너무 좋았습니다 :) ',
   },
   {
     name: '전언석',

package.json

@@ -31,6 +31,8 @@
     "packages/*"
   ],
   "dependencies": {
+    "@sopt-makers/icons": "^1.0.4",
+    "@sopt-makers/ui": "^2.0.1",
     "dayjs": "^1.11.9"
   }
 }