7년 연속 대한민국 교육브랜드 대상 정보보안 - IT 교육
4년 연속 대한민국 브랜드스타 학원교육서비스
5년 연속 올해의 브랜드대상 취업교육서비스
4년 연속 퍼스트브랜드 대상 취업교육서비스
수강문의
닫기

온라인 상담신청

코리아IT아카데미 전문 상담원이
친절하게 상담을 도와드립니다.

문의내용
희망교육지점
희망교육과정
이름
휴대폰 번호
- -

대표문의번호 02-933-5890

프로젝트

코리아IT아카데미 수강생들의 프로젝트를 소개합니다.

애견인 커뮤니티 윗독(WithDog)

작성일 2022.06.15|조회수 3830

코리아IT아카데미 프로젝트

애견인 커뮤니티 윗독(WithDog)

과정명
프론트엔드(웹) 과정
발표일
2022.06.08
담당강사
김용희 강사님
팀원 & 담당파트
김소희
김혜연
서형원
 
컨셉

전국 애견인들이 강아지와 함께 하는 일상을 공유하고, 다양한 애견 관련 정보를 얻어갈 수 있는 종합 커뮤니티

기능

※ Auth
- 파이어베이스를 활용한 로그인, 로그아웃, 회원가입, 회원정보 관리 기능
- 로그인, 회원가입 유효성 검사 기능 (ex. 비밀번호가 틀렸습니다. 올바른 형식의 이메일을 입력하세요.)
- 개인정보 수정, 본인이 쓴 게시물 모아보기 기능(MyPage)
- 도로명 주소 API를 이용한 간편한 주소 입력 기능 (회원가입, MyPage)
- 로그인/로그아웃 전후 출력 페이지 다르게 설정(INFO, Doggitter 글쓰기 등)
- 로그인/로그아웃 전후 사용 기능 다르게 설정 (아바타 버튼 클릭 시 - 로그인 전에는 로그인, 회원가입 / 로그인 후에는 마이프로필, 로그아웃)

※ Design
- 테마 컬러 설정 : primary : 오렌지 secondary : 블랙.
각 메인 테마 컬러 별 main, light, dark 색상 별도 설정으로 조화롭게 컬러 배치
- 메인 컨셉 설정 : 심플 + 친근함
- 가독성 좋은 메인화면, 각 요소를 개별 컴포넌트로 구성 (배너 + 소개 + 반려견칼럼 + 애견핫플레이스 +광고 배너)
- 모든 페이지 반응형 (PC, 태블릿, 모바일 호환)
- 네비바 반응형 (모바일 환경으로 접속시 메뉴가 리스트아이콘으로 축소됨)
- 로그인 시 네비바 아바타에 사용자 이름 출력 (로그아웃 상태에서는 랜덤 강아지 사진)
- 로그인/메인화면 재접속 시 배너 이미지 랜덤으로 출력 (총 7개의 강아지 이미지)
- 전 페이지에 스크롤 업 버튼 추가(숨겨져 있다가 화면을 일정 길이만큼 내리면 자동으로 생성됨)

※ Doggitter(CRUD)
- 아바타 + 사진 + 제목 + 내용 + 좋아요 + 댓글기능 등 SNS 기본 기능 모두 탑재
- 게시글 작성하기 : 제목, 내용, 이미지 첨부파일 입력시 리스트에 게시물 추가
- 게시글 수정, 삭제 : 본인 게시글 Edit, Delete 가능 (타인 게시글 불가)
- 좋아요 : ID당 한 개만 가능. 자동 카운트
- 코멘트 : 각 게시글별 코멘트 작성 가능. 본인 코멘트일 경우에만 삭제 가능

※ Dog MBTI(심리테스트)
- 문항, 문답, 이미지를 개별 파일에 있는 배열, 객체로 저장한 후 페이지에서 불러와서 보여주는 기능
- 각 문항별로 할당된 점수를 카운트한 후, 최종 점수에 따라 16가지의 각각 다른 결과값과 이미지 도출
- 진행 상황에 따라 바뀌는 프로그레스 바 구현
- 테스트 페이지별 썸네일, 결과 내용이 함께 나오는 카카오톡 공유하기 기능

※ INFO(지도 API)
- 회원가입 시 입력한 주소 정보를 기반으로, 내 근처에 있는 강아지 산책 가능 공원을 확인하는 기능
- 지도에 주변 산책 가능 공원이 마크됨
- 지도 옆에는 공원 이름, 정보, 위치, 전화번호가 표시된 텍스트 리스트가 있어 간편하게 정보 파악 가능
- 스크롤 시 지도 확대,축소 기능을 on/off 할 수 있는 버튼
- 회원가입 시 입력한 주소뿐만 아니라, 직접 위치정보를 입력하는 방식으로도 검색 가능
- 회원 정보 변경시 자동으로 지도 업데이트 됨

※ 기타
- 이미지, 사이트 정보 등 Meta OG 태그 들어가있어 SNS 공유시 사람들의 흥미를 끌 수 있음

특장점

- 간편한 회원가입, 로그인만으로 쉽게 SNS 활동을 할 수 있음.
- 게시글 업로드, 코멘트, 좋아요 기능으로 사람들과 소통 가능
- 사람들의 흥미를 끌 수 있는 심리테스트 페이지와 카카오톡 공유하기 기능이 구현되어 있어, 사이트 홍보 효율적으로 가능
- 클릭 한 번으로 강아지 산책 공원 정보를 한 눈에 확인할 수 있음.
- 웹뿐만 아니라 모바일에서도 가독성이 좋은 반응형 홈페이지
- 색깔, 디자인 컨셉이 잘 잡혀있는 홈페이지

사용기술 및 개발환경

- 개발환경 :  PC
개발도구 : VSC
개발언어 및 프레임워크 : HTML, CSS, javascript, REACT
API : 다음 지도 API, 다음 주소(도로명) API

빠른 수강료 조회

* 다른학과 희망 시 다른 학과를 선택하여 클릭해 주세요.

  • 지점 선택
    • 신청자
      - -
    개인정보동의

    개인정보처리방침

    코리아IT아카데미의 개인정보처리방침은 다음과 같은 내용을 담고 있습니다.
    가. 수집하는 개인정보 항목 및 수집방법
    나. 개인정보의 수집 및 이용목적
    다. 수집한 개인정보의 보유 및 이용기간
    라. 동의를 거부할 권리가 있다는 사실과 동의 거부에 따른 불이익 내용

    가.수집하는 개인정보 항목 및 수집방법
    코리아IT아카데미는 고객님의 온라인상담류(온라인상담신청, 수강료조회,내일배움카드제(계좌제)조회, 고용보험환급,재직자국비과정조회, 시간표조회, 지점별위치조회, 위탁교육문의)을 위해 개인정보를 아래와 같이 수집하고 있습니다.
    - [필수]이름, 핸드폰

    코리아IT아카데미는 다음과 같은 방법으로 개인정보를 수집합니다.
    - 홈페이지 내 수강가이드(온라인상담신청, 수강료조회,내일배움카드제(계좌제)조회, 고용보험환급, 재직자국비과정조회, 시간표조회, 지점별위치조회, 위탁교육문의)를 통해 개인정보를 수집하고 있습니다.

    나.개인정보 수집 및 이용목적
    코리아IT아카데미는 수집한 개인정보를 다음의 목적을 위해 활용합니다.
    - 과정문의에 대한 학과담당자들의 전화 및 이메일 상담

    다.수집한 개인정보의 보유 및 이용기간
    모든 검토가 완료된 후 5년간 이용자의 조회를 위하여 보관하며, 이 후 해당정보를 지체없이 파기합니다.

    라. 동의를 거부할 권리가 있다는 사실과 동의 거부에 따른 불이익 내용
    이용자는 코리아IT아카데미 홈페이지에서 수집하는 개인정보에 대해 동의를 거부할 권리가 있으며 동의 거부 시에는 회원가입 및 인터넷 수강료 조회, 온라인 상담 등의 홈페이지 서비스가 일부 제한 됩니다.
    • 입력하신 정보가 사실과 다를시에는 조회서비스를 받으실 수 없습니다.
    • 기입하신 정보는 상담 목적외에 다른 용도로 절대 사용되지 않습니다.