Irang (아이랑) 사이드 프로젝트

2023_04 to 2023_06 Irang_SideProject
Irang.kr

프로젝트 소개

Irang

Irang(아이랑) 프로젝트는 학부모와 어린이집 선생님 사이에서 오는 갈등을 막고 소통을 향상하기 위해 개발한 웹 사이트입니다.

어린이집(유치원)에서는 정보 전달을 위해 다양한 프로그램을 사용합니다. 선생님은 학부모에게 아이 소식을 알리기 위해 일지에 올리는 사진을 다른 플랫폼에도 올리며 일을 두 번 해야한다. 특히 메신저 프로그램들 통해 사적인 대화와 공적인 대화가 같이 오가고 있어 채팅창이 혼잡해 중요한 공지나 부모의 연락을 놓치지 않기 위해 주의깊게 살펴야 합니다. 기존의 알림장 프로그램과 메신저의 역할을 합친 프로그램이 있으면 어떨까? 하는 생각을 이번 아이랑 프로젝트를 통해 구현해보았습니다.

Irang의 목표

1. 유치원 및 어린이집에서 사용하는 것
2. 학부모가 선생님의 개인적인 일들 (프로필 사진, 상태 메세지 등)을 보고 간섭하는 것을 막음
3. 어린이집에서 필요한 일지작성, 원아 기능들을 사용하기 편하게 구현

프로젝트 주요 특징

1. 클래스: 어린이와 선생님이 소속된 학급입니다.
2. 학급: 학급 별로 어린이, 선생님을 관리한다. 선생님이 학급을 생성할 수 있도록 하였다. 첫 실행 시 자동으로 "무소속" 클래스가 생성됩니다.
3. 선생님: 선생님의 학급 변경이 용이하게 선생님으로 로그인하면 선생님 전체 목록에서 학급 변경이 가능하도록 하였습니다. 프로젝트 특성 상 선생님이 원아의 기본 정보를 추가하여 학부모에게 전달하도록 하였습니다.
4. 어린이: 원아각각의 프로필사진을 카드형식에 넣어 보기좋게, 밑에 간단한 정보를 넣어 가독성을 높였습니다. 카드의 뒷면을 활용하여 알러지 정보와 일지,상세정보 링크를 배치하였습니다.
5. 알림장 기능: 교사들은 알림장을 작성하고 게시할 수 있으며, 학부모들은 알림장을 확인하여 중요한 정보를 쉽게 얻을 수 있습니다. 또한, 알림장에 대한 학부모들의 코멘트를 통해 상호 소통이 가능합니다.
6. 일정 관리: 어린이집의 학사 일정과 행사 일정을 쉽게 관리하고 공유할 수 있습니다. 학부모들은 일정을 확인하여 행사에 참석하거나 필요한 조치를 취할 수 있습니다.
7. 일지: 선생님은 반 아이의 일지를 작성할 수 있습니다. 여러 사진 중 일부 사진만 넣어도 등록 가능하도록 설계했고, 수정하는 과정을 비동기로 처리하여 만들었습니다. 선생님 계정에는 아이 이름으로 검색, 특정 날짜로 검색, 월별로 검색하기를 넣었고 아이 계정에는 특정 날짜로 검색, 월별로 검색하기를 넣어 각 사용자마다 원하는 결과를 빨리 찾을 수 있습니다. 또한 보호자 계정으로는 작성글들이 사진 카드로 보인다는 점에서 아이가 유치원에서 어떤 활동들을 했는지 한 눈에 볼 수 있습니다.
8. 댓글: 메신저 앱처럼 사용자가 댓글을 작성하면 오른쪽으로, 상대방은 왼쪽에 띄우는 기능을 구현함으로써 보기 편한 UI를 만들었습니다. 보호자는 선생님이 작성한 일지를 통해서 원하는 댓글을 쓰며 선생님과 원활한 소통이 가능하게 만들었습니다.

사용 언어

java, java script, jpa, spring

프로젝트 기능

랜딩 페이지	1. 로그인을 계정 선택 : 선생님 or 학생으로 선택 2. Index 페이지 sidebar : 선생님 or 학생 별로 메뉴 기능이 다름 3. Include file 로 구현 페이지 모두 index 로 return 됨
class	1. 첫 실행에 "무소속" 행이 자동으로 추가 2. "무소속" 중복 추가 방지 3. 클래스 번호로 검색 4. 클래스 전체보기
teacher	1. 선생님 회원가입 (자동으로 t가 붙음, 프로필 사진 추가, 자동 추가된 "무소속"으로 첫 회원가입) 2. 선생님 아이디 실시간 중복체크 (입력에 따라 바로 검색) 3. 선생님 전체 목록 출력 4. 선생님 계정일때 선생님 전체 목록에서 select box로 바로 학급 변경 (아이 계정에서는 변경 불가) 5. 선생님 계정 로그인, 로그아웃 (세션 이용해 로그인 정보 유지) 6. 선생님 계정 마이페이지 (프로필 사진 변경, 프로필 사진 삭제, 계정 정보 변경, 탈퇴) 7. 학급으로 선생님 검색 (해당 학급의 선생님 정보 검색) 8. 이름으로 선생님 검색 (선생님 이름으로 검색) 9. 선생님 계정에서 아이 추가 (동으로 c가 붙음, 프로필 사진 1개, 선생님이 ID,PWD,이름,반 입력하여 등록) 10. 선생님 계정에서 클래스 추가, 삭제
child	1. 아이 계정 수정 (선생님이 추가한 계정의 아이 정보 수정) 2. 아이부모가 선생님이 등록한 계정으로 정보를 추가입력 3. 모든반 아이들 전체리스트 (카드형식으로 3개씩 나열함) 4. 반별로 아이들 리스트 (반 버튼을 눌러 그 반 아이들 보여줌) 5. 아이들 이름으로 검색 (검색창에 입력한 문자가 들어간 아이들을 보여줌) 6. 아이계정 마이페이지 (로그인된 아이계정정보가 보임) 7. 아아계정정보 수정 (마이페이지에서 직접수정, 선생님이 수정해줄 수도 있음, 사진이랑 아이정보 따로 수정) 8. 아이들 카드형식리스트 출력 (앞면에 사진, 생년월일, 이름, 소속된 반명, 전화번호 뒷면에 알러지, 상세정보, 일지 링크가 보임) 9. 아이계정탈퇴(선생님이 상세정보에서 아이계정삭제) 10. 아이계정 로그인, 로그아웃(세션에 담아서 로그인 정보유지)
teacherlog + tlog_comment	1. 선생님 일지 1-1. 선생님 일지 등록 : 사진 최대 3장과 글을 작성할 수 있다. 사진을 등록하지 않은 경우 noimage로 표시된다. 1-2. 선생님 일지 수정 및 삭제 : 사진과 글 내용을 독립적으로 수정/삭제가 가능하게 했다. 수정과 삭제는 비동기로 만들었다. 1-3. 선생님 일지 리스트 : 선생님이 로그인 했을 때와 보호자가 로그인 했을 때의 뷰를 다르게 해줬다. 선생님이 로그인 했을 때는 일반 게시글 리스트와 같이 보여줬고, 보호자가 로그인 했을 때는 카드 형식으로 보여주게 했다. 1-4. 검색 : 선생님 일지 리스트에서 월별 검색, 아이 이름으로 검색을 할 수 있다. 2. 선생님 일지 댓글 2-1. 댓글 작성 : 선생님 일지 상세 페이지에서 댓글을 작성할 수 있다. 선생님이 작성한 댓글은 OO반 선생님으로, 학부모가 작성한 댓글은 아이 이름으로 댓글 작성자가 표시된다. 2-2. 댓글 수정 및 삭제 : 수정버튼을 눌러서 댓글을 수정 및 취소를 할 수 있으며 삭제는 본인이 쓴 댓글에만 삭제버튼이 뜨도록 했다. 댓글 작성, 수정, 삭제 모두 비동기로 구현하였다. 2-3. 로그인에 따른 댓글 위치 : 현재 로그인 중인 계정의 댓글은 오른쪽(노란색)으로 보이게 했고 상대방은 왼쪽에(파란색)으로 보이게 했다. (선생님으로 로그인 했다면 선생님 댓글이 오른쪽에, 보호자로 로그인했다면 보호자 댓글이 오른쪽에)
childlog + chlog_comment	1. 아이 일지 등록 : 사진 1장과 글을 작성할 수 있다. 사진을 등록하지 않은 경우 noimage로 표시됨. 2. 아이 일지 수정: 사진과 글 내용을 수정할 수 있다. 업로드한 사진을 지울 수도 있다. 3. 댓글 작성 : 상세 페이지에서 댓글을 작성할 수 있다. 선생님이 작성한 댓글은 00반선생님으로, 학부모가 작성한 댓글은 아이이름으로 댓글 작성자가 표시된다. 5. 댓글 수정 및 삭제 : 댓글은 작성자만 수정 및 삭제를 할 수 있다. 6. 일지 확인 : 상세 페이지 및 전체 리스트에서 선생님이 일지 확인 버튼을 누를 수 있고, 확인된 일지는 “확인”, 확인되지 않은 일지는 “미확인”으로 표시된다. 7. 전체 리스트 : 아이별 일지 링크를 통해 들어갈 수 있고 카드 형식으로 3개씩 나열된다. 일지 내용은 3줄부터 말줄임표로 표시된다. 8. 기간별 검색 : 전체 리스트에서 기간별 날짜 검색을 통해 원하는 기간 내 일지를 검색할 수 있다. 9. 미확인 일지 검색 : 전체 리스트에서 “미확인”으로 표시된 일지만 검색할 수 있다.
k_board	1. 전체목록 출력 : 1-1 검색기능 (글쓴이, 이벤트 날짜, 제목, 내용) 1-2 공지사항으로 등록시 제일 상단에 배치 글 작성 : 2-1 선생님 계정으로 로그인 시 글 작성 버튼 생성 2-2 작성자, 작성일 자동 기입 및 중요공지 등록기능 2-3 이미지 추가 클릭 후 이미지 3개까지 등록 가능 글 수정 및 삭제 : 3-1 작성자,작성일을 제외 한 모든 것 수정 가능 3-2 이미지 개별 수정 기능 - 수정 버튼 클릭 시 팝업 으로 새 이미지 등록 가능 삭제 버튼 클릭 시 이미지 개별 삭제 가능 3-3 글 전체삭제

팀 멤버 소개

이름	깃허브 Irang	역할	동기	소감
이서연	seoyeonDev	리더, 깃 관리, 클래스 & 선생님 백/프론트	배운 내용을 복습하고 프로젝트 경험을 쌓기 위해 참여하였다.	리더를 맡으며 깃에 대한 이해도가 올라가고, 기술적 역량이 강화되었다. 리더로서 소통과 협업 능력에 대해 고민하며 역량을 강화하는 계기가 되었다.
윤해현	hennie-yun	보드, side bar, 공통 페이지의 뼈대를 만듦		프로젝트를 진행하면서 팀원들과의 소통과 협업이 필요하고 의견을 주고받고 효과적으로 협력하여 프로젝트를 완성하는 능력이 향상된 것 같다.
김혜원	haeburney	선생님 일지	JPA와 Spring과 Jquery에 대한 기술을 이해해보고 습득해보고자 참여하게 됐다.	JPA와 Spring을 제대로 활용하는 법을 배우게 됐고, Jquery를 쓰면서 비동기에 대한 이해도가 상승하게 됐다.
전준하	reacting97	Child (아이) 관리	JPA와 Spring을 배우고나서 프로젝트를 통해 직접 구현해보면서 기술을 완벽히 습득하고 싶어서 진행하게 되었다.	JPA를 이용한 Entity를 설계하고 각 엔터티간의 연관관계를 설정하는 방법에 대해 배웠다.
최예은	yenniechoi	학부모가 작성하는 그날의 아이 특이사항 (아이 일지) 작성, 댓글 작성, 상세보기, 아이 별 일지 전체리스트 기능 및 뷰페이지 담당	JAVA Spring JPA 연습 및 활용	계획한 기능을 Spring을 통해 설계하는 방법에 대해 배웠다. 또한 기능 구현에 앞서 팀원과의 소통이 원활하게 이루어져야 프로젝트가 성공적으로 완성될 수 있음을 알게 되었다.