0. 프로젝트 공지 노션주소
8주차
1. 개인 레포지토리 주소
https://github.com/mjjeon2645/my-golden-kid
2. 참고 웹사이트
velog
3. 컨셉
- 이유식 완료기 이후인 만 2세 이상의 유아 식단을 랜덤으로 짜 주는 프로그램
4. 주요 기능 및 상세
- 주요 기능
- 가장 상단의 nav 요소는 2가지. 홈(메인페이지)과 자랑하기(게시판 기능)
- 메인 페이지 주요 구성
- 상단에 hero가 들어가며, 배경에는 사진(또는 시간이나 역량이 가능하다면 video로 래핑) 사용
- body에는 큰 식판모양의 그림과 오른편에 수저/젓가락 그림 삽입(또는 적절한 그림을 찾을 수 없으면 식판 모양의 레이아웃을 짤 것. 파워포인트 같은 것으로 식판을 그린다음에 그걸 그림으로 저장해서 활용해도 가능하지 않을까?)
- 하단에 ‘오늘의 메뉴 만들기!’ 와 같은 버튼을 클릭할 수 있도록 함
- 화면 가장 밑에는 footer를 구성. sticky 푸터…? 내용은 한끼얌얌 메인 폰트와 함께 오류신고&내 이메일 노출. copyright에 대한 문구 기록
- 모든 페이지 이동 시 상단에 있는 나브 요소(헤더)와 푸터는 변하지 않게 고정값으로 둠
- 상세
- 메인 페이지
- 메인페이지에서는 총 5개의 섹션(밥, 국, 채소반찬, 고기반찬, 간식)에 대해 랜덤으로 식단을 짜 주는 프로그램이 돌아감. 완성된 식단은 식판그림에 텍스트로 표시(자원과 역량이 가능하다면 이미지로 노출시켜도 좋을 것 같은데 그림이 깨지거나, 레이아웃을 잡는 문제가 생길수는 있어보임)
- 식단을 짜고 나서 다시 replay를 할 수 있는 버튼(식단 다시짜기)을 누르면 또다시 랜덤으로 구성된 식단이 식판에 표시됨
- ‘자랑하러 가기' 버튼을 누르면 게시판 기능이 있는 ‘자랑하기' 페이지로 바로 이동할 수 있음
- 주간 과제 중 ‘점심메뉴 올림픽', ‘야구 게임' 처럼 버튼을 누르면 랜덤 식단을 만들어내는 페이지 구성하기
- 랜덤으로 나올 섹션은 총 5가지. 밥, 국, 채소반찬, 고기반찬, 간식.
- 각 섹션마다 메뉴 리스트를 미리 만들어놓은 후, 섹션마다 랜덤으로 한 메뉴씩 출력하도록 하여 한 끼 식단이 완성되는 페이지
- 예.
- 밥 섹션: 흰쌀밥, 옥수수밥, 흑미밥, 현미밥, 계란볶음밥. 만약 아이가 아프다는 옵션을 받는다면 흰 죽, 호박죽 등의 유연식을 넣는 것도 좋은 아이디어일 듯
- 국 섹션: 시금치된장국, 팽이버섯미소국, 계란부추국, 소고기무국
- 채소반찬: 시금치나물, 숙주나물, 콩나물…
- 고기반찬: 돈까스, 연어스테이크, 삼겹살…
- 간식: 플레인요거트, 딸기요거트, 포도, 방울토마토 등등
- 랜덤과 난수생성 등 배웠던 내용을 활용해보기
- 자랑하기(게시판 기능)
- 해당 페이지의 첫 화면은 글 리스트 전체가 노출되는 것
- 게시판은 총 2종류로 필터할 수 있음(검색기능은 내 능력으로 넣을 수 있을지 모르겠어서 우선은 제외) 전체 글 보기와 인기글 보기. 전체 글 보기는 전체 글을 최신 순서대로 나열해서 볼 수 있는 기능이고, 인기글은 좋아요를 20개 이상 받은 글에 대해서만 최신 순서대로 나열
- 하단에 페이지를 이동할 수 있는 숫자가 있고, 가장 양쪽 끄트머리에는 이전, 다음 버튼이 있음
- 페이지에 최대로 나열될 수 있는 글의 수는 우선은 8개로 설정함
- 글쓰기 버튼을 누르면 글을 쓸 수 있는 페이지로 이동
- 제목과 내용을 입력할 수 있는 섹션이 나누어져 있는데, 적어도 볼드(B)와 이탤릭(I)은 있어야 할 것 같지만 구현이 가능할지 모르겠음
- 글을 모두 쓰면 하단 우측에 글쓰기를 누르면 글이 완성되고, 뒤로가기를 누르면 이제까지 작성한 모든 내용을 따로 저장하지 않고 자랑하기 첫 화면으로 이동
- 쓴 글을 누르면 상세페이지로 이동. 제목은 다른 글보다 굵고 사이즈를 크게. 작성자 이름 왼쪽에는 작은 새싹 아이콘을 붙여주고 싶음(회원 등급을 나누는 시스템을 구현하고 싶으나 지금은 무리데쓰..)
- 작성자 이름 오늘쪽에는 글 ‘최초' 작성 연.월.일을 나타냄(글을 수정하더라도 이 값은 변하지 않는 것이 맞음)
- 본문에 사진, 글 등이 그대로 보여지고 오른쪽 하단에는 ‘삭제하기', ‘수정하기', ‘목록으로' 3가지 버튼이 존재
- ✅ 아니 근데…. 수정하기와 삭제하기 기능이 필수로 들어가려면 작성자만 admin만 수정, 삭제가 가능해야 할텐데, 그럼 이건 어떻게 처리할것인가? 아마 작성 시에 비밀번호를 받아서 처리해야 할 수도..? 로그인 기능을 구현하지 않을거라면.