일상생활 속 환경을 위한 활동을 기반으로 가상공간을 꾸밀 수 있는 웹플랫폼
환경 보호를 위한 인식과 행동을 유발하기 위해 일상생활 속 활동을 기반으로 챌린지를 진행합니다. 챌린지 제안 기능을 통해 많은 사람들이 일상생활에서 환경을 보호할 수 있는 방법에 대해 고민하고, 사람들과 공유할 수 있다는 점에서 환경보호에 대한 관심을 증대하고 다양한 환경문제 해결법을 도출할 수 있습니다. 챌린지와 환경을 위한 SNS 커뮤니티인 피스를 통해 포인트를 획득하고, 포인트를 사용하여 섬 확장 및 아이템 구매를 통해 ‘나의 섬’을 꾸밀 수 있는 흥미로운 요소도 있습니다.
| 이름 | 역할 | 개발 내용 |
|---|---|---|
| 김신건 | 기획, 백엔드, 프론트엔드 | 프로젝트 기획/디자인 제작 및 프로젝트 전반의 개발을 관리/진행 |
| 김민정 | 프론트엔드 | 프론트엔드에서 백엔드로의 api 통신과 데이터 연결 및 컴포넌트 구조 설계 및 성능 최적화를 주로 담당 |
| 최유찬 | 프론트엔드 | 반응형 디자인 및 레이아웃 작업 및 페이지에 필요한 컴포넌트들을 주로 개발 |
| 권소예 | 프론트엔드 | 팀원 소개 페이지 반응형 및 재사용 가능한 컴포넌트들을 주로 개발 |
| 최지현 | 백엔드 | 백엔드 프로젝트 배포와 모델 구현 및 전반적인 API 개발하였으며 QA를 진행 |
| 진승희 | 백엔드 | 초기 세팅과 jwt 를 이용한 사용자의 인증 및 인가를 담당 |
- ESLint & Prettier (with Airbnb Style Guide) 를 통해 프로젝트 컨벤션 지정 컴포넌트명 및 디렉토리 구조 선 설계 후 개발 진행
- 손쉬운 레이아웃 개발을 위하여 Flex, Grid 등의 모던 CSS 기법 사용
- CSS 모델을 컴포넌트 레벨로 추상화하여 사용
- 컴포넌트 재사용을 고려하여 최소 단위의 컴포넌트부터 구성
- ➡️ 이후 기능 단위의 컴포넌트를 이전에 제작한 최소 단위 컴포넌트로 구성하여 기능을 연결
- ➡️ 기능 단위의 컴포넌트들을 레이아웃에 맞게 배치하여 페이지 구성
⚡ 컴포넌트의 재사용으로 불필요한 중복 코드 감소 및 개발 시간 단축 + 컴포넌트 단위의 배치로 UI 요소들이 유기적으로 배치되도록 반응형 디자인 설계
환경 문제의 심각성과 실생활 속 환경 보호 방법에 대한 인식 향상
- 환경 보호와 관련된 활동들을 한 곳에서 모아볼 수 있습니다.
- 실생활 속에서 가볍게 실천할 수 있는 활동들을 챌린지화 함으로써 다양한 환경 보호 방법에 대해 알릴 수 있습니다.
- 또한 챌린지 인증 공유 기능을 통해 다양한 SNS로 확산될 수 있는 파급력을 가집니다.
챌린지 인증 및 포인트 보상을 통해 환경 보호 활동의 실천력 향상 및 지속성 제공
- 환경 보호 활동에 대한 인식이 행동으로 이어질 수 있도록 게임적인 요소를 제공합니다.
- 포인트를 획득하여 ‘나의 섬’을 확장시키고, 섬에 배치시킬 아이템을 구매할 수 있습니다.
- 포인트를 획득하기 위해 환경 보호 활동인 챌린지에 참여하고, 이는 환경 보호 활동을 일상생활 속에서 습관화하여 지속적인 실천을 유도합니다.
환경 보호를 위한 창의적인 해결 방법 제안
- 챌린지 제안 기능을 통해 일상생활에서 환경을 보호할 수 있는 방법에 대해 고민할 수 있습니다.
- 람들과 공유할 수 있다는 점에서 다양한 분야의 환경문제 해결방안을 도출할 수 있습니다.
멸종 위기종에 대한 관심 증가
- 피스 페이지를 통해 환경 관련 정보를 공유하고, 챌린지를 참여해 받은 포인트로 나의 섬을 꾸밀 수 있습니다.
- 얻은 포인트로 멸종위기종를 입양할 수 있는데, 이를 통해 멸종위기종에 대한 관심을 이끌어낼 수 있다고 기대합니다.
- 챌린지 참여, 즉 환경을 위한 행동을 통해 얻은 포인트로 멸종 위기종을 입양할 수 있습니다. 이를 통해 챌린지 참여가 환경에 미치는 선한 영향력을 가시화할 수 있습니다.
git clone https://github.com/today-they-learned/peacepiece_front.git
cd peacepiece_front
yarn install
yarn start
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@material-ui/types": "5.1.0",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.10.1",
"@mui/styled-engine-sc": "^5.10.1",
"@mui/types": "^7.1.5",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^28.1.5",
"@types/node": "^18.0.4",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/react-responsive": "^8.0.5",
"@types/styled-components": "^5.1.25",
"axios": "^0.27.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-intersection-observer": "^9.4.0",
"react-isometric-grid": "^0.0.3",
"react-isometric-tilemap": "^1.0.0",
"react-material-ui-carousel": "^3.4.2",
"react-query": "^3.39.2",
"react-responsive": "^9.0.0-beta.10",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.3",
"styled-components": "^5.3.5",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"