'NearBuy' 프로젝트의 프론트엔드 서버에 사용되는 레포지토리입니다.
'NearBuy'는 1인 가구, 자취생들을 위한 동네 거래 플랫폼입니다. 공동구매 기능을 중심으로 기존의 중고 거래 플랫폼에서 제공하는 다양한 형태의 거래를 제공합니다.
현재 1인 가구의 비율은 전체 가구의 약 33%로, 2000년 약 15%에 비해 2배 이상 늘었습니다.
1인 가구 증가에 따라 가족과 단절되고 사회적 고립감이 심해지고 있고, 이에 따른 여러 가지 부작용이 발생하고 있습니다.
또한 1인 가구를 위한 많은 1인용 상품들이 출시되고있지만, 소포장되는 경우가 대부분이라 기존 품들보다 같은 양 대비 비싼 경우가 많습니다.
'NearBuy'는 1인 가구, 자취생들을 위한 혼자 먹고 쓰기에는 많은 양의 상품들의 공동구매 기능을 중심으로, 판매, 교환, 나눔, 경매 기능을 통해 1인 가구, 자취생들끼리 서로 필요한 물품을 구매하고 판매할 수 있게끔 제공합니다. 또한 거래를 위한 사람간의 대면을 통해 1인 가구의 사회적 고립감을 해결할 수 있게끔 하였습니다.
- FrontEnd : React, Next.js, TypeScript, Redux, Styled-Component, Tailwind CSS, Formik
- BackEnd : Spring Boot, MySQL, MongoDB, Docker, EC2, Route53, CertBot
- 공통 : Git, Postman
- 협업툴 : Notion, GitHub, Figma
아이디와 비밀번호를 입력받는 일반 로그인과 소셜 로그인을 지원합니다.
아이디(이메일), 이름(닉네임), 비밀번호를 입력 받아 회원가입을 진행합니다.
사용자의 정보와 게시한 글, 참여중인 글, 찜한 글, 거래 후기를 조회할 수 있습니다.
유저 프로필을 수정할 수 있으며, 일반 로그인 사용자에 한해 비밀번호 변경이 가능합니다.
해당 종류의 게시글을 조회하며, 최신순, 높은 가격순, 낮은 가격순으로 정렬할 수 있습니다.
또한 우측 상단 돋보기 버튼을 클릭해 검색어를 입력하면 제목, 내용, 태그에 검색어가 포함된 게시글을 조회합니다.
우측의 연필 버튼을 클릭하면 게시글을 작성할 수 있는데, 판매/교환/나눔, 경매, 공구 게시글 작성화면이 나뉘어져 있습니다.
제목, 내용, 태그, 주소, 사진을 등록할 수 있으며, 판매 게시글은 가격, 교환 게시글은 희망 교환 물품을 추가로 등록할 수 있습니다.
주소는 지도에서 지역을 입력하고 해당하는 마크를 클릭하여 등록합니다.
게시글 작성자의 경우 게시글 수정과 삭제 아이콘이 활성화되며, 작성자가 아닌 경우 게시글 찜과 신고 아이콘이 활성화됩니다.
채팅하기 버튼을 누르면 게시글 작성자와 1대1 채팅방이 개설됩니다.
제목, 내용, 태그, 주소, 사진을 등록할 수 있으며, 추가로 경매 시작 가격과 경매 가격 단위, 경매 만료일을 지정할 수 있습니다.
참여하기 버튼을 누르면 경매에 참여할 수 있고, 희망하는 가격으로 경매를 참여할 수 있습니다.
게시글 작성자는 경매 참여자를 조회할 수 있으며, 망치 버튼을 눌러 경매 낙찰을 진행할 수 있습니다.
경매 낙찰이 진행되면 더 이상 경매 참여가 불가하며, 게시글 작성자와 경매 낙찰자의 1대1 채팅방이 자동으로 개설됩니다.
제목, 내용, 태그, 주소, 사진을 등록할 수 있으며, 추가로 물품 가격, 공구 인원, 공구 일자, 공구 방법을 지정할 수 있습니다.
참여하기 버튼을 누르면 공구에 참여할 수 있습니다.
게시글 작성자는 공구 참여자를 조회할 수 있으며, 단체 채팅 버튼을 누르면 현재 공구 참여자들과 단체 채팅방을 개설합니다.
개설된 채팅방 목록과 채팅방별 채팅 목록을 확인할 수 있으며, 채팅을 할 수 있습니다.
- 1인용 상품을 사는 것보다 저렴하게 상품을 구할 수 있어 효율적인 소비가 가능할 것으로 기대됩니다.
- 거래를 위한 사람간의 대면을 통해 1인 가구가 가지는 사회적 고립감을 해소할 수 있을 것으로 기대됩니다.
- 1인 가구, 자취생 간 중고 거래를 통해 재활용이 증가함에 따라 환경보호 효과를 가져올 것으로 기대됩니다.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.