react
vitest, jest, testing-library/react 및 관련 dependency
mui/material 및 관련 dependency
react-router-dom
yarn
md파일 read및 처리를 위한 react-markdown, remark-gfm, react-syntax-highlighter
S-coreDream 폰트
aggroB 폰트
Pretendard 폰트
네이버 나눔고딕 폰트
src
├──components - 서비스 내에서 쓰이는 공통 컴포넌트
│ ├── ProjectCard.tsx - 프로젝트 섹션에서 쓰이는 Card 형 컴포넌트
│ └── ProjectMdFileReader.tsx - 프로젝트 섹션에서 내장 MD파일의 정보를 불러오기 위한 컴포넌트
│
├──css - 사이트 내에서 쓰이는 css
│ ├── Contents - 사이트 메인 섹션들에서 사용하는 css 모음
│ │ ├── Contacts.css - 연락처 섹션에서 사용하는 css
│ │ ├── MyInfo.css - 자기소개 섹션에서 사용하는 css
│ │ ├── Projects.css - 프로젝트 섹션에서 사용하는 css
│ │ ├── Stacks.css - 기술 스킬/스택 섹션에서 사용하는 css
│ │ └── Welcome.css - 첫화면 섹션에서 사용하는 css
│ ├── App.css - 사이트 전반적으로 기본이 되는 css
│ └── Reset.css - 브라우저별 설정되어있는 기본 css를 초기화시키기 위한 css
│
├──markdownFiles - 프로젝트 섹션에서 사용하는 프로젝트 항목별 MD파일 모음 (내용생략)
│
├──pages - 메인 컨텐츠 내 각 섹션
│ ├── Contents - 사이트 메인 섹션들 모음
│ │ ├── Contacts.tsx - 연락처 섹션
│ │ ├── Contents.tsx - 메인 컨텐츠
│ │ ├── MyInfo.tsx - 자기소개 섹션
│ │ ├── Projects.tsx - 프로젝트 섹션
│ │ ├── Stacks.tsx - 기술 스킬/스택 섹션
│ │ ├── ToTopButton.tsx - 일정 스크롤 이하일시 위로 가기 위한 버튼
│ │ └── Welcome.tsx - 첫화면 섹션
│ ├── Footer.tsx - 사이트 푸터 정의
│ ├── Header.tsx - 사이트 헤더 정의
│ ├── LeftMenu.tsx - 사이트 LeftMenu 정의 (미 사용)
│ └── Navigation.tsx - 사이트 nav정의 (탑메뉴)
│
└──test - 사이트 요소 테스트코드
├── Contents - 사이트 메인 섹션들 모음
│ ├── Contacts.test.jsx - 연락처 섹션 테스트코드
│ ├── MyInfo.test.jsx - 자기소개 섹션 테스트코드
│ ├── Projects.test.jsx - 프로젝트 섹션 테스트코드
│ └── Welcome.test.jsx - 첫화면 섹션 테스트코드
└── App.test.jsx - 사이트 푸터 정의 테스트코드