• Duration : 2023.06.12 ~ 2023.07.12 (31일)
  
• Team Members : 6
  
• Github Repository main : github.com/haeburney/final_uscream_vue
  
• Github Repository kiosk : github.com/haeburney/final_kiosk_vue
  
• Deploy Site : 배포사이트 업로드 미정
  
  

Stack

• Front-End
  - HTML5, CSS3, JavaScript, Jquery, Vue.js, Bootstrap, Vue-FullCalendar
  
• Back-End
  - Java, Spring Boot, Spring Data JPA
  
• DataBase
  - Oracle, SQLDeveloper
  
• Server
  - Apache Tomcat
  
• Open API
  - Kakao Map API, Kakao Login API, NHN 결제 API
  
  

Introduction

유스크림 프로젝트는 KOSTA 257기 파이널 프로젝트로 진행되었습니다.

Motivation

프로젝트 회의에서 여러 아이디어가 나왔는데, 이들이 공통적으로 가지고 있던 핵심은 “비즈니스 프로세스 관리”였습니다. 이후 두 가지 주제로 좁혀졌고, 투표 결과 “매장 & 상품 관리 프로그램”으로 결정되었습니다.

① 매출 계산 : 매출과 매출에서 원가, 인건비를 제외한 순매출을 계산하는 기능을 통해 년별, 월별, 일별, 지점별 등 다양한 측면에서 캘린더로 매출을 보기 시각적으로 확인할 수 있습니다.
② 상품(발주) 관리 : 본사는 상품을 추가하거나 삭제할 수 있으며, 지점은 필요한 상품을 신청할 수 있습니다.
③ 직원 관리 : 지점은 직원을 추가/수정/삭제 할 수 있으며 스케줄 관리를 통하여 해당 날짜에 근무 인원 수를 한 눈에 확인할 수 있습니다. 또한 근태 관리를 통하여 직원의 출퇴근 시간을 파악할 수 있습니다.
④ 메일 : 지점이나 본사 계정은 서로 메일을 주고 받을 수 있어, 소통이 용이해집니다.
⑤ 공지사항, 고객의 소리 : 본사에서 공지사항을 작성/수정/삭제할 수 있고 지점은 이를 확인 할 수 있습니다. 또한, 고객에게서 온 컴플레인이나 칭찬의 말을 본사에서 작성(전달)하여 지점에서 확인할 수 있습니다. 컴플레인의 경우, 지점은 해당 글에 댓글로 답변을 작성하는 기능을 구현하여, 지점은 컴플레인에 대한 피드백과 개선 방안을 고려하고, 필요한 조치를 취할 수 있습니다. 이를 통해 소통과 고객 서비스 향상에 기여하게 됩니다.

Project Schedule

Main
6월 12~15일 : 주제 선정, 설계
6월 16~25일 : Back 구현
6월 26일~7월 6일 : Front 구현
7월 7~11일 : 디버깅

Kiosk
6월 27일 : 설계
6월 28일 ~ 7월 4일 : Kiosk Back 구현
7월 5~8일 : Kiosk Front 구현

Team Member

• 김혜원 : github.com/haeburney
• 김희수 : github.com/Hee-Soo
• 박재연 : github.com/etoile0712
• 방현중 : github.com/nonghtt
• 원유경 : github.com/wyk160
• 양승혁 : github.com/Seung-hyuck
  
  
  

Team Member Roles

• 김혜원 : 직원 관리, 근태 관리, 인건비 계산 기능
  
• 김희수 : 계정, 지점 기능, 카카오 맵 API 구현, 추가적인 KIOSK 프로그램 기능 구현
  
• 박재연 : 공지사항, 고객의 소리 기능
  
• 방현중 : GIT 관리, 메일 시스템 구현
  
• 원유경 : 매출 관리 기능 (매출, 순매출)
  
• 양승혁 : 리더, 발주 및 상품 관리 기능, 추가적인 KIOSK 프로그램 기능 구현, 카카오 로그인 API, NHN 결제 구현
  
  
  

Features

ERD

main


kiosk

Design-Prototype

miro를 이용하여 prototype을 만들었습니다.

kiosk


전체


사이드 메뉴


매출


스토어(매장)


메일


상품


직원


공지사항


고객의 소리

API

① KAKAO Maps API
KAKAO Maps API를 이용하여 가맹점 지도로 검색하는 기능과 지점별 지도 위치를 볼 수 있는 기능을 넣었습니다.

② KAKAO Login REST API
KAKAO Login REST API를 이용하여 KIOSK 페이지에서 카카오 로그인 기능을 구현했습니다.

② NHN KCP API
NHN KCP API를 KIOSK 페이지에서 결제 기능을 구현했습니다.

The Feature I Developed

직원 등록/수정/삭제


직원 스케줄 등록


직원 스케줄 추가/수정/삭제


직원 근태관리

The Feature Team Developed

login

Development Reflections (KPT)

[Problem]
이번 프로젝트에서는 정해진 일정보다 기능을 많이 추가하여 일정 관리에 어려움을 겪었다. 이로 인해 디버깅 시간이 부족해져 오류를 처리하는데 제대로 신경쓰지 못한 실수가 발생하였다. 앞으로는 일정 관리를 더 신중하게 고려하고, 개발 단계에서 디버깅에 충분한 시간을 확보하는 것이 중요하다고 깨닫게 되었다.

[Try]
① Javascript 시간 타입 변경해주기
Javascript에서 input 태그를 통해 날짜와 시간을 받아오면

startdate : Thu Jun 01 2023 09:00:00 GMT+0900 (한국 표준시)
enddate : Fri Jun 30 2023 09:00:00 GMT+0900 (한국 표준시)

이런 식으로 불러와진다. 하지만 자바에 넘길 때에는 2023-06-04T09:00:00 이런 식으로 들어가야 한다. 그래서 input에서 받아온 값을 변경해줬다.

const dateObj = new Date(startdate)
const year = dateObj.getFullYear();
const month = String(dateObj.getMonth() + 1).padStart(2, "0");
const day = String(dateObj.getDate()).padStart(2, "0");
const hours = String(dateObj.getHours()).padStart(2, "0");
const minutes = String(dateObj.getMinutes()).padStart(2, "0");
const seconds = String(dateObj.getSeconds()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;

② Javascript Date 객체 → String으로 바꾸기
캘린더에서 이벤트를 클릭하면 이벤트 정보를 가져오게 만들었다. 시간을 쪼개야 하는데 Date Object라 불가능했다. 그래서 String으로 바꾼 다음 slice를 사용했다.

let startTime = JSON.stringify(info.event._instance.range.start)

[Keep]
① 주석을 통해 코드의 목적을 명확히 설명하여 향후 유지보수에 용이하게 만들었다. 내가 작성한 코드를 다시 정독하면서 불필요한 부분은 제거하고, 다시 살펴보았을 때 ‘왜 이렇게 작성했는지?’라는 생각이 들거나, 다른 팀원이 코드를 볼 때 헷갈릴 수 있는 부분에 주석을 적극적으로 추가하였다.

② 그리고 근태 관리 테이블을 통하여 인건비를 계산해야 했다. 언제 어디서 어떻게?를 고민하다가 @Scheduled라는 어노테이션을 사용하여 매달 1일에 전달의 인건비를 계산해주는 함수를 작성했다.

// 매달 월급 계산해주기
@Scheduled(cron = "0 0 0 1 * ?")		// 매달 1일 00:00:00에 실행
public Map myScheduledFunction() {
	Map map = new HashMap();
	MonthlypayDto mpDto = new MonthlypayDto();

	LocalDate today = LocalDate.now();
	int year = today.getYear(); 		// 해당 년도 가져오기
	int month = today.getMonthValue(); 	// 해당 월 가져오기

	if (month == 1) {
		month = 12;
		year -= 1;
	} else {
		month -=1;
	}

	boolean result = sumF(year, month, "0");
	map.put("flag", result);
	return map;
}

• Duration : 2023.04.19 ~ 2023.05.04 (약 16일)
  
• Team Members : 5
  
• Github Repository : github.com/haeburney/semiproject/tree/master
  
• Deploy Site : 배포사이트 업로드 미정
  
  

Stack

• Front-End
  - HTML5, CSS3, JavaScript, JQuery, Bootstrap
  
• Back-End
  - Java, JSTL
  
• DataBase
  - Oracle, SQLDeveloper
  
• Server
  - Apache Tomcat
  
• Open API
  - TMDB API, YouTube API
  
  
  

Introduction

조각별 프로젝트는 KOSTA 257기 세미 프로젝트로 진행되었습니다.

Motivation

COVID-19로 인해 영화관 방문자보다 집에서 영화를 감상하는 사람들의 비중이 증가했습니다. 이로 인해 작아진 영화 시장에서는 예전의 영화들이 회자되고 역주행하는 현상이 보여지고 있습니다. 조각별은 이러한 변화를 고려하여 영화 평점을 매기고 자유롭게 영화에 대해 이야기를 나눌 수 있는 사이트를 만들고자 했습니다.
영화를 보고 후기를 쓰면서 조각을 하나씩 남기고, 영화를 평가하면서 별을 남기는 자는 의미로 조각별이라는 이름을 만들었습니다. 사람마다 각기 다른 조각별을 가지고 영화에 대해 다양한 소통을 하고자 함이 조각별 프로젝트의 목표입니다.

Project Schedule

4월 19일 : 주제 정하기
4월 20일 : DB 테이블 설계, 핸들러명 정하기, 시나리오 흐름 짜기
4월 21일 : 구현 부분 나누기, DB 쿼리 작성, VO & DAO & SERVICE 만들기
4월 24~28일 : jsp, back, front 구현하기
4월 29~30일 : 디버깅
5월 1~2일 : 디버깅 및 디테일 구현
5월 3일 : 발표 준비 & 프로그램 최종 실행
5월 4일 : 발표🌟

Team Member

• 김혜원 : github.com/haeburney
• 윤해현 : github.com/hennie-yun
• 박재연 : github.com/etoile0712
• 손행원 : github.com/sonbankclerk
• 송가영 : github.com/sgyoung96
  
  
  

Team Member Roles

• 유저 : 회원 관리 + 마이페이지 + 다른 유저의 홈 (김혜원 + 박재연)
• 영화 : 영화 api 불러오기 + 별점 남기기 + 예고편 재생 (윤해현 + 손행원)
• 후기 : 한 줄 평 작성 + git 관리 (송가영)
  
  
  

Features

영화
인기순으로 보기, 평점순으로 보기, 장르별로 보기
별점 남기기, 찜하기
장르별 검색, 작품으로 검색
후기
영화 감상평 남기기, 감상평 스포일러 방지 기능
베스트 댓글 보기, 최신순으로 보기
유저
팔로잉 기능, 자신의 한 줄 조각(한 줄 소개) 남기기
마이페이지 (별점, 찜, 후기 목록 보기)

Design-Prototype

miro를 이용하여 prototype을 만들었습니다.
각각 페이지마다 필요한 핸들러도 적어주면서 설계를 진행했습니다.

전체
전체적인 페이지
흐름에 따라 화살표를 만들어주어 흐름을 알기 쉽도록 설계


영화
index 페이지 : 상단 메뉴 + 슬라이드
영화 목록 페이지 : 인기순, 평점순, 장르별로 보기 가능 & 검색 기능
영화 디테일 페이지 : 영화 정보 + 예고편 보기
한 줄평 + 찜 + 별점 남기기 + 다른 사용자의 후기평 보기


마이페이지
내 정보 수정 & 한 줄 소개
찜 & 후기 & 별점 목록은 7개씩 보여주기
+(더보기) 버튼을 누르면 해당 목록의 전체 영화 목록을 보기 가능


리뷰 작성
후기 작성 (스포일러 체크 여부)
다른 후기 보기 (스포일러가 들어가 있으면 확인 더블 체크)

API

① TMDB API
TMDB API를 이용하여 영화를 가져왔습니다.

② YouTube API
YouTube API를 이용하여 영화 예고편 영상을 가져왔습니다.

The Feature I Developed

① 회원가입 (비동기)


② 내 정보 수정 (비동기) & 한 줄 소개
한 줄 소개 추가/수정 /삭제

찜한 기록 보기 + 찜 취소 기능
별점 기록 보기 + 별점 별로 기록 보기
코멘트 기록 보기 (한 줄만 출력되게)


③ 다른 유저 페이지
팔로우 추가 + 취소
찜한 기록 보기
별점 기록 보기
코멘트 기록 보기

The Feature Team Developed

Main Page
index 페이지 입니다.
처음 페이지는 슬라이드 형식으로 대표 영화를 소개하는 구성을 보여주고 있고, 메뉴바 외의 공간을 클릭하면 “인기순”으로 영화 리스트를 보여주는 페이지로 넘어가게 됩니다.


장르별로 보기
TMBD에서 제공하는 장르별을 이용하여 장르별 검색을 구현하였습니다.


인기순, 평점순, 개봉예정작으로 보기
인기순, 평점순, 개봉예정작별로 영화 리스트를 볼 수 있으며 페이징을 구현했습니다.


영화 정보 보기
i 를 눌러 영화 정보와 예고편을 볼 수 있습니다.
그리고 조각별 사용자들이 남긴 별점을 계산하여 평균 별점을 계산하였습니다.


리뷰 작성하기
영화 디테일 페이지에서 리뷰를 작성할 수 있습니다.
스포일러가 표시된 후기를 작성할 경우에 😀같이 생긴 이모티콘 버튼을 클릭하고 작성할 수 있습니다.


리뷰 보기
다른 사람의 리뷰와스포일러 리뷰를 볼 수 있습니다.


검색하기
영화 검색을 통하여 사용자가 찾고 싶은 영화를 찾을 수 있습니다.

Development Reflections (KPT)

[Problem]
아쉬웠던 점은 CSS였다. 테마와 글씨체나 색을 정했긴 했지만 각자 맡은 부분을 각자 구현을 했는데 사람마다 스타일이 달라서 조금은 다른 느낌의 디자인이 나왔다. 그리고 z-index와 bootstrap에 대해 알게 됐다. 내가 쓴 CSS코드가 제대로 작동이 안 돼서 왜 그런가하고 찾아봤더니 z-index 순위에 밀려난 것도 있었고, 부트스트랩 때문에 밀려난 것도 있었다. 부트스트랩의 우선순위에 대해서 알게 됐고, CSS에서 z-index를 쓸 때 팀원분들과 잘 상의해서 써야 할 필요성을 느꼈다.

[Try]
디버깅 중 영화 제목으로 검색하는 기능이 있었는데 띄어쓰기가 들어갈 경우 제대로 검색이 되지 않았던 문제가 있었다. 만약 공백이 들어가 있다면 “%20”으로 치환하여 검색하는 기능을 다시 돌려봤는데 제대로 돌아갔다.

String text = request.getParameter("query");
String[] array=text.split("");
String text2="";
		
for(int i=0; i<array.length;i++) {
	if(array[i].equals(" ")) {
		text2+="%20";
	}else {
		text2+=array[i];
	}
}

[Keep]
① 매번 프로젝트를 하면서 느끼지만 설계가 가장 중요한 것 같다. 이번 프로젝트에서는 테이블명, 변수명, 핸들러명을 다 정하고 시작해서 수월하게 진행이 된 것 같다.
② 일정을 정하는데 이상적인 목표에서 80% 정도만 잡으라는 조언을 보고 딱 내가 할 수 있을 만큼의 80%로 계획을 세웠다. 여기서 조금만 더 빡센 일정이었다면 시간과 마음의 여유가 없었을 것 같다.
③ 구현한 걸 비동기로 보여주고 싶어서 Jquery를 이용했는데 익숙치 않아서 여러번 고쳐야 했었다. 하루에 몇 시간 동안 잡고 있었기 때문에 Jquery와 ajax에 대한 이해도가 올라가게 됐다.

• Duration : 2023.04 ~ 2023.06 (약 2달)
  
• Team Members : 5
  
• Github Repository : github.com/haeburney/Irang-1
  
• Deploy Site : 배포사이트 업로드 미정
  
  

Stack

• Front-End
  - HTML5, CSS3, JavaScript, JQuery, Bootstrap
  
• Back-End
  - Java, Spring Boot
  
• DataBase
  - Oracle, SQLDeveloper
  
• Server
  - Apache Tomcat
  
  

Introduction

Irang(아이랑)은 KOSTA 257기 팀원 5명이 모여서 진행하게 된 사이드 프로젝트입니다. 학부모와 어린이집 선생님 사이에서 오는 갈등을 막고 소통을 향상하기 위해 개발한 웹 사이트입니다.

Motivation

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

Goals

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

Project Schedule

5월 19~24일 : Back CRUD 구현 & Miro jsp 경로 설정
5월 25~28일 : Back 세부 기능 구현
5월 29일 6월 2일 : Front 구현
6월 3~4일 : 디버깅 & 최종 테스트

Team Member

• 김혜원 : github.com/haeburney
• 윤해현 : github.com/hennie-yun
• 이서연 : github.com/seoyeonDev
• 전준하 : github.com/reacting97
• 최예은 : github.com/YeeBoss
  
  
  

Team Member Roles

• 김혜원 : 선생님 일지 작성, 댓글 작성, 상세보기, 전체리스트 보기
  
• 윤해현 : 공지사항, 사이드 메뉴와 공통 페이지의 뼈대를 만듦
  
• 이서연 : 리더, Git 관리, 반(calss) & 선생님 백/프론트 구현
  
• 전준하 : 어린이집 원생 관리
  
• 최예은 : 학부모가 작성하는 그날의 아이 특이사항 (아이 일지) 작성, 댓글 작성, 상세보기, 아이 별 일지 전체리스트 기능 및 뷰페이지 담당
  
  
  

Features

학급(class)
반 추가/수정/삭제

선생님
선생님 학급 생성/변경 가능
선생님이 원아의 기본 정보를 추가하여 학부모에게 전달

어린이
어린이 목록 - 카드형식으로 배치
카드 뒷면에는 알러지 정보 & 일지 & 상세정보 링크 배치

알림장 기능
선생님 : 알림장 작성 가능
아이(학부모) : 알림장 확인

일정 관리
학사 일정, 행사 일정 쉽게 확인 가능 & 관리

일지
선생님 : 일지 작성 가능 (사진)
일지 리스트 검색 기능 (아이 이름으로, 특정 날짜로, 월별로 검색)
아이 : 일지 관람 가능
일지 리스트 검색 기능 (특정 날짜로, 월별로 검색)

댓글
일지에 댓글 작성/수정/삭제 가능
메신저 앱처럼 사용자는 오른쪽에, 상대방은 왼쪽에 댓글이 보이게 만듦

Design-Prototype

miro를 이용하여 prototype을 만들었습니다.

전체
전체적인 페이지


① 선생님
선생님으로 로그인할시
아이 일지 확인 가능, 체크하면 아이 일지는 사라짐
메뉴 : ①일지 관리, ②공지사항, ③아동 관리
(아이 일지 : 보호자가 아이의 특이 사항을 적어 제출하는 곳)


선생님 일지 리스트, 작성하기



② 아이
공지사항 확인 가능


아이 일지 작성/수정/삭제 가능
선생님 일지 카드 형식으로 확인 가능
카드 클릭시 디테일 페이지로 이동 & 댓글 작성 가능

The Feature I Developed

① 선생님 일지
선생님 버전
일지 작성하기

일지 수정하기

일지리스트 : 검색하기


아이 버전
일지리스트 : 검색하기

② 선생님 일지 댓글 작성
메신저 앱처럼 사용자는 오른쪽, 상대방은 왼쪽에 배치
아이 계정으로 댓글 작성/수정/삭제하기


선생님 계정으로 댓글 작성/수정/삭제하기

The Feature Team Developed

Development Reflections

JPA와 Spring을 제대로 활용하는 법을 배우게 됐고, Jquery를 쓰면서 비동기에 대한 이해도가 상승하게 됐다. 오류를 경험하며 의존성 주입에 대한 이해도를 높일 수 있었고, (내가 쓸 변수명, 가져올 변수명) 변수명의 일치와 데이터를 전송할 때 변수 값을 속성 이름에 어떻게 넣어야 하는지를 배웠습니다. 더불어 꼼꼼한 설계를 통해 다시 회의해야 하는 시간을 줄일 수 있었다. 팀원과의 소통의 중요성을 깨달았고 더 적극적인 자세로 의견을 제시해야 한다는 것도 배웠다.