🔗 Link

• Repository: https://github.com/Ohnus/Final_Project_Otzzang

🗂️ Table of Contents

• 👔 Introduction
• 🤝 Team Members
• 💻 Technologies Used
• 🔍 Features
• 📸 Screenshots
• 🛠 Prerequisites
• 📥 Installation
• 📝 Changelog
• 📧 Contact

👔 Introduction

• 프로젝트 이름: Otzzang(옷짱)
• 프로젝트 기간: 2023.06.12 ~ 2023.07.12
• 프로젝트 내용: 온라인 옷장으로 내 옷을 관리하고, 나의 옷장에서 날씨와 기온에 따른 옷을 추천해주는 서비스
• 프로젝트 목적: 해당 프로젝트는 KOSTA 257기 교육기간 중 진행된 파이널 프로젝트입니다. 교육기간 중 배운 JPA, REST API 기반 SpringBoot와 Vue.js 기술을 프로젝트에 도입함으로써 기술을 숙달하고, 기존 개발패턴이었던 jsp, handler, jQuery에서 새로운 개발패턴을 익히기 위해 진행된 프로젝트입니다.

🤝 Team Members

• 이주원
• 봉선호: https://github.com/Ohnus
• 문승미: https://github.com/moonparks
• 최예은: https://github.com/YeeBoss
• 손행원

💻 Technologies Used

• Programming Languages: Java, HTML5, CSS3, JavaScript
• Framework/Library: SpringBoot, JPA, REST API, Vue.js
• Server: Oracle DB, Apache Tomcat
• Envrionment/Tooling: Eclipse, VS Code, GitHub, Sourcetree
• Open API: 기상청 단기예보 API, 한국천문연구 출몰시각 API, 카카오 로컬 API, 네이버쇼핑 API

🔍 Features

1. Member Part

• 회원가입 시 정규표현식을 통한 유효성 검사
• 유효성 검사 대상: 아이디, 비밀번호, 이메일, 닉네임
• 로그인, 아이디 비밀번호 찾기 기능
• 이메일 인증 기능

2. Weather Part

• 현 위치의 24시간 기상 정보를 3가지 API를 통해 불러오기
• 날씨에 따른 view 아이콘 및 배경 변화
• 현재 기온을 기준으로 기온별 추천 옷을 카테고리별로 추천
• 추천된 카테고리로 옷장에서 옷 정보를 카드 형식으로 불러옴
• 옷 정보가 없을 경우 네이버 쇼핑 API로 연동된 옷 검색 결과를 불러옴
• 현재 기온과 유사한 날에 기록된 OOTW 게시글을 불러와 과거 옷차림 기록을 볼 수 있음

3. Closet & OOTW(Outfit of the weather) Board Part

• 이미지 drag&drop을 통해 옷장에 내 옷 등록하기
• 메뉴바에서 옷 카테고리 클릭하여 리스트 필터링
• 옷 키워드로 검색하여 리스트 필터링
• 즐겨찾기, 수정, 삭제 기능으로 옷 관리하기
• 2차원 배열과 JavaScript filter, find method를 활용한 더보기 기능
• 옷장에 등록된 옷을 바탕으로 OOTW 게시판에 날짜, 날씨, 기온, 간단한 커멘트와 함께 기록하기
• 날짜, 기온, 키워드로 작성된 게시글 검색하여 리스트 필터링
• 옷장에 등록된 옷이 삭제되면 해당 옷이 등록된 모든 OOTW 게시글 자동 삭제 기능

4. Outfit Coordination Board Part

• 내가 입었던 코디 사진 최대 3장까지 첨부하여 게시글 등록
• 전체 리스트 최신 순서로 정렬
• 유저, 태그(키워드) 검색하여 리스트 필터링
• 좋아요 누적 기능 및 북마크로 게시글 저장 기능
• 게시판 목적에 맞지 않는 게시글 신고하기 기능
• 신고된 게시글 즉시 숨김 기능

5. Battle Board Part

• 매주 새로운 테마로 진행되는 테마에 맞는 코디 배틀 게시판
• 금, 토, 일요일은 관리자에 의해 선정된 배틀 테마로 유저들이 테마에 맞는 코디 사진을 첨부하여 배틀 신청
• 월요일 오전 10시까지 관리자가 배틀을 신청한 유저들 중 랜덤으로 2명을 후보로 선정
• 선정된 2명의 후보는 월, 화, 수요일에 비밀투표를 받게 되고, 투표에 참여한 유저는 선택 번복 불가능
• 수요일 밤 11시59분까지 투표를 진행하고 목요일 자정에 자동 집계하여 이 주의 우승자를 선정
• 선정된 우승자는 일주일간 '이 주의 우승자' 게시판에 노출되며, 명예의 전당에 오르게 됨

📸 Screenshots

[Main]

• Otzzang의 메인 화면

[Member]

• 정규표현식을 이용한 회원가입 및 본인 인증을 위한 이메일 인증 기능

• 로그인 화면 & 아이디, 비밀번호 찾기 기능

• 프로필 수정 화면

[Weather]

• 기상청, 한국천문연구원 API를 통해 24시간 기상정보 호출

• 현재 위치의 현재 기온에 맞는 옷차림을 나의 옷장에서 추천해주기

• 옷장이 비어있으면 옷장 등록 페이지 또는 해당 카테코리 쇼핑 추천

• 현재의 날씨와 비슷한 날에 입었던 코디를 나의 OOTW 게시판에서 추천해주기

[Closet]

• 즐겨찾기, 최신 등록순으로 보여주는 나의 옷장 리스트

• 메뉴바의 카테고리를 클릭하여 필터해서 리스트 보여주기

• 이미지 drag&drop을 통해 옷장에 옷 사진 첨부하기

• 옷 사진 첨부한 후 기타 정보 입력하여 옷장에 내 옷 등록하기

[OOTW]

• OOTW 게시판 리스트 최신 날짜 순으로 보여주기

• OOTW 게시글 등록 폼, 이미지 추가 박스를 클릭하면 옷장에 등록된 옷을 보여주는 모달창을 띄움

• 나의 옷장에 등록된 옷을 보여주는 모달창, 해당 화면에서 내가 입었던 옷을 추가할 수 있음

• 입었던 옷을 추가하고 기타 정보를 입력하여 OOTW 게시글 등록하기기

[Coordi]

• 코디 게시판 리스트, 좋아요 및 북마크 기능이 있으며 유저 또는 태그로 게시글 검색이 가능함

• 코디 게시글 등록 폼, 클립 이미지를 클릭하여 이미지 첨부하기

• 이미지를 첨부하고,

• 태그를 남겨 게시글 등록하기

• 게시판 성격에 맞지 않는 게시글이 등록되면 신고를 할 수 있음

• 적절한 신고 카테고리를 선택하여 신고하기

• 관리자는 신고받은 게시글을 확인할 수 있음

• 관리자가 신고받은 게시글의 사유를 판단하여 삭제 또는 복구

[Battle]

• 명예의 전당 게시판에서 배틀에 대한 설명을 모달창으로 볼 수 있음

• 금요일 오전 10시 전, 관리자가 배틀 테마를 선정하기 전에 보여주는 화면

• 관리자가 테마 선정 후 유저들이 테마에 맞는 코디 사진을 첨부하여 배틀을 신청하는 화면

• 만약 배틀 신청자가 없다면 그 주의 배틀은 넘어감

• 신청자가 있다면 관리자가 랜덤으로 후보를 2명 선정, 선정된 후보들은 유저들의 투표를 받게 됨

• 목요일에 투표가 자동 집계되어 우승자가 선정됨, 우승자는 이 주의 우승자 게시판에 노출됨

• 역대 우승자들은 명예의 전당 게시판에 등록록

🛠 Prerequisites

• (Under construction)

📥 Installation

• (Under construction)

📝 Changelog

• No Changes Yet

📧 Contact

• 이주원: [email protected]
• 봉선호: [email protected]
• 문승미: [email protected]
• 최예은: [email protected]
• 손행원: [email protected]