Search

POPIT

생성일
2023/11/07 01:32
태그
깃허브
발표 영상
프로젝트 설명
POP-IT : 스토어 커넥트 - 팝업스토어 커뮤니티 어플리케이션
유형
명예의 전당
"POP-IT: 스토어 커넥트"는 한시적으로 팝업스토어나 플리마켓을 운영하는 청년 사업자와 소상공인을 지원하기 위한 어플리케이션입니다. 이 어플리케이션은 판매자의 상품 관리와 고객과의 상호작용, 로그인/회원가입 기능, 어드민 기능 등을 제공합니다. "스토어 커넥트"는 오프라인 팝업스토어와 플리마켓에서의 활동을 온라인 플랫폼으로 확장하여 소비자와 사업자 간의 소통과 거래를 원활하게 돕습니다.

프로젝트

프로젝트 아키텍처

기술 스택

Frontend

•
React
•
React-Router-Dom
•
React-Responsive-Carousel
•
Recoil
•
Axios
•
Json data
•
TypeScript
•
Vite
Styles
•
Tailwind CSS
•
daisyUI
•
React-icons

Backend

•
Java 11
•
Springboot
•
Gradle
•
MariaDB
•
Test : Postman
•
JPA
•
JWT
•
Spring Security
•
Docker
•
AWS EC2
•
AWS S3

 CI / CD

•
Deploy
◦
Vercel
◦
AWS EC2
◦
Docker(Docker compose)
•
Communication
◦
Slack
◦
Github
◦
GatherTown
◦
Discord

주요 기능

•
회원가입 및 로그인
•
내 주변 5키로 반경 내 스토어 찾기
•
지도 검색 및 이동
•
스토어 디테일, 분류
•
셀러 등록
•
스토어 / 상품 등록 및 수정
•
게시글 / 댓글 등록 및 수정
•
스토어 찜하기와 알림
Search
기능소개

배경

로그인 및 회원가입 기능입니다. 비밀번호 찾기 시 회원가입한 이메일로 새 비밀번호가 전송됩니다.

구현한 기능

•
FE
•
BE
회원가입 및 로그인

배경

지도 페이지에서 내 위치를 찾아 5km 내에 있는 스토어들을 보여줍니다.

구현한 기능

•
FE
카카오 map api를 사용해서 지도를 로드하고, geolocation으로 내 위치를 찾아
•
BE
지도 내 위치 기반 서비스

배경

지도에서 검색을 하고 선택시 해당 스토어 디테일로 이동됩니다.

구현한 기능

•
FE
•
BE
지도 검색 및 이동

배경

스토어들을 정렬, 분류하였습니다.

구현한 기능

•
FE
•
BE
스토어 디테일, 분류

배경

일반 유저가 셀러를 등록하여 셀러 버튼을 받고, 이후 셀러 등록이 가능합니다.

구현한 기능

•
FE
•
BE
셀러 등록

배경

스토어와 상품을 등록하고 수정합니다

구현한 기능

•
FE
•
BE
스토어 / 상품 등록 및 수정

배경

일반 유저는 댓글을, 셀러는 게시글을 등록 및 삭제 할 수 있습니다.

구현한 기능

•
FE
getAPI를 받아와서 게시글, 댓글을 가져왔습니다. deleteAPI를 가져와서 게시글, 댓글을 지웠습니다. 유저댓글 삭제의 경우, login시 정보를 받아오는 response값중, 닉네임을 localStorage에 저장하여, 글쓴이의 닉네임과 로그인한 사람의 닉네임이 같을시에만 삭제 버튼이 나타나도록 구현하였습니다. 유저 댓글은 한사람당 한 명만 쓸 수 있게 제한하여, 1개이상 글을 등록할 시, 엔티티값( status=500 )일때 알림창을 실행시킵니다.
•
BE

게시글 / 댓글 등록 및 삭제

배경

스토어에 좋아요를 누르면 해당 스토어 셀러가 게시물을 올렸을때 알림을 받을 수 있습니다.

구현한 기능

•
FE
getAPI를 이용해서 알림갯수와 알림내용을 받을 수 있습니다.
•
BE
스토어 찜하기와 알림

배경

셀러가 입력한 물품의 재고가 0개일때, 유저와 셀러에게 알려줍니다.

구현한 기능

•
FE
구매시, postAPI에서 엔티티값이 400일때, 에러로 받아와서 재고부족으로인한 구매가 불가능하다는 알림이 띄웁니다. 상품목록을 불러오는 getAPI에서 품절상태를 나타내는 데이터값을 내려받아 해당데이터가 품절이되면, css로 품절상태로 변하게 구현하였습니다.
•
BE

재고관리

ERD

트러블 슈팅

Search
Trouble Shooting

Proxy 설정

Problem - 클라이언트에서 서버 연결 Proxy 설정 (FE)

CORS에러

Problem - API 호출시 CORS Error 대처하기 (FE) → 서버에서 CORS 정책에 관한 설정을 변경하는 것 이외에 , 구글 크롬 확장 프로그램인 Allow CORS를 설치한다. → 버튼 ON 상태에서 CORS 오류를 대처할 수 있음.
Proxy 설정 & CORS 에러

RecoilRoot 감싸기

Problem - RecoilRoot
RecoilRoot

API Errors

Problem - Authorization 설정을 하지 않으면, 사용할 수 없는 API 존재. (FE)
Problem - API GET (FE)
API 연결에 관한 TroubleShooting

React 성능 최적화

•
useCallback (fn,[deps])
•
React.memo
useCallback & React.memo