24.02.26 - 0

src/App.js

@@ -8,6 +8,7 @@ import UiSection from "./section/UiSection";
 import React, {useEffect} from "react";
 import {UiContextProvider} from "./context/UiReducer";
 import Page from "./page/Page";
+import {PortfolioPage} from "./page/PortfolioPage";
 
 const Test = styled.div`
   height: var(--footer-height);
@@ -35,6 +36,7 @@ function App() {
 
         <UiContextProvider>
           <Page/>
+          {/*<PortfolioPage/>*/}
           <Footer/>
           <UiSection/>
         </UiContextProvider>

src/component/ProfileList.js

@@ -20,7 +20,7 @@ const ProfileListStyle = styled.li`
 
   h3 {
     color: ${p => p.theme.color.Gray9};
-    font-weight: 500;
+    font-weight: 600;
     font-size: 1.3em;
 
     display: inline-block;
@@ -51,6 +51,11 @@ const ProfileListStyle = styled.li`
   a:hover {
     text-decoration: underline;
   }
+  
+  b {
+    color: ${p => p.theme.color.Gray8};
+    font-weight: 600;
+  }
 `
 
 const ProfileList = ({profile}) => {

src/data/ProfileData.js

@@ -1,5 +1,6 @@
 import Pin from "../assets/ic_pin.png";
 import Trophy from "../assets/ic_trophy.png";
+import Design from "../assets/ic_design.png"
 
 export const profileData = [
   {
@@ -14,7 +15,7 @@ export const profileData = [
       <>
         모바일콘텐츠 개발반 <a href={"https://edcan.kr"} target={"_blank"}>EDCAN</a>의 8기 부장으로 활동했습니다.
         <br/>
-        동아리를 총괄하고 수업 준비, 행사 준비를 하면서 1년동안 동아리를 이끌어 갔습니다.
+        동아리를 총괄하고 수업 준비, 행사 준비, 예산 관리를 하면서 1년동안 동아리를 이끌어 갔습니다.
         <br/><br/>
         <a href="https://velog.io/@ckstmznf/지난-1년간-전공동아리를-이끌어보았다" target={"_blank"}>동아리 부장 회고록</a>을 참고해주세요
       </>
@@ -26,7 +27,7 @@ export const profileData = [
     date: "2022.04 ~ 2022.08",
     description: (
       <>
-        선린인터넷고등학교가 주관, 주최하는 2022 소프트웨어 나눔축제의 캠프 총괄로 활동했습니다.
+        선린인터넷고등학교가 주관, 주최하는 <a href="https://zesty-raindrop-bcc4a0.netlify.app/" target={"_blank"}>2022 소프트웨어 나눔축제</a>의 캠프 총괄로 활동했습니다.
         <br/>
         EDCAN 캠프(AndroidStudio로 나만의 일기장 앱 만들기)를 운영했습니다.
         <br/><br/>
@@ -80,10 +81,11 @@ export const profileData = [
         2023 선린 천하제일코딩대회에서 디자인 총괄을 맡아서<br/>
         대회 전체적인 디자인과 포스터 현수막, 티셔츠 등을 디자인했습니다.
         <br/><br/>
-        자세한 내용은 <a href={"#"} target={'_blank'}>대회 진행 후기</a>와 <a href="#" target={"_blank"}>디자인 결과물</a>을 참고해주세요
-        {/*Todo : url 추가*/}
+        자세한 내용은 <a href="https://velog.io/@ckstmznf/2023-선린-천하제일-코딩대회-스탭참가-후기" target={'_blank'}>대회 진행 후기</a>와
+        <a href="#" target={"_blank"}>디자인 결과물</a>을 참고해주세요
+        {/*Todo : 천코대 디자인 결과물 url 추가*/}
       </>
     ),
-    icon: Pin,  //Todo : 디자인은 아이콘 변경
+    icon: Design
   },
 ]

src/page/PortfolioPage.js

@@ -0,0 +1,89 @@
+import styled from "styled-components";
+import {PageBasicStyle} from "../style/BasicStyle";
+import MockUp from "./../assets/Membeder 목업.png"
+import {useEffect, useState} from "react";
+
+const PortfolioPageStyle = styled.div`
+  ${PageBasicStyle}
+  section {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
+  
+  .mock-up {
+    overflow: hidden;
+    
+    background-color: #6456ff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  main {
+    width: 100%;
+    height: 300vh;
+  }
+`
+
+export const PortfolioPage = () => {
+  const [imageScale, setImageScale] = useState({
+    marginGap: 0,
+    scale: 1,
+    borderRadius: 0,
+  })
+
+  const scrollEvent = (e) => {
+    const marginGap = Math.min(32, window.scrollY * 32 / 300)
+    const scale = Math.max(0, -5 / 100000 * window.scrollY + 1)
+
+    let borderRadius
+    if(window.scrollY > 0){
+      borderRadius = 10
+    }
+    else {
+      borderRadius = 0
+    }
+    setImageScale({scale, marginGap, borderRadius})
+  }
+
+  useEffect(() => {
+    window.addEventListener("scroll", scrollEvent)
+
+    return () => {
+      window.removeEventListener("scroll", scrollEvent)
+    }
+  }, [imageScale])
+
+  return (
+    <PortfolioPageStyle imageScale={imageScale}>
+      <div className="content">
+        <section className={"mock-up"}>
+          <img
+            src={MockUp} alt={"Membeder 목업 이미지"}
+            style={{
+              transform: `scale(${imageScale.scale})`,
+              borderRadius: `${imageScale.borderRadius}px`
+            }}
+          />
+        </section>
+        <section>
+
+        </section>
+        <section>대충 내용</section>
+        <section>대충 내용</section>
+        <section>대충 내용</section>
+      </div>
+    </PortfolioPageStyle>
+  )
+}

src/section/ProfileSection.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import {ProfileList} from "../component/ProfileList";
 import {profileData} from "../data/ProfileData";
+import Pin from "../assets/ic_pin.png";
 
 const ProfileSectionStyle = styled.section`
   padding: 40px 24px;