24.02.15-1

src/component/ProfileList.js

@@ -0,0 +1,70 @@
+import styled, {css} from "styled-components";
+
+const ProfileListStyle = styled.li`
+  word-break: unset;
+
+  position: relative;
+  padding-left: 24px;
+
+  &::before {
+    content: "";
+    width: 17px;
+    height: 17px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url(${p => p.icon});
+    background-size: cover;
+  }
+
+  h3 {
+    color: ${p => p.theme.color.Gray9};
+    font-weight: 500;
+    font-size: 1.3em;
+
+    display: inline-block;
+  }
+
+  .date {
+    color: ${p => p.theme.color.Gray6};
+    font-size: 1em;
+
+    margin-left: 6px;
+  }
+
+  .description-wrap {
+    color: ${p => p.theme.color.Gray7};
+
+    margin-top: 6px;
+    font-size: 1.25em;
+
+    line-height: 22px;
+  }
+
+  a {
+    color: ${p => p.theme.color.HeechanBlue};
+    font-weight: 500;
+    transition: 100ms;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+`
+
+const ProfileList = ({profile}) => {
+  return (
+    <ProfileListStyle icon={profile.icon}>
+      <div className="title-wrap">
+        <h3>{profile.title}</h3>
+        <span className="date">{profile.date}</span>
+      </div>
+      <div className="description-wrap">
+        {profile.description}
+      </div>
+    </ProfileListStyle>
+  )
+}
+
+export {ProfileList}

src/data/ProfileData.js

@@ -0,0 +1,80 @@
+import Pin from "../assets/ic_pin.png";
+import Trophy from "../assets/ic_trophy.png";
+
+export const profileData = [
+  {
+    title: "선린 116기 소프트웨어과 졸업",
+    date: "2021.03 ~ 2024.02",
+    icon: Pin,
+  },
+  {
+    title: "EDCAN 8기 부장",
+    date: "2021.11 ~ 2022.11",
+    description: (
+      <>
+        모바일콘텐츠 개발반 <a href={"https://edcan.kr"} target={"_blank"}>EDCAN</a>의 8기 부부장으로 활동했습니다.
+        <br/>
+        동아리를 총괄하고 수업 준비, 행사 준비를 하면서 1년동안 동아리를 이끌어 갔습니다.
+        <br/><br/>
+        <a href="https://velog.io/@ckstmznf/지난-1년간-전공동아리를-이끌어보았다" target={"_blank"}>동아리 부장 회고록</a>을 참고해주세요
+      </>
+    ),
+    icon: Pin,
+  },
+  {
+    title: "2022 소프트웨어 나눔 축제 캠프 총괄",
+    date: "2022.04 ~ 2022.08",
+    description: (
+      <>
+        선린인터넷고등학교가 주관, 주최하는 2022 소프트웨어 나눔축제의 캠프 총괄로 활동했습니다.
+        <br/>
+        EDCAN 캠프(AndroidStudio로 나만의 일기장 앱 만들기)를 운영했습니다.
+        <br/><br/>
+        <a href="https://velog.io/@ckstmznf/SSF2022" target={"_blank"}>캠프 총괄 회고록</a>을 참고해주세요
+      </>
+    ),
+    icon: Pin,
+  },
+  {
+    title: "제 8회 선린 해커톤 동상 수상",
+    data: "2022.07",
+    description: (
+      <>
+        제 8회 선린 해커톤에서 <b>생존</b>이라는 주제로
+        <br/>
+        재난 신고 커뮤니티 <b>위그비</b>를 개발하여 동상을 수상하였습니다.
+        <br/>
+        팀에서 Android 개발을 총괄했습니다.
+        <br/><br/>
+        <a href="https://www.youtube.com/watch?v=by67z0esb0c" target={"_blank"}>위그비 소개 영상</a>을 참고해주세요.
+      </>
+    ),
+    icon: Trophy,
+  },
+  {
+    title: "2022 선린 디지털 콘텐츠 경진대회 동상 수상",
+    data: "2022.12",
+    description: (
+      <>
+        2022년 선린 디지털콘텐츠 경진대회에서
+        <br/>
+        IT업종 종사자를 위한 팀빌딩 서비스 <b>Membeder</b>를 개발했고
+        <br/>
+        동상을 수상했습니다. 팀에서는 팀장과 Android 개발 총괄을 진행했습니다.
+        <br/><br/>
+        <a href="https://github.com/Membeder" target={"_blank"}>깃허브</a>와 <a href="https://drive.google.com/drive/u/2/folders/1ZTcMfxDe91gHJKYtdRO9Q7g_JvkeEoCX" target={"_blank"}>프로젝트 설명서</a>를 참고해주세요
+      </>
+    ),
+    icon: Trophy,
+  },
+  {
+    title: "2023 선린 천하제일코딩대회 디자인 총괄",
+    data: "2023.04 ~ 2023.07",
+    icon: Pin,
+  },
+  {
+    title: "2023 선린 장학생",
+    data: "2023",
+    icon: Pin,
+  }
+]

src/page/Page.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import {PageBasicStyle} from "../style/BasicStyle";
 import {FirstSection} from "../section/FirstSection";
 import {BusinessCardSection} from "../section/BusinessCardSection";
+import {ProfileSection} from "../section/ProfileSection";
 
 const PageStyle = styled.div`
    ${PageBasicStyle};
@@ -12,6 +13,7 @@ const Page = () => {
     <PageStyle>
       <FirstSection/>
       <BusinessCardSection/>
+      <ProfileSection/>
     </PageStyle>
   )
 }

src/section/ProfileSection.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import {ProfileList} from "../component/ProfileList";
+import {profileData} from "../data/ProfileData";
+
+const ProfileSectionStyle = styled.section`
+  padding: 40px 24px;
+  background-color: ${p => p.theme.color.Gray0};
+
+  h2 {
+    color: ${p => p.theme.color.Gray9};
+    font-size: 2em;
+  }
+
+  ul {
+    font-size: 14px;
+    
+    padding: 0 8px;
+    margin-top: 24px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+`
+
+
+export const ProfileSection = () => {
+  return (
+    <ProfileSectionStyle>
+      <h2>저의 활동 내역이에요</h2>
+      <ul>
+        {profileData.map((p, i) => (
+          <ProfileList
+            key={i}
+            profile={p}/>
+        ))}
+      </ul>
+    </ProfileSectionStyle>
+  )
+}