<br><br>
📌 프로젝트 소개
<ins>MYCLOSET는 패션을 좋아하는 사람들을 위한 커뮤니티 플랫폼입니다.</ins>
- MYCLOSET 사용자들은 발매 정보나 착장 소개 등과 같은 패션 정보를 얻을 수 있습니다.
- 또한, 다양한 의견, 가치관을 가진 사람들끼리 소통할 수 있습니다.
API 명세서
https://spotless-seeker-00f.notion.site/MyCloset-API-22e13ddc688b8032bd03e12862047dc2?pvs=74
Notion
<br><br>
📌 선정이유
- 평소에 옷에 관심이 많아서 패션 커뮤니티를 만들어보고 싶다는 생각으로 시작하게 된 개인 프로젝트입니다.
- 다양한 패션 정보와 스타일을 공유하고 의견을 나눌 수 있는 공간을 구현해보고 싶었고, 그 과정에서 Node.js와 Express를 이용해 게시판 기능을 직접 설계하고 구현해보며 공부하고 싶었습니다.
<br><br>
📌 주요기능
🙋🏻♂️ 회원기능
- 회원가입 시 DAUM 주소 API 활용
- 마이페이지에서 프로필 사진 변경
- 마이페이지에서 로그인한 유저가 작성한 글 리스트
💬 커뮤니티
- 옷과 관련된 오뭐신, 오늘의 룩, 골라줘 커뮤니티
- 라이프 스타일의 자유, 밥밥, 운동, 유머, 일상 커뮤니티
- 오늘 올라온 글은 'n' 배찌로 구분
- AJAX를 이용한 댓글 등록
- AJAX를 이용한 좋아요 등록
<br><br>
📌 성장점
- AJAX를 활용한 댓글, 좋아요 기능 구현을 통해 새로고침 없이 동작하는 웹페이지를 만들 수 있었습니다.
- 커뮤니티 분리, 작성일에 따른 배찌 표시 등의 기능을 구현하면서 UI 구성에 대해 고민할 수 있었고, 실제로 사용해보면서 어떤 기능이 필요한지 직접 느끼고 반영해보는 경험을 해봤습니다.
<br><br>
📸 프로젝트 사진
🏠 메인 화면
<img width="1920" alt="Image" src="https://github.com/user-attachments/assets/20024f67-b320-40f2-a99d-7c55c85e935a" />📝 회원가입 & 로그인
| 회원가입 | 로그인 |
|---|---|
| <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/9e91b0cd-9658-4e78-8cf9-31dabcb66dc3" /> | <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/fd41e3e3-25e5-4bb5-89ae-377d8e4f4fd9" /> |
🏷️ 브랜드
<img width="1920" alt="Image" src="https://github.com/user-attachments/assets/e8c37f43-6334-4f81-893f-9fef7a44028d" />📖 에피소드
| 에피소드 메인화면 | 에피소드 2 |
|---|---|
| <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/3ea39604-3b64-4641-afaf-f7eeafc49325" /> | <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/ffd29d0c-be1d-4cfb-bb38-3a18751a07f3" /> |
💬 커뮤니티
| 커뮤니티 1 | 커뮤니티 2 |
|---|---|
| <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/f5c04094-3fa8-4e33-a2b2-828fe36b3ca9" /> | <img width="1920" alt="Image" src="https://github.com/user-attachments/assets/ae9f7d92-aa77-4226-91e0-f208cc685d92" /> |
✏️ 글쓰기
<img width="1920" alt="Image" src="https://github.com/user-attachments/assets/e8c37f43-6334-4f81-893f-9fef7a44028d" />🙍 마이페이지
<img width="1920" alt="Image" src="https://github.com/user-attachments/assets/202ecc79-0047-4b5a-a952-2f417d8e74fd" /> <br> <br>🚀 기술 스택
👨🏻💻Frontend : HTML, CSS, JavaScript
👨🏻💻Backend : NodeJs, Express
⚡️API : DAUM 주소 API
<br> <br>🛠️ 설치 및 실행 방법
1️⃣ 프로젝트 클론
git clone https://github.com/SongHyojun0228/Clothes-Project.git
cd Clothes-Project
2️⃣ 패키지 설치
npm install
3️⃣ 서버 실행
nodemon app.js
4️⃣ 로컬 환경에서 접속
http://localhost:3000
🙋🏻♂️ 회원 정보
로그인 정보
ID : thdgywns2300@gmail.com PW : song0228!