01 - myProject #1

- 제작개요

제작동기 //
나는 처음부터 회사에서 담당하는 업무와 관련이 있으면서도,
나뿐만이 아니라 이 분야에 관심이 있는 사람이라면 누구든
도움이 될 수 있을법한 사이트를 제작하고싶었다.

내용 //
각종 드럭스토어(롭스,올리브영 등)에서
진행중인 이벤트를 한눈에 모아볼 수 있는 웹페이지 제작

목차 //
1 - 프로젝트 소개
2 - 웹페이지 기능
3 - 필요한 데이터 및 기술
4 - 레이아웃 구성

1 - 프로젝트 소개

1-1 프로젝트명
- 세모이 [세상의 모든 이벤트]

1-2 의미
- 세상의 모든 이벤트를 싸그리싹싹 집합 시켜놓은 곳

2 - 웹페이지 기능

2-1 기능
- 드럭스토어 이벤트 모음
- 이벤트 기간에 따른 순서정렬
(대부분 날짜순으로 게시되어있어 추가적인 작업이 없을수도..)
- 이벤트 마감일이 3일 이하인 마감임박 이벤트는 따로 집합
- 이벤트 클릭 시 펼쳐지면서 이벤트 내용을 보여준다.
- 드럭스토어별로 코멘트 작성이 되며, 열고닫힘이 가능하다

3 - 필요한 데이터 및 기술

3-0 레이아웃

3-1 프론트엔드 부분

- 많은 이벤트를 한 눈에 확인할 수 있는 레이아웃이 중요할것이다,
  드럭스토어별로 영역을 지정하고 그 안에 이벤트 슬라이드를 제작하여 많은 정보를 담아내려고한다.
  
- 이벤트가 들어갈 프레임 제작
  (이미지, 제목, 내용, 행사기간)
  

- 로고 제작 (세모 동그라미 네모)

3-2 백엔드 부분

• comment를 보관할 mongodb 생성
• 스토어의 eventPage url 문서정보를 $.ajax 'GET' 을 통하여 가져온다
• 가져온 정보에서 eventPage의 각 이미지, 제목, 내용, 기간을 추출하여 eventPage_storename(oliveYoung,lobs 등등)
  ['img':img]['title':title]
  ['desc':desc]['terms':terms]
  식으로 담는다.
• for문을 통하여 각 eventPage_storename을 반복출력
• 출력값을
  function makeEventList(img,title,desc,terms){
  let tmpHtml =
  `
  
  ${title}
  ${desc}
  ${terms}
  ` $('#eventFrame').append(tmpHtml) }

-마감임박에 따른 강조표시를 어떤식으로 구현해야할까
한국시간의 day를 따와서 terms안에 들어가는 day와 비교했을때
3이하일 경우 이벤트카드에 border 생성???

-스토어별 코멘트기능은..

-클릭 시 이벤트페이지 열람기능은...

-----대략적인 이벤트카드 생성 구문-------

사용할 함수 및 클래스명을 미리 정해두자

Html
class
"header" -> 로고가 들어갈 상단 영역
"event_Slide" -> 이벤트 카드를 롤링시킬 영역
"eventFrame" -> 이벤트 카드의 틀
"event_img" -> 이벤트 이미지가 들어간다
"event_title" -> 이벤트 제목이 들어간다
"event_desc" -> 이벤트 설명이 들어간다
"evenet_terms" -> 이벤트 기간이 들어간다

JS
makeEventList -> 이벤트 카드를 생성해주는 함수

Python
flask -> 서버를 구동..?
render_template -> html을 불러오기위한..?
@app.route('/') -> html 로드
def -> function과 같은느낌
mongodb -> 코멘트데이터를 보관