README.md

PLKIT-FE.web

목차

1. 개요
2. 주요 기능
3. 커뮤니티 기능을 통한 데이터 공유
4. 제품 차별성
5. 기술 스택 및 개발 방법
6. 주요 기능 및 UI 설명
7. 프로젝트 디렉토리 구조

---

개요

스마트팜 데이터를 공유하고 거래할 수 있는 커뮤니티 중심의 웹 플랫폼입니다. 사용자 간의 지식 공유와 데이터 거래를 통해 스마트 농업 생태계를 활성화하고, 농업 전문가와 협업할 수 있는 기회를 제공합니다.

---

주요 기능

🌱 지식 공유

농업 종사자와 연구자들이 농업 관련 지식과 정보를 교류하며 실질적인 문제 해결 방안을 모색할 수 있습니다.

🤝 데이터 거래

사용자가 스마트팜에서 수집한 데이터를 등록하고, 필요한 데이터를 검색하여 구매할 수 있습니다.

🌍 사용자 인증

사용자는 본인 인증을 통해 데이터 공유 및 거래 서비스에 안전하게 접근할 수 있습니다.

---

커뮤니티 기능을 통한 데이터 공유

데이터 플랫폼을 통해 사용자들은 농업 데이터를 공유할 수 있으며, 주요 기능은 다음과 같습니다:

• 데이터 등록: 농업 종사자는 자신의 데이터를 플랫폼에 등록하고 가격을 설정하여 판매할 수 있습니다.
• 데이터 검색: 구매자는 필요한 데이터를 검색하고 구매할 수 있으며, 이를 통해 데이터 기반의 농업 연구 활성화와 농가 소득 증대에 기여할 수 있습니다.

---

제품 차별성

농업 데이터 교류 플랫폼

PLKIT은 단순한 데이터 모니터링을 넘어, 안전하고 신뢰할 수 있는 데이터 거래를 지원하는 환경을 제공합니다. 주요 차별화 요소는 다음과 같습니다:

• 데이터 수집: 다양한 센서를 통해 실시간으로 데이터를 수집하고 저장.
• 데이터 익명화: 개인정보 보호를 위한 데이터 익명화 처리로 데이터의 안전성을 확보.
• 수익 창출: 데이터 제공자에 대한 수익 분배 모델을 통해 데이터를 제공한 사용자에게 수익 창출의 기회를 제공합니다.

연구 기관과 농업 관련 기업은 필요한 데이터를 구매하여 연구 개발(R&D) 목적으로 활용할 수 있습니다.

---

기술 스택 및 개발 방법

이 프로젝트는 React를 기반으로 한 모듈형 컴포넌트 아키텍처를 사용하여 설계되었습니다. 각 기능이 독립적인 컴포넌트로 구현되어 유지보수성과 확장성을 높였으며, 데이터 통신 및 상태 관리를 최적화했습니다.

• 프론트엔드 프레임워크: React를 사용하여 컴포넌트 기반으로 설계하였으며, 사용자 경험을 개선하는 동적 웹페이지를 제공합니다.
• 스타일링: CSS-in-JS 방식의 Styled-Components를 사용하여 유지보수가 용이한 스타일링을 제공합니다.
• 백엔드 연동: API와 JWT 인증 방식을 기반으로 한 안전한 데이터 통신을 구현하였습니다.

이러한 기술 스택은 플랫폼의 성능과 보안성을 높이며, 다양한 스마트팜 장치와의 통합을 가능하게 합니다.

---

주요 기능 및 UI 설명

사용자 인증 및 접근 제어

• 사용자가 본인 인증을 완료하면, 커뮤니티와 마켓에 접근할 수 있습니다. 인증 완료 후 활성화된 서비스에 접근하여 데이터 공유 및 거래를 진행할 수 있습니다.

커뮤니티 (Community)

• 지식 공유: 커뮤니티에서 사용자들은 스마트팜에 대한 정보와 지식을 자유롭게 공유할 수 있습니다. 질문을 등록하고 답변을 받을 수 있어, 농업 관련 문제를 해결하는 데 도움을 줍니다

.

• 게시글 관리: 게시글을 등록, 수정, 삭제할 수 있으며, 다른 사용자의 질문에 대한 답변을 통해 지식을 교류할 수 있습니다.

• 게시글 상세보기: 각 게시글의 상세 페이지에서 내용을 확인하고, 추가 질문 및 답변을 통해 소통할 수 있습니다.

마켓 (Market)

• 데이터 거래: 사용자들이 스마트팜에서 수집한 데이터를 거래할 수 있습니다. 각 데이터에 대한 정보를 입력하고, 가격과 조건을 설정하여 판매할 수 있습니다.

• 거래 데이터 관리: 판매 중인 데이터의 정보를 수정하거나 삭제할 수 있으며, 데이터에 대한 상세 설명을 추가하여 구매자에게 필요한 정보를 제공합니다.

---

프로젝트 디렉토리 구조

PLKIT-FE.web
├── .env                  # 환경 변수 설정 파일
├── .gitignore            # Git에서 제외할 파일 목록
├── directory_structure.txt # 디렉토리 구조 파일
├── package-lock.json     # npm 패키지 종속성 관리 파일
├── package.json          # 프로젝트 설정 파일
├── README.md             # 프로젝트 설명 파일
├── public
│   ├── index.html        # HTML 템플릿 파일
│   └── imgs              # 이미지 파일 폴더
│       ├── default_1.jpg
│       ├── default_2.jpg
│       └── default_3.jpg
├── src
│   ├── axiosConfig.js    # Axios 설정 파일
│   ├── index.css         # 전역 스타일 파일
│   ├── index.js          # React 앱 진입 파일
│   ├── Main.js           # 메인 컴포넌트
│   ├── setupProxy.js     # 프록시 설정 파일
│   ├── api               # API 폴더
│   │   ├── index.js      # API 요청 관리 파일
│   │   └── mock.json     # 모의 데이터 파일
│   ├── assets            # 프로젝트에 필요한 이미지 및 아이콘
│   │   ├── catalog.svg
│   │   ├── google.svg
│   │   └── (기타 아이콘 파일들)
│   ├── components        # UI 컴포넌트 폴더
│   │   ├── App.js        # 주요 앱 컴포넌트
│   │   ├── Avatar.js     # 사용자 아바타 컴포넌트
│   │   ├── Button.js     # 버튼 컴포넌트
│   │   ├── Card.js       # 카드 컴포넌트
│   │   ├── Footer.js     # 푸터 컴포넌트
│   │   ├── Nav.js        # 네비게이션 컴포넌트
│   │   ├── SearchBar.js  # 검색 바 컴포넌트
│   │   └── (기타 컴포넌트 파일들)
│   ├── contexts          # 컨텍스트 관리 폴더
│   │   ├── AuthProvider.js       # 인증 컨텍스트
│   │   └── ToasterProvider.js    # 토스트 메시지 컨텍스트
│   ├── hooks             # 커스텀 훅 폴더
│   │   └── useIsMounted.js       # 컴포넌트 마운트 확인 훅
│   ├── lib               # 라이브러리 및 유틸리티 폴더
│   │   └── axios.js      # Axios 커스텀 인스턴스
│   ├── pages             # 주요 페이지 폴더
│   │   ├── CommunityListPage.js  # 커뮤니티 리스트 페이지
│   │   ├── CommunityPage.js      # 커뮤니티 상세 페이지
│   │   ├── MarketListPage.js     # 마켓 리스트 페이지
│   │   ├── MarketPage.js         # 마켓 상세 페이지
│   │   ├── LoginPage.js          # 로그인 페이지
│   │   ├── RegisterPage.js       # 회원가입 페이지
│   │   ├── HomePage.js           # 메인 홈 페이지
│   │   ├── NotFoundPage.js       # 404 에러 페이지
│   │   └── (기타 페이지 파일들)
│   └── utils             # 유틸리티 함수 폴더
│       └── getMarketColor.js     # 마켓 컬러 함수
└── node_modules          # 프로젝트 의존성 모듈

이 디렉토리 구조는 각 기능과 페이지를 독립적으로 관리하여 코드의 모듈화와 재사용성을 높였으며, 명확한 폴더 구조로 유지보수성을 강화했습니다.