프로젝트명
네이버 모바일 클론 프로젝트
제작기간
2020.12 - 2021.03
개발스택
Javascript | React | webpack | json-server
프로젝트 설명
React를 사용해 single page application으로 네이버 모바일 페이지를 클론 개발한 프로젝트입니다. 빌드엔 create-react-app을 사용하였고 json-server를 통해 가상의 서버를 만들어 회원가입한 유저값과 웹툰 데이터를 저장하였습니다.
Main Page / path: / / 로그인
•
상단 좌측 icon : 클릭 시 로그인화면(/login) 이동
•
NAVER 로고 : 클릭 시 메인화면(/)으로 이동
•
검색창 : 클릭 시 검색화면(/search)으로 이동
•
추천 웹툰 : db.json 에서 데이터 fetch해서 출력
•
NPay : 로그인 유무에 따라 다른 UI 출력
•
각 섹션 우측 버튼 : 클릭 시 섹션 열고 닫음
버튼 : 클릭 시 섹션 열고 닫음
Search Page / path: /search /
•
상단 좌측 icon : 클릭 시 메인화면(/)으로 이동
icon : 클릭 시 메인화면(/)으로 이동•
검색창 : 검색어 입력창
•
상단 우측 icon : 클릭 시 검색어 저장
icon : 클릭 시 검색어 저장•
최근 검색어 : 검색된 키워드를 시간순으로 나열
•
Clear 버튼 : 검색어 전체 삭제
•
X 버튼 : 해당 검색어 삭제
Login Page / path:/login / 로그인
•
상단 좌측 icon : 클릭 시 메인화면(/) 이동
•
NAVER 로고 : 클릭 시 메인화면(/) 이동
•
id/password form : 가입한 아이디, 패스워드 입력 창. 가입된 정보가 없으면 alert 창 띄움
•
로그인 버튼 : 로그인에 성공할 경우 메인으로 이동
•
회원가입 버튼 : 클릭 시 회원가입(/join) 이동
Join Page / path: /join / 로그인
•
NAVER 로고 : 클릭 시 메인화면(/) 이동
•
id : 6자 이상 입력, 그렇지 않으면 error
•
password : 6자 이상 입력, 그렇지 않으면 error
•
confirm password : 비밀번호가 일치하지 않으면 error
•
name : 이름 입력
•
email : 유효한 이메일 주소 입력, 그렇지 않으면 error
•
가입하기 버튼 : 클릭 시, 입력한 정보를 db.json에 저장한 후 메인화면(/) 으로 이동
Main Page / path: / / 로그인
OO님을 위한 추천 웹툰
로그인한 유저가 존재하면 db.json에 저장된 유저명과 사용자 추천 웹툰 데이터를 불러와 화면에 출력시킨다.
My Page / path: /mypage / 로그인
•
상단 좌측 N 로고 : 클릭 시 메인화면(/) 이동
•
상단 유저 정보란 : 가입 시 입력한 정보를 가져와 출력
•
5개 메뉴 : 컴포넌트로 제작해서 재사용하며 제작.
•
로그아웃 버튼 : 클릭 시, 로그아웃 후 메인(/) 이동