From 5305f836f4e347b27249ac62d66f8831967f1fb8 Mon Sep 17 00:00:00 2001 From: happyhyep Date: Fri, 12 Jan 2024 18:10:14 +0900 Subject: [PATCH] =?UTF-8?q?projects=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/app.scss | 1 + src/assets/css/pages/projects.scss | 88 +++ src/components/ProjectComponent.tsx | 103 +++ src/components/VideoModal.js | 42 - src/components/VideoModal.tsx | 50 ++ src/lang/locale/ko.json | 98 +++ src/lib/getProjectPropsData.tsx | 228 ++++++ src/pages/Projects.tsx | 1142 ++++++++++++++------------- src/types/enum.ts | 25 +- 9 files changed, 1167 insertions(+), 610 deletions(-) create mode 100644 src/assets/css/pages/projects.scss create mode 100644 src/components/ProjectComponent.tsx delete mode 100644 src/components/VideoModal.js create mode 100644 src/components/VideoModal.tsx create mode 100644 src/lib/getProjectPropsData.tsx diff --git a/src/assets/css/app.scss b/src/assets/css/app.scss index 2bc4d07..8138b04 100644 --- a/src/assets/css/app.scss +++ b/src/assets/css/app.scss @@ -6,6 +6,7 @@ @import "pages/home"; @import "pages/awards"; @import "pages/introduce"; +@import "pages/projects"; @import "components/navBar"; @import "components/footer"; diff --git a/src/assets/css/pages/projects.scss b/src/assets/css/pages/projects.scss new file mode 100644 index 0000000..4381e10 --- /dev/null +++ b/src/assets/css/pages/projects.scss @@ -0,0 +1,88 @@ +.projects-page { + .dash-title { + .title-font { + font-size: 6.25rem; + } + } + + .project-component { + display: flex; + flex-direction: column; + .project-content { + display: flex; + justify-content: center; + align-items: center; + gap: 5rem; + img { + width: 62.5rem; + } + + .project-desc { + //margin: 2.5rem 0 0 5rem; + width: 70rem; + + .title { + font-family: "Noto Sans KR"; + font-size: 3.75rem; + color: $colorBrown100; + //margin-top: 3.75rem; + } + + .subtitle { + font-family: "Noto Sans KR"; + color: $colorBrown100; + font-size: 2.5rem; + margin-top: 0.625rem; + } + + .text { + font-family: "Noto Sans KR"; + color: $colorBrown100; + font-size: 1.875rem; + margin-top: 0.625rem; + } + + .sub-text { + font-family: "Noto Sans KR"; + color: $colorBrown100; + font-size: 1.625rem; + margin-top: 0.625rem; + } + } + } + .project-btn-container { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 1rem; + margin: 5rem 8rem 0 0; + } + } +} + +.video-modal { + position: fixed; + width: 100rem; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + z-index: 100; + .close-btn { + position: fixed; + z-index: 5; + right: 3rem; + top: 3rem; + cursor: pointer; + font-size: 3rem; + color: $colorBlack; + background-color: $colorWhite; + width: 3rem; + height: 3rem; + text-align: center; + border-radius: 1rem; + } + video { + width: 100rem; + border-radius: 2rem; + } +} \ No newline at end of file diff --git a/src/components/ProjectComponent.tsx b/src/components/ProjectComponent.tsx new file mode 100644 index 0000000..8f3b9f7 --- /dev/null +++ b/src/components/ProjectComponent.tsx @@ -0,0 +1,103 @@ +import React, { useState } from "react"; +import { NavLink } from "react-router-dom"; +import { STACK_NAME } from "src/types/enum"; +import github from "src/assets/icons/github.webp"; +import VideoModal from "src/components/VideoModal"; +import { useRecoilState } from "recoil"; +import { ModalState, recoilModalState } from "src/states/recoilModalState"; + +const ProjectComponent = (props: any) => { + const [isVideoModalOpen, setIsVideoModalOpen] = + useRecoilState(recoilModalState); + const defaultRecoilModalState: ModalState = { ...isVideoModalOpen }; + + const changeVideoModalState = () => { + defaultRecoilModalState.value = !isVideoModalOpen.value; + defaultRecoilModalState.src = props.data.videoLink; + setIsVideoModalOpen(defaultRecoilModalState); + }; + return ( +
+
+ project-img +
+
+ {props.data.title} +
+
{props.data.subtitle}
+ {props.data.user ? ( +
{props.data.user}
+ ) : null} +
+ {props.data.strongStacks && + props.data.strongStacks.map((el: STACK_NAME) => ( + {el}, + ))} + {props.data.stacks && + props.data.stacks.map((e: STACK_NAME) => { + return props.data.stacks[props.data.stacks.length - 1] === e ? ( + <>{e} + ) : ( + <>{e}, + ); + })} +
+
+
{props.data.desc[0]}
+
{props.data.desc[1]}
+
+
{props.data.desc[2]}
+
{props.data.desc[3]}
+
{props.data.desc[4]}
+
+
+
+ {/*
+ VIDEO 보기 → +
*/} + {/*{isVideoModalOpen1 ? (*/} + {/* */} + {/*) : null}*/} +
+ {props.data.isHaveWeb ? ( + + Web Page → + + ) : null} +
+ + {props.data.isHaveVideo ? ( + + ) : null} + + {/*{isVideoModalOpen.value ? (*/} + {/* */} + {/*) : null}*/} + {props.data.isHaveGithub ? ( + + github + GITHUB + + ) : null} +
+ {/*
*/} + {/* setPlayBackRate()}*/} + {/* >*/} + {/* */} + {/* */} + {/*
*/} +
+ ); +}; + +export default ProjectComponent; diff --git a/src/components/VideoModal.js b/src/components/VideoModal.js deleted file mode 100644 index 6257d5e..0000000 --- a/src/components/VideoModal.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { useRef } from 'react'; - -const VideoModal = ({setIsVideoModalOpen, video, pageNumber}) => { - const closeModal = () => { - setIsVideoModalOpen(false); - }; - const videoRef= useRef(); - const setPlayBackRate = () => { - videoRef.current.playbackRate = 1.6; - }; - - return ( -
- X - -
- ) -} - -export default VideoModal; - -const CloseButton = styled.button` - position: fixed; - z-index: 999999; - right: 20px; - top: 10px; - cursor: pointer; - - font-family: applesdgothic; - font-size: 30px; - -` \ No newline at end of file diff --git a/src/components/VideoModal.tsx b/src/components/VideoModal.tsx new file mode 100644 index 0000000..e25df16 --- /dev/null +++ b/src/components/VideoModal.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { useRef } from "react"; +import { useRecoilState } from "recoil"; +import { ModalState, recoilModalState } from "src/states/recoilModalState"; + +const VideoModal = ({ video }: any) => { + const [videoModalState, setVideoModalState] = + useRecoilState(recoilModalState); + const defaultRecoilModalState: ModalState = { ...videoModalState }; + + const closeModal = () => { + defaultRecoilModalState.value = !videoModalState; + defaultRecoilModalState.src = null; + setVideoModalState(defaultRecoilModalState); + }; + // const videoRef = useRef(); + const setPlayBackRate = () => { + document.getElementsByTagName("video")[0].playbackRate = 1.6; + }; + + return ( +
+
+ X +
+ +
+ ); +}; + +export default VideoModal; + +// const CloseButton = styled.button` +// position: fixed; +// z-index: 999999; +// right: 20px; +// top: 10px; +// cursor: pointer; +// +// font-family: applesdgothic; +// font-size: 30px; +// +// ` diff --git a/src/lang/locale/ko.json b/src/lang/locale/ko.json index e6dfc15..46198de 100644 --- a/src/lang/locale/ko.json +++ b/src/lang/locale/ko.json @@ -52,5 +52,103 @@ "univ": "경희대학교 컴퓨터공학과", "apple-academy": "애플 디벨로퍼 아카데미" } + }, + "awards": { + "money": "성적우수 장학, 밝은사회 장학, SW중심대학 장학 ... 외 다수 장학 수혜", + "sanjose": "2023 San Jose State University Enterpreneurship Award 최우수", + "khu": "2022 경희대학교 소프트웨어융합대학 동아리대항전 최우수", + "edu": "2021 대학생 교육기부 공모전 장작 더하기 장려상" + }, + "projects": { + "esim": { + "title": "World-ESIM", + "subtitle": "- ESIM 판매 사이트", + "user": "(일본, 한국, 미국에 실제 서비스 제공 중)", + "desc-1": "일본 공항과 일본 상점 키오스크 및 각종 앱에", + "desc-2": "물리적 상품부터 API 상품까지 판매하는 웹 사이트를 개발 및 배포하였습니다.", + "desc-3": "프론트엔드 개발 3명, 백엔드 개발 3명, 디자인팀/기획팀으로 진행하였습니다.", + "desc-4": "그 중 저는 임시 PL(프로젝트 리더)로, 프론트엔드를 맡아", + "desc-5": "컴포넌트 다이어그램, 유스케이스 다이어그램, 초기 컴포넌트(countBox, button, dropDown, 모든 modal 등), 회원가입/로그인 페이지, 마이 페이지, 상품 상세 페이지, 결제 페이지, 다국어 지원, api 연동, localStorage 및 header 등 웹 관련 세팅, 모바일 반응형 작업, getQueryString 및 modalManager 등 자주 사용되는 함수/컴포넌트 분리 및 통합, 정규식 정의, 코드 리팩토링 등을 하였습니다." + }, + "esim-admin": { + "title": "World-ESIM 관리자 화면", + "subtitle": "- ESIM 판매 관리자용 사이트", + "user": "(일본, 한국, 미국에 실제 서비스 제공 중)", + "desc-1": "ESIM을 판매하는 관리자 전용 사이트로,", + "desc-2": "물리적 상품부터 API용 상품까지 모두 등록, 수정, 판매, 정산 할 수 있는 웹 사이트를 개발 및 배포하였습니다.", + "desc-3": "프론트엔드 개발 3명, 백엔드 개발 3명, 디자인팀/기획팀으로 진행하였습니다.", + "desc-4": "그 중 저는 임시 PL(프로젝트 리더)로, 프론트엔드를 맡아", + "desc-5": "컴포넌트 다이어그램, 유스케이스 다이어그램, 초기 컴포넌트(table, imageUploader, excelUploader, sideMenu 등), 로그인 페이지, 회원(관리자)수정 페이지, 상품 등록 페이지, api 연동, localStorage 및 header 등 웹 관련 세팅, getQueryString 및 modalManager 등 자주 사용되는 함수/컴포넌트 분리 및 통합, 코드 리팩토링 등을 하였습니다." + }, + "nfm-trd": { + "title": "기억 박물관 - 내 추억에 놀러와", + "subtitle": "- 추억 기록 모바일 웹콘텐츠", + "user": "(실 사용자 2만명, 2022 추석 가오픈/2023 설~ 정식 운영)", + "desc-1": "국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,", + "desc-2": "중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및 배포하였습니다.", + "desc-3": "개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로 진행하였습니다.", + "desc-4": "그 중 저는 PL(프로젝트 리더)로, 프론트엔드, 백엔드, DB를 맡아", + "desc-5": "초기 프론트엔드 개발 세팅, 리다이렉팅 세팅, 정규식 정의, 닉네임/연령대 입력 페이지 프론트엔드, 유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지 프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드, 배경음/클릭음 함수화 및 적용, 눌러서 음소거 해제 기능 (각 페이지마다 필요에 따라 적용), uuid로 개인별 URL 공유 기능, 주인/방문자 구분 후 차별화 등을 개발하였습니다." + }, + "focuz": { + "title": "FOCUZ", + "subtitle": "- 얼굴인식 캠스터디 웹사이트", + "user": "(경희대 소프트웨어융합대학 동아리대항전 1위)", + "desc-1": "기존 화상 회의 프로그램 및 공부 프로그램과 차별화 하여", + "desc-2": "얼굴 인식된 시간을 측정하여 공부 집중도를 분석합니다.", + "desc-3": "프론트엔드 2명, 백엔드 2명, 멘토 2명으로 진행하였습니다.", + "desc-4": "그 중 저는 프론트엔드에서", + "desc-5": "페이지 라우팅, 회원가입/로그인-kakao auth, 공부하기 페이지-tensorflow 라이브러리 활용, 친구/그룹 추가/목록 페이지 - 페이지, 컴포넌트 개발, 스터디 그룹 생성 페이지, 분석 페이지(캘린더 날짜 설정, 시간 그래프화)를 구현하였습니다." + }, + "bburing": { + "title":"BBuRing_log", + "subtitle": "- 전국 뿌링클 맛집 기록 웹사이트", + "user":"", + "desc-1":"전국 뿌링클 맛집 탐방을 위해", + "desc-2":"각 매장 별로 리뷰를 기록해둘 수 있습니다.", + "desc-3":"프론트엔드 1명, 백엔드 1명으로 진행하였습니다.", + "desc-4":"그 중 저는 프론트엔드에서", + "desc-5":"페이지 라우팅, 홈 사이트 안내-애니메이션, kakao map api-마커 등록, 지점 검색, 포스팅 확인-지도 클릭 시 리뷰/마우스 호버 글 미리보기, 포스팅 작성을 구현하였습니다." + }, + "eclipse": { + "title":"Eclipse", + "subtitle":"- 대학생의 진로 걱정 해결을 위한 웹사이트", + "user":"", + "desc-1":"코로나19 이후 선/후배 관계의 단절로", + "desc-2":"진로 걱정이 많은 대학생들을 위해 기획하였습니다.", + "desc-3":"프론트엔드 2명, 백엔드 2명으로 진행하였습니다.", + "desc-4":"그 중 저는 프론트엔드에서", + "desc-5":"디자인, 페이지 라우팅, 홈화면, 로그인, 교수-학생 소통 페이지, 시간표 추천 페이지, 내 프로필 관리 페이지, 후원하기 페이지, 알람 확인하기 페이지를 구현하였습니다." + }, + "gallery": { + "title":"gallery web", + "subtitle":"- 찍은 사진들을 기록해둘 수 있는 웹사이트", + "user":"", + "desc-1":"사진 찍는 것을 좋아하는 사람들을 위해", + "desc-2":"웹사이트에 기록해둘 수 있는 웹사이트를 기획하였습니다.", + "desc-3":"혼자 toy project로 진행하였습니다.", + "desc-4":"디자인, 페이지 라우팅, 홈화면, 회원가입/로그인, 개인정보 수정, 글/사진 업로드, 포스팅 확인, 포스팅 수정, 포스팅 삭제를 구현하였습니다.", + "desc-5":"" + }, + "apartment": { + "title":"Search For Apartment Transactions", + "subtitle":"- 아파트 매매 실거래가를 확인할 수 있는 웹사이트", + "user":"", + "desc-1":"원하는 지역을 선택하여", + "desc-2":"아파트의 매매 실거래가를 확인하고, 부동산 페이지로 넘어갈 수 있습니다.", + "desc-3":"프론트엔드 1명, api 크롤링 1명으로 진행하였습니다.", + "desc-4":"그 중 저는 프론트엔드에서", + "desc-5":" 디자인, api 연동, 검색 기능, 부동산 사이트 http 하이퍼링크 등을 구현하였습니다." + }, + "d": { + "title":"", + "subtitle":"", + "user":"", + "desc-1":"", + "desc-2":"", + "desc-3":"", + "desc-4":"", + "desc-5":"" + } } } \ No newline at end of file diff --git a/src/lib/getProjectPropsData.tsx b/src/lib/getProjectPropsData.tsx new file mode 100644 index 0000000..dd53213 --- /dev/null +++ b/src/lib/getProjectPropsData.tsx @@ -0,0 +1,228 @@ +import { ProjectDataInterface } from "src/types/type"; +import { STACK_NAME } from "src/types/enum"; +import { useTranslation } from "react-i18next"; + +import esim from "src/assets/images/projects/world-esim.webp"; +import esimadmin from "src/assets/images/projects/world-esim-admin.webp"; +import nfmtrd2023 from "src/assets/images/projects/nfm-trd-2023.webp"; +import focuz from "src/assets/images/projects/focuz.webp"; +import focuz_video from "src/assets/images/projects/구현영상.mp4"; +import bburing_log from "src/assets/images/projects/BBuRing.webp"; +import bburing_log_video from "src/assets/images/projects/BBuRing.mp4"; +import eclipse from "src/assets/images/projects/eclipse.webp"; +import eclipse_video from "src/assets/images/projects/eclipse.mp4"; +import gallery from "src/assets/images/projects/gallery.webp"; +import gallery_video from "src/assets/images/projects/gallery.mp4"; +import apart from "src/assets/images/projects/apartment.webp"; + +export default function getProjectPropsData() { + // eslint-disable-next-line react-hooks/rules-of-hooks + const { t } = useTranslation(); + const propsObj: ProjectDataInterface[] = [ + { + idx: 8, + img: esim, + title: t("projects.esim.title"), + subtitle: t("projects.esim.subtitle"), + user: t("projects.esim.user"), + strongStacks: [ + STACK_NAME.VUE, + STACK_NAME.TYPESCRIPT, + STACK_NAME.SASS, + STACK_NAME.NODE, + STACK_NAME.POSTGRESQL, + STACK_NAME.S3, + ], + stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA], + desc: [ + t("projects.esim.desc-1"), + t("projects.esim.desc-2"), + t("projects.esim.desc-3"), + t("projects.esim.desc-4"), + t("projects.esim.desc-5"), + ], + isHaveWeb: true, + isHaveGithub: false, + isHaveVideo: false, + webLink: "https://esim.famppy.com/", + githubLink: null, + videoLink: null, + }, + { + idx: 7, + img: esimadmin, + title: t("projects.esim-admin.title"), + subtitle: t("projects.esim-admin.subtitle"), + user: t("projects.esim-admin.user"), + strongStacks: [ + STACK_NAME.VUE, + STACK_NAME.TYPESCRIPT, + STACK_NAME.SASS, + STACK_NAME.NODE, + STACK_NAME.POSTGRESQL, + STACK_NAME.S3, + ], + stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA], + desc: [ + t("projects.esim-admin.desc-1"), + t("projects.esim-admin.desc-2"), + t("projects.esim-admin.desc-3"), + t("projects.esim-admin.desc-4"), + t("projects.esim-admin.desc-5"), + ], + isHaveWeb: true, + isHaveGithub: false, + isHaveVideo: false, + webLink: "https://esim-admin.famppy.com/", + githubLink: null, + videoLink: null, + }, + { + idx: 6, + img: nfmtrd2023, + title: t("projects.nfm-trd.title"), + subtitle: t("projects.nfm-trd.subtitle"), + user: t("projects.nfm-trd.user"), + strongStacks: [ + STACK_NAME.VUE, + STACK_NAME.TYPESCRIPT, + STACK_NAME.SASS, + STACK_NAME.NODE, + STACK_NAME.POSTGRESQL, + STACK_NAME.S3, + ], + stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA], + desc: [ + t("projects.nfm-trd.desc-1"), + t("projects.nfm-trd.desc-2"), + t("projects.nfm-trd.desc-3"), + t("projects.nfm-trd.desc-4"), + t("projects.nfm-trd.desc-5"), + ], + isHaveWeb: true, + isHaveGithub: false, + isHaveVideo: false, + webLink: "https://nfm-trd-2023.apoc.day/#/", + githubLink: null, + videoLink: null, + }, + { + idx: 5, + img: focuz, + title: t("projects.focuz.title"), + subtitle: t("projects.focuz.subtitle"), + user: t("projects.focuz.user"), + strongStacks: [ + STACK_NAME.REACT, + STACK_NAME.TENSORFLOW, + STACK_NAME.KAKAOOAUTH, + STACK_NAME.STYLEDCOMPONENT, + ], + stacks: [STACK_NAME.SPRING, STACK_NAME.MYSQL, STACK_NAME.REDIS], + desc: [ + t("projects.focuz.desc-1"), + t("projects.focuz.desc-2"), + t("projects.focuz.desc-3"), + t("projects.focuz.desc-4"), + t("projects.focuz.desc-5"), + ], + isHaveWeb: false, + isHaveGithub: true, + isHaveVideo: true, + webLink: null, + githubLink: "https://github.com/happyhyep/FOCUZ", + videoLink: focuz_video, + }, + { + idx: 4, + img: bburing_log, + title: t("projects.bburing.title"), + subtitle: t("projects.bburing.subtitle"), + user: null, + strongStacks: [STACK_NAME.REACT, STACK_NAME.DOCKER], + stacks: [STACK_NAME.SPRING, STACK_NAME.PYTHON, STACK_NAME.MYSQL], + desc: [ + t("projects.bburing.desc-1"), + t("projects.bburing.desc-2"), + t("projects.bburing.desc-3"), + t("projects.bburing.desc-4"), + t("projects.bburing.desc-5"), + ], + isHaveWeb: false, + isHaveGithub: true, + isHaveVideo: true, + webLink: null, + githubLink: "https://github.com/happyhyep/BBuRing_log", + videoLink: bburing_log_video, + }, + { + idx: 3, + img: eclipse, + title: t("projects.eclipse.title"), + subtitle: t("projects.eclipse.subtitle"), + user: null, + strongStacks: [STACK_NAME.REACT], + stacks: [STACK_NAME.DJANGO], + desc: [ + t("projects.eclipse.desc-1"), + t("projects.eclipse.desc-2"), + t("projects.eclipse.desc-3"), + t("projects.eclipse.desc-4"), + t("projects.eclipse.desc-5"), + ], + isHaveWeb: false, + isHaveGithub: true, + isHaveVideo: true, + webLink: null, + githubLink: "https://github.com/happyhyep/Eclipse", + videoLink: eclipse_video, + }, + { + idx: 2, + img: gallery, + title: t("projects.gallery.title"), + subtitle: t("projects.gallery.subtitle"), + user: null, + strongStacks: [STACK_NAME.REACT], + stacks: [STACK_NAME.FIREBASE], + desc: [ + t("projects.gallery.desc-1"), + t("projects.gallery.desc-2"), + t("projects.gallery.desc-3"), + t("projects.gallery.desc-4"), + t("projects.gallery.desc-5"), + ], + isHaveWeb: false, + isHaveGithub: true, + isHaveVideo: true, + webLink: null, + githubLink: "https://github.com/happyhyep/gallery-web", + videoLink: gallery_video, + }, + { + idx: 1, + img: apart, + title: t("projects.apartment.title"), + subtitle: t("projects.apartment.subtitle"), + user: null, + strongStacks: [STACK_NAME.VANILLAJS, STACK_NAME.EC2], + stacks: [STACK_NAME.OPENAPI], + desc: [ + t("projects.apartment.desc-1"), + t("projects.apartment.desc-2"), + t("projects.apartment.desc-3"), + t("projects.apartment.desc-4"), + t("projects.apartment.desc-5"), + ], + isHaveWeb: false, + isHaveGithub: true, + isHaveVideo: false, + webLink: null, + githubLink: + "https://github.com/happyhyep/project_search_for_apart_transactions", + videoLink: null, + }, + ]; + + return propsObj; +} diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx index 9752590..b89a799 100644 --- a/src/pages/Projects.tsx +++ b/src/pages/Projects.tsx @@ -1,30 +1,15 @@ -import React, { useState } from "react"; -import NavBar from "src/components/common/NavBar"; -import Footer from "src/components/common/Footer"; -import { motion, useScroll } from "framer-motion"; -import nfmtrd2023 from "@images/projects/nfm-trd-2023.webp"; -import focuz from "@images/projects/focuz.webp"; -import focuz_video from "@images/projects/구현영상.mp4"; -import bburing from "@images/projects/BBuRing.webp"; -import bburing_video from "@images/projects/BBuRing.mp4"; -import eclipse from "@images/projects/eclipse.webp"; -import eclipse_video from "@images/projects/eclipse.mp4"; -import gallery from "@images/projects/gallery.webp"; -import gallery_video from "@images/projects/gallery.mp4"; -import apartment from "@images/projects/apartment.webp"; -import github from "@icons/github.webp"; -import { NavLink } from "react-router-dom"; - +import React from "react"; // @ts-ignore import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; - -import VideoModal from "../components/VideoModal"; +import Layout from "src/components/layout/Layout"; +import TopBar from "src/components/common/TopBar"; +import DashTitle from "src/components/common/DashTitle"; +import ProjectComponent from "src/components/ProjectComponent"; +import getProjectPropsData from "src/lib/getProjectPropsData"; export default function Projects() { - const { scrollYProgress } = useScroll(); - function SamplePrevArrow(props: any) { const { className, style, onClick } = props; return ( @@ -69,560 +54,583 @@ export default function Projects() { prevArrow: , }; - const [isVideoModalOpen1, setIsVideoModalOpen1] = useState(false); - const [isVideoModalOpen2, setIsVideoModalOpen2] = useState(false); - const [isVideoModalOpen3, setIsVideoModalOpen3] = useState(false); - const [isVideoModalOpen4, setIsVideoModalOpen4] = useState(false); + const propsObj = getProjectPropsData(); + // const propsObj: ProjectDataInterface[] = [ + // { + // title: "기억 박물관 - 내 추억에 놀러와", + // subtitle: "- 추억 기록 모바일 웹콘텐츠", + // user: "(실 사용자 2만명)", + // strongStacks: [ + // STACK_NAME.VUE, + // STACK_NAME.TYPESCRIPT, + // STACK_NAME.SASS, + // STACK_NAME.NODE, + // STACK_NAME.POSTGRESQL, + // STACK_NAME.S3, + // ], + // stacks: [STACK_NAME.DOCKER, STACK_NAME.JENKINS, STACK_NAME.FIGMA], + // desc: [ + // "국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,", + // "중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및 배포하였습니다.", + // "개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로 진행하였습니다.", + // "그 중 저는 개발 PL(프로젝트 리더)로, 프론트엔드, 백엔드, DB를 맡아", + // "초기 프론트엔드 개발 세팅, 닉네임/연령대 입력 페이지 프론트엔드, 유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지 프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드를 개발하였습니다.", + // ], + // isHaveWeb: true, + // isHaveGithub: false, + // isHaveVideo: false, + // webLink: "https://nfm-trd-2023.apoc.day/#/", + // githubLink: null, + // videoLink: null, + // }, + // ]; + // const [isVideoModalOpen1, setIsVideoModalOpen1] = useState(false); + // const [isVideoModalOpen2, setIsVideoModalOpen2] = useState(false); + // const [isVideoModalOpen3, setIsVideoModalOpen3] = useState(false); + // const [isVideoModalOpen4, setIsVideoModalOpen4] = useState(false); + // + // const onVideoModalOpen1 = () => { + // setIsVideoModalOpen1(true); + // }; + // const onVideoModalOpen2 = () => { + // setIsVideoModalOpen2(true); + // }; + // const onVideoModalOpen3 = () => { + // setIsVideoModalOpen3(true); + // }; + // const onVideoModalOpen4 = () => { + // setIsVideoModalOpen4(true); + // }; - const onVideoModalOpen1 = () => { - setIsVideoModalOpen1(true); - }; - const onVideoModalOpen2 = () => { - setIsVideoModalOpen2(true); - }; - const onVideoModalOpen3 = () => { - setIsVideoModalOpen3(true); - }; - const onVideoModalOpen4 = () => { - setIsVideoModalOpen4(true); - }; return ( - <> - - - - {/**/} - {/* */} - {/* Front-end*/} - {/* */} - {/**/} + +
+ + + + {/* ---- 국립 민속 박물관 프로젝트 ---- */} + {propsObj && + propsObj.map((el) => { + return ; + })} - {/**/} - {/* /!* ---- 국립 민속 박물관 프로젝트 ---- *!/*/} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* <strong>기억 박물관 - 내 추억에 놀러와</strong>*/} - {/* */} - {/* */} - {/* - 추억 기록 모바일 웹컨텐츠*/} - {/* */} - {/* (실 사용자 2만명)*/} - {/* */} - {/* Vue.js, Typescript, Sass, Node.js, PostgreSQL,*/} - {/* AWS, Figma*/} - {/* */} - {/*
*/} - {/* 국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,*/} - {/* */} - {/* 중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및*/} - {/* 배포하였습니다.*/} - {/* */} - {/*
*/} - {/* */} - {/* 개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로*/} - {/* 진행하였습니다.*/} - {/* */} - {/* */} - {/* 그 중 저는 개발 PL(프로젝트 리더)로,*/} - {/* 프론트엔드, 백엔드, DB를 맡아*/} - {/* */} - {/* */} - {/* 초기 프론트엔드 개발 세팅, 닉네임/연령대 입력 페이지 프론트엔드,*/} - {/* 유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지*/} - {/* 프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드를*/} - {/* 개발하였습니다.*/} - {/* */} - {/*
*/} - {/*
*/} - {/* /!*
*/} - {/* VIDEO 보기 → */} - {/*
*!/*/} - {/* {isVideoModalOpen1 ? (*/} - {/* */} - {/* ) : null}*/} - {/* */} - {/* */} - {/* Web Page →*/} - {/* */} - {/* */} - {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* <strong>기억 박물관 - 내 추억에 놀러와</strong>*/} + {/* */} + {/* */} + {/* - 추억 기록 모바일 웹컨텐츠*/} + {/* */} + {/* (실 사용자 2만명)*/} + {/* */} + {/* Vue.js, Typescript, Sass, Node.js, PostgreSQL,*/} + {/* AWS, Figma*/} + {/* */} + {/*
*/} + {/* 국립 민속 박물관 제 3관에서 진행한 웹 컨텐츠로,*/} + {/* */} + {/* 중장년층을 타겟으로 추억을 기록하는 웹 사이트를 개발 및*/} + {/* 배포하였습니다.*/} + {/* */} + {/*
*/} + {/* */} + {/* 개발자 3명, 디자이너 2명, 기획자 1명, 개발 멘토 1명으로*/} + {/* 진행하였습니다.*/} + {/* */} + {/* */} + {/* 그 중 저는 개발 PL(프로젝트 리더)로,*/} + {/* 프론트엔드, 백엔드, DB를 맡아*/} + {/* */} + {/* */} + {/* 초기 프론트엔드 개발 세팅, 닉네임/연령대 입력 페이지 프론트엔드,*/} + {/* 유물 선택 페이지 프론트엔드, 기록 페이지 프론트엔드, 결과 페이지*/} + {/* 프론트엔드/백엔드, 공유 페이지 프론트엔드/백엔드를*/} + {/* 개발하였습니다.*/} + {/* */} + {/*
*/} + {/*
*/} + {/*
+ VIDEO 보기 → +
*/} + {/* {isVideoModalOpen1 ? (*/} + {/* */} + {/* ) : null}*/} + {/* */} + {/* */} + {/* Web Page →*/} + {/* */} + {/* */} + {/**/} - {/* /!* ---- focuz 프로젝트 ---- *!/*/} - {/*
*/} - {/*
*/} - {/* focuz*/} - {/* */} - {/* */} - {/* <strong>FOCUZ</strong>*/} - {/* */} - {/* */} - {/* - 얼굴인식 캠스터디 웹사이트*/} - {/* */} - {/* (경희대 소프트웨어융합대학 동아리대항전 1위)*/} - {/* */} - {/* React.js, Tensorflow, kakao oauth, Spring,*/} - {/* MySQL, redis*/} - {/* */} - {/*
*/} - {/* */} - {/* 기존 화상 회의 프로그램 및 공부 프로그램과 차별화 하여*/} - {/* */} - {/* 얼굴 인식된 시간을 측정하여 공부 집중도를 분석합니다.*/} - {/*
*/} - {/* */} - {/* 프론트엔드 2명, 백엔드 2명, 멘토 2명으로 진행하였습니다.*/} - {/* */} - {/* */} - {/* 그 중 저는 프론트엔드에서*/} - {/* */} - {/* */} - {/* 페이지 라우팅, 회원가입/로그인-kakao auth, 공부하기*/} - {/* 페이지-tensorflow 라이브러리 활용, 친구/그룹 추가/목록 페이지 -*/} - {/* 페이지, 컴포넌트 개발, 스터디 그룹 생성 페이지, 분석*/} - {/* 페이지(캘린더 날짜 설정, 시간 그래프화)를 구현하였습니다.*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* VIDEO 보기 →{" "}*/} - {/* */} - {/* */} - {/* {isVideoModalOpen1 ? (*/} - {/* */} - {/* ) : null}*/} - {/* */} - {/* */} - {/* */} - {/* GITHUB*/} - {/* */} - {/* */} - {/* /!*
*/} - {/* */} - {/*
*!/*/} - {/* */} + {/* /!* ---- focuz 프로젝트 ---- *!/*/} + {/*
*/} + {/*
*/} + {/* focuz*/} + {/* */} + {/* */} + {/* <strong>FOCUZ</strong>*/} + {/* */} + {/* */} + {/* - 얼굴인식 캠스터디 웹사이트*/} + {/* */} + {/* (경희대 소프트웨어융합대학 동아리대항전 1위)*/} + {/* */} + {/* React.js, Tensorflow, kakao oauth, Spring,*/} + {/* MySQL, redis*/} + {/* */} + {/*
*/} + {/* */} + {/* 기존 화상 회의 프로그램 및 공부 프로그램과 차별화 하여*/} + {/* */} + {/* 얼굴 인식된 시간을 측정하여 공부 집중도를 분석합니다.*/} + {/*
*/} + {/* */} + {/* 프론트엔드 2명, 백엔드 2명, 멘토 2명으로 진행하였습니다.*/} + {/* */} + {/* */} + {/* 그 중 저는 프론트엔드에서*/} + {/* */} + {/* */} + {/* 페이지 라우팅, 회원가입/로그인-kakao auth, 공부하기*/} + {/* 페이지-tensorflow 라이브러리 활용, 친구/그룹 추가/목록 페이지 -*/} + {/* 페이지, 컴포넌트 개발, 스터디 그룹 생성 페이지, 분석*/} + {/* 페이지(캘린더 날짜 설정, 시간 그래프화)를 구현하였습니다.*/} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* VIDEO 보기 →{" "}*/} + {/* */} + {/* */} + {/* {isVideoModalOpen1 ? (*/} + {/* */} + {/* ) : null}*/} + {/* */} + {/* */} + {/* */} + {/* GITHUB*/} + {/* */} + {/* */} + {/*
*/} + {/* */} + {/*
*/} + {/* */} - {/* /!* ---- BBuRing_log ---- *!/*/} - {/*
*/} - {/*
*/} - {/* bburing*/} - {/* */} - {/* */} - {/* <strong>BBuRing_log</strong>*/} - {/* */} - {/* */} - {/* - 전국 뿌링클 맛집 기록 웹사이트*/} - {/* */} - {/* */} - {/* React.js, Docker, Spring, Python, MySQL*/} - {/* */} - {/*
*/} - {/* 전국 뿌링클 맛집 탐방을 위해*/} - {/* 각 매장 별로 리뷰를 기록해둘 수 있습니다.*/} - {/*
*/} - {/* 프론트엔드 1명, 백엔드 1명으로 진행하였습니다.*/} - {/* */} - {/* 그 중 저는 프론트엔드에서*/} - {/* */} - {/* */} - {/* 페이지 라우팅, 홈 사이트 안내-애니메이션, kakao map api-마커*/} - {/* 등록, 지점 검색, 포스팅 확인-지도 클릭 시 리뷰/마우스 호버 글*/} - {/* 미리보기, 포스팅 작성을 구현하였습니다.*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* VIDEO 보기 →{" "}*/} - {/* */} - {/* */} - {/* {isVideoModalOpen2 ? (*/} - {/* */} - {/* ) : null}*/} - {/* */} - {/* */} - {/* */} - {/* GITHUB*/} - {/* */} - {/* */} - {/* /!* VIDEO*/} - {/*
*/} - {/* */} - {/*
*!/*/} - {/* */} + {/* ---- BBuRing_log ---- */} + {/*
*/} + {/*
*/} + {/* bburing*/} + {/* */} + {/* */} + {/* <strong>BBuRing_log</strong>*/} + {/* */} + {/* */} + {/* - 전국 뿌링클 맛집 기록 웹사이트*/} + {/* */} + {/* */} + {/* React.js, Docker, Spring, Python, MySQL*/} + {/* */} + {/*
*/} + {/* 전국 뿌링클 맛집 탐방을 위해*/} + {/* 각 매장 별로 리뷰를 기록해둘 수 있습니다.*/} + {/*
*/} + {/* 프론트엔드 1명, 백엔드 1명으로 진행하였습니다.*/} + {/* */} + {/* 그 중 저는 프론트엔드에서*/} + {/* */} + {/* */} + {/* 페이지 라우팅, 홈 사이트 안내-애니메이션, kakao map api-마커*/} + {/* 등록, 지점 검색, 포스팅 확인-지도 클릭 시 리뷰/마우스 호버 글*/} + {/* 미리보기, 포스팅 작성을 구현하였습니다.*/} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* VIDEO 보기 →{" "}*/} + {/* */} + {/* */} + {/* {isVideoModalOpen2 ? (*/} + {/* */} + {/* ) : null}*/} + {/* */} + {/* */} + {/* */} + {/* GITHUB*/} + {/* */} + {/* */} + {/* /!* VIDEO*/} + {/*
*/} + {/* */} + {/*
*!/*/} + {/**/} - {/* /!* ---- eclipse ---- *!/*/} - {/*
*/} - {/*
*/} - {/* bburing*/} - {/* */} - {/* */} - {/* <strong>Eclipse</strong>*/} - {/* */} - {/* */} - {/* - 대학생의 진로 걱정 해결을 위한 웹사이트*/} - {/* */} - {/* */} - {/* React.js Python(Django)*/} - {/* */} - {/*
*/} - {/* 코로나19 이후 선/후배 관계의 단절로*/} - {/* 진로 걱정이 많은 대학생들을 위해 기획하였습니다.*/} - {/*
*/} - {/* 프론트엔드 2명, 백엔드 2명으로 진행하였습니다.*/} - {/* */} - {/* 그 중 저는 프론트엔드에서*/} - {/* */} - {/* */} - {/* 디자인, 페이지 라우팅, 홈화면, 로그인, 교수-학생 소통 페이지,*/} - {/* 시간표 추천 페이지, 내 프로필 관리 페이지, 후원하기 페이지, 알람*/} - {/* 확인하기 페이지를 구현하였습니다.*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* VIDEO 보기 →{" "}*/} - {/* */} - {/* */} - {/* {isVideoModalOpen3 ? (*/} - {/* */} - {/* ) : null}*/} - {/* */} - {/* */} - {/* */} - {/* GITHUB*/} - {/* */} - {/* */} - {/* /!* VIDEO*/} - {/*
*/} - {/* */} - {/*
*!/*/} - {/* */} + {/* /!* ---- eclipse ---- *!/*/} + {/*
*/} + {/*
*/} + {/* bburing*/} + {/* */} + {/* */} + {/* <strong>Eclipse</strong>*/} + {/* */} + {/* */} + {/* - 대학생의 진로 걱정 해결을 위한 웹사이트*/} + {/* */} + {/* */} + {/* React.js Python(Django)*/} + {/* */} + {/*
*/} + {/* 코로나19 이후 선/후배 관계의 단절로*/} + {/* 진로 걱정이 많은 대학생들을 위해 기획하였습니다.*/} + {/*
*/} + {/* 프론트엔드 2명, 백엔드 2명으로 진행하였습니다.*/} + {/* */} + {/* 그 중 저는 프론트엔드에서*/} + {/* */} + {/* */} + {/* 디자인, 페이지 라우팅, 홈화면, 로그인, 교수-학생 소통 페이지,*/} + {/* 시간표 추천 페이지, 내 프로필 관리 페이지, 후원하기 페이지, 알람*/} + {/* 확인하기 페이지를 구현하였습니다.*/} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* VIDEO 보기 →{" "}*/} + {/* */} + {/* */} + {/* {isVideoModalOpen3 ? (*/} + {/* */} + {/* ) : null}*/} + {/* */} + {/* */} + {/* */} + {/* GITHUB*/} + {/* */} + {/* */} + {/* /!* VIDEO*/} + {/*
*/} + {/* */} + {/*
*!/*/} + {/* */} - {/* /!* ---- gallery web ---- *!/*/} - {/*
*/} - {/*
*/} - {/* bburing*/} - {/* */} - {/* */} - {/* <strong>gallery web</strong>*/} - {/* */} - {/* */} - {/* - 찍은 사진들을 기록해둘 수 있는 웹사이트*/} - {/* */} - {/* */} - {/* React.js, firebase*/} - {/* */} - {/*
*/} - {/* 사진 찍는 것을 좋아하는 사람들을 위해*/} - {/* */} - {/* 웹사이트에 기록해둘 수 있는 웹사이트를 기획하였습니다.*/} - {/* */} - {/*
*/} - {/* 혼자 toy project로 진행하였습니다.*/} - {/* */} - {/* 디자인, 페이지 라우팅, 홈화면, 회원가입/로그인, 개인정보 수정,*/} - {/* 글/사진 업로드, 포스팅 확인, 포스팅 수정, 포스팅 삭제를*/} - {/* 구현하였습니다.*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* VIDEO 보기 →{" "}*/} - {/* */} - {/* */} - {/* {isVideoModalOpen4 ? (*/} - {/* */} - {/* ) : null}*/} - {/* */} - {/* */} - {/* */} - {/* GITHUB*/} - {/* */} - {/* */} - {/* /!* VIDEO*/} - {/*
*/} - {/* */} - {/*
*!/*/} - {/* */} + {/* /!* ---- gallery web ---- *!/*/} + {/*
*/} + {/*
*/} + {/* bburing*/} + {/* */} + {/* */} + {/* <strong>gallery web</strong>*/} + {/* */} + {/* */} + {/* - 찍은 사진들을 기록해둘 수 있는 웹사이트*/} + {/* */} + {/* */} + {/* React.js, firebase*/} + {/* */} + {/*
*/} + {/* 사진 찍는 것을 좋아하는 사람들을 위해*/} + {/* */} + {/* 웹사이트에 기록해둘 수 있는 웹사이트를 기획하였습니다.*/} + {/* */} + {/*
*/} + {/* 혼자 toy project로 진행하였습니다.*/} + {/* */} + {/* 디자인, 페이지 라우팅, 홈화면, 회원가입/로그인, 개인정보 수정,*/} + {/* 글/사진 업로드, 포스팅 확인, 포스팅 수정, 포스팅 삭제를*/} + {/* 구현하였습니다.*/} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* VIDEO 보기 →{" "}*/} + {/* */} + {/* */} + {/* {isVideoModalOpen4 ? (*/} + {/* */} + {/* ) : null}*/} + {/* */} + {/* */} + {/* */} + {/* GITHUB*/} + {/* */} + {/* */} + {/* /!* VIDEO*/} + {/*
*/} + {/* */} + {/*
*!/*/} + {/**/} - {/* /!* ---- apartment ---- *!/*/} - {/*
*/} - {/*
*/} - {/* bburing*/} - {/* */} - {/* */} - {/* <strong>Search For Apartment Transactions</strong>*/} - {/* */} - {/* */} - {/* - 아파트 매매 실거래가를 확인할 수 있는 웹사이트*/} - {/* */} - {/* */} - {/* Vanilla.js, 공공데이터 api, aws 배포*/} - {/* */} - {/*
*/} - {/* 원하는 지역을 선택하여*/} - {/* */} - {/* 아파트의 매매 실거래가를 확인하고, 부동산 페이지로 넘어갈 수*/} - {/* 있습니다.*/} - {/* */} - {/*
*/} - {/* 프론트엔드 1명, api 크롤링 1명으로 진행하였습니다.*/} - {/* */} - {/* 그 중 저는 프론트엔드에서*/} - {/* */} - {/* */} - {/* 디자인, api 연동, 검색 기능, 부동산 사이트 http 하이퍼링크 등을*/} - {/* 구현하였습니다.*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* GITHUB*/} - {/* */} - {/* */} - {/* */} - {/**/} -
+ ); } diff --git a/src/types/enum.ts b/src/types/enum.ts index cb0ff5c..90660dd 100644 --- a/src/types/enum.ts +++ b/src/types/enum.ts @@ -1 +1,24 @@ -export {}; +export enum STACK_NAME { + VUE = "Vue", + TYPESCRIPT = "Typescript", + SASS = "Sass", + NODE = "Node.js", + POSTGRESQL = "PostgreSQL", + S3 = "AWS S3", + EC2 = "AWS EC2", + FIGMA = "Figma", + DOCKER = "Docker", + JENKINS = "Jenkins", + REACT = "React", + TENSORFLOW = "Tensorflow", + KAKAOOAUTH = "Kakao oauth", + SPRING = "Spring", + MYSQL = "MySQL", + REDIS = "Redis", + PYTHON = "Python", + DJANGO = "Django", + FIREBASE = "Firebase", + VANILLAJS = "VanillaJS", + OPENAPI = "Open api", + STYLEDCOMPONENT = "Styled Component", +}