모닥

• 캠린이부터 캠핑 고인물까지 캠핑족을 위해 캠핑장 이용 후기와 캠핑장 정보를 함께 제공하는 사이트입니다.

프로젝트 구성 안내

1. 프로젝트 소개

FRONT END

BACK END

DEVOPS

TEST

</p>

2. 프로젝트 기획 의도

• 코로나 이후 '언택트'가 강조되었고, 캠핑에 대한 관심이 급부상했고, 캠핑지를 결정하는데 도움을 주는 사이트를 제작하기로 결정.
• 다른 사용자들이 직접 경험하고 작성한 후기는 유저들이 가장 신뢰할 수 있는 자료가 된다고 생각했고, 이를 중점적으로 보여주는 사이트를 제작하기로 했습니다.
• 실제로 캠핑장에 다녀온 사람만이 경험하고 느낀 정보가 있고, 캠핑장에서 제공하는 데이터와 리뷰를 손쉽게 모아 볼 수 있다면 캠핑장을 결정하는데 큰 도움이 될 것이라고 판단.
• 위와 같은 이유로 캠핑장 정보와 리뷰들을 간단하게 볼 수 있는 ‘모닥’ 프로젝트를 기획하게 되었습니다.

3. 서비스 주요 기능 설명

1. 로그인/로그아웃
2. 회원 가입
3. 회원 정보 수정

1. 헤더에서 캠핑장 상시 검색.
2. 캠핑장 리스트 페이지에서 테마별 캠핑장 추천. (자신이 좋아하는 캠핑장과 같은 테마의 여러 캠핑장을 추천받을 수 있다.)
3. 캠핑장 소개 페이지에서 리뷰 작성.
4. 메인 페이지에서 인기 캠핑장, 인기 리뷰를 보여줌으로서 해당 캠핑장 관심 유도

1. 다크 모드 버튼
2. 캠핑장 북마크(찜하기 기능)
3. 리뷰 좋아요 버튼
4. 리뷰 조건 정렬(최신순, 인기순 등)
5. 마이 페이지에서 내가 작성한 리뷰, 찜한 캠핑장 열람.

4. 프로젝트 구조

wire\_frame.png

5. 와이어프레임

• MODAK (와이어 프레임)

6. 기여

1. 프론트엔드 개발환경 세팅
2. Redux-tookit을 통한 상태관리 로직 작성
3. Custom Hook을 통한 재사용 로직 작성
4. Styled-Components를 통한 Dark Mode 적용

1. 전체 API(게시글 CRUD, 검색 로직 등) 로직 개발
2. JWT를 통한 유저 인증 구현
3. Nginx를 통한 Https 적용

7. 페이지 및 기능 캡처

main.gif

camp\_list.gif

filter.gif

sort.gif

detail.gif

add\_review.gif

bookmark.gif

user.gif

edit_user \(1\).gif

login.gif

darkmode.gif

search.gif

6. 문서

• 노션