프로젝트 개요

이 프로젝트는 제주도 서귀포의 감귤 농장을 중심으로 한 웹 애플리케이션입니다. 사용자는 농장에 대한 정보, 제품 목록, 공지사항, 사용자 리뷰 등을 볼 수 있으며, 회원가입과 로그인을 통해 다양한 기능을 사용할 수 있습니다. 주요 기능으로는 제품 구매, 장바구니 관리, 사용자 리뷰 작성 등이 포함됩니다.
반응형으로 모바일, PC 모든 환경에서 잘 동작합니다.

주요 기능 및 페이지 설명

1. 메인 페이지 (mainpage.html)

• 기능: 농장과 제품에 대한 전반적인 소개.
• 구성 요소:
  • 배너: 농장의 이미지와 광고 메시지를 포함.
  • 리뷰 섹션: 사용자 리뷰를 보여줌.
  • 상품 이미지: 농장의 주요 상품 이미지와 특징을 보여줌.

2. 설명 페이지 (about.html)

• 기능: 농장에 대한 이야기.
• 구성 요소:
  • 농장 소개: 농장의 장점을 이야기로 풀어서 설명함.

3. 제품 페이지 (products.html)

• 기능: 제품 목록을 보여주고, 사용자가 제품을 장바구니에 추가할 수 있음.
• 구성 요소:
  • 제품 목록: 각 제품에 대한 정보와 가격을 표시.
  • 장바구니 버튼: 사용자가 제품을 장바구니에 추가할 수 있음.
  • 관리자 기능: 관리자는 제품을 추가하거나 삭제할 수 있음.

4. 공지사항 페이지 (notices.html)

• 기능: 농장의 공지사항을 보여줌.
• 구성 요소:
  • 공지 목록: 공지 제목, 작성자, 날짜, 클릭 수 등을 표시.
  • 공지 내용: 클릭 시 공지의 자세한 내용을 표시.
  • 관리자 기능: 관리자는 공지를 추가하거나 삭제할 수 있음.

5. 리뷰 페이지 (reviews.html)

• 기능: 사용자 리뷰를 보여주고, 필터 및 정렬 기능을 제공.
• 구성 요소:
  • 리뷰 목록: 사용자 리뷰 제목, 작성자, 제품명, 별점, 날짜 등을 표시.
  • 리뷰 필터: 제품명으로 리뷰를 필터링.
  • 리뷰 정렬: 날짜, 별점, 클릭 수로 리뷰를 정렬.
  • 리뷰 요약: 평균 별점과 각 별점에 해당하는 리뷰 수를 시각적으로 표시.

6. 새 리뷰 작성 페이지 (new-review.html)

• 기능: 사용자가 새로운 리뷰를 작성하고 제출할 수 있음.
• 구성 요소:
  • 리뷰 작성 폼: 제목, 작성자 이름, 제품 선택, 별점, 리뷰 내용을 입력.
  • 리뷰 제출: 작성한 리뷰를 저장하고 리뷰 페이지로 이동.

7. 회원가입 페이지 (sign-in.html)

• 기능: 사용자가 새로운 계정을 생성할 수 있음.
• 구성 요소:
  • 회원가입 폼: 사용자 ID, 비밀번호, 이름, 주소, 전화번호, 생년월일을 입력.
  • 회원가입 버튼: 입력한 정보를 기반으로 계정을 생성하고 저장.

8. 로그인 페이지 (login.html)

• 기능: 사용자가 로그인을 통해 개인화된 기능을 사용할 수 있음.
• 구성 요소:
  • 로그인 폼: 사용자 ID와 비밀번호를 입력.
  • 로그인 버튼: 입력한 정보로 사용자 인증을 수행.
  • 회원가입 버튼: 회원가입 페이지로 이동.

9. 장바구니 페이지 (cart.html)

• 기능: 사용자가 장바구니에 담은 제품을 관리하고 구매할 수 있음.
• 구성 요소:
  • 장바구니 항목: 장바구니에 담긴 제품 목록과 수량을 표시.
  • 구매 버튼: 선택한 제품을 구매.
  • 전체 선택 버튼: 모든 제품을 선택하거나 선택 해제.

10. 마이 페이지 (my-page.html)

• 기능: 사용자 정보와 구매 내역을 관리할 수 있음.
• 구성 요소:
  • 회원 정보: 사용자의 개인 정보와 연락처를 표시.
  • 구매 내역: 사용자가 구매한 제품 목록을 표시.
  • 정보 수정: 사용자는 자신의 정보를 수정할 수 있음.

11. 공통 네비게이션 및 스타일

• 네비게이션 바 (navbar.js):

  • 로그인 여부에 따라 네비게이션 링크를 동적으로 업데이트.
  • 사이드바를 통해 모바일에서 네비게이션을 쉽게 접근할 수 있음.
  • 네비게이션 바의 링크와 사이드바 항목을 클릭하면 해당 페이지로 이동.

• CSS 파일들 (main.css, nav.css 등):

  • 각 페이지에 일관된 스타일을 적용하여 사용자 경험을 향상.
  • 네비게이션 바, 사이드바, 각 페이지의 주요 섹션을 스타일링.

기술 스택 및 데이터 관리

• HTML & CSS: 웹 페이지의 구조와 스타일을 정의.
• JavaScript: 사용자 인터랙션과 데이터 관리를 담당.
• Session Storage: 사용자 정보와 제품 데이터를 저장하고 관리.
• DOM 조작: 페이지 로딩 시 DOM을 동적으로 업데이트하여 사용자 경험을 개선.

데이터 흐름 및 관리

• 세션 스토리지: 사용자 로그인 정보, 제품 목록, 리뷰 등을 저장하고 필요한 페이지에서 가져와 사용.
• DOM 이벤트 리스너: 폼 제출, 버튼 클릭 등의 이벤트를 감지하고 적절한 동작을 수행.
• 데이터 검증: 사용자 입력 데이터의 유효성을 검사하여 잘못된 입력을 방지.