🗄️ 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