CONN:ECT
한줄 소개
PHP를 활용한 패션 펀딩 커머스 구현
진행기간
Nov 1, 2020 → Nov 1, 2020
파트
PHP, HTML, CSS, JAVASCRIPT
Property
🔗 GitHub Lin👌 설명
- 와디즈와 유사한 패션 펀딩 사이트를 구현한 개인 프로젝트
- 아파치 웹 서버 프로그램을 사용했고 MySQL, PHP를 이용.
- css 실력 향상을 위해, 부트스트랩, antd와 같은 css 프레임워크를 사용하지 않음.
🌈 최종 결과물 정리 🌈
⭐ MAIN PAGE
⭐ LOGIN, LOGOUT
⭐ 회원가입
⭐ 메세지함(1)
⭐ 메세지함(2)
⭐ 진행중인 프로젝트
⭐ 프로젝트 등록
⭐ 프로젝트 상세 페이지(1)
.
⭐ 프로젝트 상세 페이지(2)
⭐ 프로젝트 상세 페이지(3)
⭐ 프로젝트 상세 페이지(4)
⭐ 프로젝트 수정
⭐ 프로젝트 TOP 5
⭐ 펀딩한 프로젝트
⭐ 등록한 프로젝트
🔗 GitHub Link
👌 설명
- 와디즈와 유사한 패션 펀딩 사이트를 구현한 개인 프로젝트
- 아파치 웹 서버 프로그램을 사용했고 MySQL, PHP를 이용.
- css 실력 향상을 위해, 부트스트랩, antd와 같은 css 프레임워크를 사용하지 않음.
🌈 최종 결과물 정리 🌈
⭐ MAIN PAGE
DETAIL:
-FOOTER: 사이트 개설한 가상의 회사 정보
-SECTION: 사이트 대표 이미지
로그인 하기 전 왼쪽 상단 아이콘 접근 불가
⭐ LOGIN, LOGOUT
DETAIL:
- 로그인 페이지에서 아이디, 비밀번호 모두 입력해야 로그인 가능.
- 아이디, 비밀번호 틀릴 시 로그인 불가 알림창 뜸.
⭐ 회원가입
DETAIL
- 체크 아이콘 (아이디 중복체크 기능), 사용 가능 아이디인지 체크.
- 회원가입 폼에서 한 문항이라도 입력하지 않으면 회원 가입 불가 알림창 뜸.
- 재입력 버튼 누를 시, 입력된 모든 문자 자동 삭제.
- 회원가입 완료 시에 자동으로 로그인 페이지로 이동.
⭐ 메세지함(1)
DETAIL
- 받는 유저 아이디에 현재 로그인된 유저 아이디 입력 시 전송 불가 알림창 뜸.
- 하나의 항목이라도 입력하지 않을 경우, 전송 불가 알림창 뜸.
- 메세지를 보낸 후, 자동으로 보낸 메세지함 페이지로 이동.
- 유저가 상대방에게 보낸 메세지를 최신순으로 3개씩 정렬.
- 아이콘으로 페이지 이동 가능.
- 유저가 상대방에게 받은 메세지를 최신순으로 3개씩 정렬
- 아이콘으로 페이지 이동 가능
- 제목 클릭 시 메세지 내용 페이지로 이동
보낸 메세지함:
-제목 클릭 시 메세지 내용 페이지로 이동.
나의 메세지함:
⭐ 메세지함(2)
DETAIL
메시지 내용:
- 답변하기 버튼은 나의 메시지함에서 메시지 내용을 접근 할 때만 보임.
답변 보내기:
- 답변하기 버튼 클릭 시 받는 유저 이름 보내는 사람의 이름과 아이디 자동 입력됨.
⭐ 진행중인 프로젝트
DETAIL
- 유저들이 올렸던 프로젝트들을 펀딩이 마감되지 않은 것들로만 최신순으로 정렬(제일 최근에 올린 프로젝트가 상단에 노출).
- 하단에 마감된 프로젝트 버튼 클릭 시 마감된 상품들이 최신순으로 정렬.
- 사진 클릭 시 상품 상세 페이지로 이동, 조회수 증가.
- 프로젝트 등록 버튼 클릭 시 프로젝트 등록 페이지로 이동.
- 페이지 존재. 10개씩 한 페이지에 배열.
⭐ 마감된 프로젝트
DETAIL
- 마감된 프로젝트들로만 최신순으로 정렬해서 배열.
- 사진 클릭 시 상품 상세 페이지로 이동, 조회수증가.
- 하단에 진행중인 프로젝트 버튼으로 펀딩 진행중인 상품이 최신순으로 정렬.
- 하단에 프로젝트 등록 버튼 클릭 시 프로젝트 등록 페이지로 이동.
⭐ 프로젝트 등록
DETAIL
- DESIGNER: 현재 로그인되어있는 유저의 이름 자동 입력.
- 목표 금액: 디자이너가 달성하고 싶은 펀딩의 총 목표 금액.
- 원가: 일반 쇼핑몰에서 판매 시 개당 가격.
- 펀딩시 가격: 원가에서 할인이 들어간 개당 가격.
- 한정 수량: 한 명의 유저가 펀딩을 하였을 시 최대로 펀딩 할 수 있는 수량.
즉 한 유저당 펀딩 수량에 제한을 두기 위함.
- 펀딩마감일: 펀딩마감 날짜.
- 제목, 내용, 상품이미지, 목표 금액, 원가, 펀딩시 가격, 한정수량, 펀딩 마감일 중 하나라도 내용이나 사진이 입력되지 않을 때 프로젝트 등록 불가 알림창 뜸. 목표금액,원가, 펀딩시 가격, 한정 수량이 숫자로 입력되지 않을 때 알림창 뜸.
- 프로젝트 등록 시 마이 페이지에 있는 자신이 등록한 프로젝트 페이지로 이동.
- 프로젝트 등록 시 1000point 자동 지급 알림창 뜸.
⭐ 프로젝트 상세 페이지(1)
DETAIL
현재 펀딩 현황 부분:
- 900%달성 -> 펀딩 달성률 (제품에 총 펀딩된 금액의 합/디자이너가 설정한 펀딩의 목표 금액 *100 ) 펀딩 달성률이 100% 이상일 때만 펀딩 독촉 메시지 보임(빨간색 글씨)
- 5,400원 펀딩 -> 누적 펀딩 금액
- 1명의 서포터 -> 펀딩한 사람들의 누적 수
- 지금 펀딩 시 최대 할인 금액 -> -(원가 – 할인된 가격)
제품 상세 정보 부분:
- DESIGNER -> 프로젝트 업로드 유저 이름
- 내용 -> 제품에 대한 상세 내용
- 얼리버드 가격 -> 할인된 개당 가격
- 목표 펀딩 금액 -> 디자이너가 세팅한 펀딩의 목표 금액
- 펀딩 마감일 -> 펀딩 종료 날짜
- 등록 날짜 -> 프로젝트 올린 날짜
.
⭐ 프로젝트 상세 페이지(2)
DETAIL
버튼 부분:
- 메세지 보내기 -> 프로젝트를 올린 유저에게 즉각적으로 메세지를 보낼 수 있는 버튼. 클릭 시 프로젝트를 업로드한 유저의 아이디가 입력된 상태로 메세지 보내기 페이지 열림.
- 펀딩하기 -> 펀딩 신청 양식창 뜸.
- 목록 -> 진행중인 펀딩 페이지로 이동.
- 자신이 등록한 프로젝트의 상세페이지에서는 펀딩하기와 메세지 보내기 버튼이 생성되지 않는다. 다른 유저가 올린 프로젝트에서만 생성된다.
펀딩하기:
- 얼리버드 가격: 할인된 개당 가격.
- 제한 수량: 한번 펀딩 시 펀딩 가능한 최대 수량.
- 수량: +,- 버튼 클릭 시 얼리버드 가격에 맞춰 자동 계산되어 총비용 칸에 나타남, 직접 수량을 입력 가능, 수량이 제한 수량을 오버된 상태로 펀딩 하기 버튼을 클릭할 경우 펀딩 불가 알림창 뜸.
- 총비용: 텍스트 입력 불가 알림창 뜸.
- 보유 포인트: 현재 유저가 가지고 있는 포인트.
- 펀딩 하기 아이콘: 클릭 시 축하메세지 그리고 소진된 포인트와 남은 보유 포인트에 대한 알림창 뜸.
- 보유 포인트보다 펀딩 금액이 높을시 펀딩 불가 알림창 뜸.
⭐ 프로젝트 상세 페이지(3)
DETAIL
자신이 등록한 프로젝트 상세페이지로 접속할 경우:
버튼 부분:
- 수정, 목록 버튼: 항상 생성.
- 펀딩 마감하기: 현재까지 펀딩 달성률이 100% 이상일 때만 생성.
- 펀딩 삭제하기: 현재까지 서포터가 0명일 때만 생성.
즉 ,게시물을 등록한 디자이너(유저)들은 시간이 지나도 펀딩한 서포터의 수가 아예 없으면, 게시물을 삭제할 수 있고 펀딩률이 100% 이상 일 때만 펀딩을 종료하여 제품에 펀딩을 한 서포터들에게 제품을 즉각 배송시킬 수 있다.
설정 이유:
보통 모든 사람은 하루라도 빠르게 제품을 받아보고 싶다. 100% 이상일 때만 마감하기 버튼이 생성되어 디자이너들은 펀딩 달성률을 100%로 만들기 위해서 업로드 할 제품 퀄리티에 더 많은 신경을 써야
할 것이다. 만일 유저들이 제품을 빠르게 받아보고 싶다면 펀딩 달성률이 100%에 가까운 제품을 펀딩 해야 한다.
.
마감하기 버튼을 누를 경우:
- 마감된 프로젝트 입니다. 상품 제작중. 이라는 메세지 나옴(빨간색 글씨).
- 목록 버튼만 생성됨.
⭐ 프로젝트 상세 페이지(4)
DETAIL
현재 등록한 프로젝트에 아무도 펀딩 하지 않았을 때 로그인된 유저의 프로젝트일 경우:
- 펀딩 삭제하기 버튼 보여짐.
⭐ 프로젝트 수정
DETAIL
- 처음에 프로젝트 등록했던 양식 그대로 자동 입력됨. 하지만 목표 금액은 변경 불가.
- 목표 금액으로 현재까지 등록된 펀딩률이 바뀔 수 있기 때문.
따라서 디자이너들은 프로젝트를 올릴 때 신중히 목표 금액을 설정해야 한다.
- 양식 중 하나라도 입력하지 않았을 때 등록 불가 알림창 뜸.
⭐ 프로젝트 TOP 5
DETAIL
- 현재 펀딩이 마감되지 않고 펀딩률이 100% 이상을 달성한 제품들에 한하여 펀딩률이 높은 순서로 배열, 순위 지정. 만일 TOP 5 리스트의 제품이 펀딩 마감될 경우 이 페이지에서 없어진다.
- 사진 클릭 시 해당 제품의 상세페이지로 이동.
⭐ 마이 페이지
DETAIL
- 포인트 충전, 정보 수정, 펀딩한 프로젝트, 등록한 프로젝트 버튼 존재.
⭐ 포인트 충전
DETAIL
포인트 충전하기:
- 프로젝트에 펀딩하는 금액은 자신의 포인트로 펀딩 하는 시스템(결제 시스템과 유사). 포인트 부족시 포인트 충전.
- 포인트 충전하기 버튼 클릭 시 새로운 창 뜸. 충전 금액 입력창에 직접 충전하고 싶은 금액 적음.
Or 화살표 클릭 시 포인트가 자동으로 10000씩 증가.
- 포인트 수 만큼 레벨 자동 증가. 올라간 포인트로 인하여 레벨이 오를 시 축하 메세지 알림창 뜸.
⭐ 정보 수정
DETAIL
- 회원가입 시 등록된 자신의 정보를 수정 가능.
- 로그인된 유저 아이디와 이름은 자동 입력, 수정 불가
- 전화번호, 주소, 이메일, 비밀번호, 비밀번호 확인 자동 입력됨, 수정 가능
- 재입력 클릭 시 모든 입력 삭제됨.
⭐ 펀딩한 프로젝트
DETAIL
- 자신이 현재까지 펀딩 하였던 프로젝트들을 보여줌.
- 총 펀딩 금액 = (제품 한 개당 가격 * 자신이 총 펀딩한 수량)
- 수량 = 제품당 총 펀딩 수량.
- 펀딩을 한사람으로서는 펀딩이 마감되어 물품을 빠르게 받는 게 중요하다고 생각되어 자신이 펀딩했던 제품 중, 펀딩이 마감된 제품부터 맨 위에 정렬(최신순으로).
그 밑으로 자신이 펀딩한 제품 중 펀딩이 진행 중인 제품들 정렬(최신순으로).
- 페이지가 따로 없고 자신이 펀딩한 프로젝트들 모두 한 번에 정렬.
⭐ 등록한 프로젝트
DETAIL
- 자신이 업로드 하였던 프로젝트를 최신순으로 정렬(제일 최근에 올린 프로젝트가 상단에 노출).
- 페이지 존재. 총 두 개의 프로젝트가 한 페이지에 노출.
- 프로젝트 등록하기 버튼 클릭 시 프로젝트 등록하기 페이지로 접근.
