TAING 반응형 웹페이지_JS 프로젝트

• TAING 반응형 웹페이지_JS 프로젝트
  • 배포 주소
  • 프로젝트 소개
  • 참여 인원
    • 담당 페이지
  • 기술 스택
  • 화면 구성
    • 화면 플로우

배포 주소

TAING 반응형 웹페이지_JS 프로젝트

프로젝트 소개

[테킷 멋쟁이 사자처럼] 프론트엔드 스쿨 6기에서 진행한 JavaScript 프로젝트.
페이지별 JS 기능에 중점을 두어 작업.

참여 인원

조원 : 김남진	조장 : 이동호	조원 : 장효윤	조원 : 정소이

[테킷 멋쟁이 사자처럼] 프론트엔드 스쿨 6기 3조 정진이효 :
김남진, 이동호(스크럼 마스터), 장효윤, 정소이(깃 마스터) (가나다 순)

담당 페이지

김남진 : 로그인, 아이디 찾기, 비밀번호 찾기,
이동호 : 메인 페이지, 메인 페이지 모달,
장효윤 : 랜딩 페이지, 회원 가입, 헤더, 푸터,
정소이 : 프로필 선택, 프로필 편집, 검색 페이지, 로그아웃

기술 스택

화면 구성

• 메인 페이지 : swiper 슬라이드, 섹션별 슬라이드는 바닐라 JS 이용 구현, 프로그램 목록 JSON 렌더링
• 랜딩 페이지 : swiper 슬라이드
• 로그인, 로그아웃 : 아이디, 비밀번호 유효성 검사 및 JSON 회원 목록 체크 후 로그인
• 회원 가입, 아이디 찾기, 비밀번호 찾기 : 아이디, 비밀번호, 비밀번호 확인, 이메일, 필수 목록 체크 유효성 검사 및 통과 시 가입 완료(JSON 회원 목록에 추가)
• 프로필 선택, 프로필 편집 : 프로필 JSON 렌더링
• 검색 페이지 : 실시간 인기 검색어 JSON 렌더링, 검색어 입력 시 검색어 목록 추가 및 개별 삭제, 모두 삭제 가능, 쿠키에 담아 검색어 저장 가능

화면 플로우

1. 로그인 정보(users DB 기준)

   default	ID	Password
   ☑️	likelion02	likelion02**
   	likelion01	likelion01**

2. 랜딩 페이지 => 로그인 => 프로필 선택 => 메인 페이지 => 검색 아이콘 클릭 => 검색 페이지

3. 랜딩 페이지 => 로그인 => ( => 아이디 찾기, 비밀번호 찾기, 회원 가입 => 로그인)

4. 메뉴 => 프로필 아이콘 클릭 => 프로필 전환 클릭 => 프로필 선택 => 프로필 편집