Merge pull request #306 from boostcampwm-2022/feature/intro

Feature: 소개 페이지 개발자 소개 수정

Author: asdf99245

frontend/src/pages/about.tsx

@@ -1,6 +1,7 @@
 import { GetStaticProps } from 'next';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
+import Link from 'next/link';
 import React from 'react';
 import styled from 'styled-components';
 import { CubeIcon } from '@components/common';
@@ -107,18 +108,28 @@ function About() {
         </Content>
         <Content>
           <Title>Developed By</Title>
-          {DEVELOPER_INFORMATION.map(({ name, introduction, field, career }) => (
+          {DEVELOPER_INFORMATION.map(({ name, introduction, github, blog, email, field }) => (
             <Profile key={name}>
               <Name>
                 {name}
                 <div>
-                  <Image src='/icons/github.svg' alt='깃허브 아이콘' width={20} height={20} quality={100} />
-                  <Image src='/icons/link.svg' alt='링크 아이콘' width={20} height={20} quality={100} />
+                  <Link href={github} legacyBehavior>
+                    <a>
+                      <Image src='/icons/github.svg' alt='깃허브 아이콘' width={20} height={20} quality={100} />
+                    </a>
+                  </Link>
+                  {blog && (
+                    <Link href={blog} legacyBehavior>
+                      <a>
+                        <Image src='/icons/link.svg' alt='링크 아이콘' width={20} height={20} quality={100} />
+                      </a>
+                    </Link>
+                  )}
                 </div>
               </Name>
               <Description>
-                <li>&middot; 개발경력 : {career}</li>
                 <li>&middot; 담당 : {field}</li>
+                <li>&middot; 이메일: {email}</li>
                 <li>&middot; {introduction}</li>
               </Description>
             </Profile>
@@ -226,10 +237,10 @@ const Profile = styled.div`
 `;
 
 const Name = styled.div`
+  ${({ theme }) => theme.common.flexRow}
   font-size: ${({ theme }) => theme.fontSize.xl};
   color: ${({ theme }) => theme.colors.logo};
   margin-left: 20px;
-  ${({ theme }) => theme.common.flexCenter}
   gap: 10px;
 `;
 

frontend/src/utils/constants.ts

@@ -49,35 +49,35 @@ export const CUBE_RANK = {
 export const DEVELOPER_INFORMATION = [
   {
     name: '장우석',
-    github: '',
-    blog: '',
-    career: '1년',
+    github: 'https://github.com/wkddntjr1123',
+    blog: 'https://wkddntjr1123.github.io/',
     field: 'Backend',
-    introduction: '안녕하세요. 장우석입니다.',
+    email: '[email protected]',
+    introduction: '함께 일하고싶은 개발자 장우석입니다. 커피☕ 사주세요!',
   },
   {
     name: '강시온',
-    github: '',
-    blog: '',
-    career: '?년',
+    github: 'https://github.com/Yaminyam',
+    blog: 'https://velog.io/@siontama',
     field: 'Backend',
-    introduction: '안녕하세요. 강시온입니다.',
+    email: '[email protected]',
+    introduction: '개발자를 위한 개발자 강시온 입니다',
   },
   {
     name: '정윤규',
-    github: '',
+    github: 'https://github.com/asdf99245',
     blog: '',
-    career: '1년',
     field: 'Frontend',
-    introduction: '안녕하세요. 정윤규입니다.',
+    email: '[email protected]',
+    introduction: '사용자를 먼저 이해하는 프론트엔드 엔지니어 정윤규입니다.',
   },
   {
     name: '정성윤',
-    github: '',
+    github: 'https://github.com/tunggary',
     blog: '',
-    career: '1년',
     field: 'Frontend',
-    introduction: '안녕하세요. 정성윤입니다.',
+    email: '[email protected]',
+    introduction: '최적화에 관심이 많은 프론트엔드 개발자 정성윤입니다.',
   },
 ];