From 85e77b77fd6f98a24bfe7cdfc65d409be8ab515e Mon Sep 17 00:00:00 2001 From: ikikim Date: Sun, 9 Aug 2026 04:08:01 +0900 Subject: [PATCH] first commit --- README.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..246388f --- /dev/null +++ b/README.md @@ -0,0 +1,56 @@ +# UX/UI Portfolio Starter Kit V1 + +UX/UI 포트폴리오 수업을 위한 가벼운 React 기반 Starter Kit입니다. React는 화면을 컴포넌트로 나누어 작업하기 위한 도구로 사용하고, 최종 결과물은 `dist` 폴더의 정적 파일로 배포합니다. + +## 시작하기 + +1. [Node.js](https://nodejs.org/) LTS를 설치합니다. +2. 이 폴더에서 터미널을 엽니다. +3. 패키지를 설치합니다. + +```bash +npm install +npm run dev +``` + +브라우저에서 안내된 로컬 주소를 엽니다. + +## 어디를 수정하나요? + +- `src/pages`: Home, About, 프로젝트처럼 하나의 화면을 수정합니다. +- `src/components`: 여러 페이지에서 반복 사용하는 UI를 수정합니다. +- `src/styles`: 색상, 글꼴, 간격, 레이아웃을 수정합니다. +- `public/images`: 직접 사용할 이미지를 넣습니다. + +React에서 Page는 하나의 화면, Component는 여러 곳에서 다시 사용할 수 있는 UI 조각, Props는 Component에 전달하는 내용입니다. + +## 페이지 수정 + +- Home: `src/pages/Home.jsx`에서 소개 문구와 Selected Works를 수정합니다. +- About: `src/pages/About.jsx`에서 프로필, 경험, 기술, 연락처를 수정합니다. +- Project: `src/pages/projects/Project01.jsx` 같은 파일에서 프로젝트 내용을 수정합니다. 세 페이지는 서로 다른 레이아웃 예시입니다. +- 이미지: `public/images`에 파일을 넣고 컴포넌트의 `image` 경로를 `/images/파일명.jpg`로 바꿉니다. 샘플은 학습을 위해 외부 이미지 URL을 사용합니다. +- CSS: `src/styles/variables.css`에서 색상과 기본 간격을 먼저 바꾸고, `global.css`, `layout.css`, `components.css`에서 세부 스타일을 수정합니다. + +## 새 Component / Project 추가 + +새 UI 패턴은 `src/components`에 직관적인 이름의 `.jsx` 파일로 만듭니다. 반복되는 내용을 Props로 받아 재사용합니다. 새 프로젝트는 `src/pages/projects/Project04.jsx`를 만들고, `src/App.jsx`의 `Routes` 안에 다음처럼 Route를 추가합니다. + +```jsx +} /> +``` + +필요하면 `ProjectGrid.jsx`의 프로젝트 목록에도 카드를 추가합니다. 라우팅은 정적 호스팅에 적합한 `HashRouter`를 사용하므로 주소는 `#/about`, `#/works/project-01`처럼 표시됩니다. + +## 빌드와 배포 + +```bash +npm run build +npm run preview +``` + +`npm run build` 후 생성되는 `dist` 폴더 전체를 일반적인 정적 웹호스팅에 업로드합니다. 운영 서버에 Node.js, npm, 백엔드, 별도 rewrite 설정은 필요하지 않습니다. + +## 기술 범위 + +Vite, React, JavaScript, React Router의 HashRouter, Vanilla CSS만 사용합니다. TypeScript, Tailwind, Next.js, 백엔드, 데이터베이스, 전역 상태 관리, 애니메이션 라이브러리는 포함하지 않았습니다.