[CuPick]프로젝트 구현설명 및 후기

유튜브를 보며 블로그 만들기 클론코딩후 혼자서 개발을 할 수 있겠다 생각하여 혼자서 프로젝트를 도전했다.

주제는 예전부터 만들어보고싶었던 커플매칭시스템및 연애커뮤니티이다 100퍼센트 나의 아이디어는 아니다 1년전 

전화번호와 인스타아이디를 등록하고 서로가 서로를 등록했을때 알림이 가는서비스를 누군가만들어 홍보하였다.  

나는 이 홍보를 보고 아이디어가 좋고 재밌다고 생각했다.(지금은 운영안하더라) 하지만 전화번호와 인스타를 등록할때 보안이 허술해 누군가 사칭을 하면 많이 취약할것이라고 생각했다 그리고 커플매칭시스템만있으면 한번등록하고 그이후에 접속을하지않아 서비스가 유지가 안될것이라고 생각하였다. 그래서 나는 인스타,카카오 API를 넣어 oauth인증으로 사칭을 방지하고 커뮤니티기능을 넣어 지속성을 높이면 아마 사람들이 많이 찾아주지않을까? 라고 생각하여 이 프로젝트를 시작했다. 여기까지가 이프로젝트를 시작한이유고 기능을 설명하겠다

 

기능목차:

1.회원가입

2.로그인

3.카카오API를 이용한 전화번호등록 (원래는 문자인증으로 전화번호를 등록할려했지만 문자한번발송당 20원이길래 카카오로 전화번호를 가져옴) 

4.인스타API를 이용한 인스타아이디등록 (본인의 인스타 id를 가져옴 사칭방지) (인스타나,전화번호 중 하나만등록해도됨 근데 상대방이 인스타id만 알고있을때는 전화번호만등록하면 매칭이 안되겠지?)

5.좋아하는사람의 instaId 와 전화번호등록(만약 인스타만알면 인스타아이디만,전화번호만알면 전화번호만등록해도됨)

6.매칭된지안된지 확인할수있는 기능

7.매칭시 SMS API를 이용한 문자메시지 발송(인스타DM발송도 시도했지만 사업자등록증이 있어야가능해서 안함)

8.등록초기화

9.지금까지 매칭된커플의 표시

10.게시물리스트보여주기

11.게시물등록

12.게시물내용보기

13.게시물수정

14.게시물삭제

15.게시판페이징처리

16.댓글작성

17.댓글삭제

18.조회수,댓글갯수 확인

19.게시물검색

20.인기게시물알고리즘

 

메인페이지

기능설명:

1.회원가입

닉네임,이메일,패스워드가 형식에 어긋나면 회원가입버튼이 비활성화되게 만드었다 자바스크립트로 구현했는데 자바스크립트를 잘몰라서  chatgpt의 도움을 많이받았다 자바스크립트의 중요성을 깨닫는 작업이었다

 

2.로그인

로그인기능을 만들때 SpringSecurity를 활용하였다 그래서 매칭시스템이나,글쓰기,댓글쓰기는 로그인을하지못하면 사용하지못한다 추후의 비로그인때는 익명으로 글쓰기,댓글쓰기를할수있게 만들어야겠다

 

3. 카카오API를 이용한 전화번호등록

전화번호등록전

카카오 로그인버튼 클릭후 로그인

로그인후 전화번호자동등록

카카오api로 전화번호를 가져올려면 사업자등록을 하고 인증후 가져올수있다 그래서 많이 애먹었다. 하지만 개발단계에서 테스를 할수있게 test앱을 만들어 사용하면 특정 카카오아이디만이라도 전화번호를 가져올수있게해준다

 

4.인스타API를 이용한 인스타아이디등록

인스타그램버튼클릭후 인스타로그인

 

약관동의

로그인후 인스타아이디 자동등록

카카오api보다 더 애를먹었다 인스타api를 사용할려면 uri가 https로 되어있어야한다 https로 변경하려면 SSL인증서를 발급받아야하는데 도메인이있어야했다. 구글링을 엄청한 끝에 자체서명한 ssl인증서를 발급후 그것을 등록하면 https로 접속할수있다.

 

5.좋아하는사람의 instaId 와 전화번호등록

6.매칭된지안된지 확인할수있는 기능

01099858941이라는 전화번호를 가진사람이 janwanjung이라는 인스타아이디를 가진사람이 등록을했을때

 

이후 jangwanjung이라는 인스타아이디를 가진사람이 01099858941이라는사람을 등록했을때

둘다 하트의 이미지는 화살이 박힌걸로 바뀐다. 인스타아이디-인스타아이디,휴대폰번호-휴대폰번호,인스타아이디-휴대폰번호,휴대폰번호-인스타아이디 서로 교차하여 연결될수있어 알고리즘을짤때 많이 애먹었다

@Transactional
    public void 확인(int id,String likeNumber,String likeId){

        System.out.println(1111111111);
        User registerUser = userRepository.findById(id).orElseThrow(()->{
            return new IllegalArgumentException("회원을 찾을수없습니다"); //내 User객체가져오자
        });
        System.out.println(22222222);
        if(!likeNumber.equals("")) {
            Optional<User> checkUser1 = userRepository.findByPhoneNumber(likeNumber);
            System.out.println(7777777);
            if (checkUser1.isPresent()) {
                String 인스타아이디 = checkUser1.get().getLikeId();   //그사람이 좋아하는사람의 인스타아이디를가져오자
                String number = checkUser1.get().getLikeNumber();  //그사람이 좋아하는사람의 전화번호를 가져오자
                System.out.println(33333333);
                if ( (인스타아이디!=null&&인스타아이디.equals(registerUser.getInstaId())) || (number!=null&&number.equals(registerUser.getPhoneNumber()))) { //하나라도 동일할때
                    System.out.println(44444444);
                    checkUser1.get().setCupid(true);
                    registerUser.setCupid(true);
                    boardController.CountByCupidCount1(2);
                    if(checkUser1.get().getPhoneNumber()!=null){
                        massageApiController.sendOne(checkUser1.get().getPhoneNumber());
                    }
                    return;
                }
            }
        }

        if(!likeId.equals("")){
            Optional<User> checkUser2 = userRepository.findByInstaId(likeId);
            System.out.println(55555555);
            if (checkUser2.isPresent()){
                System.out.println(88888888);
                String 인스타아이디 = checkUser2.get().getLikeId();   //그사람이 좋아하는사람의 인스타아이디를가져오자
                String number = checkUser2.get().getLikeNumber();  //그사람이 좋아하는사람의 전화번호를 가져오자
                System.out.println(6666666);
                if((인스타아이디!=null&&인스타아이디.equals(registerUser.getInstaId())) || (number!=null&&number.equals(registerUser.getPhoneNumber()))){ //하나라도 동일할때
                    checkUser2.get().setCupid(true);
                    registerUser.setCupid(true);
                    boardController.CountByCupidCount1(2);
                    if(checkUser2.get().getPhoneNumber()!=null){
                        massageApiController.sendOne(checkUser2.get().getPhoneNumber());
                    }
                }
            }
        }

    }

테스트케이스를 모두넣어 확인을 했을때 정상작동을하였지만 효율적인코드는 아닌것같다 추후 서비스를 운영할때 코드리팩토링을 진행해서 효율적으로 짜야할거같았다 그래도 이부분이 가장재밌었던 작업이었던거같다

 

7.매칭시 SMS API를 이용한 문자메시지 발송

서로연결이 되었을때 전화번호가 등록되어있는사람에게는 메시지가 발송되는기능이다

coolsms이라는 회사의 api를 사용하였다 한번 발송될때 20원이 든다 코딩을하다 발송코드를 다른코드에 집어넣어 1초에 15번이 발송되면서 남은금액을 모두 사용해버린 사고가있었다. 300원만있어서 망정이지 몇만원있으면 모두 버렷을생각에 소름이돋았다 추후 2000원을 충전하여 테스트를하였다. api를 사용하는작업에서는 제일재밌었다

 

8.등록초기화

하트의화살이박힌 이미지가 사라진다. 무작위로 넣어 한명만걸려라하는사람이 있을수도있으므로 일정기간동안 등록하지못하는기능을 추후넣어야겠다.

서로연결되었던 사람의 하트는 화살박힌하트에서 깨진하트로바뀐다

 

9.지금까지 매칭된커플의 표시

아까메인페이지에서 는 매칭된커플의 수가 0명이었는데 아까 두명이 매칭되어 두명으로 바뀌었다 지금까지매칭된 커플의 수는 구현을 할수있는데 오늘 매칭된 커플의 수는 구현하지못하겠다 추후 추가하겠다

 

10.게시물리스트보여주기

11.게시물등록

글쓰는공간은 summernote 코드를 가져와 사용했다

 

12.게시물내용보기

좋아요 싫어요도 구현하여 추천게시물 알고리즘에 영향을 줄려했지만 그냥안했다 추후 추가예정

그리고 게시물의주인이 아닌사람은 수정,삭제버튼을 볼수없게만들었다.

 

13.게시물수정

게시물작성기능에 기존내용을 그대로 불러올수있게하였다

 

14.게시물삭제

그냥 삭제된다

 

15.게시판페이징처리

2를 누르면 page파라미터가 1로 변경되면서 다음페이지를 볼수잇다 이전,다음페이지는 10씩 넘기게했는데 버그가있다 해결할려했지만 나중으로 미루고 추후 해결해야겠다

 

16.댓글작성, 17.댓글삭제

작성자에게만 삭제버튼이 보인다 

 

18.조회수,댓글갯수 확인

 

19.게시물검색

2를 검색하니깐 uri에 keyword부분의 파라미터에2가 들어가면서 2가 들어간 모든게시물을 가져온다 물론 페이징처리가 되어있다

 

20.인기게시물알고리즘

board테이블에 score이라는 칼럼을 만들어 게시글의 점수를 부여하였다 댓글하나당 +4점 조회수하나당 +1점을 부여하여 score이 10이 넘으면 인기게시물 페이지에서도 볼수있다

그리고 score이 가장높은 3개의 게시물은 메인페이지에서도 볼수있게하였다.

 

 

후기:

첫 결과물 치고 꽤 마음의 드는 서비스를 만든거같다. UI도 깔끔하게 잘만든거같다 UI는 v0이라는ai을 활용하여 수정하면서 만들었다 ai가 나보다 디자인 잘하는거같다. 추후 개발을 좀더 공부하여 코드리팩터링후 배포해볼예정이다. 

 

github주소 : https://github.com/jangwanjung/CuPick