[스파르타 코딩클럽]나만의 웹서비스 만들기 "마이 레시픽" 8주차 - 백엔드는 끝났다. 프론트 작업 시작!

문세미·2020년 3월 14일
0
post-thumbnail

프론트 기능 구현하기

<프론트 완성본>

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에 데이터가담긴다.
  • 사용자의 이메일을 입력하면 사용자가 저장한 레시피가 보여진다. (추후 저장한 레시피를 삭제하는 기능을 구현해보고싶다. 한 번 도전한 레시피는 더이상 저장해서 볼 필요가 없을 수 있으니!)
profile
백엔드와 프론트엔드를 사랑하는 현 마크업개발자(퍼블리셔)입니다 :) 자바스크립트, React, Python을 공부하고 있습니다.

0개의 댓글