diff --git a/README.md b/README.md index 07f7a8b..df80c5f 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,403 @@ -## skill +
+
-- react.js -- typescript -- redux-toolkit -- react-router-dom -- styled-components -- axios +
+ +
+
+
-* custom hook (state관리 및 비즈니스로직 분리) +
-## start +## 📌 강아지 분양서비스 펫트리🐶 -`npm` -`npm start` +#### 프로젝트 기간 : 2023년 10월 ~ 진행중 -## +### [🌎 웹사이트 바로가기](https://nextpetree.store/) -내용 추후 추가예정입니다. +
+ +## 📌 서비스 소개 + +### 👥 페르소나 + +👩🏻이현지 (26세) + +성별 : 여자 + +직업 : 직장인 + +“검증된 브리더에게 강아지를 입양받고 싶어요“ + +직장인 현지는 강아지를 입양받고 싶지만, 강아지를 분양 받는 과정이 너무 복잡하고, 또 모르는 브리더에게 강아지를 분양 받는 것이 걱정이 됩니다. + +👦🏻김두식 (29세) + +성별 : 남자 + +직업 : 전문 브리더 + +“기초 지식이 있는 사람들에게 강아지를 분양하고 싶어요“ + +전문 브리더 김두식씨는 강아지를 분양하길 원하지만, 혹시나 기초 지식도 없는 입양인에게 본인의 소중한 강아지가 입양될까 걱정이 됩니다. + +
+ + + +## 📌 시스템 아키텍쳐 + + + +## 📌 기술 스택 + +| **Language** | + +JavaScript, TypeScript + +| **Backend** | + +Node.js, Express.js, Mongoose + +| **Frontend** | + +React, StyledComponents, Redux-toolkit + +| **Communication** | + +Figma, Github, Slack + +| **Release** | + +Frontend : AWS S3, CloudFront, Route53 +
+BackEnd: + +
+ +## 📌 서비스 기능 명세 + +### 유저기능 + +1. 사용자는 회원가입시 브리더와 분양희망자를 선택할 수 있다. +2. 사용자는 회원가입시 이메일과 닉네임 중복 확인을 할 수 있다. +3. 사용자는 회원가입시 주력견종 선택을 할 수 있다. +4. 사용자는 회원가입시 활동지역을 검색할 수 있고, 휴대전화로 본인인증이 가능하다. +5. 사용자는 로그인시 일반 로그인, 카카오 로그인 선택이 가능하다.(최초 로그인 및 연동 필요) +6. 사용자는 인증 테스트를 통해 반려동물에 대한 기초지식 인증을 받을 수 있다. +7. 사용자는 강아지 모아보기를 통해 브리더가 등록한 강아지들을 확인할 수 있다. +8. 사용자는 강아지 모아보기를 통해 브리더가 등록한 강아지들을 예약할 수 있다. +9. 사용자는 강아지 모아보기를 통해 브리더가 등록한 강아지 중 분양 신청서를 작성할 수 있다. +10. 사용자는 강아지 모아보기에서 필터 및 검색 기능을 사용할 수 있다. +11. 사용자는 브리더 모아보기를 통해 등록된 브리더를 확인할 수 있다. +12. 사용자는 브리더 모아보기를 통해 인증된 브리더 필터 및 검색 기능을 사용할 수 있다. +13. 사용자는 브리더 모아보기 상세 기능을 통해 브리더에 대한 상세 정보를 확인할 수 있다. + +### 분양 희망자 마이페이지 기능 + +1. 로그인 한 사용자는 분양신청 내역을 확인할 수 있다. +2. 로그인 한 사용자는 분양신청 내역 검색을 할 수 있다. +3. 로그인 한 사용자는 분양신청 승인 여부와 후기를 작성할 수 있다. +4. 로그인 한 사용자는 작성한 후기를 관리할 수 있다. +5. 로그인 한 사용자는 프로필 관리에서 주거환경 설정을 할 수 있다. + +### 브리더 마이페이지 기능 + +1. 로그인 한 사용자는 분양신청 내역을 확인할 수 있다. +2. 로그인 한 사용자는 분양 신청 내역 검색을 할 수 있다. +3. 로그인 한 사용자는 분양신청 내역을 확인하고 승인 혹은 거절할 수 있다. +4. 로그인 한 사용자는 보유견종을 관리할 수 있다. +5. 로그인 한 사용자는 프로필 관리에서 주력견종 설정을 할 수 있다. + +### 마이페이지 공통 기능 + +1. 로그인 한 사용자는 프로필 관리에서 이미지 수정과 자기소개를 작성할 수 있다. +2. 로그인 한 사용자는 회원정보 수정에서 이메일과 휴대전화, 닉네임, 활동지역을 수정할 수 있다. +3. 로그인 한 사용자는 비밀번호를 변경할 수 있다.(작성한 비밀번호 확인 가능) +4. 로그인 한 사용자는 로그아웃을 할 수 있다. +5. 로그인 한 사용자는 회원탈퇴를 할 수 있다. + + + + + + + +## 📌 실행 방법 + +1. 레포지토리를 클론하고자 하는 디렉토리에서 아래 명령어를 수행 + +```bash +git clone <레포지토리 주소> +``` + +2. 클론한 디렉토리에서 frontend, backend디렉토리로 들어가 아래 명령어를 통해 각각각 필요한 module 설치 + +```bash +npm install +``` + + + +4. frontend에서 필요한 `.env` 설정 + +```bash +REACT_APP_API_URL=<백엔드url> +``` + +4. express 앱과 react앱을 실행 + +```bash +npm run start +``` + +
+ +## 📌 팀 구성원 + + + + + + + + + + + + + + + + + + + +
이름오창현김민준김용현
역할 + 로그인, 회원가입&탈퇴,
분양신청내역 + 		+ 강아지, 브리더 모아보기
+ 프로필관리, 회원정보 수정 + 		+ 강아지, 브리더 모아보기
상세 +
+ +
+
\ No newline at end of file diff --git a/src/assets/images/kakao.png b/src/assets/images/kakao.png new file mode 100644 index 0000000..5afd83a Binary files /dev/null and b/src/assets/images/kakao.png differ diff --git "a/src/assets/images/\354\225\204\355\202\244\355\205\215\354\262\230.png" "b/src/assets/images/\354\225\204\355\202\244\355\205\215\354\262\230.png" new file mode 100644 index 0000000..4eabb80 Binary files /dev/null and "b/src/assets/images/\354\225\204\355\202\244\355\205\215\354\262\230.png" differ diff --git a/src/component/KakaoCallback/KakaoCallback.tsx b/src/component/KakaoCallback/KakaoCallback.tsx index 1d8ca61..2898efd 100644 --- a/src/component/KakaoCallback/KakaoCallback.tsx +++ b/src/component/KakaoCallback/KakaoCallback.tsx @@ -49,15 +49,13 @@ const KakaoCallback = () => { sessionStorage.setItem("refreshToken", response.data.data.refreshToken); navigate("/"); } else if (response.data.status === "FAIL") { - Swal.fire(alertList.errorMessage("카카오에 연동된 계정이 없습니다.")); + Swal.fire(alertList.errorMessage("연동된 기존 계정이 없습니다.")); navigate("/login"); return; } } catch (error) { console.error("Kakao login error:", error); - await Swal.fire( - alertList.errorMessage("카카오 로그인 중 오류가 발생했습니다."), - ); + await Swal.fire(alertList.infoMessage("연동된 기존 계정이 없습니다.")); navigate("/login"); } }; diff --git a/src/component/LoginContent/LoginContentStyle.ts b/src/component/LoginContent/LoginContentStyle.ts index 231bbd6..9984fdd 100644 --- a/src/component/LoginContent/LoginContentStyle.ts +++ b/src/component/LoginContent/LoginContentStyle.ts @@ -2,6 +2,7 @@ import styled from "styled-components"; import { Link } from "react-router-dom"; import petTreeIconImage from "../../assets/icons/pets_black_24dp.png"; +import KakaoLogo from "../../assets/images/kakao.png"; export const Container = styled.div` display: flex; @@ -159,9 +160,13 @@ export const BasicLoginButton = styled.button` `; export const KakaoLoginButton = styled(BasicLoginButton)` + background-image: url(${KakaoLogo}); + background-size: 30px; + background-repeat: no-repeat; + background-position: 20px center; background-color: #fee500; - color: #060606; - margin-top: 10px; + margin-bottom: 20px; + color: #000; `; export const SignUpButtonArea = styled.div`