2023 계묘년을 맞이해 주변 사람들에게 편지를 작성해 마음을 전달할 수 있는 소통의 장이 되는 사이트를 제작했습니다. 편지를 작성하고 회원인 지인의 닉네임을 검색해 전송할 수 있습니다. 또한 카카오톡 공유하기로 편지를 보냈다는 것을 알릴 수 있습니다.
2023/1/24 ~ 2023/2/4 (총 1주)
| JavaScript | Html&CSS | React | Node | Kakao API |
|---|---|---|---|---|
 |
 |
 |
 |
 |
- App.js에서 회원가입, 로그인을 통해 저장한 유저 세션값을 리덕스store user에 저장하고 관리하며, 상태에따라 네비게이션 바에 다른 버튼이 뜹니다.
- axios를 이용해 아이디, 닉네임 중복 검사를 합니다
- ID, 비밀번호는 숫자+ 영문 6~20자리 정규식을 사용하고 비밀번호는 DB에 암호화하여 저장합니다
- 비밀번호와 비밀번호 확인 입력값이 일치하는지 안하는지 메시지 알림을 줍니다.
- nav바에 로그아웃을 누르면 store에 login 값이 false가 되도록 리덕스를 통해 상태를 관리합니다
- axios를 통해 존재하지 않는 닉네임이라면 정보가 없다는 알림창을 띄웁니다.
- 닉네임이 존재한다면 해당 유저에게 편지를 쓸 수 있습니다.
- 편지는 200자로 제한했으며 쓰면서 실시간으로 몇글자를 썼는지 볼 수 있습니다.
- 편지 전송 버튼 클릭시 letter DB 저장되고 카카오톡 공유하기를 할 수 있습니다.
- 쓴 편지를 html2canvas를 통해서 캡쳐하고 toDataURL 함수를 이용해 이미지를 문자열 형태로 변환해 DB에 저장합니다.
- 회원정보는 비밀번호만 수정 가능합니다
- 새 비밀번호는 6-20 자리의 영문 숫자 조합 정규식을 사용해 수정 가능합니다.
- 탈퇴를 할 수 있습니다
- 내가 보낸 편지와 내가 받은 편지를 구분해서 이미지로 볼 수 있습니다
- 편지는 마이페이지에서 숨김 처리 가능하며 버튼 클릭시 한 번 더 경고창을 띄웁니다.
카카오톡 공유하기 API
- 카카오톡 공유하기를 통해 편지를 받았다는 메시지를 전달할 수 있습니다
- 템플릿을 이용해서 카카오톡에 보여질 이미지, 메시지, 주소를 설정하여 전달합니다
MYSQL
- user DB
- letter DB