프론트 기능 구현하기
<프론트 완성본>
1. 왼쪽 사이드 부분
로고, 검색부분, 오늘의 추천레시피 위치
- 사용자는 보통 위에서 아래로 왼쪽에서부터 오른쪽으로 컨텐츠를 읽는다. 따라서 왼쪽부분은 사용자가 사이트로 방문하자마자 가장 먼저 사용하게 될 확률이 높은 곳이다.
- 로고로 사이트 아이덴티티를 나타내고, 검색부분을 위치시켜 사용자가 원하는 레시피명을 바로 검색할 수 있게 했다.
- '오늘의 추천레시피'는 랜덤으로 보여지며 레시피명을 검색하기 전 사용자에게 노출하여 선택지를 부여한다. 이런 레시피들이 있어요! or 오늘뭐먹지?등 레시피추천 의도이다.
2. 센터 부분
상단 탭메뉴, 공식&따라하기 레시피 100개씩 랜덤 노출
- 탭메뉴로 '백종원', '김수미' 레시피를 나누었다. 원페이지에 보여주고 싶은 내용들은 많다보니 탭메뉴가 적격이였다.
- 사이트에서 가장 많은 부분이 노출되는만큼 레시피의 필요한 부분을 간결하게 카드형식으로 만들어보았다.
- '레시피 보기' 클릭 시 해당하는 레시피의 링크로 새 창이 열린다.
- 'url 저장' 클릭 시
// Developer 문세미 - 레시피 url복사 alert
function copy_trackback(trb) {
var IE=(document.all)?true:false;
if (IE) {
if(confirm("이 글의 트랙백 주소를 클립보드에 복사하시겠습니까?"))
window.clipboardData.setData("Text", trb);
} else {
temp = prompt("아래 URL을 복사(Ctrl+C)하여 원하는 곳에 붙여넣기(Ctrl+V)하세요.", trb);
}
}
'클립보드 복사' 위 코드가 실행된다. 해당 레시피의 url이 alert창에 뜨고 사용자가 복사하여 레시피 저장을 할 수 있다.
3. 오른쪽 사이드 부분
레시피 담기, 나의 레시피 보기
- 두 개의 기능들이 위치해있다. 사용자가 이용하는 부분이다.
- 사용자가 이메일과, 레시피 url을 입력해서 저장하면 유저DB에 데이터가담긴다.
- 사용자의 이메일을 입력하면 사용자가 저장한 레시피가 보여진다. (추후 저장한 레시피를 삭제하는 기능을 구현해보고싶다. 한 번 도전한 레시피는 더이상 저장해서 볼 필요가 없을 수 있으니!)