캡스톤 디자인 결과보고서

캡스톤디자인 번호	2022-03
캡스톤디자인 분야	Web Application
캡스톤디자인 지도교수	노기섭 교수님
캡스톤디자인 명	(국문) 스태프 프로젝트
	(영문) Staff Project
캡스톤디자인 책임자	팀 명		STP
	학 과		인공지능소프트웨어
	성 명					학 번
	휴대폰					E-mail
캡스톤디자인 세부현황	번 호	세부역할			성 명		전 공		학 번
	1	소스코드 작성
	2	제품 제작
캡스톤디자인 수행기간	2021년 3월 25일부터 2021년 6월 10일 까지(15주)
2022도 캡스톤 디자인 프로젝트를 성실히 수행하여 이에 결과보고서를 제출합니다.. 2022 . 03 . 25. 캡스톤디자인 책임자 서명 인공지능소프트웨어 전공PD 귀하

1. 요약서

캡스톤디자인 번호	03
캡스톤디자인 명	Staff Project
캡스톤디자인 책임자

○ 캡스톤디자인 목표

⚫ 대다수 개발자들은 주로 팀 프로젝트 형식의 업무를 진행함. 따라서, 팀 프로젝트 진행 시 필요한 기능들을 집합시킨 통합 플랫폼을 개발

⚫ React와 Spring FrameWork를 활용하여 프로젝트 통합 관리 플랫폼 제작

○ 캡스톤디자인 내용

⚫ 유명 협업 프로그램인 Git hub의 branch. clone. full. request 기능과 Notion의 일정 관리 기능을 포함하며 추가적으로 실시간 채팅, 파일 업로드 기능을 제공

⚫ React Library와 Spring Frame Work를 통해 Web Application 구축

○ 캡스톤디자인 개발에 따른 기대성과

⚫프로젝트를 진행하는 팀의 개발자들과 팀원들이 보다 쉽게 프로젝트를 관리, 진행할 수 있음

⚫ 상호 피드백의 시간과 비례해 개발 시간을 단축할 수 있음.

캡스톤디자인 계획서

캡스톤디자인 명 : 스태프 프로젝트(Staff Project)

캡스톤디자인 책임자 :

1. 캡스톤 디자인의 필요성

학교 및 기업에서는 개인 단위의 업무보다 팀 단위 성향의 업무의 비중이 높다. 따라서, 프로젝트를 관리하기 위해 수많은 프로그램을 이용하는 것이 현실이다. (GIT HUB, NOTION, ZOOM 등) 채팅, 일정 관리, 코드 공유가 가능한 개별 프로그램들은 시중에 존재하고 있지만, 이를 통합한 프로그램의 부재를 느꼈고, 이에 STP 팀은 본 캡스톤디자인을 진행하여 모든 팀 프로젝트를 진행하는 이들에게 편리함과 효율성을 기여하고자 본 프로젝트를 기획하게 되었다.

2. 캡스톤디자인의 목표 및 내용

가. 캡스톤디자인 디자인 목표

⚫React와 Spring 등을 이용하여 프로젝트의 소통을 원활하게 해주는 시스템 개발 ⚫채팅, 캘린더 등을 이용해 프로젝트 관리 ⚫팀원들 간 피드백을 위한 실시간 채팅 기능 구현

나. 캡스톤디자인 내용

1. 회원가입 및 로그인

2. 실시간 채팅

3. 일정 관리

4. 소스 코드 업로드

5. 이슈 페이지

3. 캡스톤디자인의 추진전략 및 체계

1. React 라이브러리를 학습.

2. React를 활용한 Front-end를 구축.

3. Spring Frame Work를 활용하여 Back-end를 구축.

4. Server와 DB 구축 및 연동.

5. 지도교수님의 피드백을 받고, 수정 및 보완을 진행.

6. 최종 테스트 진행 후 보완.

4. 캡스톤디자인의 기대효과 및 활용방안

1. 실시간 채팅 기능으로 팀 프로젝트에 즉각적인 피드백이 가능하다.

2. 팀 프로젝트를 보다 효율성있게 관리할 수 있다.

3. 프로그램의 여러 버전에서 코드 변경 사항 추적이 가능하다. 공동 작업을 수행할 때 누가 무엇을, 언제, 어디서, 파일을 저장했는지에 대한 수정 사항을 추적하기에 어려움이 있다. 따라서 Staff project를 통해 푸시된 모든 변경을 추적하여 어려움을 해결할 수 있다.

6. 작업분할 구조도(WBS, Work Breakdown Structure)

7. 소요장비 및 재료

장비 및 재료 명	규격	수량	용 도	비 고
개인용 컴퓨터 (PC)		3	작업
웹 브라우저 (Chrome)		3	정보 및 자료 검색
한컴오피스 한글 2020		3	문서 작성
Microsoft Power Point		3	PPT 제작
스마트폰		3	팀원 간 연락
IntelliJ & Visual Studio Code		3	소스 코드 개발

8. 캡스톤디자인 추진일정 계획

	세부 추진 내용		추 진 일 정 (월)
			3	4	5	6
Staff Project	1	AWS 서버 구축
	2	React & Spring를 활용한 개발
	3	로그인/회원가입/인증 등 구현
	4	DB 연동 사전 작업
	5	DB 테이블 작성
	6	DB 구조 점검 및 수정
	7	서버와의 연동 사전 준비
	8	웹 CSS 구상
	9	웹 CSS 디자인
	10	웹 CSS 적용
	11	웹 점검 및 수정
	12	DB와 서버 연동
	13	서버와 웹 연동
	14	최종 수정 및 최종 발표

9. 구매 품목

물품명 및 가격	스펙 및 부품	주소
없음
총액	0 원

캡스톤 디자인 결과보고서(結果報告書)

목  차

1. 시스템 구조 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
1.1. 시스템 아키텍쳐 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
1.2. Aws (Ec2) ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
2. 환경설정 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
2.1. React환경설정 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	14
2.2. Spring-tool-suite 설치 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	17
2.3. Lombok설치 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	18
3. 소스코드 ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	20
3.1. Front-end(React)소스코드∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	20
3.1.1. Java-scriptss∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	20
3.1.2. Css ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	62
3.2. Back-end(Spring-tool-suite) ∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	101
3.2.1. Controller∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	101
3.2.2. Dao∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	114
3.2.3. Service∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	116
3.2.4. Vo∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	120
3.2.5. Query∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙	123

1. 시스템 구조

1.1. 시스템 설계도

1. 클라이언트가 웹에 접속 요청

2. 웹에서 EC2인스턴스의 리액트에 3000포트로 접속

3. WEB서버에서 WAS서버인 스프링으로 8080포트로 접속 요청

4. WAS서버에서 DB ORACLE접속 요청은 1521포트로

5. 채팅서버와 파일서버 요청은 채팅 1213포트 파일서버는 22번포트인 SSH접속 요청하는 아키텍쳐를 구성

1.2.AWS(EC2)

채팅서버, 메인서버, 파일 서버로 구성되어 있음(현재는 OFF 상태)

2. 환경설정

환경 설정할 프로그램은 node.js, React, Spring, lombok 정도이다.

2.1.1 React 환경설정

첫번째로 할일은 구글에 nodejs를 검색 후 설치하는 것이다

오른쪽 현재 버전으로 다운을 받는다.

설치 완료 후 다음으로 VS code 에디터 설치

작업할 폴더 하나 생성

다음은 리액트 프로젝트 생성이다 Terminal 클릭후  New Terminal 클릭

Terminal에 npx-create-react-app 프로젝트명 입력

Terminal에 npm start 를 쳐보자

실행완료

2.1.2-Spring-tool-suite설치

사이트(https://spring.io/tools) 접속

사양에 맞게 설치

메인 스프링 툴 화면

2.1.3:Lombok설치
Lombok:(https://projectlombok.org/download)에서 Lombok설치

jar 더블 클릭

Specify location.. 클릭

sts.exe를 찾아 선택

Install / Update 클릭

설치 완료

lombok.jar를 프로젝트에 추가

IDE를 종료 후 재시작

프로젝트 다시 빌드

2.2 Front-end(react) 소스코드

2.2.1 Java Scripts

Chat.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 242243	import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import '../css/chat.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'; import axios from 'axios'; import MessageList from './MessageList.js'; import { faSearch } from '@fortawesome/free-solid-svg-icons'; import $ from 'jquery'; import Header from "./Header.js"; import Sidebar from './Sidebar.js'; function getchatHist(prj_no, userInfo) { axios({ method: 'post', url: 'http://localhost:8080/getChatHistory.staff', header: { 'Accept-Control-Allow-Origin': '*', 'Accept': 'application/json', }, params: { 'prj_no': prj_no } }) .then(function (response) { $("#chat-content").empty(); for (var i = 0; i < response.data.length; i++) { $("#chat-content").append("<div class='media media-meta-day'>" + response.data[i].date + "</div>"); for (var j = 0; j < response.data[i].chatList.length; j++) { if (response.data[i].chatList[j].mbr_email == userInfo.mbr_email) { $("#chat-content").append("<div class='media media-chat media-chat-reverse'>" + "<div class='media-body'>" + "<p>" + response.data[i].chatList[j].message + "</p>" + "</div>" + "</div>"); } else { $("#chat-content").append("<div class='media media-chat'>" + "<img class='avatar' src='https://img.icons8.com/color/36/000000/administrator-male.png' alt='...' />" + "<div class='media-body'>" + "<p>" + response.data[i].chatList[j].message + "</p>" + "</div>" + "</div>"); } } } $("#chat-content").append("<div class='ps-scrollbar-x-rail' style='left: 0px; bottom: 0px;'>" + "<div class='ps-scrollbar-x' tabindex='0' style='left: 0px; width: 0px;'>" + "</div>" + "</div>" + "<div class='ps-scrollbar-y-rail' style='top: 0px; height: 0px;'>" + "<div class='ps-scrollbar-y' tabindex='0' style='top: 0px; height: 2px;'>" + "</div>" + "</div>"); }) .catch(function (error) { console.log("error================>" + error); }); } function Chat(props) { const userInfo = { mbr_no: getCookie("mbr_no"), mbr_nm: getCookie("mbr_nm"), mbr_email: getCookie("mbr_email"), mbr_pw: getCookie("mbr_pw"), mbr_phone: getCookie("mbr_phone"), mbr_cont: getCookie("mbr_cont"), mbr_addr: getCookie("mbr_addr"), mbr_web: getCookie("mbr_web"), mbr_twit: getCookie("mbr_twit"), mbr_insta: getCookie("mbr_insta"), mbr_face: getCookie("mbr_face"), mbr_brd: getCookie("mbr_brd"), sys_reg_date: getCookie("sys_reg_date") } var prj_no = ''; if (getCookie("prj_no") != '' && getCookie("prj_no") != null) { prj_no = getCookie("prj_no"); } else { window.location.href = "http://localhost:3000/Main"; } getchatHist(prj_no, userInfo); setInterval(function() { getchatHist(prj_no, userInfo); }, 1000); // const sendChat const container = { overflowY: 'scroll !important', height: '400px !important', }; const scrollbar_x_rail = { left: '0px', bottom: '0px', }; const scrollbar_x = { left: '0px', width: '0px', }; const scrollbar_y_rail = { top: '0px', height: '0px', }; const scrollbar_y = { top: '0px', height: '2px', }; const chatBox = { position: 'fixed', bottom: 0, width: '80%', }; const chatTextarea = { resize: 'none', paddingRight: '80px', }; const chatsendBtn = { position: 'relative', left: '-65px', bottom: '-2px', }; const chatsendIcon = { height: '30px', width: '30px', }; return ( <div> <div> <Header userInfo={props.userInfo} /> <div> <Sidebar /> </div> </div> <div className='col-12 row'> <div className='col-2'></div> {/*왼쪽빈칸 */} <div className="col-8 page-content page-container" id="page-content"> <div className="chatSize chatSize-bordered" style={{ 'overflowY': 'scroll' }}> <div className="ps-container ps-theme-default ps-active-y" id="chat-content" style={container} > {/* <MessageList props={messages} /> */} </div> <div style={chatBox}> <div className="publisher bt-1 border-light"> <textarea // onChange={changeMessage} // value={message} className="publisher-input" id='sendMessageBox' type="text" placeholder="Write something" style={chatTextarea} /> <div onClick={ () => { axios({ method: 'GET', url: 'http://localhost:8080/sendChat.staff', params: { 'prj_no': prj_no, mbr_email: userInfo.mbr_email, message: $('#sendMessageBox').val() } }) .then(function (response) { console.log("response================>" + response); }) .catch(function (error) { console.log("error================>" + error); }) // 요청 실패시 실행코드 getchatHist(prj_no, userInfo); $('#sendMessageBox').val(''); } } > <span className="publisher-btn file-group chatsend-btn" style={chatsendBtn} > <FontAwesomeIcon icon={faPaperPlane} style={chatsendIcon} /> </span> </div> </div> </div> </div> </div> </div> </div> ); } function getCookie(name) { var nameOfCookie = name + "="; var x = 0; while (x <= document.cookie.length) { var y = (x + nameOfCookie.length); if (document.cookie.substring(x, y) == nameOfCookie) { var endOfCookie = document.cookie.indexOf(";", y); if (endOfCookie == -1) { endOfCookie = document.cookie.length; } return decodeURIComponent(document.cookie.substring(y, endOfCookie)); } x = document.cookie.indexOf(" ", x) + 1; if (x == 0) { break; } } return ""; } export default Chat;

Check.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66	import React, { useState } from "react"; import $ from 'jquery'; const Check = () => { const formData = [ { id : 3, language: "Node.js"}, { id : 4, language: "Java"}, { id : 7, language: "C#"}, { id : 5, language: "C++"}, { id : 8, language: "C"}, { id : 1, language: "Python"}, { id : 9, language: "TypeScript"}, { id : 2, language: "Ruby"}, { id : 6, language: "Swift"}, ]; var select_lang_list = [] var check_list = $('.Save_prj_lan_nm') for(var i=0; i < check_list.length; i ++) { if(check_list[i].checked) { select_lang_list.push(check_list[i].value) } } console.log(select_lang_list) const [isChecked, setIsChecked] = useState(false); const [checkedItems, setCheckedItems] = useState(new Set()); const checkHandler = ({ target }) => { setIsChecked(!isChecked); checkeditemHandler(target.parentNode, target.value, target.checked); }; const checkeditemHandler = (box, id, isChecked) => if (isChecked) { checkedItems.add(id); setCheckedItems(checkedItems); box.style.backgroundColor = ""; } else if (!isChecked && checkedItems.has(id)){ checkedItems.delete(id); setCheckedItems(checkedItems); box.style.backgroundColor = ""; } return checkedItems; }; return( <div className="contStyle"> {formData.map((item) => ( <label key = {item.id} className = "innerBox"> <input type="checkbox" name="lan_nm" className="Save_prj_lan_nm" value={item.language} onChange={(e) => checkHandler(e)} /> <div className="ml-10">{item.language}</div> </label> ))} </div> ); }; export default Check;

CodeView.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107	import React from 'react'; import '../js/CodeView.fileRead.js'; import '../css/CodeView.css'; import FileList from './FileList.js'; import { applyStyles } from '@popperjs/core'; import '../js/sidebar.event.js'; function CodeView(props){ // CodeView.defaultProps = { // contents: '' // } const codeContent = ["srcasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfassdhffdhfdhdfhdfhdhfdhdfhdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf", "asdf", "kfdg", "sdfag", "qwrqwt", "asfgg", "asdf", "qwrtt", "qethh", "sdklgjkl", "asdjgkd", "sjdfkjg", "asdgjw", "asjgjep", "ajsdigje", "ajsdigje", "ajsdigje", "ajsdigje", "ajsdigje","ajsdigjhhhh"]; const codeContents = ["asdfasdf", "hgdsfjh", "asfdhjkl", "ssjtasdf", "oiuiouo", "werhth", "cvnn", "hjhjr", "sfoijhoi", "hjqwf", "sfhrhr", "hjkd", "jyjwer", "oijhoi", "ofjre"] const render = () => { const result = []; for (let i = 0; i < codeContent.length; i++) { result.push( <tr> <td id="L1" className="blob-num js-line-number" data-line-number="1" > <span key={i}>{i+1 + " "}</span> </td> <td id="LC1" className="blob-code blob-code-inner js-file-line" > <span key={i}>{codeContent[i] + " "}</span> </td> </tr> ); } return result; }; return ( <div className="flex-contain"> <div className="box-box flex-container col-12"> <div data-target="readme-toc.content" className="Box mt-3 position-relative reset-basic-set"> <div className="Box-header py-2 pr-2 d-flex flex-shrink-0 flex-md-row flex-items-center"> <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1"> 138 lines (126 sloc) <span className="slash">|</span> <span className="file-info-divider"> 6.19 KB</span> <span className="commitUser">(나호연)</span> <span className="commitDate">2022-06-04</span> </div> </div> <div className="js-check-bidi blob-code-content"> <table className="highlight tab-size js-file-line-container" data-tab-size="8" data-paste-markdown-skip> <tbody> {render()} </tbody> </table> </div> </div> </div> <div className="box-box flex-container col-12"> <div data-target="readme-toc.content" className="Box mt-3 position-relative reset-basic-set"> <div className="Box-header py-2 pr-2 d-flex flex-shrink-0 flex-md-row flex-items-center"> <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1"> 138 lines (126 sloc) <span class="slash">|</span> <span class="file-info-divider">6.19KB</span> <span className="commitUser">(나호연)</span> <span className="commitDate">2022-06-04</span> </div> </div> <div className="js-check-bidi blob-code-content"> <table className="highlight tab-size js-file-line-container" data-tab-size="8" data-paste-markdown-skip> <tbody> {render()} </tbody> </table> </div> </div> </div> </div> ); } export default CodeView;

editProfile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 242243 244 245 246 247 248 249 250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287	import { faSearch } from '@fortawesome/free-solid-svg-icons'; import {React,useState} from 'react'; import { Link } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlus } from '@fortawesome/free-solid-svg-icons'; import { fa1 } from '@fortawesome/free-solid-svg-icons'; import { flexibleCompare } from '@fullcalendar/react'; import '../js/sidebar.event.js'; import '../css/editProfile.css'; import $ from 'jquery'; function updateProfile(e) { var updateProfileForm = document.forms[0]; updateProfileForm.elements.mbr_pw.value = getCookie("mbr_pw"); updateProfileForm.elements.mbr_no.value = getCookie("mbr_no"); updateProfileForm.elements.mbr_nm.value = $('.updateProfile_mbr_nm').val(); updateProfileForm.elements.mbr_email.value = $('.updateProfile_mbr_email').val(); updateProfileForm.elements.mbr_addr.value = $('.updateProfile_mbr_addr').val(); updateProfileForm.elements.mbr_web.value = $('.updateProfile_mbr_web').val(); updateProfileForm.elements.mbr_twit.value = $('.updateProfile_mbr_twit').val(); updateProfileForm.elements.mbr_insta.value = $ ('.updateProfile_mbr_insta').val(); updateProfileForm.elements.mbr_face.value = $('.updateProfile_mbr_face').val(); updateProfileForm.elements.mbr_phone.value = $('.updateProfile_mbr_phone').val(); updateProfileForm.elements.mbr_cont.value = $('.updateProfile_mbr_cont').val(); updateProfileForm.submit(); } function EditProfile() { const userInfo = { mbr_no: getCookie("mbr_no"), mbr_nm: getCookie("mbr_nm"), mbr_email: getCookie("mbr_email"), mbr_pw: getCookie("mbr_pw"), mbr_phone: getCookie("mbr_phone"), mbr_cont: getCookie("mbr_cont"), mbr_addr: getCookie("mbr_addr"), mbr_web: getCookie("mbr_web"), mbr_twit: getCookie("mbr_twit"), mbr_insta: getCookie("mbr_insta"), mbr_face: getCookie("mbr_face"), mbr_brd: getCookie("mbr_brd"), sys_reg_date: getCookie("sys_reg_date") } const [mbr_nm_text, set_mbr_nm_text] = useState(userInfo.mbr_nm); const [mbr_email_text, set_mbr_email_text] = useState(userInfo.mbr_email); const [mbr_addr_text, set_mbr_addr_text] = useState(userInfo.mbr_addr); const [mbr_phone_text, set_mbr_phone_text] = useState(userInfo.mbr_phone); const [mbr_web_text, set_mbr_web_text] = useState(userInfo.mbr_web); const [mbr_twit_text, set_mbr_twit_text] = useState(userInfo.mbr_twit); const [mbr_insta_text, set_mbr_insta_text] = useState(userInfo.mbr_insta); const [mbr_face_text, set_mbr_face_text] = useState(userInfo.mbr_face); const [mbr_cont_text, set_mbr_cont_text] = useState(userInfo.mbr_cont); const onChange = (e) => { if (e.target.className.indexOf('updateProfile_mbr_nm')> -1) { set_mbr_nm_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_email')> -1) { set_mbr_email_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_phone')> -1) { set_mbr_phone_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_cont')> -1) { set_mbr_cont_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_addr')> -1) { set_mbr_addr_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_web')> -1) { set_mbr_web_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_twit')> -1) { set_mbr_twit_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_insta')> -1) { set_mbr_insta_text(e.target.value); } if (e.target.className.indexOf('updateProfile_mbr_face')> -1) { set_mbr_face_text(e.target.value); } }; return( <div className="re-container"> <form id='updateProfileForm' method='post' action='http://localhost:8080/updateMbrInfo.staff'> <input type="hidden" name='mbr_no'/> <input type="hidden" name='mbr_pw'/> <input type="hidden" name='mbr_nm'/> <input type="hidden" name='mbr_email'/> <input type="hidden" name='mbr_phone'/> <input type="hidden" name='mbr_cont'/> <input type="hidden" name='mbr_addr'/> <input type="hidden" name='mbr_web'/> <input type="hidden" name='mbr_twit'/> <input type="hidden" name='mbr_insta'/> <input type="hidden" name='mbr_face'/> </form> <div className="main-body"> <div className="row"> <div className="col-lg-4"> <div className="card"> <div className="card-body"> <div className="d-flex flex-column align-items-center text-center"> <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Admin" className="rounded-circle p-1 bg-primary" width="110"></img> <div className="mt-3"> <h4>{userInfo.mbr_nm}</h4> <p className="text-secondary mb-1"></p> <p className="text-muted font-size-sm"></p> </div> </div> <hr></hr> <ul className="list-group list-group-flush"> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-globe me-2 icon-inline"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>Website</h6> <input type="text" className="form-introduce updateProfile_mbr_web" value={mbr_web_text} onChange={onChange}></input> </li> <hr></hr> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-github me-2 icon-inline"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>Github</h6> <input type="text" className="form-introduce updateProfile_mbr_twit" value={mbr_twit_text} onChange={onChange}></input> </li> <hr></hr> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-instagram me-2 icon-inline text-danger"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>Instagram</h6> <input type="text" className="form-introduce updateProfile_mbr_insta" value={mbr_insta_text} onChange={onChange}></input> </li> <hr></hr> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-facebook me-2 icon-inline text-primary"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>Facebook</h6> <input type="text" className="form-introduce updateProfile_mbr_face" value={mbr_face_text} onChange={onChange}></input> </li> <hr></hr> </ul> </div> </div> </div> </div> <div className="everyDay"> <div className="explainUsers col-12 col-sm-3"> <h1>Edit Profile</h1> <hr></hr> <div className="row editSize"> <div className="col-sm-2"> <h6 className="mb-0">Name</h6> </div> {/* <input type="text" className="form-controling width-81 updateProfile_mbr_nm" value={userInfo.mbr_nm}></input> */} <input type="text" className="form-controling width-81 updateProfile_mbr_nm" value={mbr_nm_text} onChange={onChange}></input> </div> <hr></hr> <div className="row editSize"> <div className="col-sm-2"> <h6 className="mb-0">E-mail</h6> </div> <input type="text" className="form-controling width-81 updateProfile_mbr_email" value={mbr_email_text} onChange={onChange}></input> </div> <hr></hr> <div className="row editSize"> <div className="col-sm-2"> <h6 className="mb-0">Phone</h6> </div> <input type="text" className="form-controling width-81 updateProfile_mbr_phone" value={mbr_phone_text} onChange={onChange}></input> </div> <hr></hr> <div className="row editSize"> <div className="col-sm-2"> <h6 className="mb-0">Country</h6> </div> <input type="text" className="form-controling width-81 updateProfile_mbr_cont" value={mbr_cont_text} onChange={onChange}></input> </div> <hr></hr> <div className="row editSize"> <div className="col-sm-2"> <h6 className="mb-0">Address</h6> </div> <input type="text" className="form-controling width-81 updateProfile_mbr_addr" value={mbr_addr_text} onChange={onChange}></input> </div> <hr></hr> {/* <div className="width-100"> <div className="mb-15"> <h6 className="mb-1">About me</h6> </div> <textarea type="text" className="form-size width-100"></textarea> </div> */} <div className='ptb-15'> <div className="btn btn-info editButton" onClick={updateProfile}>Update Profile</div> </div> </div> </div> </div> </div> ); } function getCookie(name) { var nameOfCookie = name + "="; var x = 0; while (x <= document.cookie.length) { var y = (x + nameOfCookie.length); if (document.cookie.substring(x, y) == nameOfCookie) { var endOfCookie = document.cookie.indexOf(";", y); if (endOfCookie == -1) { endOfCookie = document.cookie.length; } return decodeURIComponent(document.cookie.substring(y, endOfCookie)); } x = document.cookie.indexOf(" ", x) + 1; if (x == 0) { break; } } return ""; } export default EditProfile;

Create.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 242243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309	import { React, useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import '../css/create.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import axios from 'axios'; import { Link } from 'react-router-dom'; import { faSearch } from '@fortawesome/free-solid-svg-icons'; import Sidebar from './Sidebar.js'; import Header from "./Header.js"; import $ from 'jquery'; function Save(e) { var SaveForm = document.forms[0]; SaveForm.elements.prj_no.value = $('.prj_no').val(); SaveForm.elements.prj_nm.value = $('.Save_prj_nm').val(); SaveForm.elements.prj_expl.value = $('.Save_prj_expl').val(); SaveForm.elements.prj_prog.value = $('.Save_prj_prog').val(); SaveForm.elements.prj_lan_nm.value = $('.Save_prj_lan_nm').val(); SaveForm.elements.prj_start_date.value = $('.Save_prj_start_date').val(); SaveForm.elements.prj_end_date.value = $('.Save_prj_end_date').val(); var mbrNo = ''; var children = $("#addMbrBox").children().length; // for(var i = 0 ; i<children; i++) { // alert($("#addMbrBox li:nth-child("+i+")").html()); // } SaveForm.submit(); } function Create(props) { const Check = () => { const formData = [ { id: 3, language: "Node.js" }, { id: 4, language: "Java" }, { id: 7, language: "C#" }, { id: 5, language: "C++" }, { id: 8, language: "C" }, { id: 1, language: "Python" }, { id: 9, language: "TypeScript" }, { id: 2, language: "Ruby" }, { id: 6, language: "Swift" }, ]; var select_lang_list = [] var check_list = $('.Save_prj_lan_nm') for (var i = 0; i < check_list.length; i++) { if (check_list[i].checked) { select_lang_list.push(check_list[i].dataset.id) document.forms[0].elements.prj_lang.value = select_lang_list; } } const [isChecked, setIsChecked] = useState(false); const [checkedItems, setCheckedItems] = useState(new Set()); const checkHandler = ({ target }) => { setIsChecked(!isChecked); checkeditemHandler(target.parentNode, target.value, target.checked); }; const checkeditemHandler = (box, id, isChecked) => { if (isChecked) { checkedItems.add(id); setCheckedItems(checkedItems); box.style.backgroundColor = ""; } else if (!isChecked && checkedItems.has(id)) { checkedItems.delete(id); setCheckedItems(checkedItems); box.style.backgroundColor = ""; } return checkedItems; }; return ( <div className="contStyle"> {formData.map((item) => ( <label key={item.id} className="innerBox"> <input type="checkbox" name="lan_nm" className="Save_prj_lan_nm" value={item.language} data-id={item.id} onChange={(e) => checkHandler(e)} /> <div className="ml-10">{item.language}</div> </label> ))} </div> ); }; const userInfo = { mbr_no: getCookie("mbr_no"), mbr_nm: getCookie("mbr_nm"), mbr_email: getCookie("mbr_email"), mbr_pw: getCookie("mbr_pw"), mbr_phone: getCookie("mbr_phone"), mbr_cont: getCookie("mbr_cont"), mbr_addr: getCookie("mbr_addr"), mbr_web: getCookie("mbr_web"), mbr_twit: getCookie("mbr_twit"), mbr_insta: getCookie("mbr_insta"), mbr_face: getCookie("mbr_face"), mbr_brd: getCookie("mbr_brd"), sys_reg_date: getCookie("sys_reg_date") } const Create = () => { const chatTextarea = { resize: 'none', paddingRight: '80px', }; } const ProjectInfo = { prj_no: getCookie("prj_no"), prj_nm: getCookie("prj_nm"), prj_expl: getCookie("prj_expl"), prj_prog: getCookie("prj_prog"), prj_lan_nm: getCookie("prj_lan_nm"), prj_start_date: getCookie("prj_start_date"), prj_end_date: getCookie("prj_end_date"), sys_reg_date: getCookie("sys_reg_date") } const [prj_no_text, set_prj_no_text] = useState(ProjectInfo.prj_no); const [prj_nm_text, set_prj_nm_text] = useState(ProjectInfo.prj_nm); const [prj_expl_text, set_prj_expl_text] = useState(ProjectInfo.prj_expl); const [prj_prog_text, set_prj_prog_text] = useState(ProjectInfo.prj_prog); const [prj_lan_nm_text, set_prj_lan_nm_text] = useState(ProjectInfo.prj_lan_nm); const [prj_start_date_text, set_prj_start_date_text] = useState(ProjectInfo.prj_start_date); const [prj_end_date_text, set_prj_end_date_text] = useState(ProjectInfo.prj_end_date); const getUser = (e) => { axios({ method: 'post', url: 'http://localhost:8080//selectMbrNm.staff', params: { mbr_nm: e.target.value } }) .then(function (response) { $('#userSearchList').empty(); for(var i = 0 ; i < response.data.length ; i++) { $('#userSearchList').append( "<li class=userSearchListItem>"+ "<div class='createProfile' data-mbrNo="+response.data[i].mbr_no+">"+ "<img class='avatar' src='https://img.icons8.com/color/36/000000/administrator-male.png' alt='...'/>"+ "<div class='createList'>"+response.data[i].mbr_nm+"("+response.data[i].mbr_email+")"+ "</div>"+ "</div>"+ "</li>" ) } }) .catch(function (error) { console.log("error================>" + error); }); } $('#root').on("click",'.userSearchListItem', function (e) { $('#userSearchList').empty(); console.log(e.target) $("#addMbrBox").append( e.target ) }); return ( <div> <Header userInfo={props.userInfo} /> <div> <Sidebar /> </div> <div className="col-12 row mg-0 pd-15 "> <form id='SaveForm' method='post' action='http://localhost:8080/insertProjectInfo.staff'> <input type="hidden" name='mbr_no' value={userInfo.mbr_no} /> <input type="hidden" name='prj_no' /> <input type="hidden" name='prj_nm' /> <input type="hidden" name='prj_lan_nm' /> <input type="hidden" name='prj_expl' /> <input type="hidden" name='prj_prog' /> <input type="hidden" name='prj_start_date' /> <input type="hidden" name='prj_end_date' /> <input type="hidden" name='prj_lang' /> <input type="hidden" name='mbrNoList' /> </form> <div className="col-3 col-3-border proSidebar"> <div className="createUser">{userInfo.mbr_nm}({userInfo.mbr_email}) <div className="createList"> <img className="avatar" src="https://img.icons8.com/color/36/000000/administrator-male.png" alt="..." /> </div> </div> <div className="searchName">&nbsp;&nbsp; <FontAwesomeIcon icon={faSearch} />&nbsp;&nbsp; <input type="text" class="searchName" onChange={getUser} onClick={getUser} > </input> </div> <ul id='userSearchList'> </ul> <div id='addMbrBox'> </div> </div> <div className="col-7 makeProjectSec"> <div className="makeProject pd-15">&nbsp;&nbsp; <h1 className="titleProject">Project <div className="nameProject"> {/* <div className="nameProjecting"></div> */} <div className='col-12 pd-0 pb-20'> Project name </div> <input type="text" id="projectname" className='width-100 pd-15 Save_prj_nm' style={{ border: "2px solid lightgray" }}></input> <div className="nameProject"> Project period <div className="periodProject"> <input type="date" className='pd-10 calender-font Save_prj_start_date' style={{ border: "2px solid lightgray" }} />~ <input type="date" className='pd-10 calender-font Save_prj_end_date' style={{ border: "2px solid lightgray" }} /> </div> <div className="nameProject"> <div className='col-12 pd-0 psb-20'> Project progress </div> <input type="text" className="progressProject Save_prj_prog" /><span>/ 100</span> </div> <div className="nameProject"> <div className='col-12 pd-0 pb-20'> Language </div> <div className="stackProject"> {<Check />} </div> </div> <div className="nameProject pb-20"> <div className='col-12 pd-0 pb-20'> Project purpose </div> <input type="text" className="proposeProject pb-20 Save_prj_expl"></input> </div> <div> <button className="btn btn-info" onClick={Save} style={{ float: "right" }}>save</button> </div> </div> </div> </h1> </div> </div> </div> </div> ); function getCookie(name) { var nameOfCookie = name + "="; var x = 0; while (x <= document.cookie.length) { var y = (x + nameOfCookie.length); if (document.cookie.substring(x, y) == nameOfCookie) { var endOfCookie = document.cookie.indexOf(";", y); if (endOfCookie == -1) { endOfCookie = document.cookie.length; } return decodeURIComponent(document.cookie.substring(y, endOfCookie)); } x = document.cookie.indexOf(" ", x) + 1; if (x == 0) { break; } } return ""; } }; export default Create;

fileList.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 169	import {React,useState, useEffect } from 'react'; import '../css/bootstrap.min.css'; import '../css/chat.css'; import '../css/fileList.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faFile, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'; import CodeView from './CodeView.js'; import { Link } from 'react-router-dom'; import '../js/sidebar.event.js'; import Header from "./Header.js"; import Sidebar from './Sidebar.js'; import { Cookie } from "react-cookie"; function FileList(props) { let getParameter = (key) => { return new URLSearchParams(window.location.search).get(key); }; var prj_no = ''; if( getParameter("prj_no") == null) { if (getCookie("prj_no") != '' && getCookie("prj_no") != null) { prj_no = getCookie("prj_no"); } else { window.location.href = "http://localhost:3000/Main"; } } else { prj_no = getParameter("prj_no"); setCookie("prj_no", prj_no, 1); } const [readCode, setReadCode] = useState("src"); return ( <div> <div> <Header userInfo = {props.userInfo}/> <div> <Sidebar /> </div> </div> <div className="fileList-container"> <div className='col-12 row bg-e0 reset-basic-set'> </div> <ul className="list-group list-group-fileList"> {/* <li className="list-group-item d-flex justify-content-between align-items-center list-group-item-header"> <span className="badge list-group-item-commit"></span> </li> */} <li className="list-group-item d-flex justify-content-between align-items-center" onClick={()=>{setReadCode("src")}}> <span className="list-group-item-name"> <FontAwesomeIcon icon={faFile}></FontAwesomeIcon> <Link to ="CodeView/"> <span className="CodeName"> Src</span> </Link> </span> <span className="badge">4일 전</span> </li> <li className="list-group-item d-flex justify-content-between align-items-center" onClick={()=>{setReadCode("App.js")}}> <span className="list-group-item-name"> <FontAwesomeIcon icon={faFile}></FontAwesomeIcon> <Link to ="CodeView/"> <span className="CodeName"> App.js</span> </Link> </span> <span className="badge">일주일 전</span> </li> <li className="list-group-item d-flex justify-content-between align-items-center" onClick={()=>{setReadCode("momo.css")}}> <span className="list-group-item-name"> <FontAwesomeIcon icon={faFile}></FontAwesomeIcon> <Link to ="/FileList"> <span className="CodeName"> momo.css</span> </Link> </span> <span className="badge">한달 전</span> </li> <li className="list-group-item d-flex justify-content-between align-items-center" onClick={()=>{setReadCode("fileList.css")}}> <span className="list-group-item-name"> <FontAwesomeIcon icon={faFile}></FontAwesomeIcon> <Link to ="/FileList"> <span className="CodeName"> fileList.css</span> </Link> </span> <span className="badge">17일 전</span> </li> <li className="list-group-item d-flex justify-content-between align-items-center" onClick={()=>{setReadCode("calendar.js")}}> <span className="list-group-item-name"> <FontAwesomeIcon icon={faFile}></FontAwesomeIcon> <Link to ="/FileList"> <span className="CodeName"> calendar.js</span> </Link> </span> <span className="badge">두달 전</span> </li> </ul> &nbsp;&nbsp; <div className="fontawesome-size fontawesome-locate "> <div className='col-12 row'> <div className='col-6 text-right'> <input type='date' /> </div> <div className='col-6 text-right'> <input type='date' /> </div> </div> {/* <div className="dateButton fa-4x"> <FontAwesomeIcon icon={faAngleDoubleLeft}></FontAwesomeIcon> <button className="date">2022-03-14</button> <button className="date">2022-05-07</button> <button className="date">2022-07-19</button> <button className="date">2022-09-09</button> <FontAwesomeIcon icon={faAngleDoubleRight}></FontAwesomeIcon> </div> */} </div> <CodeView readCode = {readCode}/> &nbsp;&nbsp; <button className="btn btn-info change mtr-20-10" >change</button> </div> </div> ); } function getCookie(name) { var nameOfCookie = name + "="; var x = 0; while (x <= document.cookie.length) { var y = (x + nameOfCookie.length); if (document.cookie.substring(x, y) == nameOfCookie) { var endOfCookie = document.cookie.indexOf(";", y); if (endOfCookie == -1) { endOfCookie = document.cookie.length; } return decodeURIComponent(document.cookie.substring(y, endOfCookie)); } x = document.cookie.indexOf(" ", x) + 1; if (x == 0) { break; } } return ""; } function setCookie(cookie_name, value, days) { var exdate = new Date(); exdate.setDate(exdate.getDate() + days); // 설정 일수만큼 현재시간에 만료값으로 지정 var cookie_value = escape(value) + ((days == null) ? '' : '; expires=' + exdate.toUTCString()); document.cookie = cookie_name + '=' + cookie_value; } export default FileList;

Header.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 169	import { right } from "@popperjs/core"; import React, { useState } from "react"; import '../css/bootstrap.min.css' import '../css/header.css' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Link } from 'react-router-dom'; import { faGripLinesVertical } from "@fortawesome/free-solid-svg-icons"; import { faBell } from "@fortawesome/free-regular-svg-icons"; import { faWrench } from "@fortawesome/free-solid-svg-icons"; import { faWindowRestore } from "@fortawesome/free-regular-svg-icons"; import { faGear } from "@fortawesome/free-solid-svg-icons"; import { faUserGear } from "@fortawesome/free-solid-svg-icons"; import { faUsersGear } from "@fortawesome/free-solid-svg-icons"; import { createPortal } from 'react-dom'; import {faCalendar,faComment,faFile} from '@fortawesome/free-solid-svg-icons'; import $ from 'jquery'; import axios from 'axios'; function Header(props) { const logout =() => { var doc = document, domain = domain || doc.domain, path = path || '/', cookies = doc.cookie.split(';'), now = +(new Date); for (var i = cookies.length - 1; i >= 0; i--) { doc.cookie = cookies[i].split('=')[0] + '=; expires=' + now + '; domain=' + 'localhost' + '; path=' + '/'; } } const userInfo = { mbr_no: getCookie("mbr_no"), mbr_nm: getCookie("mbr_nm"), mbr_email: getCookie("mbr_email"), mbr_pw: getCookie("mbr_pw"), mbr_phone: getCookie("mbr_phone"), mbr_cont: getCookie("mbr_cont"), mbr_addr: getCookie("mbr_addr"), mbr_web: getCookie("mbr_web"), mbr_twit: getCookie("mbr_twit"), mbr_insta: getCookie("mbr_insta"), mbr_face: getCookie("mbr_face"), mbr_brd: getCookie("mbr_brd"), sys_reg_date: getCookie("sys_reg_date") } const [alarm, setAlarm] = useState("alarmNone"); const mbr_nm =''; const Portals = () => { return( createPortal(<CreateAlarm /> , document.getElementById("touchme")) ); } const CreateAlarm = () => <div className ={`alarm ${alarm}`}> </div> const changeAlarm = () =>{ console.log(alarm) if (alarm === "alarmNone"){ setAlarm("alarmBlock"); axios({ method: 'post', url: 'http://localhost:8080/getPrjAlarmList.staff', params: { prj_no: getCookie('prj_no') } }) .then(function (response) { console.log(response) $('.alarm').empty(); $('.alarm').append( "<span class='alarmContent'>Alarm-content</span><hr></hr>") for(var i = 0 ; i<response.data.length; i ++) { $('.alarm').append("<a href='/FileList?prj_no="+response.data[i].prj_no+"'><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='file' class='svg-inline--fa fa-file fa-w-12 ' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='currentColor' d='M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z'></path></svg>"+ "<span class='alarmList'>"+response.data[i].alarm_cont+"</span>"+ "<br/><br/></a>"); } }) .catch(function (error) { console.log("error================>" + error); }); }else{ setAlarm("alarmNone") } } const Header = { backgroundColor: "#0f4c81" , color: "#fff", margin: "0" } const header_title ={ margin: "0", marginLeft:"10px" } // if(window.location.href.indexOf('Main') > 0 || window.location.href.indexOf('main') > 0 || window.location.href.indexOf('/Project') > 0 ) { // $('.onClicked').css('display','none'); // } return ( <div> <div className="page-header" style={Header}> <Link to="/Main" style={{textDecoration: 'none', color:'#fff'}}> <h1 style={header_title}>Staff</h1> </Link> {/* <span >{props.userInfo.mbr_nm}</span> */} <ul className = "header-user-id"> <div className = "log"> <span>{userInfo.mbr_nm}</span>&nbsp;&nbsp;&nbsp; <div className="onClicked" onClick={changeAlarm}> <FontAwesomeIcon icon = {faBell}/> </div> <Link to = "/Login"> <li className = "logout" onClick={logout}>로그아웃</li> </Link> </div> </ul> </div> {Portals()} </div> ); } function getCookie(name) { var nameOfCookie = name + "="; var x = 0; while (x <= document.cookie.length) { var y = (x + nameOfCookie.length); if (document.cookie.substring(x, y) == nameOfCookie) { var endOfCookie = document.cookie.indexOf(";", y); if (endOfCookie == -1) { endOfCookie = document.cookie.length; } return decodeURIComponent(document.cookie.substring(y, endOfCookie)); } x = document.cookie.indexOf(" ", x) + 1; if (x == 0) { break; } } return ""; } export default Header;

Login.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64	import React from 'react'; import '../css/login.css'; import { Link } from 'react-router-dom'; import '../js/sidebar.event.js'; function login() { return ( <div className="login-body-back"> <div className="login-body"> <main className="form-signin"> <form action="/gologin.staff" method="post"> <h1 className="h3 mb-3 fw-normal">Please sign in</h1> <div className="form-floating"> <input name="mbr_email" type="id" className="form-control" id="floatingInput" placeholder="Id" /> <label for="floatingInput">Id</label> </div> <div className="form-floating"> <input name="mbr_pw" type="password" x2 className="form-control" id="floatingPassword" placeholder="Password" /> <label for="floatingPassword">Password</label> </div> <div className="checkbox mb-3"> <label> <input type="checkbox" value="remember-me" /> Remember me </label> </div> <button className="w-100 btn btn-lg btn-primary" type="submit"> Sign in </button> <Link to="Signup"> <button className="signup-button" type="href" href='./pages/signup'>Sign up </button> </Link> <p className="mt-5 mb-3 text-muted">&copy; staff 2022 </p> </form> </main> </div> </div> ); } export default login;

Main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92	import React from "react"; import Chat from "./Chat.js"; import Header from "./Header.js"; import FileList from "./FileList.js"; import Sidebar from "./Sidebar.js"; import Calendar from "./Calendar.js"; import editEvent from "./editEventCalendar.js"; import Profile from "./Profile.js"; import Create from "./Create.js"; import EditProfile from "./EditProfile" import '../js/sidebar.event.js'; import { BrowserRouter, Route } from 'react-router-dom'; function Main() { const maincontent = { marginLeft: "70px", } const userInfo = { mbr_no: getCookie("mbr_no"), mbr_nm: getCookie("mbr_nm"), mbr_email: getCookie("mbr_email"), mbr_pw: getCookie("mbr_pw"), mbr_phone: getCookie("mbr_phone"), mbr_cont: getCookie("mbr_cont"), mbr_addr: getCookie("mbr_addr"), mbr_web: getCookie("mbr_web"), mbr_twit: getCookie("mbr_twit"), mbr_insta: getCookie("mbr_insta"), mbr_face: getCookie("mbr_face"), mbr_brd: getCookie("mbr_brd"), sys_reg_date: getCookie("sys_reg_date") } if ( getCookie("mbr_no") == null || getCookie("mbr_no") == '') { window.location.href = "http://localhost:3000/Login"; } return ( <div style={{ overflowX: "hidden" }}> <Header userInfo={userInfo} /> <div style={maincontent}> <BrowserRouter> <Route exact path="/main" render={() => <Profile userInfo={userInfo} />} /> <Route exact path="/Chat" render={() => <Chat userInfo={userInfo} />} /> <Route exact path="/FileList" render={() => <FileList userInfo={userInfo} />} /> <Route exact path="/Calendar" render={() => <Calendar userInfo={userInfo} />} /> <Route exact path="/editEventCalendar" render={() => <editEvent userInfo={userInfo} />} /> <Route exact path="/Project" render={() => <Create userInfo={userInfo} />} /> <Route exact path="/EditProfile" component={EditProfile}/> </BrowserRouter> </div> </div> ); } function getCookie(name) { var nameOfCookie = name + "="; var x = 0; while (x <= document.cookie.length) { var y = (x + nameOfCookie.length); if (document.cookie.substring(x, y) == nameOfCookie) { var endOfCookie = document.cookie.indexOf(";", y); if (endOfCookie == -1) { endOfCookie = document.cookie.length; } return decodeURIComponent(document.cookie.substring(y, endOfCookie)); } x = document.cookie.indexOf(" ", x) + 1; if (x == 0) { break; } } return ""; } export default Main;

Signup.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113	import {React,useState} from 'react'; import { Link } from 'react-router-dom'; import '../css/signup.css'; import $ from 'jquery'; function Signup() { // const onChange = (e) => { // if (e.target.className.indexOf('UpdateSignUp_mbr_nm')> -1) { // set_mbr_nm_text(e.target.value); // } // if (e.target.className.indexOf('UpdateSignUp_mbr_pw')> -1) { // set_mbr_pw_text(e.target.value); // } // if (e.target.className.indexOf('UpdateSignUp_mbr_email')> -1) { // set_mbr_email_text(e.target.value); // } // }; return ( <div className="signup-body-back"> <div className="signup-body"> <main className="form-signup"> <form action="http://localhost:8080/insertMbrInfo.staff" method="post"> <h1 className="h3 mb-3 fw-normal">Sign up</h1> <div className="form-floating"> <input name="mbr_nm" type="text" className="form-control UpdateSignUp_mbr_nm" id="floatingInput" placeholder="text" /> <label for="floatingInput">Username</label> </div> <div className="form-floating"id="email"> <input name="mbr_email" type="text" className="form-control UpdateSignUp_mbr_email" id="floatingemail" placeholder="email" /> <label for="floatingInput">Email</label> </div> <div className="form-floating"> <input name="mbr_pw" type="text" className="form-control UpdateSignUp_mbr_pw" id="floatingverify id" placeholder="pw" /> <label for="floatingInput">Password</label> </div> <div className="form-floating"id="email"> <input name="mbr_brd" type="date" className="form-control UpdateSignUp_mbr_email" id="floatingemail" placeholder="email" /> <label for="floatingInput">Birthday</label> </div> <div className="form-floating"id="email"> <input name="mbr_phone" type="text" className="form-control UpdateSignUp_mbr_email" id="floatingemail" placeholder="email" /> <label for="floatingInput">Phone</label> </div> <button className="w-100 btn btn-lg btn-primary" type="submit"> Sign up </button> <Link to ="/Login"> <button className="signup-cancel-button" type="button" href=".pages/Login" >cancel </button> </Link> <p className="mt-5 mb-3 text-muted">&copy; staff 2022 </p> </form> </main> </div> </div> ); } export default Signup;

Sidebar.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85	import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import $ from 'jquery'; import { Link } from 'react-router-dom'; import 'bootstrap/dist/js/bootstrap.min.js'; import '../js/sidebar.event.js'; import '../css/sidebar.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCalendar, faComment, faFile, faList, faUser, faGear, } from '@fortawesome/free-solid-svg-icons'; import { faAndroid } from '@fortawesome/free-brands-svg-icons'; import { faUserGear } from '@fortawesome/free-solid-svg-icons'; import { faSign } from '@fortawesome/free-solid-svg-icons'; window.jQuery = window.$ = $; function Sidebar() { return ( <aside className="sidebar"> <div className="toggle"> <div className="burger js-menu-toggle" data-toggle="collapse" data-target="#main-navbar" > <span></span> </div> </div> <div className="side-inner"> <div className="nav-menu"> <ul> <li> <Link to="/FileList"> <div className="d-flex align-items-center"> <FontAwesomeIcon icon={faFile} /> &nbsp;&nbsp; <span className="menu-text">FileList</span> </div> </Link> </li> <li> <Link to="/Chat"> <div className="d-flex align-items-center"> <FontAwesomeIcon icon={faComment} /> &nbsp;&nbsp; <span className="menu-text">Chat</span> </div> </Link> </li> <li> <Link to="/Calendar"> <div className="d-flex align-items-center"> <FontAwesomeIcon icon={faCalendar} /> &nbsp;&nbsp; <span className="menu-text">Calendar</span> </div> </Link> </li> <li> </li> <li> <Link to="/Project"> <div className="d-flex align-items-center"> <FontAwesomeIcon icon={faSign} /> &nbsp;&nbsp; <span className="menu-text">Project</span> </div> </Link> </li> </ul> </div> </div> </aside> ); } export default Sidebar;

Profile.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 242243 244 245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292	import { React, useState } from 'react'; import { Link } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPlus } from '@fortawesome/free-solid-svg-icons'; import '../js/sidebar.event.js'; import '../css/profile.css'; import axios from 'axios'; import { render } from '@testing-library/react'; import Header from "./Header.js"; import $ from 'jquery'; function Profile(props) { axios({ method: 'post', url: 'http://localhost:8080/getMbrProjectList.staff', params: { mbr_no: props.userInfo.mbr_no } }) .then(function (response) { $(".reposity .reposityBox").empty(); var todayDate = new Date(); var year = todayDate.getFullYear() * 365; // 년도 var month = (todayDate.getMonth() + 1) * 30; // 월 var date = todayDate.getDate(); // 날짜 // alert(today.getFullYear() * 30) var today = year + month + date; for (var a = 0; a < response.data.length; a++) { var startDate = Number(response.data[a].prj_start_date.substring(0,4) * 365) + Number(response.data[a].prj_start_date.substring(5,7) * 30) + Number(response.data[a].prj_start_date.substring(8,10)+0) var endtDate = Number(response.data[a].prj_end_date.substring(0,4) * 365) + Number(response.data[a].prj_end_date.substring(5,7) * 30) + Number(response.data[a].prj_end_date.substring(8,10)+0) var prog = ((today - startDate) / (endtDate - startDate))*100 if(prog < 0) { prog *= -1; } $(".reposity .reposityBox").append( "<a href='/FileList?prj_no="+response.data[a].prj_no+"'>"+ "<div class='col-5 profileBox'>" + "<div class='card h-100'>" + "<div class='card-body'>" + "<h6 class='d-flex align-items-center mb-3'><i class='material-icons text-info mr-2'>"+response.data[a].prj_nm+"</i></h6>" + "<div class='progress mb-3' style='height: 5px;'>" + "<div class='progress-bar bg-primary' role='progressbar' style='width: "+response.data[a].prj_prog+"%;' aria-valuenow="+response.data[a].prj_prog+"aria-valuemin='0' aria-valuemax='100'></div>" + "</div>" + "<div class='progress mb-3' style='height: 5px;'>" + "<div class='progress-bar bg-primary' role='progressbar' style='width: "+prog+"%;' aria-valuenow="+prog+" aria-valuemin='0' aria-valuemax='100'></div>" + "</div>" + "<div class='langbox-"+a+"'></div>" + "</div>" + "</div>" + "</div>" + "</a>" ) var langBoxClass = ".langbox-"+a; for(var i = 0 ; i<response.data[a].languages.length; i++) { console.log(response.data[a].languages[i]); $(langBoxClass).append( "<div style='width: 70px; float: left;''>" + "<div class='circle'>" + "<div class='text' style='display: inline-block;'>"+response.data[a].languages[i].lan_nm+"</div>" + "</div>" + "</div>" ) } if(a + 1 == response.data.length) { $(".reposity .reposityBox").append( "<div class='col-5 profileBox'>"+ "<div class='card h-100'>"+ "<button class='card-body'>"+ "<div class='fa-5x text-center font-size-custom'>"+ "<a href='/Project'>"+ "<svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='plus' class='svg-inline--fa fa-plus fa-w-14 ' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>"+ "<path fill='currentColor' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'>"+ "</path>"+ "</svg>"+ "</a>"+ "</div>"+ "</button>"+ "</div>"+ "</div>"); } } if(response.data.length == 0) { $(".reposity .reposityBox").append( "<div class='col-5 profileBox'>"+ "<div class='card h-100'>"+ "<button class='card-body'>"+ "<div class='fa-5x text-center font-size-custom'>"+ "<a href='/Project'>"+ "<svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='plus' class='svg-inline--fa fa-plus fa-w-14 ' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>"+ "<path fill='currentColor' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'>"+ "</path>"+ "</svg>"+ "</a>"+ "</div>"+ "</button>"+ "</div>"+ "</div>"); } }) .catch(function (error) { console.log("error================>" + error); }); return( <div className="re-container"> <div className="main-body"> <div className="row"> <div className="col-lg-4"> <div className="card profileSize"> <div className="card-body profileSize"> <div className="d-flex flex-column align-items-center text-center"> <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Admin" className="rounded-circle p-1 bg-primary" width="110"></img> <div className="mt-3"> <h4>{props.userInfo.mbr_nm}</h4> <p className="text-secondary mb-1"></p> <p className="text-muted font-size-sm">{props.userInfo.mbr_addr} {props.userInfo.mbr_cont}</p> </div> </div> <hr></hr> <ul className="list-group list-group-flush"> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-globe me-2 icon-inline"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>Website</h6> <span className="text-secondary">{props.userInfo.mbr_web}</span> </li> <hr></hr> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-github me-2 icon-inline"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>Github</h6> <span className="text-secondary">{props.userInfo.mbr_twit}</span> </li> <hr></hr> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-instagram me-2 icon-inline text-danger"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>Instagram</h6> <span className="text-secondary">{props.userInfo.mbr_insta}</span> </li> <hr></hr> <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap"> <h6 className="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-facebook me-2 icon-inline text-primary"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>Facebook</h6> <span className="text-secondary">{props.userInfo.mbr_face}</span> </li> <hr></hr> </ul> </div> </div> </div> </div> <div className="every"> <div className="explainUser col-12 col-sm-3"> <div className="row"> <div className="col-sm-2"> <h6 className="mb-0">Name</h6> </div> <div className="col-sm-4 text-secondary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {props.userInfo.mbr_nm} </div> </div> <div className="row"> </div> <hr></hr> <div className="row"> <div className="col-sm-3"> <h6 className="mb-0">E-mail</h6> </div> <div className="col-sm-4 text-secondary"> {props.userInfo.mbr_email} </div> </div> <hr></hr> <div className="row"> <div className="col-sm-3"> <h6 className="mb-0">Phone</h6> </div> <div className="col-sm-4 text-secondary"> {props.userInfo.mbr_phone} </div> </div> <hr></hr> <div className="row"> <div className="col-sm-3"> <h6 className="mb-0">Country</h6> </div> <div className="col-sm-4 text-secondary"> {props.userInfo.mbr_cont} </div> </div> <hr></hr> <div className="row"> <div className="col-sm-3"> <h6 className="mb-0">Address</h6> </div> <div className="col-sm-4 text-secondary"> {props.userInfo.mbr_addr} </div> </div> <hr></hr> <Link to="/editProfile"> <a className="btn btn-info editButton" target="__blank" href="https://www.bootdey.com/snippets/view/profile-edit-data-and-skills">Edit</a> </Link> </div> <div className="reposity"> <div className='reposityBox'> </div> </div> </div> </div> </div> ); } export default Profile;

2.2.2:Css(React) 소스코드

chat.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 242243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403	.ps-container.ps-theme-default.ps-active-y { margin-bottom: 50px; } .chatSize-bordered { border: 3px solid gray; } .chatSize { border: 1px solid rgba(0,0,0,.125); border-radius: 0px; margin-bottom: 30px; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03); -webkit-transition: .5s; transition: .5s; width:1170px; height:800px } body { background-color: #f9f9fa } .card-header:first-child { border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 } .card-header { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding: 15px 20px; background-color: transparent; border-bottom: 1px solid rgba(77, 82, 89, 0.07) } .card-header .card-title { padding: 0; border: none } h4.card-title { font-size: 17px } .card-header>*:last-child { margin-right: 0 } .card-header>* { margin-left: 8px; margin-right: 8px } .btn-secondary { color: #4d5259 !important; background-color: #e4e7ea; border-color: #e4e7ea; color: #fff } .btn-xs { font-size: 11px; padding: 2px 8px; line-height: 18px } .btn-xs:hover { color: #fff !important } .card-title { font-family: Roboto, sans-serif; font-weight: 300; line-height: 1.5; margin-bottom: 0; padding: 15px 20px; border-bottom: 1px solid rgba(77, 82, 89, 0.07) } .ps-container { position: relative } .ps-container { -ms-touch-action: auto; touch-action: auto; overflow: hidden !important; -ms-overflow-style: none } .media-chat { padding-right: 64px; margin-bottom: 0 } .media { padding: 16px 12px; -webkit-transition: background-color .2s linear; transition: background-color .2s linear } .media .avatar { flex-shrink: 0 } .avatar { position: relative; display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 100%; background-color: #f5f6f7; color: #8b95a5; text-transform: uppercase } .media-chat .media-body { -webkit-box-flex: initial; flex: initial; display: table } .media-body { min-width: 0 } .media-chat .media-body p { position: relative; padding: 6px 8px; margin: 4px 0; background-color: #f5f6f7; border-radius: 3px; font-weight: 100; color: #9b9b9b } .media>* { margin: 0 8px } .media-chat .media-body p.meta { background-color: transparent !important; padding: 0; opacity: .8 } .media-meta-day { -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; margin-bottom: 0; color: #8b95a5; opacity: .8; font-weight: 400 } .media { padding: 16px 12px; -webkit-transition: background-color .2s linear; transition: background-color .2s linear } .media-meta-day::before { margin-right: 16px } .media-meta-day::before, .media-meta-day::after { content: ''; -webkit-box-flex: 1; flex: 1 1; border-top: 1px solid #ebebeb } .media-meta-day::after { content: ''; -webkit-box-flex: 1; flex: 1 1; border-top: 1px solid #ebebeb } .media-meta-day::after { margin-left: 16px } .media-chat.media-chat-reverse { padding-right: 12px; padding-left: 64px; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse } .media-chat { padding-right: 64px; margin-bottom: 0 } .media { padding: 16px 12px; -webkit-transition: background-color .2s linear; transition: background-color .2s linear } .media-chat.media-chat-reverse .media-body p { float: right; clear: right; background-color: #48b0f7; color: #fff } .media-chat .media-body p { position: relative; padding: 6px 8px; margin: 4px 0; background-color: #f5f6f7; border-radius: 3px } .border-light { border-color: #f1f2f3 !important } .bt-1 { border-top: 1px solid #ebebeb !important } .publisher { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; padding: 12px 20px; background-color: #f9fafb; width: 1245px; padding-left: 0px; } .publisher>*:first-child { margin-left: 0 } .publisher>* { margin: 0 8px } .publisher-input { -webkit-box-flex: 1; flex-grow: 1; border: 1px solid rgba(0,0,0,.125); outline: none !important; background-color: transparent } publisher-inputing { -webkit-box-flex: 1; flex-grow: 1; border: 1px solid rgba(0,0,0,.125); outline: none !important; background-color: transparent; } button, input, optgroup, select, textarea { font-family: Roboto, sans-serif; font-weight: 300; } .publisher-btn { background-color: transparent; border: none; color: #8b95a5; font-size: 16px; cursor: pointer; overflow: -moz-hidden-unscrollable; -webkit-transition: .2s linear; transition: .2s linear; } .file-group { position: relative; overflow: hidden; } .publisher-btn { background-color: transparent; border: none; color: #cac7c7; font-size: 16px; cursor: pointer; overflow: -moz-hidden-unscrollable; -webkit-transition: .2s linear; transition: .2s linear; } .file-group input[type="file"] { position: absolute; opacity: 0; z-index: -1; width: 20px; } .text-info { color: #48b0f7 !important; } /* Grid Component Basic CSS */ .row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;} .col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;} .col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;} .col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;} .col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;} .col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;} .col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;} .col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;} .col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;} .col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;} .col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;} .col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .re-container{ width: 80%; margin: 20px auto; } .mg-0{margin: 0 !important;} .pd-0{padding: 0 !important;} .pd-custom{padding: 10px 15px !important;} .ptb-15{padding: 15px 0 !important;} .pd-10{padding: 10px;} .pd-15{padding: 15px;} .pb-20{padding-bottom: 20px !important;} .font-size-custom{font-size: 3.75rem;} .mb-15{margin-bottom: 15px !important;} .width-78{width: 78% !important;} .width-100{width: 100% !important;} .row>* {width: auto !important; padding: 10px 20px;} .section-id-list {border: 1px solid #1e1e1e; padding: 5px 15px;} .bg-e0 {background: #e0e0e0;} .reset-basic-set{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; } .no-padding { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; height: 100% !important; } .disFlex { display: flex; } .chatList{ border: 2px solid gray; height: 65px; align-items: center; } .userProfile { justify-content: right; } .userProfile span { font-size: 20px; } .userName { box-sizing: border-box; } .userName span { font-size: 10px; } .chatFontSize { box-sizing: border-box; } .chatFontSize span{ font-size: 5px; }

CodeView.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156	.text-mono { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace !important; } .f6 { font-size: 12px !important; } .pr-3 { padding-right: 16px !important; } .flex-md-order-1 { order: 1 !important; } .flex-order-2 { order: 2 !important; } .flex-auto { flex: auto !important; } .mt-3 { margin-top: 23px !important; } .position-relative { position: relative !important; } .Box { /* background-color: #424242; */ border-color: #424242; border-style: solid; border-width: 1px; border-radius: 6px; } .d-flex { display: flex !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px!important; } .pr-2 { padding-right: 8px !important; } .flex-md-row { flex-direction: row !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-items-center { align-items: center !important; } .Box-header { padding: 16px; margin: -1px -1px 0; background-color: #e0e0e0; border-color: #e0e0e0; border-style: solid; border-width: 1px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .blob-num { width: 1%; min-width: 50px; padding-right: 10px; padding-left: 10px; font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .tab-size[data-tab-size="8"] { tab-size: 8; } .blob-code-inner { overflow: visible; font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; color: var(--color-fg-default); word-wrap: normal; white-space: pre; } .blob-code { position: relative; padding-right: 10px; padding-left: 10px; line-height: 20px; vertical-align: top; } .slash { padding-left: 10px; padding-right: 10px; } .row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;} .col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;} .col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;} .col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;} .col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;} .col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;} .col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;} .col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;} .col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;} .col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;} .col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;} .col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .width-78 {width: 78% !important;} .row>* {width: auto !important; padding: 10px 20px;} .section-id-list {border: 1px solid #1e1e1e; padding: 5px 15px;} .bg-e0 {background: #e0e0e0;} .reset-basic-set{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; } .flex-container{ flex-direction:row; margin-left: 5px; width:50%; padding: 0; } .flex-contain{ display:flex; width:49.5%; } .blob-code-content{ max-height:450px; overflow-y: scroll; overflow-x: scroll; } .commitDate { float: right; } .commitUser{ margin:1px; float:right; }

Create.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156	.col-3-border { justify-content: center; border: 2px solid lightgray; } .createUser{ border: 2px solid lightgray; height: 60px; align-items: center; margin: 0px; display: flex; justify-content: right; } .createProfile{ border: 2px solid lightgray; height: 50px; align-items: center; margin: 0px; display: flex; justify-content: left; width: 100%; } .row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;} .col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;} .col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;} .col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;} .col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;} .col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;} .col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;} .col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;} .col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;} .col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;} .col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;} .col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .searchName { height: 45px; width: 100%; border: 1px solid lightgray; align-items: center; margin: 0px; display: flex; justify-content: left; background-color:white; outline:none; } .makeProject { width: 1060px; height: 865px; display:flex; } .makeProjectSec { border: 2px solid lightgray; } .nameProject{ font-size:20px; padding-top:20px; } .nameProjecting{ border: 2px solid lightgray; height: 60px; align-items: center; margin: 0px; display: flex; padding-top: 20px; width:1000px; } .periodProject{ font-size:20px; padding-top:20px; } /* .stackProject{ padding-top:20px; } */ .progressProject { border: 2px solid lightgray; height: 20px; align-items: center; margin: 0px; display: inline-block; padding-top: 20px; width: 80px; margin-right: 5px; justify-content: center; padding: 15px; text-align: center; } .proposeProject{ border: 2px solid lightgray; height: 130px; align-items: center; margin: 0px; display: flex; padding-top: 20px; width:1000px; } .contStyle{ border-radius: 0.35rem; width: 80%; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); font-size: 15px !important; } .innerBox{ display: flex; text-align: center; justify-content: left; } .checkBox{ justify-content: center; } .checkbox-size{ width: 20px; height: 20px; } .pd-15{padding: 15px !important;} .mg-0{margin: 0 !important;} .ml-10{ margin-left: 10px; line-height: 1; } .calender-font{font-size: 1rem;} .proSidebar{ margin-left:200px } .aria-labeling{ float:left; position: absolute; top: 15px; right: 20px; font-size:5px; font-weight:10px; border:gray; } #userSearchList { background-color: #fff; list-style:none; padding-left: 0px; } .userSearchListItem{ background-color: #fff; height: 50px; }

editProfile.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80	.explainUsers { width:1000px; height:800px; border: 2px solid lightgray; font-size: 15px; justify-content: right; padding-top: 20px; padding-left:30px; } .everyDay { padding-left:40px; padding-top:10px; } .form-controling { display: block; width: 200%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-size { width:900px; height:240px; font-weight: 400; font-size: 1rem; line-height: 1.5; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .about-me{ padding-left: 30px; } .form-introduce { display: block; width:170px; height:100px; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* sihyun section */ .width-32{width: 32% !important;} .width-81{width: 81% !important;} .editSize{ padding-top:25px !important; padding-bottom:25px !important; }

fileList.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92	.fileList-container{ margin-left:70px; margin-top:10px; width:96%; } .list-group-item-header { background-color: #f1f1f1; } .list-group-item-header-id { font-weight: bold; } .list-group-item-header-commit { font-size: 12px; margin-left: 10px; } .badge { color: black; } .v-line { border-left: 6px solid green; height: 500px; position: absolute; left: 50%; margin-left: -3px; top: 0; } .date { width: 400px; height: 120px; margin: auto; text-align: center; font-size: 30px; } .dateButton { text-align: center; margin:auto; display:block; } .edit{ display: inline-flex; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; height: 2.25rem; font-size: 1rem; background: black; margin-left: 52rem; } .row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;} .col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;} .col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;} .col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;} .col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;} .col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;} .col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;} .col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;} .col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;} .col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;} .col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;} .col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .width-78 {width: 78% !important;} .mtr-20-10{margin: 20px 10px 0 0;} .row>* {width: auto !important; padding: 10px 20px;} .section-id-list {border: 1px solid #1e1e1e; padding: 5px 15px;} .bg-e0 {background: #e0e0e0;} .reset-basic-set{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; } .text-right{text-align: right;} .change{ float:right; }

sideBar.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240	.site-section { padding: 7rem 0; } aside { height: 100vh; min-height: 580px; } aside { font-size: 2rem; width: 70px; left: 0; z-index: 1001; position: fixed; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); background-color: #fff; -webkit-transition: 0.7s width cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.7s width cubic-bezier(0.23, 1, 0.32, 1); transition: 0.7s width cubic-bezier(0.23, 1, 0.32, 1); } .show-sidebar aside { width: 260px; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } aside .toggle { margin-right: 50px; padding-top: 15px; position: absolute; right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .show-sidebar aside .toggle .burger:before, .show-sidebar aside .toggle .burger span, .show-sidebar aside .toggle .burger:after { background: #000; } .show-sidebar aside { -webkit-box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.2); box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.2); } aside .side-inner { padding: 30px 0; height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } aside .side-inner::-webkit-scrollbar { display: none; } aside .side-inner .logo-wrap { display: block; position: relative; width: 100%; float: left; } aside .side-inner .logo-wrap .logo { width: 50px; float: left; height: 50px; background: #007bff; border-radius: 50%; position: relative; -webkit-transition: .3s margin ease; -o-transition: .3s margin ease; transition: .3s margin ease; margin: 0 auto 50px 10px; } .show-sidebar aside .side-inner .logo-wrap .logo { margin: 0 auto 50px 20px; } aside .side-inner .logo-wrap .logo span { position: absolute; color: #fff; font-size: 1.5rem; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } aside .side-inner .logo-wrap .logo-text { position: absolute; top: 10px; font-size: 20px; margin-left: 10px; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; opacity: 0; visibility: hidden; } .show-sidebar aside .side-inner .logo-wrap .logo-text { opacity: 1; visibility: visible; } aside .side-inner .search-form { padding-left: 20px; padding-right: 20px; clear: both; margin-bottom: 30px; } aside .side-inner .search-form form { position: relative; } aside .side-inner .search-form form .form-control { border-radius: 30px; border: 1px solid transparent; padding-left: 40px; } aside .side-inner .search-form form .form-control:active, aside .side-inner .search-form form .form-control:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .show-sidebar aside .side-inner .search-form form .form-control { border: 1px solid #efefef; } aside .side-inner .search-form form .wrap-icon { font-size: 1.2rem; top: 50%; position: absolute; top: 8px; left: 2px; z-index: 2; -webkit-transition: .3s left ease; -o-transition: .3s left ease; transition: .3s left ease; } .show-sidebar aside .side-inner .search-form form .wrap-icon { left: 10px; } aside .side-inner .nav-menu { margin-top: 30px; margin-bottom: 50px; clear: both; } aside .side-inner .nav-menu ul, aside .side-inner .nav-menu ul li { padding: 0; margin: 0px; list-style: none; } aside .side-inner .nav-menu ul li a { display: block; padding-left: 23px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; color: #b1b1b1; position: relative; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; } aside .side-inner .nav-menu ul li a:active, aside .side-inner .nav-menu ul li a:focus, aside .side-inner .nav-menu ul li a:hover { outline: none; } aside .side-inner .nav-menu ul li a:hover { color: #000; background: #f4f4f4; } aside .side-inner .nav-menu ul li a .wrap-icon { font-size: 1.2rem; } aside .side-inner .nav-menu ul li a .menu-text { opacity: 0; visibility: hidden; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; } .show-sidebar aside .side-inner .nav-menu ul li a .menu-text { -webkit-transition: 0s all ease; -o-transition: 0s all ease; transition: 0s all ease; opacity: 1; visibility: visible; } aside .side-inner .nav-menu ul li.active a { color: #000; } /* Burger */ .burger { width: 28px; height: 32px; cursor: pointer; position: relative; z-index: 99; float: left; } .burger:before, .burger span, .burger:after { width: 100%; height: 2px; display: block; background: #000; border-radius: 2px; position: absolute; opacity: 1; } .burger:before, .burger:after { -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1); transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1); transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1); content: ""; } .burger:before { top: 4px; } .burger span { top: 15px; } .burger:after { top: 26px; } /* Hover */ .burger:hover:before { top: 7px; } .burger:hover:after { top: 23px; } /* Click */ .burger.active span { opacity: 0; } .burger.active:before, .burger.active:after { top: 40%; } .burger.active:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/ } .burger.active:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5); /*for IE*/ } .burger:focus { outline: none; }

Profile.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199	body{ background: #f7f7ff; color: #1a202c; text-align: left; } .main-body { padding: 15px; display: flex; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 0 solid transparent; border-radius: .25rem; margin-bottom: 1.5rem; box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%); width:350px; height:800px; } .me-2 { margin-right: .5rem!important; } .carding { background-color: #fff; background-clip: border-box; border: 0 solid transparent; border-radius: .25rem; margin-bottom: 1.5rem; box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%); width:300px; height:400px; } .card-body { min-height: 1px; padding: 1rem; width:355px; } .gutters-sm { margin-right: -50px; margin-left: 60px; } .gutters-sm>.col, .gutters-sm>[class*=col-] { padding-right: 8px; padding-left: 8px; } .mb-3, .my-3 { margin-bottom: 1rem!important; } .bg-gray-300 { background-color: #e2e8f0; } .h-100 { height: 90%!important; } .shadow-none { box-shadow: none!important; } .public{ color: black; padding: 3px 10px; text-align: center; text-decoration: none; font-size: 16px; float: right; margin: 1px 1px; border-radius: 12px; } .circle { width:10px; height:10px; border-radius: 90%; background:brown; text-align: center; line-height: 8px; display:flex; } .ali_right { display: flex !important; justify-content: right !important; } .card-body2 { min-height: 1px; padding: 1rem; width:500px; height:200px; } .edit{ float:right; } .row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;} .col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;} .col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;} .col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;} .col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;} .col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;} .col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;} .col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;} .col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;} .col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;} .col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;} .col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .card-body-1 { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 0 solid transparent; border-radius: .25rem; margin-bottom: 1.5rem; box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%); width:500px; height:500px; } .form-control-1{ display: block; width: 200%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .explainUser { width:1000px; height:460px; border: 2px solid lightgray; font-size: 15px; justify-content: right; padding-top: 20px; padding-left:30px; } .editButton{ float:right; } .every { padding-left:40px; padding-top:10px; } .text{ justify-content: center; text-align: right; padding-left: 15px; } .edit_btn{ margin: top 3rem; } .reposity{ padding:40px; margin:5px; display:flex; } .profileSize{ width:400px; } .profileSize span{ width: 350px; } .profileBox{ float: left; margin: 10px; margin-left: 50px; height: 140px; }

header.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79	.page-header { position: relative; height: 48px; } .header-user-id{ position: absolute; top: 12px; left:-10rem; list-style-type: none; position:left; } .header-user-li{ float:left; margin: 0 15px 0 0; } .log{ float:right; margin-left:80rem; margin-top:-1.5rem; } .logout{ margin-right:-9rem; margin-top:0rem; float: right; color:white; font-size:14px; } .log{ display: flex; float:right; margin-left:112rem; margin-top:0rem; } /* .login{ margin-left:-3.5rem; margin-top: 1.5rem; } */ .alarm{ float:right; display:flex; width:340px; height:913px; background-color: #F5F5F5; border-radius: 20px; border: 1px solid gray; text-align: left; justify-content: center; padding:10px; } .alarmContent{ font-size: 22px; } .alarmList{ padding:4px; } .onClicked{ cursor: pointer; } .alarmBlock{ z-index: 999; display: block; } .alarmNone{ z-index: 999; display: none; } .aria-label{ float:right; border:white; justify-content: center; text-align: center; font-size:5px; font-weight:10px; }

login.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67	html, body { height: 100%; } .login-body-back { height: 100%; background-image: url("../img/loginmainimg.jpg"); } .login-body { height: 100%; display: flex; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color:rgba(0, 0, 0, 0.5); } .form-signin { background-color: #fff; border-radius: 25; width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-floating:focus-within { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .lf-button-primary-float-right{ height: 40px; } .signup-button{ margin-top:1rem; border:hidden; float:right; margin-right:1rem; }

signup.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84	html, body { height: 100%; } .signup-body-back { height: 100%; background-image: url("../img/loginmainimg.jpg"); } .signup-body { height: 100%; display: flex; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color:rgba(0, 0, 0, 0.5); } .form-signup { background-color: #fff; border-radius: 25; width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signup .checkbox { font-weight: 400; } .form-signup .form-floating:focus-within { z-index: 2; } .form-signup input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signup input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .lf-button-primary-float-right{ height: 40px; } .form-floating{ margin-top: 1rem; } .signup-cancel-button{ color: #fff; background-color: #007bff; border-color: #007bff; width: 80%; margin-top: 0.3rem; padding: 0.5rem 1rem; font-size: 1.6rem; line-height: 1.5rem; border-radius: 0.3rem; margin-left:2rem; } .w-100.btn.btn-lg.btn-primary{ margin-top:1rem; } #bir_wrap { display: table; width: 100%; float:right; } .int{ width:33%; float:left; } #mm{ width:100%; height:30px; }

2.3 Back-end(Spring-tool-suite) 소스코드

2.3.1:Controller

AlarmController.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46	package com.staff.controller.PageController; import java.lang.reflect.Array; import java.text.SimpleDateFormat; import java.util.ArrayList; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpServletRequest; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.support.RedirectAttributes; import com.staff.model.AlarmVO; import com.staff.service.AlarmService; import com.staff.service.AlarmServiceImpl; @RestController @MapperScan(basePackages = "com.staff.service") public class AlarmContller { @Autowired(required=true) AlarmServiceImpl alarmService; @RequestMapping("/getPrjAlarmlist.staff") public ArrayList<AlarmVO> getMbrAlarmtList (HttpServletRequest req, HttpServletResponse res){ ArrayList<AlarmVO> resultArr = new ArrayList<AlarmVO>(); try { String prj_no = req.getParameter("prj_no"); resultArr = alarmService.getPrjAlarmList(prj_no); } catch (Exception e) { e.printStackTrace(); } return resultArr; } }

ChatController.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202	package com.staff.controller.PageController; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStream; import java.io.OutputStreamWriter; import java.io.PrintWriter; import java.net.Socket; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.Properties; import java.util.Vector; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.support.RedirectAttributes; import com.fasterxml.jackson.core.JsonParser; import com.jcraft.jsch.Channel; import com.jcraft.jsch.ChannelSftp; import com.jcraft.jsch.JSch; import com.jcraft.jsch.Session; import com.staff.model.ChatListVo; import com.staff.model.ChatVO; import com.staff.util.ListeningThread; import com.staff.util.SFTPUtil; import com.staff.util.WritingThread; @RestController public class ChatContaller { final static String ID = "staff"; final static String IP = "13.209.20.16"; final static int SSHPORT = 22; final static String PW = "staff123"; Socket socket = null; @RequestMapping("/sendChat.staff") public String chatHistory(HttpServletRequest req, HttpServletResponse res) throws Exception { try { String ip = "13.209.20.16"; int port = 1213; String prj_no = req.getParameter("prj_no"); String mbr_email = req.getParameter("mbr_email"); String message = req.getParameter("message"); String sendMessage = prj_no + "!@##@!" + mbr_email + "!@##@!" + message; System.out.println(sendMessage); connChatServer(ip, port, sendMessage); return "success"; } catch (Exception e) { return "fali"; } } @RequestMapping("/getChatHistory.staff") public ArrayList<ChatListVo> getChatHistory(HttpServletRequest req, HttpServletResponse res) throws Exception { res.setHeader("Access-Control-Allow-Origin", "*"); // 허용대상 도메인 ArrayList<ChatListVo> result = new ArrayList<>(); Session session = null; JSch jSch = null; ArrayList<String> fileList = new ArrayList<>(); SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd"); SimpleDateFormat changeSimpleDateFormat = new SimpleDateFormat("yyyy-MM-dd"); Date chatDate; String readStr = ""; String dateStr; try { // 1. ssh 연결 설정 String prj_no = req.getParameter("prj_no"); jSch = new JSch(); session = jSch.getSession(ID, IP, SSHPORT); session.setPassword(PW); Properties properties = new Properties(); properties.put("StrictHostKeyChecking", "no"); session.setConfig(properties); // 2. ssh 연결 session.connect(); Channel channel = session.openChannel("sftp"); ChannelSftp channelSftp = (ChannelSftp) channel; channelSftp.connect(); // 3. 파일 읽기 StringBuffer stringBuffer = new StringBuffer(); String dir = "/staffChat/" + prj_no; channelSftp.cd(dir); Vector<ChannelSftp.LsEntry> files = channelSftp.ls(dir); for (ChannelSftp.LsEntry entry : files) { if (!entry.getFilename().equals(".") && !entry.getFilename().equals("..") && entry.getFilename().indexOf(".") != 0) { fileList.add(entry.getFilename()); } } Collections.sort(fileList); // 4. return 설정 if (fileList.size() > 0) { Date date = simpleDateFormat.parse(fileList.get(0)); dateStr = changeSimpleDateFormat.format(date); for (String file : fileList) { if (!dateStr.equals(file)) { date = simpleDateFormat.parse(file); dateStr = changeSimpleDateFormat.format(date); } ChatListVo chatListVo = new ChatListVo(); ArrayList<ChatVO> reListList = new ArrayList<>(); BufferedReader reader = new BufferedReader(new InputStreamReader(channelSftp.get(file))); while ((readStr = reader.readLine()) != null && !"".equals(readStr)) { String[] chatArr = readStr.split("!@##@!"); ChatVO chatVo = new ChatVO(); chatVo.setPrj_no(prj_no); chatVo.setMbr_email(chatArr[0]); chatVo.setMessage(chatArr[1]); reListList.add(chatVo); } chatListVo.setDate(dateStr); chatListVo.setChatList(reListList); result.add(chatListVo); } } return result; } catch (Exception e) { e.printStackTrace(); return null; } } public static void connChatServer(String ip, int port, String message) { Socket socket = null; PrintWriter pw = null; try { // 서버에 요청 보내기 socket = new Socket(ip, port); System.out.println(socket.getInetAddress().getHostAddress() + "에 연결됨"); // 메시지 받기 pw = new PrintWriter(socket.getOutputStream()); System.out.println(message); // 메세지 전달 pw.println(message); pw.flush(); } catch (IOException e) { System.out.println(e.getMessage()); } finally { // 소켓 닫기 (연결 끊기) try { if (socket != null) { socket.close(); } if (pw != null) { pw.close(); } } catch (IOException e) { System.out.println(e.getMessage()); } } } }

ProjectController.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97	package com.staff.controller.PageController; import java.text.SimpleDateFormat; import java.util.ArrayList; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.support.RedirectAttributes; import com.staff.model.PrjMbrVO; import com.staff.model.ProjectVO; import com.staff.service.ProjectServiceImpl; @RestController @MapperScan(basePackages = "com.staff.service") public class ProjectController { @Autowired(required=true) ProjectServiceImpl projectService; @CrossOrigin @RequestMapping("/getMbrProjectList.staff") public ArrayList<ProjectVO> getMbrProjectList (HttpServletRequest req, HttpServletResponse res){ ArrayList<ProjectVO> resultArr = new ArrayList<ProjectVO>(); try { String mbr_no = req.getParameter("mbr_no"); resultArr = projectService.getMbrProjectList(mbr_no); } catch (Exception e) { e.printStackTrace(); } return resultArr; } @RequestMapping("/updateProjectInfo.staff") public void updateProjectInfo(HttpServletRequest req, RedirectAttributes rttr, HttpServletResponse res) throws Exception { // 1, 파라미터 받아오기 String prj_no = req.getParameter("prj_no"); String prj_nm = req.getParameter("prj_nm"); String prj_expl = req.getParameter("prj_expl"); String prj_prog = req.getParameter("prj_prog"); String prj_start_date = req.getParameter("prj_start_date"); String prj_end_date = req.getParameter("prj_end_date"); SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd"); ProjectVO uptProjectVO = new ProjectVO(); uptProjectVO.setPrj_no(Integer.valueOf(prj_no)); uptProjectVO.setPrj_nm(prj_nm); uptProjectVO.setPrj_expl(prj_expl); uptProjectVO.setPrj_prog(Integer.valueOf(prj_prog)); uptProjectVO.setPrj_start_date(formatter.parse(prj_start_date)); uptProjectVO.setPrj_end_date(formatter.parse(prj_end_date)); projectService.updateProjectInfo(uptProjectVO); } @RequestMapping("/insertProjectInfo.staff") public void insertProjectInfo(HttpServletRequest req, RedirectAttributes rttr, HttpServletResponse res) throws Exception { String mbr_no = req.getParameter("mbr_no"); String prj_no = req.getParameter("prj_no"); String mbr_posi = req.getParameter("mbr_posi"); PrjMbrVO intProjectVO = new PrjMbrVO(); intProjectVO.setMbr_no(Integer.valueOf(mbr_no)); intProjectVO.setPrj_no(Integer.valueOf(prj_no)); intProjectVO.setMbr_posi(Integer.valueOf(mbr_posi)); projectService.insertProjectInfo(intProjectVO); } @RequestMapping("/deleteProjectInfo.staff") public void deleteProjectInfo(HttpServletRequest req, RedirectAttributes rttr, HttpServletResponse res) throws Exception { String mbr_no = req.getParameter("mbr_no"); String prj_no = req.getParameter("prj_no"); PrjMbrVO detProjectVO = new PrjMbrVO(); detProjectVO.setMbr_no(Integer.valueOf(mbr_no)); detProjectVO.setPrj_no(Integer.valueOf(prj_no)); projectService.deleteProjectInfo(detProjectVO); } }

UserController.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173	package com.staff.controller.PageController; import java.net.URLEncoder; import java.text.SimpleDateFormat; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CookieValue; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.support.RedirectAttributes; import org.springframework.web.servlet.view.RedirectView; import com.staff.model.UserVO; import com.staff.service.UserService; import com.staff.service.UserServiceImpl; @RestController @MapperScan(basePackages = "com.staff.service") public class UserController { @Autowired(required = true) UserServiceImpl userService; @PostMapping("/gologin.staff") public RedirectView goLogin(UserVO userVO, HttpServletRequest req, RedirectAttributes rttr, HttpServletResponse res) { res.setContentType("application/json;charset=UTF-8"); res.setCharacterEncoding("UTF-8"); try { HttpSession session = req.getSession(); UserVO loginUser = userService.goLogin(userVO); if (loginUser == null) { rttr.addFlashAttribute("msg", false); } else { URLEncoder.encode(String.valueOf(loginUser.getMbr_no()), "utf-8"); Cookie mbr_no = new Cookie("mbr_no", URLEncoder.encode(String.valueOf(loginUser.getMbr_no()), "UTF-8")); Cookie mbr_nm = new Cookie("mbr_nm", URLEncoder.encode(String.valueOf(loginUser.getMbr_nm()), "UTF-8")); Cookie mbr_email = new Cookie("mbr_email", URLEncoder.encode(String.valueOf(loginUser.getMbr_email()), "UTF-8")); Cookie mbr_pw = new Cookie("mbr_pw", URLEncoder.encode(String.valueOf(loginUser.getMbr_pw()), "UTF-8")); Cookie mbr_phone = new Cookie("mbr_phone", URLEncoder.encode(String.valueOf(loginUser.getMbr_phone()), "UTF-8")); Cookie mbr_cont = new Cookie("mbr_cont", URLEncoder.encode(String.valueOf(loginUser.getMbr_cont()), "UTF-8")); Cookie mbr_addr = new Cookie("mbr_addr", URLEncoder.encode(String.valueOf(loginUser.getMbr_addr()), "UTF-8")); Cookie mbr_web = new Cookie("mbr_web", URLEncoder.encode(String.valueOf(loginUser.getMbr_web()), "UTF-8")); Cookie mbr_twit = new Cookie("mbr_twit", URLEncoder.encode(String.valueOf(loginUser.getMbr_twit()), "UTF-8")); Cookie mbr_insta = new Cookie("mbr_insta", URLEncoder.encode(String.valueOf(loginUser.getMbr_insta()), "UTF-8")); Cookie mbr_face = new Cookie("mbr_face", URLEncoder.encode(String.valueOf(loginUser.getMbr_face()), "UTF-8")); Cookie mbr_brd = new Cookie("mbr_brd", URLEncoder.encode(String.valueOf(loginUser.getMbr_brd()), "UTF-8")); Cookie sys_reg_date = new Cookie("sys_reg_date", URLEncoder.encode(String.valueOf(loginUser.getSys_reg_date()), "UTF-8")); res.addCookie(mbr_no); res.addCookie(mbr_nm); res.addCookie(mbr_email); res.addCookie(mbr_pw); res.addCookie(mbr_phone); res.addCookie(mbr_cont); res.addCookie(mbr_addr); res.addCookie(mbr_web); res.addCookie(mbr_twit); res.addCookie(mbr_insta); res.addCookie(mbr_face); res.addCookie(mbr_brd); res.addCookie(sys_reg_date); return new RedirectView("http://localhost:3000/Main"); } } catch (Exception e) { e.printStackTrace(); } return new RedirectView("http://localhost:3000/Login"); } @RequestMapping("/updateMbrInfo.staff") public void updateMbrInfo(HttpServletRequest req, RedirectAttributes rttr, HttpServletResponse res) throws Exception { // 1, 파라미터 받아오기 String mbr_no = req.getParameter("mbr_no"); String mbr_nm = req.getParameter("mbr_nm"); String mbr_email = req.getParameter("mbr_email"); String mbr_pw = req.getParameter("mbr_pw"); String mbr_brd = req.getParameter("mbr_brd"); String mbr_phone = req.getParameter("mbr_phone"); String mbr_cont = req.getParameter("mbr_cont"); String mbr_addr = req.getParameter("mbr_addr"); String mbr_web = req.getParameter("mbr_web"); String mbr_twit = req.getParameter("mbr_twit"); String mbr_face = req.getParameter("mbr_face"); String mbr_insta = req.getParameter("mbr_insta"); SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd"); UserVO uptUserVO = new UserVO(); uptUserVO.setMbr_no(Integer.valueOf(mbr_no)); uptUserVO.setMbr_nm(mbr_nm); uptUserVO.setMbr_email(mbr_email); uptUserVO.setMbr_pw(mbr_pw); uptUserVO.setMbr_brd(formatter.parse(mbr_brd)); uptUserVO.setMbr_phone(mbr_phone); uptUserVO.setMbr_cont(mbr_cont); uptUserVO.setMbr_addr(mbr_addr); uptUserVO.setMbr_web(mbr_web); uptUserVO.setMbr_twit(mbr_twit); uptUserVO.setMbr_face(mbr_face); uptUserVO.setMbr_insta(mbr_insta); System.out.println(uptUserVO.toString()); userService.updateMbrInfo(uptUserVO); } @RequestMapping("/insertMbrInfo.staff") public void insertMbrInfo(HttpServletRequest req, RedirectAttributes rttr, HttpServletResponse res) throws Exception { String mbr_no = req.getParameter("mbr_no"); String mbr_nm = req.getParameter("mbr_nm"); String mbr_email = req.getParameter("mbr_email"); String mbr_pw = req.getParameter("mbr_pw"); String mbr_brd = req.getParameter("mbr_brd"); String mbr_phone = req.getParameter("mbr_phone"); String mbr_cont = req.getParameter("mbr_cont"); String mbr_addr = req.getParameter("mbr_addr"); String mbr_web = req.getParameter("mbr_web"); String mbr_twit = req.getParameter("mbr_twit"); String mbr_face = req.getParameter("mbr_face"); String mbr_insta = req.getParameter("mbr_insta"); SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd"); UserVO intUserVO = new UserVO(); intUserVO.setMbr_no(Integer.valueOf(mbr_no)); intUserVO.setMbr_nm(mbr_nm); intUserVO.setMbr_email(mbr_email); intUserVO.setMbr_pw(mbr_pw); intUserVO.setMbr_brd(formatter.parse(mbr_brd)); intUserVO.setMbr_phone(mbr_phone); intUserVO.setMbr_cont(mbr_cont); intUserVO.setMbr_addr(mbr_addr); intUserVO.setMbr_web(mbr_web); intUserVO.setMbr_twit(mbr_twit); intUserVO.setMbr_face(mbr_face); intUserVO.setMbr_insta(mbr_insta); userService.insertMbrInfo(intUserVO); } }

2.3.2:DAO

AlarmDAO.java
1 2 3 4 5 6 7 8 9 10 11 12	package com.staff.dao; import java.util.ArrayList; import org.apache.ibatis.annotations.Mapper; import com.staff.model.AlarmVO; @Mapper public interface AlarmDAO { public ArrayList<AlarmVO> getAlramInfo(String mbr_no); }

MemberDAO.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19	package com.staff.dao; import org.apache.ibatis.annotations.Mapper; import com.staff.model.UserVO; @Mapper public interface MemberDAO { public UserVO goLogin(UserVO userVO); public int updateMbrInfo(UserVO uptUserVO); public int insertMbrInfo(UserVO intUserVO); }

ProjectDAO.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20	package com.staff.dao; import java.util.ArrayList; import org.apache.ibatis.annotations.Mapper; import com.staff.model.PrjMbrVO; import com.staff.model.ProjectVO; @Mapper public interface ProjectDAO { public ArrayList<ProjectVO> getMbrProjectList(String mbr_no); public int updateProjectInfo(ProjectVO uptProjectVO); public int insertProjectInfo(PrjMbrVO intProjectVO); public int deleteProjectInfo(PrjMbrVO detProjectVO); }

2.3.3:Service

AlarmService.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	package com.staff.service; import java.util.ArrayList; import org.springframework.stereotype.Service; import com.staff.dao.AlarmDAO; import com.staff.model.AlarmVO; public interface AlarmService { public ArrayList<AlarmVO> getPrjAlarmList(String prj_no); }

AlarmServicempl.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22	package com.staff.service; import java.util.ArrayList; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.staff.dao.AlarmDAO; import com.staff.model.AlarmVO; @Service public class AlarmServiceImpl implements AlarmService{ @Autowired AlarmDAO AlarmDAO; @Override public ArrayList<AlarmVO> getPrjAlarmList(String prj_no) { return AlarmDAO.getAlramInfo(prj_no); } }

ProjectService.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	package com.staff.service; import java.util.ArrayList; import org.springframework.stereotype.Service; import com.staff.model.PrjMbrVO; import com.staff.model.ProjectVO; public interface ProjectSerivce { public ArrayList<ProjectVO> getMbrProjectList(String mbr_no); public int updateProjectInfo(ProjectVO uptProjectVO); public int insertProjectInfo(PrjMbrVO intProjectVO); public int deleteProjectInfo(PrjMbrVO detProjectVO); }

ProjectServicempl.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37	package com.staff.service; import java.util.ArrayList; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.staff.dao.ProjectDAO; import com.staff.model.PrjMbrVO; import com.staff.model.ProjectVO; @Service public class ProjectServiceImpl implements ProjectSerivce{ @Autowired ProjectDAO projectDAO; @Override public ArrayList<ProjectVO> getMbrProjectList(String mbr_no) { return projectDAO.getMbrProjectList(mbr_no); } @Override public int updateProjectInfo(ProjectVO uptProjectVO) { return projectDAO.updateProjectInfo(uptProjectVO); } @Override public int insertProjectInfo(PrjMbrVO intProjectVO) { return projectDAO.insertProjectInfo(intProjectVO); } @Override public int deleteProjectInfo(PrjMbrVO detProjectVO) { return projectDAO.deleteProjectInfo(detProjectVO); } }

UserService.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	package com.staff.service; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.mybatis.spring.annotation.MapperScan; import org.springframework.stereotype.Service; import com.staff.model.UserVO; public interface UserService { public UserVO goLogin(UserVO userVO); public void logout(HttpSession session); public int updateMbrInfo(UserVO uptUserVO); public int insertMbrInfo(UserVO intUserVO); }

UserServicempl.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36	package com.staff.service; import javax.servlet.http.HttpSession; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.staff.dao.MemberDAO; import com.staff.model.UserVO; @Service @MapperScan(basePackages = "com.staff.dao") public class UserServiceImpl implements UserService{ @Autowired MemberDAO memberDAO; @Override public UserVO goLogin(UserVO userVO) { UserVO loginUser = memberDAO.goLogin(userVO); return loginUser; } @Override public void logout(HttpSession session) { session.invalidate(); } @Override public int updateMbrInfo(UserVO uptUserVO) { return memberDAO.updateMbrInfo(uptUserVO); } @Override public int insertMbrInfo(UserVO intUserVO) { return memberDAO.insertMbrInfo(intUserVO); } }

2.34:Vo

AlarmVO.java
1 2 3 4 5 6 7 8 9 10 11 12	package com.staff.model; import java.util.Date; import lombok.Data; @Data public class AlarmVO { private int prj_no; private int alarm_no; private String alarm_cont; private Date sys_reg_date; }

ChatVO.java
1 2 3 4 5 6 7 8	package com.staff.model; import lombok.Data; @Data public class ChatVO { private String prj_no; private String mbr_email; private String message; }

ChatListVO.java
1 2 3 4 5 6 7 8 9 10 11 12 13	package com.staff.model; import java.util.ArrayList; import java.util.List; import lombok.Data; @Data public class ChatListVo { private String date; private ArrayList<ChatVO> chatList; }

ProjectVO.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30	package com.staff.model; import java.util.Date; import lombok.Data; @Data public class ProjectVO { private int prj_no; private int prj_prog; private String prj_nm; private String prj_expl; private Date prj_start_date; private Date prj_end_date; private Date sys_reg_date; // PRJ_FILE_BASE private String file_url; private Date file_sys_reg_date; // PRJ_CHAT_BASE private String chat_url; private Date chat_sys_reg_date; }

UserVO.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27	package com.staff.model; import java.util.Date; import lombok.Data; import lombok.Getter; import lombok.Setter; @Data public class UserVO { private int mbr_no; private String mbr_nm; private String mbr_email; private String mbr_pw; private String mbr_phone; private String mbr_cont; private String mbr_addr; private String mbr_web; private String mbr_twit; private String mbr_insta; private String mbr_face; private Date mbr_brd; private Date sys_reg_date; }

2.3.5:Query

Alarm.xml
1 2 3 4 5 6 7 8 9 10	<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.staff.dao.AlarmDAO"> <select id="getAlramInfo" parameterType="String" resultType="com.staff.model.AlarmVO"> SELECT ALARM_NO, PRJ_NO, ALARM_CONT, SYS_REG_DATE FROM PRJ_ALARM_BASE WHERE PRJ_NO = #{prj_no} </select> </mapper>

Member.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47	<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.staff.dao.MemberDAO"> <select id="goLogin" parameterType="com.staff.model.UserVO" resultType="com.staff.model.UserVO"> SELECT mbr_no, mbr_nm, mbr_email, mbr_pw, mbr_phone, mbr_cont, mbr_addr, mbr_web, mbr_twit, mbr_insta, mbr_face, mbr_brd, sys_reg_date FROM dba_staff.MBR_BASE WHERE MBR_EMAIL = #{mbr_email} AND MBR_PW = #{mbr_pw} </select> <select id="getUserInfo" parameterType="com.staff.model.UserVO" resultType="com.staff.model.UserVO"> SELECT mbr_no, mbr_nm, mbr_email, mbr_pw, mbr_phone, mbr_cont, mbr_addr, mbr_web, mbr_twit, mbr_insta, mbr_face, mbr_brd, sys_reg_date FROM dba_staff.MBR_BASE WHERE MBR_NO = #{mbr_no} </select> <update id="updateMbrInfo" parameterType="com.staff.model.UserVO"> UPDATE MBR_BASE SET mbr_nm = #{mbr_nm}, mbr_email = #{mbr_email}, mbr_pw = #{mbr_pw}, mbr_phone = #{mbr_phone}, mbr_cont = #{mbr_cont}, mbr_addr = #{mbr_addr}, mbr_web = #{mbr_web}, mbr_twit = #{mbr_twit}, mbr_insta = #{mbr_insta}, mbr_face = #{mbr_face}, mbr_brd = #{mbr_brd} WHERE mbr_no = #{mbr_no} </update> <insert id="insertMbrInfo" parameterType="com.staff.model.UserVO"> INSERT INTO MBR_BASE(mbr_no, mbr_nm, mbr_email, mbr_pw, mbr_phone, mbr_cont, mbr_addr, mbr_web, mbr_twit, mbr_insta, mbr_face, mbr_brd, SYS_REG_DATE) VALUES (#{mbr_no}, #{mbr_nm}, #{mbr_email}, #{mbr_pw}, #{mbr_phone}, #{mbr_cont}, #{mbr_addr}, #{mbr_web}, #{mbr_twit}, #{mbr_insta}, #{mbr_face}, #{mbr_brd}, SYSDATE) </insert> </mapper>

Project.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37	<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.staff.dao.ProjectDAO"> <select id="getMbrProjectList" parameterType="String" resultType="com.staff.model.ProjectVO"> SELECT prj_no, prj_prog, prj_nm, prj_expl, prj_start_date, prj_end_date, sys_reg_date FROM PRJ_BASE WHERE PRJ_NO IN ( SELECT PRJ_NO FROM PRJ_MBR_BASE WHERE MBR_NO = #{mbr_no}) </select> <update id="updateProjectInfo" parameterType="com.staff.model.ProjectVO"> UPDATE PRJ_BASE SET prj_no = #{prj_no}, prj_prog = #{prj_prog}, prj_nm = #{prj_nm}, prj_expl = #{prj_expl}, prj_start_date = #{prj_start_date}, prj_end_date = #{prj_end_date} WHERE prj_no = #{prj_no} </update> <insert id="insertProjectInfo" parameterType="com.staff.model.PrjMbrVO"> INSERT INTO PRJ_MBR_BASE(mbr_no, prj_no, mbr_posi, SYS_REG_DATE) VALUES (#{mbr_no}, #{prj_no}, #{mbr_posi}, SYSDATE) </insert> <delete id="deleteProjectInfo" parameterType="com.staff.model.PrjMbrVO"> DELETE FROM PRJ_MBR_BASE WHERE mbr_no = #{mbr_no} and prj_no = #{prj_no} </delete> </mapper>