먼저, Next.js 파일을 생성하고, 미리 구상해둔 폴더 구조를 만들었다.
필요 없는 파일들을 정리한 후, 구상에 맞춰 게시판 페이지 (post), 개인 프로필 페이지 (profile), 회원가입 페이지 (register) 등 각 페이지에 필요한 폴더들을 생성했다. 또한 컴포넌트, 스타일, 서버 기능을 관리할 폴더도 함께 구성했다.
다음으로, 사이트에 접속했을 때 가장 먼저 보여줄 메인 페이지 제작에 착수했다.
사이트에 들어왔을 때 뽑기 페이지가 직관적으로 보이지 않으면, 처음 방문한 사람들에게 불편함을 줄 수 있다고 생각했다. 그래서 첫 페이지에 바로 뽑기 기능을 사용할 수 있도록 구성하는 것이 나의 계획이었다.
물론, 앞으로 사이트가 더욱 완성도 있게 발전하기 위해서는 유저 참여도가 중요하다고 생각한다. 그래서 흥미로운 요소들도 차차 추가할 예정이다.
현재 메인 페이지는 기본적으로 로또 6/45 페이지를 보여주고, 로또 720+ 뽑기 기능을 사용할 수 있는 버튼도 배치했다. 사용자가 대부분 모바일 환경에서 접속할 것이라고 예상해, 모바일 반응형 디자인도 신경 쓰고 있다.
사실 지난 몇 달 동안 JavaScript 기초, React, Next.js 강의만 수강하다 보니, HTML/CSS 스타일링은 여전히 어려운 상태다. 그래서 급한 디자인은 기존의 로또 사이트 디자인을 참조하고 있다.
디자인에 대한 욕심이 많지만, 지금의 목표는 기능 구현을 제대로 하는 것이다.
다음 목표는 로또 6/45 컴포넌트에 뽑기 기능을 완성하는 것이다.
'나만의 로또 번호 추첨 사이트' 카테고리의 다른 글
#5 : 언더독 뽑기 기능 구현하기 (1) | 2024.10.09 |
---|---|
#4 : 확률을 반영한 로또 번호 추출 기능 만들기 (0) | 2024.10.06 |
#3 : 랜덤 뽑기 기능 만들기 (Fisher-Yates 알고리즘) (5) | 2024.10.03 |
#1 : 생에 첫 프로젝트 : 로또 번호 랜덤 추출 사이트 (1) | 2024.09.19 |