다양한 디바이스의 환경에서 안정적인 사용자 경험이 이루어질 수 있도록 편의성 제공
새롭게 갱신되는 부분만 렌더링하기 때문에 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동 가능
웹사이트 이용자와의 상호작용을 이끌어 내는 것에 중점을 두고 작업
최신 Chrome Browser 사용을 권장합니다.
git clone https://github.com/Sesac22022202/Sesac
cd client
npm install
npm start
메인 화면
1️⃣ 메인 공지팝업
'오늘 하루 보지않기' 체크시 쿠키에 유효기간 하루 설정
2️⃣ 메인 배너
swiper 라이브러리를 사용하여 2초마다 배너가 슬라이딩 & 배너 재생/일시정지 가능
로그인 화면
1️⃣ 유효성 검사
아이디,비밀번호 미입력시 하단에 빨간글씨로 경고문구 노출
2️⃣ 아이디 저장
아이디 저장 체크시 쿠키에 회원아이디 저장
3️⃣ 로그인 성공
로그인 성공시 sessionStorage에 회원정보 저장
회원가입 화면
1️⃣ 아이디/비밀번호 유효성 검사
정규표현식을 사용 , /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{3,15}$/
2️⃣ 필수정보 유효성 검사
필수정보 미입력시 하단에 빨간글씨로 경고문구 노출
- 엑스퍼트 아카데미의 취업과정 소개와 모집 중인 과정을 확인할 수 있는 카테고리입니다.
- 소개 / 모집 중인 과정 / 과정 문의 로 2 depth 메뉴가 구성되며, 과정 문의 메뉴 클릭 시 고객센터의 문의하기 페이지로 이동합니다.
- 과정 상세 페이지는 기업 측에서 제공받은 스토리 보드에 따라 공개 과정과 동일하게 적용하였습니다.
소개 페이지
1️⃣ 헤더의 네비에서 취업 과정 클릭시 소개 페이지로 이동
2️⃣ 컴포넌트 분리
취업 과정 내의 서브 네비(소개, 모집 중인 과정, 과정 문의)는 JobHeader로, 소개 페이지는 JonIntro로 컴포넌트를 분리하여 코드를 간결하게 작성
3️⃣ 호버 및 클릭 이벤트
서브 네비 호버시 배경과 글자 색의 변경되며, NavLink를 사용하여 클릭시 activeStyle을 통해 호버된 상태에서 글자가 볼드 처리 되도록 구현
모집 중인 과정, 과정 상세 페이지
1️⃣ 호버 및 클릭 이벤트
모집 중인 과정에서 해당 과정에 호버시 애니메이션 효과, 클릭시 과정 상세 페이지로 이동
2️⃣ 과정상세페이지 상단 섹션
공개 과정의 과정 상세 페이지와 동일하게 url 공유, 일정 선택, 관심 과정 등록 가능
3️⃣ 과정상세페이지 하단 섹션
과정개요, 과정목표, 교육대상, 커리큘럼, 대표강사, 접수안내의 탭메뉴로 이루어진 상세 내용을 확인
4️⃣ 스크롤시 탭, 셀렉트박스 고정
- 스크롤시 상세 내용 탭메뉴와 일정 선택 셀렉트박스가 상단에 고정되며, 해당 탭 섹션에 스크롤시 탭메뉴의 색이 변경
- 스크롤 후 상단 고정된 탭메뉴를 클릭하면 해당 섹션으로 이동
5️⃣ 문의하기 버튼
접수안내 섹션의 문의하기 버튼을 누르면, 고객센터>문의글 작성 페이지로 이동
- 엑스퍼트 아카데미의 고객 서비스를 담당하는 메뉴입니다.
FAQ 페이지
- 카테고리별 자주 묻는 질문을 아코디언 메뉴로 구현한 페이지입니다.
- 회원정보, 결제관련, 환불규정, 신청/취소, 기타 의 서브 네비의 내용에 맞게 아코디언이 변경되도록 구현했습니다.
- 답변의 만족도를 평가하는 별점을 등록할 수 있습니다.
1️⃣ 컴포넌트 분리
고객센터의 공통 탭메뉴(공지사항, 문의하기, 자주 묻는 질문, 오시는 길)은 Customer 컴포넌트로 분리
2️⃣ 서브 네비
- 서브 네비 타이틀은 map 함수로 값을 받아오도록 구현
- 서브 네비 호버 및 클릭시 useState, onClick을 통해 이벤트 적용
3️⃣ 아코디언 메뉴
- reactstrap 라이브러리를 사용했으며 컴포넌트로 분리
- 서브 메뉴 클릭시 해당 메뉴대로 아코디언 내용이 변경
4️⃣ 별점 등록 기능
- 아코디언 메뉴 하단에 답변에 대한 만족도를 평가하는 별점 등록
- 별 호버시 색이 채워지고 별점 남기기 버튼을 클릭해 등록. 등록시 alert 창 표시
- 별 아이콘은 react-icon 라이브러리 사용
오시는 길 페이지
- 센터의 약도 및 주소, 교통편을 안내하는 페이지입니다.
- 카카오맵 API를 통해 구현한 지도를 확인 할 수 있습니다.
- 공유 버튼을 통해 주소를 클립보드에 복사합니다.
- 지도 보기 버튼을 통해 카카오맵으로 링크가 연결됩니다.
1️⃣ 서브 네비
서브 네비 타이틀은 map 함수로 값을 받아옴
2️⃣ 지도 API
- 카카오맵 API 받아와 지도 구현. 지도에는 마커 표시 라이브러리를 사용하여 지도 상의 위치를 표시
- 지도는 VisitMap 컴포넌트로 분리
3️⃣ 공유 버튼
onClick을 통해 공유 버튼을 누르면 클립보드에 주소가 복사
4️⃣ 지도 보기 버튼
지도 보기 버튼을 누르면 카카오맵이 새 창으로 연결
IntroducePage
1️⃣ 아카데미 소개 페이지
react-spring사용해 애니메이션 구현
2️⃣ 메인 배너
swiper 라이브러리를 사용하여 2초마다 배너가 슬라이딩 & 배너 재생/일시정지 가능
OrderPage
1️⃣주문 페이지
react-swiper사용해 carousel 구현
2️⃣ 주문 UI
hook사용해 데이터값 state관리
문의하기
1️⃣이메일 기능
email 보내기 기능 / 자동답장기능
2️⃣다크모드
react-string 사용해 구현
3️⃣sns공유기능
페이스북 트위터 카카오톡 url복사 가능
- react-share 라이브러리 사용
강사소개
1️⃣ 버튼 클릭시 인터뷰 영상 연결
버튼 클릭시 window.open()으로 강사 인터뷰 영상 url을 새탭으로 열기
2️⃣ 강의 선택시 이동하기
select의 각 option에 value값으로 해당 path값을 주어 선택시 window.location.href = value; 로 강의 상세 페이지 이동
- 엑스퍼트 아카데미 로그인 후 확인 가능한 마이페이지 카테고리입니다.
- 회원정보수정 / 비밀번호변경 / 수강신청 확인&취소 / 수강내역 으로 메뉴가 구성되며, 회원정보수정 페이지를 통해 회원탈퇴 페이지로 연결됩니다.
- 마이페이지의 title과 sidemenu 부분은 컴포넌트로 마이페이지 전체에 동일하게 적용됩니다.
회원정보관리
1️⃣ 회원구분 - 교육담당자 option 선택시
부가정보2 의 모든 input태그 필수입력(안내문구 노출),
2️⃣ 주소검색 기능
주소검색 후 선택한 주소값이 input태그의 value값으로 남게 된다.
3️⃣ 확인팝업
회원정보가 수정되었음을 알리는 확인팝업
비밀번호 변경
1️⃣ 비밀번호 유효성검사
비밀번호 유효성검사
2️⃣ 확인 팝업
비밀번호 변경확인 팝업
3️⃣ 변경완료 후 페이지 이동
비밀번호 변경 팝업 확인 클릭시 회원정보관리 페이지로 이동
수강신청 확인/취소
1️⃣ 수강신청 취소
신청취소 버튼 클릭시 선택 과정 취소 팝업, 선택한 수강신청 내역이 삭제
2️⃣ 수강신청 내역 없음 안내
수강신청 내역이 없거나 모두 삭제된 경우 안내 문구 출력
수강내역
1️⃣ 수강내역
수강한 내역 확인
2️⃣ 수료증 다운로드
수료증 다운로드 버튼 클릭시 다운로드 완료 팝업
회원탈퇴
1️⃣ 회원탈퇴 버튼
회원정보관리 페이지 맨아래 색상없이 흰색 버튼으로 눈에 덜 띄도록 적용
2️⃣ 탈퇴하기 버튼 클릭
탈퇴하기 버튼 클릭시 로그아웃 상태로 메인 페이지로 이동
-
Version Control: Git, Github
-
Task Control: Notion, Figma, slack