🏠프로젝트 개요

마을변호사 제도의 이용 방법을 안내하고 변호사 검색을 통한 무료 법률 상담 신청, 사이버법률상담 등을 제공하는 웹 서비스입니다.

변호사 검색 시, 마을 변호사 배정 현황을 파악하기 위해 공공데이터포털 의 open API를 사용하였습니다.

개발 배경

마을변호사 제도란, 지역의 마을변호사로 위촉된 변호사가 일상에서 발생하는 마을 주민들의 법률문제를 무료로 상담해주고 필요한 법적 절차를 안내하는 서비스입니다. 기존의 마을변호사 제도 이용 방식은 다음과 같습니다.

1. 각 지역의 홈페이지에서 '우리 동네 정기 상담일’ 메뉴를 활용하여 담당 마을변호사 상담일 확인
2. 주민센터에 방문하여 법률상담카드 작성 후, 제출
3. 혹은, 해당 지역 주민센터에 직접 전화로 상담 접수

이는 각 지역 홈페이지에서 마을 변호사 관련 페이지로의 접근이 어렵고 동사무소, 주민센터를 통해 상담이 접수되므로 이용이 불편하다는 단점이 있습니다. 또한 마을변호사 제도의 홍보효과가 미미하다는 한계점을 지니고 있습니다.

따라서 마을변호사 제도 및 사용 방법을 안내하고 변호사 검색을 통한 무료 법률 상담 신청, 사이버법률상담 기능을 제공하는 웹 서비스(이하   우리 마을 변호사)를 제안하게 되었습니다.

주요 기능

• 변호사 검색
• 상담 예약 신청
• 사이버법률상담
• 마을변호사 소식

API

공공데이터포털

• 법무부_마을변호사 지역별 배정 현황
• 법무부_마을변호사 제도 홍보동영상

팀원 및 역할분담

@rlagksql219	@lye2i	@y78462
• 메인 페이지 • 상담 신청 게시판	• 사용자 로그인 • 변호사 검색 • 사이버법률상담	• 변호사 로그인 • 상담 예약 신청 페이지 • 사이버법률상담

🏠프론트엔드 기능 구현 사항

페이지 간 데이터 전송 시, HTML5 form 태그 GET 방식을 이용하여 프론트엔드를 개발하였습니다.

✨demo video

주요 기능

• 회원가입

• 사용자 로그인 & 변호사 로그인

  • 사용자 로그인 메인 페이지와 변호사 로그인 메인 페이지 별도 구성
    • 변호사 로그인 메인 페이지에 '상담 신청 게시판' 메뉴 추가

• 변호사 검색

  • Javascript를 이용하여 select box에 동적으로 옵션 추가
  • Javascript를 이용하여 테이블 동적 생성

• 상담 예약 신청

  • HTML5 상담 신청 시, 실명 사용을 위해 input 태그 readonly 속성 이용
  • Web Storage의 localStorage를 이용하여 데이터 저장

• 상담 신청 게시판

  • Javascript를 이용하여 테이블 동적 생성
  • 동적으로 생성한 table에 row 단위로 클릭 리스너가 동작하도록 jquery 이용
  • Web Storage의 localStorage를 이용하여 데이터 저장

• 사이버법률상담

  • Web Storage의 localStorage를 이용하여 데이터 저장

• 이용 안내

  • 시민법률사무소 지도

• 마을변호사 소식

  • HTML5 iframe 태그로 마을변호사 블로그 페이지 불러옴

• 자주 묻는 질문 Q&A

  • 애니메이션으로 구현

task 목록

🏠결과 화면

✨메인 페이지

✨회원가입

✨사용자 로그인

✨변호사 로그인

✨변호사 검색

✨상담 예약 신청

✨상담 신청 게시판

✨사이버법률상담 신청

✨사이버법률상담 답변

✨사이버법률상담 목록

✨이용 안내

✨시민법률사무소 지도

✨마을변호사 소식

✨자주 묻는 질문 Q&A