🏢주소

http://www.timebox.kro.kr/ (비용상의 이유로 서버내렸습니다,)

깃허브

https://github.com/Hyeon-Uk/TimeBox

🚩**_ About TimeBox_**

어렸을적에 모두들 타임캡슐을 만들어본적이 있으실겁니다.

타임캡슐에 자신의 현재모습, 혹은 미래의 나를 위한 편지를 작성해서 보관하시면, 미래의 나에게 책임을 지고 보내드리겠습니다.

• 간편하게 카카오계정을 이용해서 로그인하세요
• 편지에 글과 그림을 그린뒤, 받고싶은 날짜를 선택하세요
• 그런뒤 박스에 담아 보관해주시면 됩니다😀
• 시간이 다되면, 카카오계정에 등록된 이메일을 통해 알림을 보내드리겠습니다.

---

❓ 왜 이런 프로젝트를 만들었나요?

옛날에 타임캡슐을 만들면서 크면 어떻게 되어있으면 좋겠다! 라는 내용도 담았던 기억이 있습니다. 생각해보면 옛날의 제가 어떤 희망을 품은 타임캡슐을 만들었는지 기억도 잘 나지않고, 어디에 묻었는지 기억도 나지 않습니다...

그래서 현재를 기준으로 미래의 나에게 보내주는 편지를 작성해서 미래의 내가 꼭 받아볼 수 있는 서비스를 제작해보면 어떨까? 라는 생각에 TimeBox프로젝트를 시작했습니다.

---

📃컨셉

타임캡슐을 그대로 그리기엔 감성이 부족하다 생각해서, 소중한 박스안에 추억을 담는다는 컨셉을 잡았습니다.

---

🙋‍♂️ Members

김현욱(백엔드/프론트) GitHub

**채퐁(로고 및 도트) Instagram **

---

⚙ 개발환경

버전관리

• GitHub (개인적으로 관리)

Front-End

• Thymeleaf
• Vanilla JS
• BootStrap

Back-End

• SpringBoot
• Jpa
• EC2
• RDS (MySql)
• javaMail
• Spring Security (22.07.17 추가)
• Spring Security OAuth2.0 (22.07.17 추가)

---

🔑 구현한 서비스(Front-End)

1. Login Page

• 카카오 계정을 통해 로그인을 할 수 있도록 연결했습니다.

---

2. Main Page

• 카카오톡 프로필사진을 메인에 띄워놨습니다.

• 자신이 작성했던 편지들이 담긴 박스를 볼 수 있습니다.

• 열리기까지 남은 시간을 볼 수 있습니다.

• 설정해놨던 시간이 지나면 귀여운 곰돌이가 작성했던 편지를 주고, 지나지 않았다면 닫혀있도록 만들었습니다.

• 로그아웃 버튼을 누르면 로그아웃되고, 작성하러가기를 누르면 편지를 작성할 수 있습니다.

---

2-1. Error Message

• 열리지않은 상자를 누른다면, 에러메세지를 출력하도록 만들었습니다.

---

3. Make Page

• 오픈하고싶은 날짜를 입력, 혹은 달력에서 선택할 수 있습니다.

• 아래에 있는 툴을 이용해서 폰트와 붓의 크기, 붓의 색을 고를 수 있습니다.

• 캔버스에 그림을 그릴 수 있습니다. 글씨와는 별개 캔버스이므로, 지워도 글자는 지워지지 않습니다.

• TextArea를 통해 글도 쓸 수 있습니다.

• save를 누르면 저장이됩니다.

• 추가된 박스

---

4. Message Page

• 보여드리기위해 아까 만든 편지를 살짝 건드려서 시간이 지났다고 해보자...

• 다운로드를 누르면 아래와같이 저장이됩니다.

---

🔑 구현한 서비스(Back-End)

1. Login

카카오 소셜로그인을 이용해서 로그인을 구현했습니다. 카카오 디벨로퍼를 이용해서 ID와 Email을 받아 저장하였습니다. (2022.07.17 적용)Spring Security의 OAuth를 이용해서 카카오 소셜로그인을 구현했습니다.

2. 편지 저장,조회

캔버스를 이용하여 그림을 그리고, 글씨를 쓴뒤 저장을 하면 base64로 인코딩된 데이터가 됩니다. 이 데이터를 서버에서 받아서 저장한 뒤, 사용자가 해당ID의 메세지를 호출하면, 이 데이터를 뿌려주는 방법을 이용해서 메세지를 저장하고, 보여주었습니다.

3. 시간이 다되면 알려주는 기능

처음에는 카카오계정으로 로그인을 한 뒤, 채널을 통해 사용자들에게 시간이 다되었다는 메세지를 보내주고 싶었지만, 채널과 카카오 어플리케이션을 연동하는데 사업자 번호가 필요해서 이는 포기했습니다.

그럼 다른 방법이 무엇이 있을지 생각을 해보니 카카오 로그인을 하면서 이메일을 받을 수 있는데, 이 이메일을 이용해서 사용자들에게 이메일로 알려주면 어떨까? 라는 생각에 이메일을 채택했습니다.

스케쥴링을 이용해서 매일 00:00분에 완료된 메세지를 전부 찾은 뒤, JavaMail을 이용해서 메일을 전송하도록 만들었습니다.

4. 유저 관리

접속시간이 긴 서비스가 아니라서 서버에 부담이 덜하고, Thymeleaf를 이용하여 Server Side Rendering을 하기때문에, JWT보단 Session을 이용해서 유저관리를 해주는것이 좋다고 생각을해서 Session을 이용했습니다.

5. 인터셉터

로그인이 되지않은채 이런저런 페이지를 돌아다닌다면 보안에 문제가 생기므로, Interceptor를 이용해서 세션이 존재하지 않으면 login페이지로 Redirect되게끔 설정했습니다.

---

디자인 패턴

MVC(Model, View, Controller) 의 패턴을 적용했습니다.

---

후기

처음으로 혼자서 배포까지 한 프로젝트입니다. 프론트와 백을 모두 혼자서하다보니 역시나 너무 힘들었습니다. 더군다나 디자인감각도 없어서 더 힘들었습니다. 처음 css를 이용해서 만든 박스 디자인이였는데 , 친구한테 보여주니 자신이 도트를 찍어주겠다면서 파일을 건네주었습니다....

프론트는 정말 주변의 많은사람들에게 조언과 피드백을 받는등의 도움을 받아서 완성을 했습니다.

서버쪽으로 넘어가서, 먼저 저번프로젝트에서는 JdbcTemplate을 사용했는데, 이번에는 Jpa를 이용해서 만들어보자! 라는 생각을하고 프로젝트를 진행하기전에 Jpa에대해 공부를 했습니다. JdbcTemplate을 사용하다가 Jpa를 사용하니 개발하며 많은 장점을 느낄 수 있었습니다.

1. 유지보수가 간편하다.
2. 쿼리를 짤 필요가 없어서 서비스 로직에 집중할 수 있었다. 크게는 위에 두가지고 세세한 장점들을 느낄 수 있었습니다.

다음으로 느낀점은 TDD의 중요성을 느꼈습니다. 이 프로젝트는 TDD가아닌 개발을 하며 테스트코드를 작성해나갔는데, 이렇게 하다보니까 빨리 서비스로직을 건들고싶은 생각에 테스트코드에 심혈을 기울이지 못했습니다. 다음 프로젝트부터는 TDD방식을 채택해야겠다는 생각이 들었습니다.

또한 다음프로젝트때는 SpringSecurity를 사용해보고싶다는 생각이 들었고, 개발할때 관심사분리를 철저하게 하는 연습을 더 해야겠다고 느꼈습니다.