1. 사이트 구성
🔍 이미지를 마우스 우클릭 → "새 탭에서 열기"로 크게 볼 수 있습니다.
- 반응형
데스크탑, 태블릿 - 메인페이지
헤더(로그인/회원가입, 프로젝트 생성, 공지사항, 상품페이지, 견학/체험, 축제, 마이페이지, 커뮤니티로 이동하는 메뉴탭), 푸터 - 로그인, 회원가입, 아이디/비밀번호 찾기
(로컬스토리지 활용) - 브랜드스토리
- 프로젝트 생성
(로컬스토리지 / 프로젝트 정보, 프로젝트 스토리, 리워드 추가, 메이커 정보, 대표자 정보, 정책) - 상품리스트
(전체, 과일, 야채, 건강식품 필터링) - 상품 상세
(상품 목업데이터 + 로컬스토리지 / 후기작성기능 + 후원(결제)) - 후원(결제)
(Daum postcode 우편번호 선택 api) - 마이페이지
(로컬스토리지 / 구매내역, 후기작성, 펀딩신청정보) - 후기작성
(제목, 내용, 사진) - 축제 리스트
(카드 클릭시 축제 세부 페이지로 이동) - 축제 세부
(해당 축제 세부 이미지 + 관련 상품 렌더링) - 커뮤니티 게시판
(제목, 내용, 사진 + 댓글 + 게시물 신고) - 정부지원정책
(카드 클릭시 해당 공식 사이트로 링크 이동) - 견학/체험
(카드 클릭시 해당 공식 사이트로 링크 이동) - 공지사항 글쓰기, 삭제
(목업데이터 + 로컬스토리지) - 관리자 페이지
(로컬스토리지 / 공지사항 등록, 게시물 신고목록, 펀딩등록 신청, 축제상품 연동)
2. 📸 페이지 사진 보기
- 반응형
● 데스크탑뷰
헤더의 메뉴바, 로그인/회원가입, +프로젝트가 노출됨
● 태블릿뷰
헤더의 메뉴바가 햄버거 메뉴 안으로 들어감
- 메인페이지
● 헤더 각 탭 클릭시 해당 페이지로 이동
● 로그인 / 회원가입 클릭시 로그인 페이지로 이동
● + 프로젝트 클릭시 프로젝트 생성 페이지로 이동
● 슬라이드 배너
● 상품카드 클릭시 해당 상품 상세페이지로 이동
- 로그인, 회원가입, 아이디/비밀번호 찾기
● 로그인
프론트엔드 프로젝트이므로 소셜로그인은 작동하지 않음
● 회원가입
- 회원가입시 받은 정보를 로컬스토리지에 저장하여 회원가입 완료 안내 띄움
- 안내문 확인 클릭시 다시 로그인페이지로 리다이렉트
● ID / PW 찾기
- 프론트엔드 프로젝트이므로 모의 인증코드 등록하게 함(1234)
- 비밀번호 찾기도 동일
● 로그인
- 로컬스토리지에 저장되어 있는 유저정보로 검증하여 로그인
- 확인 버튼 클릭시 로그인 된 메인 화면으로 이동
● 로그인 된 메인
- 헤더에 로그인/회원가입 버튼이 마이페이지 버튼으로 바뀜
- 헤더에 로그아웃 버튼 생김
- 브랜드스토리
- 프로젝트 생성
● 프로젝트 생성 안내 페이지
- 지금 시작하기 클릭시 상품정보 입력 폼으로 이동
- 확인 누르면 마이페이지로 이동
- 펀딩신청한 내역 출력
- 상품리스트
- 전체, 과일, 야채, 건강식품 카테고리 필터링
- 상품카드 클릭시 해당 상품 상세페이지로 이동
- 상품 상세
- 상품상세 정보, 이미지 렌더링 (목업데이터)
- 상품옵션 선택 후 후원하기(결제) 가능
- 후원(결제)
- Daum postcode 우편번호 선택 api 사용
- 후원 완료 후 마이페이지로 이동
- 후원내역을 로컬스토리지에 저장하여 마이페이지에 렌더링
- 상품명 클릭시 해당 상품 상세 페이지로 이동
- 구매내역에서만 후기작성 가능
- 후기작성
- 로컬스토리지에 저장된 상품정보를 가져와 날짜, 상품명, 금액 렌더링
- 후기 등록 완료 알림 확인버튼 클릭시 마이페이지로 리다이렉트
- 후기작성 버튼을 작성완료로 변경하고, disabled 처리하여 중복작성 불가하게 함
- 후기작성 내용을 로컬스토리지에 저장하여 해당 상품 상세페이지 후기탭에 렌더링
- 로컬스토리지 용량 부족으로 이미지는 렌더링 못하였음
- 축제 리스트
- 카드 클릭시 해당 축제 세부 페이지로 이동
- 축제 세부
- 해당 축제 세부 이미지 렌더링
- 관련상품 렌더링
- 관련상품 클릭시 해당 상품 상세 페이지로 이동
- 커뮤니티 게시판
- 게시글 등록완료 알림 확인버튼 클릭시 커뮤니티 게시글리스트로 이동
- 글쓰기 내용을 로컬스토리지에 저장하여 게시글리스트에 렌더링
- 필터링 + 검색기능
- 글쓰기 내용을 로컬스토리지에 저장하여 게시글 상세에 렌더링
- 댓글 작성자 본인만 댓글 삭제 가능
- 중복 신고 방지
- 정부지원정책
- 정책카드 클릭시 해당 정책 관련 사이트로 이동
- 견학/체험
- 견학카드 클릭시 해당 업체 사이트로 이동
- 공지사항 글쓰기, 삭제
- 관리자만 공지사항 글쓰기 / 삭제 가능
- 관리자 페이지
- 게시글 신고 누적 횟수 조회 가능
- 펀딩신청한 상품을 승인/거부 가능
- 마이페이지에서 펀딩 상태 승인으로 변경됨
- 축제에 관련상품 연동하는 기능(프론트만 구현)
