From e70a219bd47e349ae998535c020a3b38d73aa49d Mon Sep 17 00:00:00 2001
From: HyerimKimm <50258232+HyerimKimm@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:30:44 +0900
Subject: [PATCH] =?UTF-8?q?certificate=20=EC=B6=94=EA=B0=80,=20project?=
=?UTF-8?q?=EC=97=90=20img=20=EC=B6=9C=EB=A0=A5=20=EA=B8=B0=EB=8A=A5=20?=
=?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/src/atoms/Images.style.tsx | 9 +++++
.../components/certificates/Certificate.tsx | 36 +++++++++++++++++++
.../components/certificates/Certificates.tsx | 5 ++-
client/src/components/profile/Profile.tsx | 32 +++++++----------
.../src/components/projects/ProjectItem.tsx | 12 +++++++
client/src/components/skills/SkillsItem.tsx | 3 +-
6 files changed, 74 insertions(+), 23 deletions(-)
create mode 100644 client/src/components/certificates/Certificate.tsx
diff --git a/client/src/atoms/Images.style.tsx b/client/src/atoms/Images.style.tsx
index 8d44581..4f03a8c 100644
--- a/client/src/atoms/Images.style.tsx
+++ b/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;
diff --git a/client/src/components/certificates/Certificate.tsx b/client/src/components/certificates/Certificate.tsx
new file mode 100644
index 0000000..0c30819
--- /dev/null
+++ b/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 (
+
+ {certificate.title}
+
+ {dayjs(certificate.issueDate, 'YYYYMM').format('YYYY.MM')}
+
+
+ );
+};
+
+export default Certificate;
diff --git a/client/src/components/certificates/Certificates.tsx b/client/src/components/certificates/Certificates.tsx
index 814e84f..50d2674 100644
--- a/client/src/components/certificates/Certificates.tsx
+++ b/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
-
+ {certificates.map((certificate) => (
+
+ ))}
);
};
diff --git a/client/src/components/profile/Profile.tsx b/client/src/components/profile/Profile.tsx
index ae57958..decdce5 100644
--- a/client/src/components/profile/Profile.tsx
+++ b/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'}
>
-
-
+
+
{profile.name}
🏠 {profile.address}
📧 {profile.email}
@@ -59,23 +63,11 @@ const Profile = ({ profile, links }: profilePropsType) => {
))}
-
+
>
);
};
-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;
diff --git a/client/src/components/projects/ProjectItem.tsx b/client/src/components/projects/ProjectItem.tsx
index 44aaab7..2e8b662 100644
--- a/client/src/components/projects/ProjectItem.tsx
+++ b/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) => {
)}
+ {project.imgUrl && (
+
+
+
+ )}
diff --git a/client/src/components/skills/SkillsItem.tsx b/client/src/components/skills/SkillsItem.tsx
index e7bc6cb..b1ed948 100644
--- a/client/src/components/skills/SkillsItem.tsx
+++ b/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`