- Personal Color Web Page 💄
- KW 3-2 Web Programming Final Project
- Duration : 2021.11 ~ 2021.12
-
퍼스널컬러
- 개인이 타고날 때부터 가지고 있는 신체 색
- 개인의 피부와 머리카락, 그리고 눈동자색과 가장 잘 어울리는 색
-
왜 퍼스널컬러가 중요할까?
- 이제는 유행따라 가는 시대가 아닌, 개개인의 개성이 중요한 시대
- 개인에 따라서 피부색, 머리카락색, 눈동자색 등의 생김새가 모두 다르기 때문에 어울리는 색도 다름
- 퍼스널 컬러 테스트는 개인에게 가장 잘 어울리는 색을 진단하여 계절에 맞는 색으로 단점은 보완하고 장점은 극대화시켜 긍정적이면서도 자신감 있는 이미지를 연출해줌
- Back : Node.js(express), Socket.io
- Front : HTML5(ejs), CSS3, JavaScript
- OS : Ubuntu / MacOS
- DBMS : MySQL
🏠 HOME • ☑️ 퍼스널컬러 • ℹ️ 컬러팔레트 • 👥 커뮤니티 • ⚙️ 마이페이지
- 상단 카테고리 바를 통해 모든 페이지에서 다른 페이지로의 이동이 가능하다.
- 모든 메뉴는 'HOME' 메뉴를 제외한 회원가입이 된 사용자에 한하여 로그인 상태에서만 이용 가능하다.
- 로그인 상태에서 'HOME'에서 퍼스널 컬러 검사히기 버튼을 클릭하면 '퍼스널컬러 테스트' 페이지로 이동한다.
- 로그아웃 상태에서 위와 같은 기능을 동일하게 수행할경우, '로그인' 페이지로 이동한다.
- 퍼스널컬러 테스트 및 퍼스널 컬러 분류에 대한 정보를 제공하는 메뉴
- 퍼스널컬러 테스트
-
테스트 시작 페이지
- 퍼스널컬러 테스트 시작 전 안내 문구와 함께 테스트 진행 여부에 대해 사용자가 선택할 수 있게 한다.
- 퍼스널컬러 검사하기 버튼을 클릭하면 본격적인 테스트가 진행된다.
-
테스트 진행 페이지
- 9가지의 2지선다형 객관식 문항으로 제공된다.
- 사용자가 보다 정확한 테스트를 진행할 수 있도록 각 문항에 테스트 참고 이미지 및 TIP을 제공한다.
- 이전/이후 버튼을 클릭하여 결과 제출 전까지 문항을 수정할 수 있다.
- 마지막 문항인 9번 문항으로 이동할 경우 결과보기 버튼이 활성화 되며, 이를 클릭하면 퍼스널컬러 테스트 결과를 알려준다.
-
테스트 결과 페이지
- 사용자의 퍼스널컬러 테스트 결과를 알려준다.
- 더 알아보기버튼은 해당 결과에 대한 자세한 정보를 제공하는 퍼스널 컬러 분류 페이지로 이동시킨다.
- 결과 저장하기 버튼은 사용자의 테스트 결과를 저장하며, '마이페이지'에서도 확인이 가능하다.
-
퍼스널컬러 분류
- 테스트를 진행하지 않고도 해당 페이지로 이동하여 모든 퍼스널컬러 분류 정보를 볼 수 있다.
- 테스트 결과 페이지에서 더 알아보기 버튼을 클릭할 경우, 분류 결과에 맞는 페이지로 이동시키며 위와 같이 다른 퍼스널 컬러의 정보도 볼 수 있다.
-
옷
- 각 퍼스널 컬러별로 옷에 대한 컬러팔레트를 제공한다.
- 사용자 본인의 퍼스널컬러에 맞는 옷 컬러팔레트를 참고하여, 옷을 코디할 때 색상 선택에 도움이 될 수 있도록 한다.
-
메이크업 제품
- 각 퍼스널 컬러별로 메이크업에 대한 컬러팔레트와, 색조 화장품 추천 리스트를 제공한다.
- 사용자 본인의 퍼스널컬러에 맞는 메이크업 컬러팔레트, 추천 색조 화장품을 참고하여 메이크업 제품을 구매하거나 메이크업을 할 때 색상 선택에 도움이 될 수 있도록 한다.
- 메이크업, 옷, 기타의 세 가지 카테고리로 커뮤니티 기능을 제공한다.
- 사용자들이 커뮤니티 기능을 활용하여 각 카테고리 별로 정보 공유를 할 수 있도록 한다.
-
게시글 리스트 조회
- 카테고리 별로 게시글 리스트를 최신 작성순으로 조회한다.
- 제목 또는 작성자를 기반으로 검색 및 조회할 수 있다.
- 한 페이지당 10개의 리스트를 조회하며, 하단의 페이지 번호를 클릭해 이전/이후의 게시물 리스트를 조회할 수 있다.
- 작성하기 버튼을 누르면 해당 카테고리의 게시글 작성하기 페이지로 이동한다.
- 게시글 리스트의 특정 게시물의 제목을 누르면 게시글 상세보기 페이지로 이동한다.
-
게시글 작성하기
- 제목 및 내용 작성(필수), 파일 첨부(선택)를 하여 작성할 수 있다.
- 우측 상단의 드롭다운 바를 선택하여 카테고리를 변경하여 게시글을 작성할 수 있다.
-
게시글 상세보기
- 카테고리 별로 모든 작성된 게시물 상세보기가 가능하다.
- 자신이 작성한 게시글은 수정 및 삭제할 수 있다.
- 다른사람이 작성한 게시글은 상세보기만 가능하다.
-
게시글 수정하기
- 제목, 내용, 파일은 수정이 가능하나 카테고리는 수정이 불가능하다.
- 제목, 내용은 공란 작성(수정)이 불가능하다.
-
정보보기/수정
- 현재 사용자의 회원정보(이름, ID, 비밀번호, 퍼스널컬러)를 조회할 수 있다.
- 회원 정보 중 비밀번호만 수정할 수 있다.
- 퍼스널컬러는 첫 회원 가입 시 공란이다. 퍼스널컬러 테스트를 수행하고 결과를 저장했을 경우, 가장 최근에 저장한 데이터 기준으로 저장 및 조회된다.
-
탈퇴하기
- 사용자가 회원 탈퇴를 시도하려는 것이 맞는지에 대한 확인 문구를 제공한다.
- 현재 사용자의 비밀번호를 올바르게 입력하고 탈퇴하기를 누르면 해당 사용자의 계정이 삭제된다.
-
로그아웃
- 로그인한 사용자의 세션이 해제되며 메인페이지로 이동된다.
- 퍼스널컬러 테스트 :
http://www.colorz.co.kr/(This page is currently closed.)