codestates / canibuycar

🗄️ canIBuyCar

📝 설명

드림카 구매를 위한 최적의 저축 시작 시기 제공 서비스

집 하나 장만하기 힘든 21세기 청년들은 자신이 원하는 집은 이미 저 하늘의 별이 되어 손에 닿지 않는데

' 그렇다면 내가 마음속에 그리던 드림카는 살 수 있을까? '

혹시 차는 노력해보면 가능하지 않을까 생각해보게 되는 현실
외면하고 있지만, 누구나 자신이 꿈꾸던 드림카들이 있을 텐데
바로 그 드림카를 가지기 위해서 내가 언제부터 노력했어야 하는지 현실적으로 알려드립니다!

어쩌면 중세시대부터 모았어야 할 수도 있지만..

🔧 사용된 기술

📚 기능

[로그인 된 사용자 기능]

---

1. Create

   • board에서 comment 작성하여 글 추가하는 기능

   • 해당 comment에 '좋아요'를 추가하는 기능

   • 차 목록에서 bookmark로 즐겨찾기를 추가하는 기능

   • 회원 가입하여 유저 추가하는 기능

   
   

2. Read(car, board, bookmark)

   • car의 이미지를 클릭 시, 해당 car의 이름, 가격, 종류를 출력시켜주는 기능

   • car의 가격에 따라 저축금액을 작성 시 예상 저축 기간을 메세지로 출력시켜주는 기능

   • mypage에서 자신이 추가한 즐겨찾기 목록을 출력시켜주는 기능

   • mypage에 진입 시 자신의 이름을 출력시켜주는 기능

   • board에 작성되어있는 글들을 출력시켜주는 기능

   • board에 comment의 내용과 '좋아요'의 갯수를 출력시켜주는 기능

   
   

3. Update

   • mypage의 자신의 이름을 수정 할 수 있는 기능

   • mypage의 자신의 비밀번호를 수정 할 수 있는 기능

   
   

4. Delete

   • 자신의 bookmark를 삭제하는 기능

   • 자신이 작성한 comment 삭제하는 기능

   • 회원 탈퇴 기능

   
   

5. List(all)

   • main 화면에서 전체 브랜드 목록을 확인 할 수 있는 기능
   
   

6. List(category)

   • 원하는 브랜드명을 클릭하면, 그 브랜드에 있는 car의 목록을 확인 할 수 있는 기능
   
   

7. Search(car)

   • 해당 브랜드의 car 이름을 입력하면 해당 car의 이미지가 출력
   
   

8. quit

   • 메인페이지나 다른 브랜드의 화면으로 이동할 수 있는 기능
   
   

[일반 사용자 기능]

---

1. Create

   • 해당 comment에 '좋아요'를 추가하는 기능
   
   

2. Read(car, board, bookmark)

   • car의 이미지를 클릭 시, 해당 car의 이름, 가격, 종류를 출력시켜주는 기능

   • car의 가격에 따라 저축금액을 작성 시 예상 저축 기간을 메세지로 출력시켜주는 기능

   • board에 comment의 내용과 '좋아요'의 갯수를 출력시켜주는 기능

   
   

3. List(all)

   • main 화면에서 전체 브랜드 목록을 확인 할 수 있는 기능
   
   

4. List(category)

   • 원하는 브랜드명을 클릭하면, 그 브랜드에 있는 car의 목록을 확인 할 수 있는 기능
   
   

5. Search(car)

   • 해당 브랜드의 car 이름을 입력하면 해당 car의 이미지가 출력
   
   

6. quit

   • 메인페이지나 다른 브랜드의 화면으로 이동할 수 있는 기능
   
   

🌲 Project tree

canIBuyCar
├── .github
├── client
│   ├── public
│   ├── src 
│   │   ├── components
|   │   │   ├── brand
|   |   │   │   ├── Search.js
|   |   │   │   └── SideMenu.js
|   │   │   ├── car
|   |   │   │   ├── ClientComment.js
|   |   │   │   └── ServerComment.js
|   │   │   ├── Backgroud.js
|   │   │   ├── BookmarkButton.js
|   │   │   ├── Bookmark.js
|   │   │   ├── Calculations.js
|   │   │   ├── CheckLogin.js
|   │   │   ├── CheckPW.js
|   │   │   ├── Comment.js
|   │   │   ├── ContentContainer.js
|   │   │   ├── DeleteUserinfo.js
|   │   │   ├── EditComplete.js
|   │   │   ├── EditUserInfo.js
|   │   │   ├── Footer.js
|   │   │   ├── LoadingIndicator.js
|   │   │   ├── LoadingSign.js
|   │   │   ├── MypageSideBar.js
|   │   │   ├── Navbar.js
|   │   │   ├── StyledButton.js
|   │   │   ├── StyledDiv.js
|   │   │   ├── StyledInput.js
|   │   │   └── StyledLink.js
│   │   ├── img 
|   │   │   ├── brandLogo
|   │   │   ├── marked.png
|   │   │   └── unmarked.png
│   │   ├── pages
|   │   │   ├── Board.js
|   │   │   ├── Brand.js
|   │   │   ├── Car.js
|   │   │   ├── Landing.js
|   │   │   ├── Login.js
|   │   │   ├── Main.js
|   │   │   ├── Mypage.js
|   │   │   ├── Signup.js
|   │   │   └── SignupComplete.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── reset.css
|   |
│   ├── package.json
│   └──  README.md
├── server
│   ├── config
│   ├── controllers
│   │   ├── auth
|   │   │   ├── edit.js
|   │   │   ├── emailValidate.js
|   │   │   ├── index.js
|   │   │   ├── login.js
|   │   │   ├── logout.js
|   │   │   ├── password.js
|   │   │   ├── remove.js
|   │   │   └── signup.js
│   │   ├── board
|   │   │   ├── create.js
|   │   │   ├── getAll.js
|   │   │   ├── index.js
|   │   │   └── remove.js
│   │   ├── bookmark
|   │   │   ├── create.js
|   │   │   ├── getAll.js
|   │   │   ├── index.js
|   │   │   └── remove.js
│   │   ├── car
|   │   │   ├── getCars.js
|   │   │   └── index.js
│   │   ├── comment
|   │   │   ├── create.js
|   │   │   ├── index.js
|   │   │   └── remove.js
│   │   ├── result
|   │   │   ├── getByYear.js
|   │   │   └── index.js
│   │   └── index.js
│   ├── migrations
│   ├── models
│   │   ├── car.js
│   │   ├── comment.js
│   │   ├── index.js
│   │   ├── result.js
│   │   ├── user.js
│   │   ├── users_car.js
│   │   └── users_comment.js
│   ├── routers
│   │   ├── auth.js
│   │   ├── board.js
│   │   ├── bookmark.js
│   │   ├── car.js
│   │   ├── comment.js
│   │   └── result.js
│   ├── seeders
│   │   ├── seed1-user.js
│   │   ├── seed2-car.js
│   │   └── seed3-result.js
│   ├── package.json
│   └── index.js
├── scripts 
│   ├── initialize.sh
│   ├── start.sh
│   └── stop.sh
├── appspec.yml
├── buildspec.yml
└── README.md

🚀 프로젝트 실행

🔜 링크 주소

http://canibuycar-client.s3-website.ap-northeast-2.amazonaws.com/

🤝 기획자

신성훈 엄혜진 유대형 이정훈B

canibuycar's Issues

[Task] 코멘트 삭제

ISSUE

• Group: server
• Type: delete
• Detail: delete comment in board

TODO

• delete commentId in users_like table

[Task] 차량 페이지

ISSUE

• Group: client
• Type: feature
• Detail: 차량 사진을 클릭 했을 때 나오는 페이지 구현

TODO

• 차량 사진 / 차량 정보 / 오른 쪽에는 글이 들어있는 3개 분류로 구성된 페이지 구현
• 확인 / 공유하기 버튼 구현
• 차량 사진 / 차량 정보 DB에서 받아온 것을 기반으로 구현
• 달마다 저축할 수 있는 금액을 적는 inputbox 구현

[Task] 차 정보 조회

ISSUE

• Group: server
• Type: feature
• Detail: get car data

TODO

• get car data by brand
• get car data by car name
• send car data with bookmark

[Task] 네비게이션바

ISSUE

• Group: client
• Type: feature
• Detail: Add Nav

TODO

• Nav 구현 및 Router 설정
• 중단 로고 클릭 시 메인페이지로 연결
• 연동할 페이지, 안할 페이지 구분하여 구현

[Task] 즐겨찾기 삭제

ISSUE

• Group: server
• Type: delete
• Detail: delete bookmark data in database

TODO

• delete carId in users_cars table
• send delete message

[Task] 지도 api 이용해서 주변에 가까운 매장 알려주기

ISSUE

• Group: client
• Type: feature
• Detail: 카카오 지도 api로 현재 위치 기반 가까운 브랜드 매장 알려줌

TODO

• 사용자 현재 위치 정보 받아오는 기능 구현
• 지도 api 사용해서 사용자 위치 기반으로 좌표 받기
• 그 위치 기반으로 가까운 브랜드 매장 검색, 결과 받아오기

[Task] 로그인 기능

ISSUE

• Group: server
• Type: feature
• Detail: login

TODO

• create jwt-token
• res with token, userdata
• connect social login service

[Task] 조회내용 history

ISSUE

• Group: client
• Type: feature
• Detail: Add history

TODO

• 이전 조회내용 history로 남기기

[Task] 좋아요 추가

ISSUE

• Group: server
• Type: feature
• Detail: create like in database

TODO

• create userId in users_like table

[Task] 회원가입 페이지

ISSUE

• Group: client
• Type: feature
• Detail: Add sign up pages

TODO

• 요구 파라미터 -> email, username, password, password check
• 회원가입 성공 시 로그인 페이지로 이동
• 회원가입 실패 시 존재하는 이메일 이라고 표기
• 캡챠 추가하기

KPT 회고 10.13 수요일

Keep (유지할 항목)

• 1 헬프요청 시 다들 잘 찾아와 도와줬다 ㅜ
• 2 점심 후 저녁 후 전체 회의가 짧더라도 한번씩 모여서 상황을 전달하고 이해하는데 도움이 되었다

---

Problem (문제로 판단되는 항목)

• 1 와이어프레임에서 기능별로 다시 쓸 수 있는 것들을 미리 제대로 정해두지 않아서 작업이 반복되는 일이 생겼다.
• 2 백엔드에서 정제된 데이터를 보내주지 않으면 프론트에서 고생한다
• 3 예외처리 에러처리가 잘 되어있지 않으면 서버가 멈춰버린다

---

Try (Action Items)

• 1 전체 회의 시 계속 현재 상황을 리뷰하고 도움을 청하거나 연결되서 확인할 부분을 적극적으로 어필하자
• 2 컴포넌트 단위로 쪼개서 재활용 가능한 것들 분류해놓기
• 3 API 먼저 짜서 서버 <-> 클라이언트 간 통신 먼저 맞춰놓기
• 4 백엔드에서 데이터베이스의 자료를 가져와서 res 할때 최대한 필요한 데이터만 정제해서 보내주도록해보자
• 5 예외처리 에러처리는 2중, 3중으로 확인 가능하도록하자
• 6 와이어 프레임 똑바로 짜서 필요한 페이지 전부 다 구현하기

[Task] 코멘트 좋아요 버튼

ISSUE

• Group: client
• Type: feature
• Detail: Add like button

TODO

• 좋아요 버튼 구현
• 이미 좋아요 누른 사람이 또 누르면 좋아요 취소

[Task] 코멘트 추가

ISSUE

• Group: server
• Type: create
• Detail: create comment in board

TODO

• create comment in database

[Task] 브랜드별 페이지

ISSUE

• Group: client
• Type: feature
• Detail: 홈에서 브랜드 로고를 클릭했을 때 해당 브랜드의 차량들만 보여주는 기능을 가진 페이지 구현

TODO

• 엔드포인트에 get 요청 보내서 해당 브랜드에 해당하는 데이터 요청
• 받아온 데이터를 기반으로 정렬한 후 사용자에게 보여주는 기능 구현
• side bar와 연결

[Task] 회원가입 기능

ISSUE

• Group: server
• Type: feature
• Detail: res for sign-up req

TODO

• save user data in database
• connect social login service

[Task] 요청 코멘트 보드

ISSUE

• Group: client
• Type: feature
• Detail: Add comments board

TODO

• 로그인 유저만 작성가능
• 차량 추가 요청글 작성

[Task] 메인페이지 틀

ISSUE

• Group: client
• Type: feature
• Detail: make main page

TODO

• 메인 페이지 작성
• 다른 페이지들로 Link 연결

[Task] 결과메세지 입력

ISSUE

• Group: database
• Type: create
• Detail: create result-message in database

TODO

• create result-message in database

[Task] 즐겨찾기 조회

ISSUE

• Group: server
• Type: feature
• Detail: show bookmark data in mypage

TODO

• send carId in users_cars table

[Task] 소셜로그인 기능 추가

ISSUE

• Group: client
• Type: feature
• Detail: Add social login

TODO

• 카카오
• 구글

[Task] 랜딩 페이지

ISSUE

• Group: client
• Type: feature
• Detail: Add landing page

TODO

• 랜딩페이지 틀 짜기
• Onclick 설정 -> 홈으로 연결

[Task] 로그아웃 버튼

ISSUE

• Group: client
• Type: feature
• Detail: Add sign out button

TODO

• api로 포스트 요청을 보내고, isLogin 상태를 변경시키는 버튼 생성

[Task] 로그아웃 기능

ISSUE

• Group: server
• Type: feature
• Detail: logout

TODO

• res null, message

[Task] 회원탈퇴

ISSUE

• Group: client
• Type: bug, feature, delete
• Detail: fix actions from client redux

TODO

• 회원정보 컴포넌트 내 버튼을 누르면 모달창을 띄우는 방식
• password 입력해서 탈퇴 확인

[Task] 회원정보 수정

ISSUE

• Group: client, server, sr
• Type: bug, feature, delete
• Detail: add user infomation

TODO

• 파라미터 -> username, password, password check
• 회원탈퇴 버튼

[형식][MeltingBrain = KPT]

Keep (유지할 항목)

• 1
• 2
• 3

---

Problem (문제로 판단되는 항목)

• 1
• 2
• 3

---

Try (Action Items)

• 1
• 2
• 3

[Task] 푸터 구현

ISSUE

• Group: client
• Type: feature
• Detail: add footer for pages

TODO

• 위키 링크
• 팀원 정보

[Task] 차량 검색 기능

ISSUE

• Group: client
• Type: feature
• Detail: Add search bar

TODO

• 자동완성

[Task] 회원정보 수정

ISSUE

• Group: server
• Type: feature
• Detail: update user data

TODO

• update user data in database

[Task] 차량 즐겨찾기 구현

ISSUE

• Group: client
• Type: feature
• Detail: 브랜드 페이지에서 차량 즐겨찾기 구현

TODO

• 차량 사진 좌측 상단에 즐겨찾기 추가 / 삭제 기능 구현
• 유저가 즐겨찾기한 차량을 마이페이지에서도 동일하게 리스트로 보여줌

KTP 회고 10.8 금요일

Keep (유지할 항목)

• 1 수정 필요사항에서 페어리뷰 진행
• 2 머지작업 진행시 반드시 알리고 진행하니까 서로 충돌나는일이 거의 없었다
• 3 API에 따라 작성된 포스트맨을 만들어두면 테스트에 편했다

---

Problem (문제로 판단되는 항목)

• 1 스키마나 api 구성에서 수정필요사항이 자주 발생
• 2 와이어프레임은 있지만 UI설정이 빈약해 서로가 같은 이미지를 그리지 못함
• 3 컴포넌트 규격에 대한 합의된 정의가 부족해서 재사용성이 떨어졌다

---

Try (Action Items)

• 1 데이터베이스 스키마나 api 구성에서 기능상 놓치는부분이 없는지 꼼꼼히 확인해야한다. 아니면 추가하는 과정이 굉장히 괴로워진다
• 2 주말의 경우 각자 테스크에 맞게 진행하되 자신이 반드시 작업하는 시간이 있다면 미리 공지해두는 방식을 시도해보면 좋을 것같다
  ex)나 일요일 8시부터 10시까지는 작업진행할거야!
• 3 머지 작업진행에 대한 알림을 규칙으로 정하면 좋을 것 같다
• 4 포스트맨에 폴더를 만들어 기능별 분류로 테스트해보면 좋을것 같다. 추가적으로 나아가서는 코드 유닛테스트 기능을 만들 수 있으면 좋을 것 같다
• 5 공통된 형식을 사용하는 컴포넌트를 생성해서 사용할때 import 해서 이용하면 좋겠다

[Task] 즐겨찾기 추가

ISSUE

• Group: server
• Type: create
• Detail: create bookmark data in database

TODO

• add carId in users_cars
• send users_cars.carId

[Task] 마이페이지 구현

ISSUE

• Group: client
• Type: feature
• Detail: 마이페이지 구현하기

TODO

• 마이페이지 틀 구현
• 회원정보 수정 / 내가 찜한 차량 버튼 구현
• 각각 컴포넌트로 이동하게 끔 연동

[Task] 코멘트 조회

ISSUE

• Group: server
• Type: feature
• Detail: send comments data

TODO

• send comments data with userId in users_like table

[Task] 로그인 페이지

ISSUE

• Group: client
• Type: feature
• Detail: Add sign in page

TODO

• 파라미터 -> 이메일, 패스워드
• 로그인 성공시 메인페이지로 이동
• 회원가입 버튼 구현해서 회원 가입 페이지로 이동 구현
• 로그인 성공시 로컬 스토리지에 토큰 저장

[Task] 코멘트 삭제 버튼

ISSUE

• Group: client
• Type: feature
• Detail: Add deleting comments button

TODO

• 코멘트 작성자 또는 어드민 유저만 삭제 가능

[Task] 즐겨찾기 목록

ISSUE

• Group: client
• Type: feature
• Detail: Add bookmark list

TODO

• 마이페이지 내 버튼을 누르면 즐겨찾기한 목록 조회

[Task] 회원가입 완료시 이메일 전송

ISSUE

• Group: client
• Type: feature
• Detail: Add sending email to signed up user.

TODO

• 회원가입한 유저의 이메일로 이메일 전송

[PR] 초기환경설정

ISSUE

• Group: client, server
• Type: setting
• Detail: add dependencies

TODO

• merge dev to master

[Task] RDS 연결

ISSUE

• Group: server
• Type: connect
• Detail: use aws RDS

TODO

• connect RDS

[Task] 월 저축액 수정 ( 차량 페이지 내 )

ISSUE

• Group: client
• Type: feature
• Detail: add fixing how much save money per a mouth

TODO

• 인풋 창에서 수정할 수 있게

[Task] 구입까지 필요한 기간 표기

ISSUE

• Group: client
• Type: feature
• Detail: Add

TODO

• 선택 차량을 구매하기 위해 몇년이 필요한지

[Task] 결과메세지 전송

ISSUE

• Group: server
• Type: feature
• Detail: send result-message

TODO

• send result-message

[Task] 데이터베이스 생성

ISSUE

• Group: server
• Type: feature
• Detail: create database

TODO

• create table
• migration
• connect FK

KTP 회고 10.6.수요일

Keep (유지할 항목)

• 1 원활한 커뮤니케이션 진행 잘되고 있어서 좋아요.
• 2 저녁 휴식시간 보장되어 좋다
• 3 일단 시도해보자고 서로 독려하는 분위기

---

Problem (문제로 판단되는 항목)

• 1 시작 약속 시간에 5분 10분 늦는 상황 발생
• 2 디스코드 대화 채널의 분리가 잘 진행되지 않는 문제가 있습니다

---

Try (Action Items)

• 1 서로의 의견을 자유롭게 제시할 수 있는 분위기 유지 - 디스코드 스레드 이용
• 2 모임시간에 디코, 줌 반응없으면 전화해서 확인
• 3 기능에 구현에 대해서 포기가 아닌 대체 방법찾기
• 4 회의로 정해진 일정에 대해서는 공지 스레드, 문제이슈발생과 해결은 이슈 스레드, 자유로운 의견 제시는 프로젝트 잡담 스레드 이용

To Do 리스트

1. 시스템 아키텍처

• JWT를 이용한 로그인 구현 | 필수 | ★
• OAuth 2.0을 이용한 소셜 로그인 | 권장 | ★

---

2. UI/UX

• 회원가입, 로그인, 로그아웃, 마이페이지, 회원탈퇴 기능 구현 | 필수 | 프론트엔드, 백엔드 | ★ |
• 회원가입, 로그인 및 회원정보 수정 시 유효성 검사 | 필수 | 프론트엔드 | ★ |
• 소셜 로그인 외 서비스 자체 회원가입 기능 제공 | 필수 | 프론트엔드 | ★ |
• 회원가입 없이 '체험하기' 형식으로 가볍게 기능을 이용할 수 있는 장치 마련 | 필수(Final only) | 프론트엔드 | ★ |
• 회원 탈퇴나 리소스 삭제시 확인(confirm) 모달 제공 | 권장 | 프론트엔드 | ★ |
• 마이페이지를 통해 사용자 개인정보 수정 기능 제공 | 필수 | 프론트엔드 | ★ |
• (소셜 로그인이 아닐 경우) 비밀번호 수정 기능 제공 | 필수 | 프론트엔드 | ★
• 라이브러리를 사용하지 않고 React 컴포넌트 직접 작성 (유어클래스에서 다룬 것) | 필수 | ★
• 모바일 환경 대응 및 반응형 웹 | 권장 | ★★

---

3. 스키마 및 API

• N:M (다대다) 관계 설정 | 필수 | ★
• ERD (DB Diagram) 작성 | 필수 | ★
• API 페이지 작성 | 필수 | ★★
• ORM 사용 (sequelize, typeorm 권장) | 권장 | ★
• 페이지네이션 구현 | 권장 | ★★★

---

4. DevOps

• [코드] precommit 단계에서 semistandard 적용 | 필수 | ★
• [릴리즈] 깃허브 커밋메세지 규칙 합의 | 필수 | ★
• [코드] 버전 규칙 합의 | 필수 | ★
• [릴리즈] PR 형식 합의 | 권장 | ★
• [배포] 배포 자동화 설정 | 권장 | ★
• [배포] 도메인 구매 및 HTTPS 배포 | 권장 | ★★★

---

Advanced (도전) 항목을 추가적으로 구현할 계획이라면, 아래에 적어주세요

• 회원 가입시 인증 메일 발송 | 권장 | ★★★
• 3rd-party API 호출 | 권장 | ★
• 소셜공유기능 제공| 권장 | ★★
• 출력결과물 구간별 특정 메세지 제공| 권장 | ★★
• 라이브러리를 사용하지 않고 React 컴포넌트 직접 작성 (유어클래스에서 다루지 않은 것) | 권장 | ★★

---

Nightmare (신중) 항목을 추가적으로 구현할 계획이라면, 아래에 적어주세요

• 신중 항목은 이번에는 구현하지 않겠습니다!

[Task] 회원탈퇴 기능

ISSUE

• Group: server
• Type: feature
• Detail: delete user data

TODO

• delete user data in database

[Task] 데이터 입력

ISSUE

• Group: server
• Type: add
• Detail: add data into table

TODO

• add car data into table

[Task] 공유링크

ISSUE

• Group: client
• Type: feature
• Detail: Add share link

TODO

• 클립보드에 저장되는 내용은 링크 + 멘트

[Task] 좋아요 삭제

ISSUE

• Group: server
• Type: delete
• Detail: delete like in database

TODO

• delete userId in users_like table