Update README.md

README.md

@@ -1,36 +1,97 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# 🗂️ Folio
 
-## Getting Started
 
-First, run the development server:
+<img src="https://github.com/user-attachments/assets/4ac774a1-74d7-47fb-b7f3-c3ae603fbc67" width="600" />
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+> 개발자만을 위한 포트폴리오 제작 사이트 👉 [클릭](http://yrpark.duckdns.org/)
+
+> 예시를 확인해보세요! 👉 [클릭](http://yrpark.duckdns.org/test/3)
+
+## 🔨 Stack
+- **Frontend** : <img alt="Next.js" src ="https://img.shields.io/badge/Next.js-000000.svg?&style=for-the-badge&logo=Next.js&logoColor=white"/>
+<img alt="TypeScript" src ="https://img.shields.io/badge/TypeScript-3178C6.svg?&style=for-the-badge&logo=TypeScript&logoColor=white"/>
+
+- **Backend** : <img alt="Express" src ="https://img.shields.io/badge/Express-000000.svg?&style=for-the-badge&logo=Express&logoColor=white"/>
+<img alt="Node.js" src ="https://img.shields.io/badge/Node.js-5FA04E.svg?&style=for-the-badge&logo=Node.js&logoColor=white"/>
+- **Database**: <img alt="MariaDB" src ="https://img.shields.io/badge/MariaDB-003545.svg?&style=for-the-badge&logo=MariaDB&logoColor=white"/>
+
+- **CI/CD** : <img alt="Docker" src ="https://img.shields.io/badge/Docker-2496ED.svg?&style=for-the-badge&logo=Docker&logoColor=white"/>
+<img alt="GithubActions" src ="https://img.shields.io/badge/githubactions-2088FF.svg?&style=for-the-badge&logo=githubactions&logoColor=white"/>
+
+- **Server**: <img alt="RaspberryPi" src ="https://img.shields.io/badge/raspberrypi-A22846.svg?&style=for-the-badge&logo=raspberrypi&logoColor=white"/>
+<img alt="Apache" src ="https://img.shields.io/badge/apache-D22128.svg?&style=for-the-badge&logo=apache&logoColor=white"/>
 
-Open [http://yrpark.duckdns.org:3000](http://yrpark.duckdns.org:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## 📖 Description
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+오직 개발자만을 위한 포트폴리오 제작 사이트입니다. 개발자에게 필요한 정보만 간추려 스킬 스택, 프로젝트 경험을 포함한 간결한 포트폴리오를 제작해보세요.
 
-## Learn More
+## ⭐ Main Feature
+### 포트폴리오 생성 / 수정
+<img src="https://github.com/user-attachments/assets/2051a6e6-acda-4752-9621-8597b90506d9" width="600" />
+<img src="https://github.com/user-attachments/assets/a87e1984-e7af-491b-8ec0-e495de570165" width="600" />
 
-To learn more about Next.js, take a look at the following resources:
+### 포트폴리오 결과물
+포트폴리오 내보내기를 통해 링크가 클립보드에 복사됩니다. 프로젝트 명세 작성 시 첨부한 md 파일은 자세히 보기 버튼을 통해 확인할 수 있습니다.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+결과물은 다음 링크에서 확인해보세요. 👉 [클릭](http://yrpark.duckdns.org/test/3)
+<img src="https://github.com/user-attachments/assets/913fd259-6cec-40d0-b1d0-d61528372fc5" width="600" />
+<img src="https://github.com/user-attachments/assets/f98d8c0a-d52a-4fcf-9e3a-ff7aceba337a" width="600" />
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+### 회원가입 및 로그인
+<img src="https://github.com/user-attachments/assets/f3977220-0535-47b6-a858-aa82cd755ff5" width="600" />
 
-## Deploy on Vercel
+JWT 토큰을 이용하였습니다. 비밀번호는 단방향 암호화로 구현하였습니다.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### 아이디 찾기, 비밀번호 찾기
+회원가입 시 입력한 이메일로 아이디를 찾고, 임시 비밀번호를 발급하도록 구현하였습니다.
+<img src="https://github.com/user-attachments/assets/4bc60607-8f39-4502-b2c2-8684e514432c" width="400" />
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+### 개인정보 수정
+<img src="https://github.com/user-attachments/assets/6a067a92-ab56-4f49-af95-1bcd56c506f1" width="600" />
+
+### 반응형 UI
+<img src="https://github.com/user-attachments/assets/74997e37-ac3e-4897-acf0-02040d8988f0" width="200" />
+<img src="https://github.com/user-attachments/assets/97c91bbd-da07-42fe-9378-68183279a8dc" width="200" />
+<img src="https://github.com/user-attachments/assets/ebf9d0dc-4eae-499d-975a-7662e468d835" width="200" />
+
+
+
+## 💻 Getting Started
+
+### Installation
+```
+npm install
+```
+
+### Develpe Mode
+```
+npm run dev
+```
+
+### Production Mode
+```
+npm run build
+npm run start
+```
+
+## 📁 Project Structure
+
+```
+📁 /src
+├── 📁 app
+├── 📁 components : 하단에서 설명.
+│   ├── 📁 atoms
+│   ├── 📁 molecules
+│   ├── 📁 organisms
+│   └── 📁 templates
+├── 📁 utils : 미들웨어
+├── 📁 styles : css등
+├── 📁 store : for redux
+└── 📁 types : for Typescript type 정의
+```
+컴포넌트 구조를 모듈화하려고 노력했습니다.
+- 📁 **atoms** : button, input, p를 감싸는 기본적 컴포넌트
+- 📁 **molecules**  : atoms에 속한 컴포넌트를 여러개 조합한 컴포넌트
+- 📁 **organisms** : molecules와 atoms를 혼합해서 만든 컴포넌트. ex) 회원가입 양식, 푸터
+- 📁 **templates** : 페이지 스켈레톤. 어디에 atoms, molecules, organisms 배치할 지를 결정