duchangkim/kkiri

파이널 프로젝트 커플 웹사이트 '끼리' 입니다.

프로젝트 미리보기

프로젝트 기획 배경

우리가 주로 사용하는 메신저인 카카오톡은 기능도 훌륭하고, 빠르고 좋습니다. 하지만 커플 전용으로 사용하기엔 실수가 생길 수 있습니다.

애교섞인 대화 내용을 연인과의 대화방이 아닌 공적인 대화방에 보내는 실수, 사진을 잘못 보내는 실수 등등 상상만 해도 소름이 돋는 실수입니다. 또한 연인사이에 찍은 사진들을 관리하다가 날려버리는 실수, 연인의 생일, 기념일을 까먹고 넘어가는 실수 등 이러한 실수를 방지하고, 연인사이에 필요한 기능을 가진 웹사이트를 만들어보면 어떨까 하는 생각에 끼리 웹사이트를 기획하고, 제작했습니다.

프로젝트 팀원

김강현 Kim Kanghyeon

김두창 Kim Duchang

백교민 Beak Gyomin

홍성훈 Hong Sunghoon

Kkiri 실행

• 백엔드 서버 실행

  $ npm start:dev
  or
  $ yarn start:dev

• 클라이언트 서버 실행

  $ npm start
  or
  $ yarn start

Kkiri 프로젝트 간단 설명

Back-end 서버

• API server API 명세서
• Node.js
• Koa
• RESTful(하게 구현 하려고 최대한 노력했습니다..)
• JWT로 로그인 기능구현
• socket.io 사용
• MongoDB 사용

Front-end 서버

• ReactJS
• 함수형 컴포넌트
• Container / Component 구분
• redux 패턴
• redux-saga로 비동기 API 서버 통신
• styled-components로 css스타일링

Kkiri 프로젝트 기능 설명

• 회원

• 회원가입
  • nodemailer로 인증번호 이메일로 전송하여 인증
  • 정규표현식으로 각 input 유효성 검사
  • 모든 input 올바르게 작성하지 않으면 회원가입 불가
  • 이메일 인증 후 이메일 재 작성시 메일 인증 다시하도록 하였음
• 로그인
  • 이메일이 일치하지 않는지 비밀번호가 일치하지 않는지 판단해서 사용자에게 메시지 출력
• 코드입력
  • 본인 고유번호 입력 불가
  • 상대방 찾을 수 없으면 에러 메시지 출력
  • 상대방을 찾고 연결 성공 시 메인페이지로 이동
• 이메일 찾기
  • 이름, 전화번호, 생년월일로 이메일 찾기
• 비밀번호 찾기
  • 이메일, 전화번호, 생년월일로 비밀번호 초기화(새로운 비밀번호)
• 배경화면 수정
  • 메인화면 왼쪽 배경화면 수정
  • 배경화면 이미지 수정시 미리보기
• 프로필 사진 수정
  • 상대방과 본인 모두 볼 수 있는 프로필 사진 추가
  • 프로필 사진 수정시 미리보기
• 로그아웃
  • 로그아웃 하면 웰컴페이지로 이동
  • 로그인 정보가 없으면 페이지 사용 불가
• 회원탈퇴
  • 깔끔하게 삭제 해드립니다

• 앨범

• Create
  • 커플 폴더에 사진, 동영상 업로드
  • 사진 업로드 시 파일 이름 랜덤숫자로 변경
• Read
  • 시간 순서대로 정렬
  • 1개씩 크게 읽어오기
• Update
  • 좋아요 눌러서 좋아하는 사진 모아보기
• Delete
  • 사진, 동영상 삭제

• 캘린더
  • ToastCalendar API 사용
  • ToastDatePicker API 사용
  • 1달씩 이동 할 수 있음, Today버튼으로 오늘 날짜로 복귀 기능

• Create
  • 캘린더 필터, 스케쥴, 디데이 추가
  • 색상, 이름, 필터 각각 설정해서 추가할 수 있음
  • 디데이 날짜 계산
• Read
  • Allday일 경우와 time일 경우 캘린더에서 보여지는것이 다름
  • 사이드바에 캘린더 필터, 디데이 계산해서 보여줌
• Update
  • 각 일정 클릭시 수정기능
• Delete
  • 캘린더 필터, 스케쥴, 디데이 삭제

• 채팅

• 채팅 실시간 알림
  • 대화방 페이지 밖에 있을 경우 사이드바에 새로운 채팅 알림기능
• 개인 채팅기능
  • 오직 상대방(커플 연결된 상대방)과의 채팅
  • 대화내용 디비 저장
  • 이모지

README 작성자 김두창

kkiri's Issues

채팅 - 타임라인

전날 대화 불러왔을 때 날짜 표기해주기

메인페이지 - 프로필, 배경화면

메인페이지 프로필 배경화면 기본이미지가 없어서 첫 회원가입시, 화면이 깨지는 현상 발생

각 커플마다 /public에 폴더가 있지만 초기에는 사용 불가.
각 커플 개인 폴더에 넣어주기엔 기본배경, 기본프로필 너무 많이 중복될 우려가 있음.

예)
/public/common 안에 기본 배경화면, 기본 프로필 화면 올려두고 기본값을 그것으로 정해둔 다음
프로필, 배경 수정으로 새로운 파일이 업로드 되면 업로드한 파일로 바꿔주기

*************** 예)가 정답은 아님 더 좋은 방법이 있으면 그 방법으로 구현 가능함 ***************

코드입력 - 로그아웃 안됨

<Footer>
  <Link to="/logout">
    <span className="ma_le">로그아웃</span>
  </Link>
</Footer>

Connection.js line:58 로그아웃 기능 구현 해야합니다.

로그인, 회원가입 - css, 유효성검사

새로 바꾼 로그인, 회원가입 css작업 해주시고,
유효성 검사 해주세요.

  const [emailErrorMessage, setEmailErrorMessage] = useState('');
  const [emailSendMessage, setEmailSendMessage] = useState('');
  const [authErrorMessage, setAuthErrorMessage] = useState('');

오류 메시지는 각 컨테이너의 이 부분을 참고하세요

메인페이지 첫 로딩 버그

버그

회원가입이나 로그인 했을 때 서버 콘솔에 찍히는 에러

CastError: Cast to Number failed for value "undefined" at path "coupleShareCode" for model "Album"
at model.Query.exec (C:\Duchi\Kiri\20201116\kkiri\node_modules\mongoose\lib\query.js:4358:21)
at list (C:\Duchi\Kiri\20201116\kkiri\server\src\api\album\album.ctrl.js:122:83)
at dispatch (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-compose\index.js:42:32)
at C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-router\lib\router.js:372:16
at dispatch (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-compose\index.js:42:32)
at C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-compose\index.js:34:12
at dispatch (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-router\lib\router.js:377:31)
at dispatch (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-compose\index.js:42:32)
at jwtMiddleware (C:\Duchi\Kiri\20201116\kkiri\server\src\lib\jwtMiddleware.js:36:12)
at dispatch (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-compose\index.js:42:32)
at bodyParser (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-bodyparser\index.js:82:54)
at dispatch (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-compose\index.js:42:32)
at createGenerator (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-convert\index.js:24:16)
at createGenerator.next ()
at onFulfilled (C:\Duchi\Kiri\20201116\kkiri\node_modules\co\index.js:65:19)
at C:\Duchi\Kiri\20201116\kkiri\node_modules\co\index.js:54:5

---

TypeError: Cannot read property 'calendarData' of null
at getSchduleList (C:\Duchi\Kiri\20201116\kkiri\server\src\api\schedules\schedules.ctrl.js:71:32)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async bodyParser (C:\Duchi\Kiri\20201116\kkiri\node_modules\koa-bodyparser\index.js:82:48)

채팅 - 프로필 사진 적용

채팅 프로필 사진 적용 해야합니다.
제가할일이에요..

회원가입 - 노드메일러 메일 발송 안되는 버그

메일 오류가 납니다..

그리고 아이디, 비밀번호가 github에 노출되어있습니다.
.env파일에 옮겼어요

메인 - 프로필

타원형 불편합니다..

###우리는 원한다 완벽한 원.

메인 - 프로필사진 업로드 후 URL

프로필 변경하기 하고 업로드 하고나면
이런식으로 url이 변경됨
http://localhost:3000/kkiri/home?files=ahit.

수정 필요하면 수정 해주세요

설정 - 페이지 진입 불가

로그인, 회원가입 재 구현으로 인한 state변동으로 인하여 재 구현 필요.

코드입력 - css작업 완료해주세요

로그인 회원가입 부분은 완성인데 코드입력부분은 아직이네요

메인 - 왼쪽 메인 로딩 버그

새로고침시에 로딩이 지속적으로 유지되며 화면이 렌더링 되지 않는 문제.

가끔그럼..