🖥️ 프로젝트 소개

TypeScript-React를 활용한 웹사이트 만들기(아이스크림 판매)

🕰️ 개발 기간

• 23.03.09 - 23.04.07

⚙️ 사용한 스킬

Html, Css, Sass, JavaScript, React, Redux, TypeScript, MySQL, GitHub, Git

관리자

-Id: admin

-password: admin1234$!!

📌 주요 기능

로그인 상세보기 - WIKI 이동

• ID찾기, PW찾기
• 로그인 시 react-cookie에 setcookie함수 사용하여 쿠키(Cookie) 생성

회원가입 상세보기 - WIKI 이동

• 다음 주소(react-daum-postcode) API 사용
• ID 중복 체크
• NickName 중복 체크
• bcrypt 사용하여 비밀번호 암호화
• 정규표현식 사용하여 사용자가 알맞는 값을 입력하게 메세지 출력

로그아웃

• 유지시간 60분 설정, 유지시간 지날 시 자동로그아웃

마이 페이지 상세보기 - WIKI 이동

• 다음 주소(react-daum-postcode) API 사용
• 회원정보 변경
• 회원 탈퇴

검색 상세보기 - WIKI 이동

• 찾는 아이스크림명 글자 1자 이상 입력 시 리스트 출력

상품 등록 상세보기 - WIKI 이동

• 관리자id로만 접근 가능
• multer 사용하여 이미지 등록
• 등록한 이미지 미리보기

상품리스트 페이지 상세보기 - WIKI 이동

• 각 제조사태그 클릭 시 해당 제조사 리스트 출력
• 로딩페이지 스켈레톤 기능
• 페이징 기능

상품 상세보기 페이지 상세보기 - WIKI 이동

• 장바구니 담기
• react-slick API 사용(커스텀이미지 슬라이드)

장바구니 페이지 상세보기 - WIKI 이동

• 전체선택할 수 있는 체크박스, 각 상품 선택할 수 있는 체크박스
• 체크박스 클릭 시 결제금액 표시
• 전체삭제, 선택삭제

공지사항 페이지 상세보기 - WIKI 이동

• 관리자 id만 글 등록, 수정, 삭제 가능
• 관리자 id를 제외한 다른 사용자는 읽기만 가능
• 페이징 기능

메인페이지

• react-slick API 사용(상품광고이미지 슬라이드)
• react-intersection-observer API 사용 (메인페이지에 원하는 스크롤값 범위 안에 들어올 시 입력한 문자값 출력)
• kakao maps API 사용(가상의 매장 위치)