What's My Color?

• Personal Color Web Page 💄
• KW 3-2 Web Programming Final Project
• Duration : 2021.11 ~ 2021.12

🗓️ Introduction

• 퍼스널컬러

  • 개인이 타고날 때부터 가지고 있는 신체 색
  • 개인의 피부와 머리카락, 그리고 눈동자색과 가장 잘 어울리는 색
  
  

• 왜 퍼스널컬러가 중요할까?

  • 이제는 유행따라 가는 시대가 아닌, 개개인의 개성이 중요한 시대
  • 개인에 따라서 피부색, 머리카락색, 눈동자색 등의 생김새가 모두 다르기 때문에 어울리는 색도 다름
  • 퍼스널 컬러 테스트는 개인에게 가장 잘 어울리는 색을 진단하여 계절에 맞는 색으로 단점은 보완하고 장점은 극대화시켜 긍정적이면서도 자신감 있는 이미지를 연출해줌
  
  

🛠️ Development Environment

• Back : Node.js(express), Socket.io
• Front : HTML5(ejs), CSS3, JavaScript
• OS : Ubuntu / MacOS
• DBMS : MySQL

⛓️ Structure

🕹️ Feature

🏠 HOME   •   ☑️ 퍼스널컬러   •   ℹ️ 컬러팔레트   •   👥 커뮤니티   •   ⚙️ 마이페이지  

0. 개요

• 상단 카테고리 바를 통해 모든 페이지에서 다른 페이지로의 이동이 가능하다.
• 모든 메뉴는 'HOME' 메뉴를 제외한 회원가입이 된 사용자에 한하여 로그인 상태에서만 이용 가능하다.

1. HOME

• 로그인 상태에서 'HOME'에서 퍼스널 컬러 검사히기 버튼을 클릭하면 '퍼스널컬러 테스트' 페이지로 이동한다.
• 로그아웃 상태에서 위와 같은 기능을 동일하게 수행할경우, '로그인' 페이지로 이동한다.

2. 퍼스널컬러

• 퍼스널컬러 테스트 및 퍼스널 컬러 분류에 대한 정보를 제공하는 메뉴

1. 퍼스널컬러 테스트

• 테스트 시작 페이지

  
  • 퍼스널컬러 테스트 시작 전 안내 문구와 함께 테스트 진행 여부에 대해 사용자가 선택할 수 있게 한다.
  • 퍼스널컬러 검사하기 버튼을 클릭하면 본격적인 테스트가 진행된다.

• 테스트 진행 페이지

  
  • 9가지의 2지선다형 객관식 문항으로 제공된다.
  • 사용자가 보다 정확한 테스트를 진행할 수 있도록 각 문항에 테스트 참고 이미지 및 TIP을 제공한다.
  • 이전/이후 버튼을 클릭하여 결과 제출 전까지 문항을 수정할 수 있다.
  • 마지막 문항인 9번 문항으로 이동할 경우 결과보기 버튼이 활성화 되며, 이를 클릭하면 퍼스널컬러 테스트 결과를 알려준다.

• 테스트 결과 페이지

  
  • 사용자의 퍼스널컬러 테스트 결과를 알려준다.
  • 더 알아보기버튼은 해당 결과에 대한 자세한 정보를 제공하는 퍼스널 컬러 분류 페이지로 이동시킨다.
  • 결과 저장하기 버튼은 사용자의 테스트 결과를 저장하며, '마이페이지'에서도 확인이 가능하다.

2. 퍼스널컬러 분류

   
   • 테스트를 진행하지 않고도 해당 페이지로 이동하여 모든 퍼스널컬러 분류 정보를 볼 수 있다.
   • 테스트 결과 페이지에서 더 알아보기 버튼을 클릭할 경우, 분류 결과에 맞는 페이지로 이동시키며 위와 같이 다른 퍼스널 컬러의 정보도 볼 수 있다.

3. 컬러팔레트

1. 옷

   
   • 각 퍼스널 컬러별로 옷에 대한 컬러팔레트를 제공한다.
   • 사용자 본인의 퍼스널컬러에 맞는 옷 컬러팔레트를 참고하여, 옷을 코디할 때 색상 선택에 도움이 될 수 있도록 한다.

2. 메이크업 제품

   
   • 각 퍼스널 컬러별로 메이크업에 대한 컬러팔레트와, 색조 화장품 추천 리스트를 제공한다.
   • 사용자 본인의 퍼스널컬러에 맞는 메이크업 컬러팔레트, 추천 색조 화장품을 참고하여 메이크업 제품을 구매하거나 메이크업을 할 때 색상 선택에 도움이 될 수 있도록 한다.
   
   

4. 커뮤니티

• 메이크업, 옷, 기타의 세 가지 카테고리로 커뮤니티 기능을 제공한다.
• 사용자들이 커뮤니티 기능을 활용하여 각 카테고리 별로 정보 공유를 할 수 있도록 한다.

1. 게시글 리스트 조회

   
   • 카테고리 별로 게시글 리스트를 최신 작성순으로 조회한다.
   • 제목 또는 작성자를 기반으로 검색 및 조회할 수 있다.
   • 한 페이지당 10개의 리스트를 조회하며, 하단의 페이지 번호를 클릭해 이전/이후의 게시물 리스트를 조회할 수 있다.
   • 작성하기 버튼을 누르면 해당 카테고리의 게시글 작성하기 페이지로 이동한다.
   • 게시글 리스트의 특정 게시물의 제목을 누르면 게시글 상세보기 페이지로 이동한다.
   
   

2. 게시글 작성하기

   
   • 제목 및 내용 작성(필수), 파일 첨부(선택)를 하여 작성할 수 있다.
   • 우측 상단의 드롭다운 바를 선택하여 카테고리를 변경하여 게시글을 작성할 수 있다.
   
   

3. 게시글 상세보기

   
   • 카테고리 별로 모든 작성된 게시물 상세보기가 가능하다.
   • 자신이 작성한 게시글은 수정 및 삭제할 수 있다.
   • 다른사람이 작성한 게시글은 상세보기만 가능하다.
   
   

4. 게시글 수정하기

   
   • 제목, 내용, 파일은 수정이 가능하나 카테고리는 수정이 불가능하다.
   • 제목, 내용은 공란 작성(수정)이 불가능하다.
   
   

5. 마이페이지

1. 정보보기/수정

   
   • 현재 사용자의 회원정보(이름, ID, 비밀번호, 퍼스널컬러)를 조회할 수 있다.
   • 회원 정보 중 비밀번호만 수정할 수 있다.
   • 퍼스널컬러는 첫 회원 가입 시 공란이다. 퍼스널컬러 테스트를 수행하고 결과를 저장했을 경우, 가장 최근에 저장한 데이터 기준으로 저장 및 조회된다.
   
   

2. 탈퇴하기

   
   • 사용자가 회원 탈퇴를 시도하려는 것이 맞는지에 대한 확인 문구를 제공한다.
   • 현재 사용자의 비밀번호를 올바르게 입력하고 탈퇴하기를 누르면 해당 사용자의 계정이 삭제된다.
   
   

3. 로그아웃

   • 로그인한 사용자의 세션이 해제되며 메인페이지로 이동된다.
   
   

📑 References

• 퍼스널컬러 테스트 : http://www.colorz.co.kr/ (This page is currently closed.)