개발기간 2024.03 ~ 2024.04

프로젝트 소개

내가 방문한 동네의 숨은 꽃구경 스팟을 공유하고, 개화 현황을 실시간으로 확인할 수 있는 플랫폼입니다. 유저들은 자발적으로 참여하여 꽃 구경 명소를 공유하고, 실제로 그곳을 방문하여 개화 현황을 업데이트할 수 있어요. 소셜 콘텐츠와 연계하여 공유할 수 있고 이를 통해 마이크로 꽃놀이 트렌드를 만들어갑니다. 비슷한 관심을 가진 유저들이 추천한 놀거리와 관련된 정보도 함께 제공되어 주변의 다양한 경험을 즐길 수 있어요. 함께 만들어가는 공간 경험 큐레이션 플랫폼으로, 지역의 아름다운 스팟들을 공유하는 즐거움을 함께 누릴 수 있습니다.

시작 가이드

요구사항

• Node.js ^20.11.1
• Npm ^10.5.0

Installation

$ git clone https://github.com/eodya/eodya-frontend.git
$ cd eodya-frontend

Frontend

$ npm install
$ npm start

기술 스택

Environment

Config

Development

Communication

Design

주요 기능

⭐ 등록 되어있는 여러 스팟을 한눈에 확인

• 사용자가 등록한 스팟을 카카오맵 마커를 통해 확인이 가능합니다.
• 주변에 등록된 스팟을 리스트로 확인이 가능합니다.

⭐ 스팟 등록, 후기 작성

• 등록된 스팟의 ID값으로 후기를 작성할 수 있습니다.

⭐ 카카오 간편 로그인

• 카카오 API을 통한 간편 로그인이 가능 합니다.

⭐ 여러 플랫폼으로 공유하기

• 페이스북, 카카오, 밴드, 트위터 등 여러 플랫폼으로 해당 스팟 주소를 공유할수 있습니다.

화면 구성

메인 페이지	근처의 명소	마커 정보
상세 정보	상세 정보 공유하기	스팟 등록
스팟 검색	스팟 상태 입력	스팟 후기 내용 입력
마이페이지 북마크	마이페이지 리뷰

아키텍쳐

eodya-frontend
├─ .gitignore
├─ .prettierrc.json
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ logo192.png
│  ├─ logo512.png
│  ├─ manifest.json
│  └─ robots.txt
├─ README.md
├─ src
│  ├─ App.test.tsx
│  ├─ App.tsx
│  ├─ assets
│  │  ├─ fonts
│  │  │  └─ PretendardVariable.woff2
│  │  └─ image
│  │     ├─ 404.svg
│  │     ├─ bg.svg
│  │     ├─ icon
│  │     │  ├─ arrow_drop_down.svg
│  │     │  ├─ bookmark.svg
│  │     │  ├─ bookmark_outline.svg
│  │     │  ├─ check.svg
│  │     │  ├─ close.svg
│  │     │  ├─ edit.svg
│  │     │  ├─ error.svg
│  │     │  ├─ home.svg
│  │     │  ├─ horiz.svg
│  │     │  ├─ icon_close.svg
│  │     │  ├─ location.svg
│  │     │  ├─ logout.svg
│  │     │  ├─ more.svg
│  │     │  ├─ person.svg
│  │     │  ├─ photo.svg
│  │     │  ├─ prev.svg
│  │     │  ├─ search.svg
│  │     │  ├─ setting.svg
│  │     │  ├─ share.svg
│  │     │  ├─ state_blooming.svg
│  │     │  ├─ state_full_bloom.svg
│  │     │  ├─ state_next_year.svg
│  │     │  ├─ state_not_selected.svg
│  │     │  ├─ state_not_selected_full.svg
│  │     │  └─ vintage.svg
│  │     ├─ logo.svg
│  │     ├─ marker
│  │     │  ├─ basic.png
│  │     │  ├─ blossom.png
│  │     │  ├─ blossom_click.png
│  │     │  ├─ bookmark.png
│  │     │  └─ user.png
│  │     └─ social
│  │        ├─ Band.png
│  │        ├─ Facebook.png
│  │        ├─ Instagram.png
│  │        ├─ Kakao.png
│  │        └─ Twitter.png
│  ├─ components
│  │  ├─ common
│  │  │  ├─ btn
│  │  │  │  ├─ BookMarkBtn.tsx
│  │  │  │  ├─ Btn.tsx
│  │  │  │  └─ Share
│  │  │  │     ├─ Modal
│  │  │  │     │  ├─ ErrorModal.tsx
│  │  │  │     │  └─ ShareModal.tsx
│  │  │  │     ├─ ShareBtn.tsx
│  │  │  │     ├─ SnsBox.tsx
│  │  │  │     └─ Social
│  │  │  │        ├─ BandShare.tsx
│  │  │  │        └─ KakakoShare.tsx
│  │  │  ├─ input
│  │  │  │  └─ Input.tsx
│  │  │  ├─ marker
│  │  │  │  ├─ BasicMarker.tsx
│  │  │  │  ├─ BlossomMarker.tsx
│  │  │  │  ├─ BookMarker.tsx
│  │  │  │  └─ UserMarker.tsx
│  │  │  ├─ menu
│  │  │  │  ├─ Navigation.tsx
│  │  │  │  └─ TopBar.tsx
│  │  │  ├─ spinner
│  │  │  │  └─ Spinner.tsx
│  │  │  └─ tag
│  │  │     └─ FlowerTag.tsx
│  │  ├─ layout
│  │  │  ├─ Layout.tsx
│  │  │  └─ SplashScreen.tsx
│  │  ├─ login
│  │  │  ├─ KakaoCallback.tsx
│  │  │  ├─ PrivateRoute.tsx
│  │  │  └─ PublicRoute.tsx
│  │  ├─ main
│  │  │  ├─ Btn
│  │  │  │  ├─ LocationBtn.tsx
│  │  │  │  └─ MainBookMarkBtn.tsx
│  │  │  ├─ Info
│  │  │  │  └─ Info.tsx
│  │  │  ├─ Modal
│  │  │  │  └─ RankModal.tsx
│  │  │  ├─ Search
│  │  │  │  └─ Search.tsx
│  │  │  └─ Tour
│  │  │     ├─ List.tsx
│  │  │     └─ Tour.tsx
│  │  ├─ mypage
│  │  │  ├─ BookPage.tsx
│  │  │  ├─ GridLayout.tsx
│  │  │  ├─ Image.tsx
│  │  │  ├─ Information
│  │  │  │  ├─ FormNickname.tsx
│  │  │  │  └─ Information.tsx
│  │  │  ├─ Modal
│  │  │  │  └─ LogoutModal.tsx
│  │  │  ├─ ReportPage.tsx
│  │  │  ├─ ReviewPage.tsx
│  │  │  └─ TabMenu.tsx
│  │  ├─ new
│  │  │  ├─ review
│  │  │  │  └─ SpotMore.tsx
│  │  │  ├─ SearchItem.tsx
│  │  │  ├─ spot
│  │  │  │  ├─ SpotMap.tsx
│  │  │  │  └─ SpotSearch.tsx
│  │  │  ├─ SpotDone.tsx
│  │  │  ├─ SpotInfo
│  │  │  ├─ SpotInfo.tsx
│  │  │  └─ SpotStatus.tsx
│  │  └─ review
│  │     └─ List.tsx
│  ├─ hook
│  │  ├─ mapLocation
│  │  │  ├─ useGetPostion.ts
│  │  │  └─ useWatchLocation.ts
│  │  ├─ useGetCity.ts
│  │  └─ useMypageTotal.ts
│  ├─ index.css
│  ├─ index.tsx
│  ├─ logo.svg
│  ├─ page
│  │  ├─ 404
│  │  │  └─ NotFound.tsx
│  │  ├─ detail
│  │  │  └─ Detail.tsx
│  │  ├─ login
│  │  │  └─ Login.tsx
│  │  ├─ main
│  │  │  └─ Main.tsx
│  │  ├─ mypage
│  │  │  ├─ BookMark.tsx
│  │  │  └─ Review.tsx
│  │  ├─ new
│  │  │  ├─ Review.tsx
│  │  │  └─ Spot.tsx
│  │  ├─ review
│  │  │  └─ List.tsx
│  │  └─ tour
│  │     └─ List.tsx
│  ├─ react-app-env.d.ts
│  ├─ reportWebVitals.ts
│  ├─ service-worker.ts
│  ├─ serviceWorkerRegistration.ts
│  ├─ setupProxy.js
│  ├─ setupTests.ts
│  ├─ store
│  │  ├─ @types
│  │  │  └─ main
│  │  │     ├─ marker
│  │  │     │  └─ MarkerType.ts
│  │  │     ├─ search
│  │  │     │  └─ SearchType.ts
│  │  │     ├─ spotInfo
│  │  │     │  └─ InfoPlaceType.ts
│  │  │     └─ tourList
│  │  │        └─ TourPlaceType.ts
│  │  ├─ features
│  │  │  ├─ auth
│  │  │  │  └─ authSlice.ts
│  │  │  ├─ errorModal
│  │  │  │  └─ modalSlice.ts
│  │  │  ├─ main
│  │  │  │  ├─ location
│  │  │  │  │  └─ locationSlice.ts
│  │  │  │  ├─ marker
│  │  │  │  │  └─ markerSlice.ts
│  │  │  │  ├─ search
│  │  │  │  │  └─ searchSlice.ts
│  │  │  │  └─ spotInfo
│  │  │  │     ├─ InfoPlace.ts
│  │  │  │     └─ InfoSlice.ts
│  │  │  └─ mypage
│  │  │     └─ infoSlice.ts
│  │  ├─ hooks.ts
│  │  └─ store.ts
│  ├─ types
│  │  ├─ ButtonProps.ts
│  │  ├─ InfoPlaceType.ts
│  │  ├─ LocationProps.ts
│  │  ├─ mypage
│  │  │  ├─ BookmarkType.ts
│  │  │  └─ ReviewType.ts
│  │  ├─ review
│  │  │  └─ ReviewType.ts
│  │  └─ SpotFormValuesType.ts
│  └─ utils
│     └─ mapLocation
│        ├─ fetchAddressAndName.ts
│        └─ getCurrentLocation.ts
├─ tailwind.config.js
└─ tsconfig.json

웹개발팀

김지유	김가희	소재훈
https://github.com/Banal972	https://github.com/soprue	https://github.com/jay-so