서영일, 김예지, 성문식, 조유미, 박민성, 박지은이 함께한 자격증 안내 웹사이트 “스펙팜(SpecFarm)”
***“스펙팜”***은 자격증 취득을 목표로 하는 이들에게 시험 관련 정보를 간편하고 정확하게 제공하는 플랫폼으로 자격증 취득 뿐만 아니라 취득 과정 전반에 걸쳐 더 나은 접근성, 정보습득 및 동기부여를 제공합니다.
또한 취득 이후에도 자격증을 관리하고 지속적인 관심을 갖게 하며, 커뮤니티를 통해 사용자들이 얻어야 하는 정보를 다양한 API를 이용하여 제공하고, 커뮤니티를 통해 사용자들이 더 능동적으로 스펙 향상을 위한 지식 및 시험 관련 정보를 얻는 것을 목적으로 합니다.
- 화면기술: CSS, JS, React
- 서버기술: JAVA, SpringBoot, MySQL, Apache Tomcat, Node.js, Axios
- 개발도구: STS4, VSCode, Git, GitHub
- API: kakao map API, kakao login API, google login API, naver login API, 공공데이터API
https://github.com/awesomekimn/specFarm
아래 나열된 페이지의 화면 구성 전반, 화면 구현, 서버 및 데이터베이스 연결을 수행하였습니다.
모든 데이터는 mySQL을 연결하여 DB에서 ajax를 이용하여 데이터를 불러오고,
모든 페이지는 반응형 웹으로 구현하였습니다.
- 마이페이지
-
마이페이지 메인
- 좌측에는 유저의 프로필사진 및 간단한 프로필과 유저가 직접 등록한 취득 자격증의 아이콘을 “수확물”로 나타냈습니다.
- 우측 첫번째 상자에는 유저의 기본정보, 취득 자격증의 상세내역을 띄워줍니다.
- 두번째 상자에는 유저가 가장 최근에 작성한 글 1개를 게시판별로 탭을 이용하여 확인할 수 있습니다.
- 세번째 상자에는 유저가 직접 등록한 관심 자격증을 확인할 수 있습니다.
-
프로필 수정
- 메인에 있는 프로필 사진 클릭시 프로필 수정 컴포넌트를 호출합니다.
- 프로필 사진을 등록, 변경 및 삭제 가능하고, 삭제 시 기본이미지인 “농부” 사진으로 변경되어 저장됩니다.
- 닉네임은 최대 14byte까지 입력가능하고 초과 시 경고창이 표출됩니다.
- 입력한 닉네임을 타유저가 사용중일 때는 마찬가지로 중복된 닉네임임을 알려주는 경고창이 팝업됩니다.
- 변경하고자 하는 사항을 입력하고 유효성 검사를 거친 후에 정상적으로 종료시 마이페이지 메인화면으로 리렌더링됩니다.
-
유저 개인정보 수정
- 유저의 이름, 아이디는 변경 불가하고 유저가 변경불가능한 것을 한눈에 확인할 수 있도록 하였습니다.
- 핸드폰 번호를 변경하게 되면 입력한 핸드폰 번호로 전송된 인증번호를 올바르게 입력해야 변경 가능합니다.
- 이메일 및 관심분야 또한 수정/삭제 가능합니다.
- 변경사항 없이 확인 버튼을 누르게 되면 변경사항이 없다는 알림창이 뜨게 됩니다.
-
비밀번호 변경
- 현재 입력한 비밀번호가 DB에 등록되어 있는 비밀번호와 일치하는지 확인
- 새로 입력한 비밀번호가 정규식에 부합하는지 확인
- 한번 더 입력한 비밀번호가 새로 입력한 비밀번호과 일치하는지 확인
한 후에 정상적으로 변경 가능합니다.
-
수확한 자격증 수정
- 추가/삭제 가능하고 동시에 좌측 프로필의 아이콘이 변경됩니다.
- 자격증 명은 AutoComplete 태그를 이용하여 자동완성 가능하도록 하였고, 등록되어있지 않은 자격증도 직접 입력가능합니다.
- 자격증 취득일자는 8자리 숫자로 입력하도록 하였고 8자리 숫자가 입력되면 자동으로 yyyy.MM.dd형식으로 변환되도록 하였습니다.
- 변경 버튼을 누르면 자격증명은 중복확인을 거치고, 취득일자는 숫자 형식이 일치하는지 확인하고, 모든 칸이 공백이 아닐 때 정상 변경됩니다.
-
내가 쓴 글
- 물어방 및 나눔장터에서 작성한 게시글을 탭별로 확인할 수 있습니다.
- 각 탭에서는 유저가 작성한 글을 시간 역순 리스트로 조회할 수 있고, 게시글을 클릭하면 해당 게시글의 상세페이지로 렌더링 됩니다.
-
관심 자격증
- 등록되어 있는 자격증을 누르면 해당 자격증의 상세페이지로 렌더링됩니다.
- 자격증 상세페이지에서 관심 자격증을 해제하고 이전 페이지로 이동하여도 정상적으로 삭제되어 있는 것을 확인할 수 있습니다.
- 마이페이지에서도 “x”버튼을 클릭하게 되면 정상적으로 삭제됩니다.
-
회원탈퇴
- 유의사항을 유저가 확인하고 확인/동의하였음을 체크박스로 선택할 수 있도록 하였습니다.
- 미동의시 경고창이 뜨도록 하였고, 체크박스에 체크되어있을 때 다음 화면으로 이동하도록 하였습니다.
- 탈퇴 전 한번 더 현재 비밀번호를 입력하도록 하였고, 현재 등록되어 있는 비밀번호와 동일하게 입력하였을 때만 정상적으로 탈퇴 가능하도록 하였습니다.
- 정상적으로 탈퇴가 되었을 경우 세션스토리지에 저장된 정보를 삭제하여 로그아웃되면서 홈화면으로 이동하도록 하였습니다.
-
- 1:1 문의 작성
- 카테고리를 선택하고 제목 및 내용, 첨부파일 1개를 등록할 수 있습니다.
- 첨부파일 선택 시 “파일 올리기” 버튼의 텍스트가 첨부파일의 파일명으로 변경됩니다.
- 1:1 문의 리스트 조회
- 좌측 탭을 이용하여 문의 내역으로 접근 가능합니다.
- 로그인한 유저가 작성한 1:1문의 글을 시간 역순 리스트를 아코디언 형식으로 확인할 수 있습니다.
- 답변 유무에 따라 타이틀에 답변대기 또는 답변완료 뱃지를 이용하여 확인 가능합니다.
- 답변이 등록되지 않은 글만 삭제 가능합니다.
- 답변이 등록된 글은 별도 화면을 이동할 필요없이 관리자의 답변을 확인할 수 있습니다.
- 성장창고(일자리 카페, 직업훈련탐색) 메인
- 성장창고에 있는 두 탭인 일자리 카페, 직업훈련탐색을 카드형으로 배치하여 유저가 한눈에 메뉴를 확인 할 수 있도록 하였습니다.
- 직업훈련탐색 상세 페이지
- API를 이용해 불러온 직업훈련과정 및 훈련기관의 정보를 한화면에 확인할 수 있도록 배치하였습니다.
- “수강신청 하러가기” 버튼을 이용하여 해당 직업훈련과정의 HRD페이지로 이동되도록 하였습니다.
- “목록 보기” 버튼을 이용하여 해당유저가 직전에 보고 있던 화면을 리렌더링하도록 하였습니다.