[메리크리] 편지쓰기 UI

📍계획 및 구상

편지 보내기 페이지에 들어가면 유저들은 편지지를 고를 수 있고, 나에게 편지를 보낼 수 있다.

보내기 버튼을 누르면 내 메일로 편지가 온다.

---

📍구현

1. 편지지 고르기 인터페이스

[letter.html]

[letter.css]

편지지를 선택할 수 있도록 3 종류의 편지지를 그리드로 나열하고, 첫번째 편지지에 테두리를 설정하여 현재 이 편지지가 선택되었음을 표시한다. 

 

[letter.js]

만약 사용자가 편지지를 선택하면, 해당 편지지를 paper 값으로 설정하여 추후 메일으로 해당 편지지를 보낼 수 있도록 설정한다.

선택한 편지지는 테두리를 설정하여 선택된 상태라는 것을 보여준다.

---

2. 편지 작성 인터페이스

[letter.html]

상단 왼쪽에는 to. 은진을 적어 나에게 쓰는 편지임을 알린다.

그리고 textarea를 배치하여 이 공간에 사용자들이 편지를 작성할 수 있도록 한다.

보내기 버튼을 누르면 sendLetter 함수가 실행되고 편지가 보내진다.

 

[letter.js]

로그인 페이지에서 설정한 이름을 우측 하단에 [from. 유저]로 나타낸다.

---

📍 결과