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`