식당 웹사이트 리뉴얼 프로젝트 (22.05.04~)

배운 내용을 그때그때 적용하며 사용 가능한 페이지 제작을 목표로 하는 개인 프로젝트

 

 

1차 (22.05.04) : 메인페이지 페이스오프 / Django

• 아임웹에 게시된 식음료점 디자인들을 참고
• 모바일/데스트탑 2단의 반응형 메인 페이지를 테스트 제작
• django 템플릿으로 연결

 

2차 (22.05.14-15) : scss 적용

• scss 세팅 : 그리드 시스템, 타이포그래피, 컬러 기본값을 적용
• favicon 추가

 

3차 (22.05.16) : 세부페이지 목업

• 공간소개, 메뉴소개, 쇼핑 페이지 와이어프레임 제작

 

4차 (22.06.06) : React 적용

• python 모듈 제거 : 첫 시도에서 uninstall 시도 시 '파일을 찾을 수 없다'며 오류 -> venv에 설치했다는 걸 깨닫고 안에서 전부 uninstall 후 가상환경 제거
• create react app 으로 재시작 : vscode와 git에서 변경사항 추적을 못 하길래 기존 repository 삭제 후 새로 연결
• JSX으로 헤더/메인/푸터 리팩토링 시작

 

5차 (22.06.18) : 메뉴페이지 레이아웃 기초작업

• 메뉴페이지 마크업: 상단 소개문 영역과 하단 메뉴 리스트 영역으로 나눔
• 소개문 영역 이미지 + 소개글 작성
• 메뉴 리스트를 위한 dummy data 작성
• 메뉴 아이템 flex 디자인

 

6차 (22.06.26) : 메뉴페이지 그리드 개선

• 메뉴 리스트에 그리드시스템 적용 - 메뉴 너비를 mobile은 2col씩, pc는 3col씩 할당
• 메뉴 이미지 관리가 불편 -> 노션에 이미지 업로드 후 주소 가져오는 방식으로 개선

 

7차 (22.06.27) : 상점페이지 작성 후 github 배포

• User Flow 작성 : 페이지에 필요한 컴포넌트를 구체화

• 상점메뉴페이지 작성 : 구성과 동일하게 작성
• github 배포 : gh-pages 패키지 이용 https://velog.io/@byjihye/react-github-pages 

 

next to do

• 메인페이지 이벤트 팝업 기능
• 공간소개 마크업
• 메뉴페이지 필터링 기능 삽입
• 메뉴 아이템 태그 삽입 
• 아이콘폰트 교체
• Footer에 contact 링크, 페이지 공유기능 추가
• 쇼핑페이지 마크업
• 네이버 페이 or 스마트스토어 연동 방법 공부
• 상태 디자인 (hover, focus, active, disabled)
• history 구현 - 글 작성 후 목록으로 이동
• build 후 github 페이지로 배포
• 모니터를 위해 aws로 배포

further

• 장바구니, 마이페이지 목업
• 로그인 기능
• 결제기능
• 백엔드 python -> nodejs로 변경