certificate 추가, project에 img 출력 기능 추가

client/src/atoms/Images.style.tsx

@@ -1,5 +1,14 @@
 import styled from 'styled-components';
+import tokens from '../styles/tokens.json';
 
+const globalTokens = tokens.global;
+
+export const SplashImg = styled.img`
+  width: 200px;
+  height: 200px;
+  object-fit: fill;
+  border-radius: ${globalTokens.RegularRadius.value};
+`;
 export const IconImg = styled.img`
   width: 1.2rem;
   height: 1.2rem;

client/src/components/certificates/Certificate.tsx

@@ -0,0 +1,36 @@
+import React, { useRef } from 'react';
+import { FlexBox } from '../../atoms/Layout.style';
+import { certificate } from '../../types/data';
+import { Heading5Typo, SmallTextTypo } from '../../atoms/Typography.style';
+import { useIsDarkStore } from '../../store/isDarkStore';
+import { useInView } from '../../hooks/useInView';
+import dayjs from 'dayjs';
+
+type certificationPropsType = {
+  certificate: certificate;
+};
+
+const Certificate = ({ certificate }: certificationPropsType) => {
+  const { isDark } = useIsDarkStore();
+  const target = useRef(null);
+  const [inView] = useInView({ target: target });
+
+  return (
+    <FlexBox
+      $d={'column'}
+      $j={'start'}
+      $a={'start'}
+      $g={0}
+      ref={target}
+      className={inView ? 'frame-in' : 'frame-out'}
+      style={{ width: '100%' }}
+    >
+      <Heading5Typo $isDark={isDark}>{certificate.title}</Heading5Typo>
+      <SmallTextTypo $isDark={isDark}>
+        {dayjs(certificate.issueDate, 'YYYYMM').format('YYYY.MM')}
+      </SmallTextTypo>
+    </FlexBox>
+  );
+};
+
+export default Certificate;

client/src/components/certificates/Certificates.tsx

@@ -7,6 +7,7 @@ import {
   SectionWrap,
 } from '../../atoms/Layout.style';
 import { useInView } from '../../hooks/useInView';
+import Certificate from './Certificate';
 
 type certificatesPropsType = {
   certificates: certificate[];
@@ -26,7 +27,9 @@ const Certificates = ({ certificates }: certificatesPropsType) => {
       >
         Certificates
       </SectionTitleTypo>
-      <FlexBox $d="column" $a="center" $j="center" $g={24}></FlexBox>
+      {certificates.map((certificate) => (
+        <Certificate certificate={certificate} />
+      ))}
     </SectionWrap>
   );
 };

client/src/components/profile/Profile.tsx

@@ -1,11 +1,9 @@
 import { useRef } from 'react';
 import { profile, link } from '../../types/data';
-import styled from 'styled-components';
 import { BodyTextTypo, Heading4Typo } from '../../atoms/Typography.style';
 import { useIsDarkStore } from '../../store/isDarkStore';
 import { FlexBox, SectionWrap } from '../../atoms/Layout.style';
-import { IconImg } from '../../atoms/Images.style';
-import tokens from '../../styles/tokens.json';
+import { IconImg, SplashImg } from '../../atoms/Images.style';
 import { useInView } from '../../hooks/useInView';
 import githubWhite from '../../assets/images/githubWhite.svg';
 import github from '../../assets/images/github.svg';
@@ -15,8 +13,6 @@ import blog from '../../assets/images/blog.svg';
 import blogWhite from '../../assets/images/blogWhite.svg';
 import Introduce from './Introduce';
 
-const globalTokens = tokens.global;
-
 type profilePropsType = {
   profile: profile;
   links: link[];
@@ -39,8 +35,16 @@ const Profile = ({ profile, links }: profilePropsType) => {
         ref={target1}
         className={inView1 ? 'frame-in' : 'frame-out'}
       >
-        <ProfileImgBox src={profile.profileImageUrl} />
-        <InfoWrap ref={target2} className={inView2 ? 'frame-in' : 'frame-out'}>
+        <SplashImg src={profile.profileImageUrl} />
+        <FlexBox
+          $d={'column'}
+          $j={'start'}
+          $a={'start'}
+          $g={0}
+          ref={target2}
+          className={inView2 ? 'frame-in' : 'frame-out'}
+          style={{ flexGrow: '1' }}
+        >
           <Heading4Typo $isDark={isDark}>{profile.name}</Heading4Typo>
           <BodyTextTypo $isDark={isDark}>🏠 {profile.address}</BodyTextTypo>
           <BodyTextTypo $isDark={isDark}>📧 {profile.email}</BodyTextTypo>
@@ -59,23 +63,11 @@ const Profile = ({ profile, links }: profilePropsType) => {
               </a>
             </FlexBox>
           ))}
-        </InfoWrap>
+        </FlexBox>
       </SectionWrap>
       <Introduce introduce={profile.introduce} />
     </>
   );
 };
 
-const ProfileImgBox = styled.img`
-  width: 200px;
-  border-radius: ${globalTokens.RegularRadius.value};
-`;
-
-const InfoWrap = styled.div`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  gap: ${globalTokens.Spacing4.value};
-`;
-
 export default Profile;

client/src/components/projects/ProjectItem.tsx

@@ -9,6 +9,7 @@ import {
 import { useIsDarkStore } from '../../store/isDarkStore';
 import { useInView } from '../../hooks/useInView';
 import dayjs from 'dayjs';
+import { SplashImg } from '../../atoms/Images.style';
 
 type projectItemPropsType = {
   project: project;
@@ -53,6 +54,17 @@ const ProjectItem = ({ project }: projectItemPropsType) => {
             </SmallTextTypo>
           </a>
         )}
+        {project.imgUrl && (
+          <FlexBox
+            $d={'column'}
+            $j={'center'}
+            $a={'center'}
+            $g={0}
+            style={{ padding: '10px 0px' }}
+          >
+            <SplashImg src={project.imgUrl} />
+          </FlexBox>
+        )}
       </FlexBox>
       <FlexBox $d="column" $j="start" $a="start" $g={12}>
         <FlexBox $d="column" $j="start" $a="start" $g={0}>

client/src/components/skills/SkillsItem.tsx

@@ -43,8 +43,7 @@ const SkillsCategorySection = styled.div`
 `;
 
 const SkillsCategoryTitle = styled(Heading5Typo)`
-  flex-grow: 1;
-  max-width: 200px;
+  width: 120px;
 `;
 
 const SkillsCategoryDatas = styled.ul`