[토이프로젝트1] 2. 구현(1) - 음식 랜덤 추천 웹/앱

1. 로그인 페이지

-로그인 폼: 사용자 아이디와 비밀번호 입력, 로그인 버튼, 아이디/비밀번호 저장 체크박스.

-회원가입 링크: 회원가입 페이지로 이동하는 링크.

 

2. 회원가입 페이지

-회원가입 폼: 후원 인증 키, 아이디, 비밀번호, 비밀번호 확인, 이메일 입력 필드.

-인증 버튼: 후원 인증 키를 검증하는 버튼.

-중복 확인 버튼: 아이디 중복 확인 버튼.

-가입 완료 버튼: 회원가입을 완료하는 버튼.

-가입 취소 버튼: 로그인 페이지로 돌아가는 버튼.

 

3. 랜덤 식당 찾기 페이지

-지도 표시: 네이버 지도를 사용하여 현재 위치를 표시.

-식당 추천 버튼: 현재 위치를 기반으로 식당을 추천받는 버튼.

-식당 정보 표시: 추천받은 식당의 정보를 표시하는 영역.

 

 

4. JavaScript 기능들

-로그인 폼 제출 처리: 로그인 폼 제출 시 서버로 로그인 요청을 보내고, 응답에 따라 성공/실패 메시지를 표시.

-아이디/비밀번호 저장: "아이디 / 비밀번호 저장" 체크박스가 체크된 경우, 로컬 스토리지에 아이디와 비밀번호를 저장.

-회원가입 폼 제출 처리: 회원가입 폼 제출 시 서버로 회원가입 요청을 보내고, 응답에 따라 성공/실패 메시지를 표시.

-후원 인증 키 검증: 후원 인증 키를 서버로 보내 검증하고, 결과에 따라 메시지를 표시.

-아이디 중복 확인: 입력된 아이디를 서버로 보내 중복 여부를 확인하고, 결과에 따라 메시지를 표시.

-헤더 컴포넌트: 사용자 정보와 메뉴를 표시하는 헤더 컴포넌트.

-위치 정보 가져오기: 사용자의 현재 위치를 가져와서 표시.

-메뉴 토글: 메뉴 버튼 클릭 시 메뉴를 토글.

-연결 상태, 문의 사항, 버전 정보, 사용자 정보 표시: 각 버튼 클릭 시 SweetAlert2를 사용하여 정보를 표시.

-모바일/데스크탑 스타일 로드: 사용자 기기에 따라 적절한 CSS 파일을 로드.

-화면 방향 감지: 화면의 가로/세로 방향을 감지하여 적절한 클래스를 적용.

 

5. 서버 기능

-회원가입: /register 엔드포인트를 통해 회원가입 요청을 처리.

-로그인: /login 엔드포인트를 통해 로그인 요청을 처리.

-후원 인증 키 검증: /verify-access-key 엔드포인트를 통해 후원 인증 키를 검증.

-아이디 중복 확인: /check-username 엔드포인트를 통해 아이디 중복 여부를 확인.

-네이버 지도 클라이언트 ID 제공: /api/keys 및 /api/map-client-id 엔드포인트를 통해 네이버 지도 클라이언트 ID를 제공.

-식당 검색: /search-restaurant 엔드포인트를 통해 현재 위치를 기반으로 식당을 검색.

 

6. CSS 스타일링

-로그인 페이지 스타일링

-회원가입 페이지 스타일링

-메뉴 바 스타일링

 

 

https://random-food001.du.r.appspot.com/

로그인

 

 

 추후 구현해야 할 것들

1. 프론트 더 예쁘게 디자인 고려

2. 프론트 웹/앱(데스크톱, 모바일) 나눠서 적용

3. 비로그인 사용 추가

4. 비로그인, 로그인, 로그인(인증 키) 사용 횟수 다르게 적용

5. html에 지도 api 클라이언트 id 노출. 환경변수에서 가져올 방법 고려

6. 구글 클라우드 및 네이버 지도, 네이버 검색 api 제한 방법 고려 (악의적인 사용?)

7. 앱은 하이브리드로

(추가)

8. 반경 내에서 정보를 받아오지 않음

9. 현재 위치를 잘 못잡음

10. css max min 설정 필요

11. 더욱 랜덤처럼 보이도록 알고리즘 수정 필요

12. 주소 직접 입력 시, 지도 페이지 로딩됨. 막는(?) 방법 필요