JoyCodeMe
프로젝트 발표날짜 : 2024. 11. 25

(디지털컨버전스)공공데이터 융합 자바개발자 양성과정A23(3) 1회차
팀장/팀원 | 엄**(팀장) : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드, git 충돌 관리 - React, Spring-boot 개발 환경 구축 - 메인 페이지: 전체 UI 및 기능 구현 - 로고 JS 애니메이션 구현 - 페이지 사용 설명 영상 편집 및 적용 - 이메일 전송 API 구현 - footer, header 작성 및 구현, footer 페이징 처리 - 홈페이지 메인 기능 구현(웹제작) - 웹 제작 페이지 회원등급 데이터 확인 및 의뢰 작성 구현 - AI API 사용 UI 코딩 및 화면 출력, 다운로드 및 저장 기능 구현 - 기능 제작 페이지 회원등급 데이터 확인 및 의뢰 작성 구현 - AI API 사용 Java를 사용한 Spring Framework 백엔드 기능 구현 파일 작성 기능 구현 - DB 제작 페이지 회원등급 데이터 확인 및 의뢰 작성 구현 - AI API 사용 Oracle DB 를 사용한 DB 쿼리문 작성 기능 구현 - 회원 등급별 사용 권한 적용 및 기능 구현 - 웹 제작 사용기록 페이지 : 웹 제작 사용 시 기록 저장 및 기능 구현, 화면 출력 - 일반 로그인 기능 , 네이버 로그인 API 기능 구현 - 회사 소개 페이지: typed 라이브러리를 이용한 텍스트 출력 기능 구현 - 웹 제작 설명 페이지 : UI 및 기능 전체 구현 - 기술 소개 페이지: UI 구현 - 페이지 URL 로그인 인터셉터 React 전체적용 - 가이드 페이지: UI 공동구현 - React Hook 상태 관리 |
---|---|
기** : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드, 기능 명세서 작성 - 메인 페이지 : 채팅 API 기능, SVG 기능 개선, 풀페이지 기능 참여 네이버 지도 API 기능 참여, 모든 페이지 반응형 추가, 메뉴바 반응형 추가 - 회원 페이지: 로그인 회원가입 기능, - 기술 소개 페이지: 기술 소개 페이지 작성, - 문의사항 페이지: 자주 묻는 질문 기능 구현 - 가이드 페이지: 결제 API 적용, 기능 구현 - 관리자 페이지: UI 구현, 대쉬보드 , 서버상태 체크 , 차트, 회원 분포도 기능 구현 - 마이페이지: UI 및 기능 구현, 프로필 수정, 비밀번호 변경, UI 및 기능 구현 , 등급 기능 구현 - 협업 툴(GitHub) 관리 및 유지보수 - icon 모듈 추가 및 구현 - CORS 통신 기능 추가 및 외부 접속 IP 차단 기능 구현 | |
양** : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드, ERD 테이블 설계 - 관리자 페이지: UI 구현, 게시글 관리, 신고 게시물 관리 기능 구현 - 메인페이지: 4번째 페이지 UI 구현 - 고객 지원 페이지: 공지사항, 자유게시판, 프로젝트게시판, 문의사항 UI 구현 및 기능 구현 - summernote 라이브러리 기능 구현 - 게시물 상세 페이지, 게시물 목록 페이지 UI 및 기능 구현 - 문의사항 , 프로젝트 게시판 공개 및 비공개 처리 - 댓글 및 답글 기능 구현, 추천/신고/조회수 기능 구현 - 게시글 작성/수정/삭제 기능 구현 | |
이** : - UI 설계 및 구현, DB 설계 및 DB 테이블 작성, git 관리 코드 업로드 - 메인 페이지: 풀페이지 스크롤 라이브러리 적용 및 기능 구현 - 회원 페이지 : 로그인/회원가입 UI 구현 및 ID중복 체크, 아이디 찾기, 비밀번호 재설정 , 관리자 및 사용자 비밀번호 암호화, 제약조건, 소셜로그인(네이버 로그인 API 기능 참여, 구글 로그인 API) , 전화번호 유효성(하이픈) 기능 구현 - 이메일 인증 API 기능 구현 - 회사 소개 페이지: UI및 기능 구현, Naver Maps API 구현 - 결제 내역 페이지: 결제 내역 기능 구현 - 가이드 페이지: UI구현 - 관리자 페이지: 고객 관리 페이지 기능 구현 - 마이페이지: 소셜 로그인인 경우 비밀번호 변경 삭제 기능 구현, 비밀번호 변경 시 제약조건, 암호화 기능 구현 - env 파일 분리 및 키값 적용 - 결제 수단 페이지: UI및 수정/삭제/비활성 기능 구현 - 고객 관리 페이지 : 초기 UI 구현 - 웹 제작 페이지: UI 구현 | |
개요 | 기획 의도 국가적으로 지원범위가 넓어지고 전세계적으로 관심이 쏠리는 Open AI 와 Web 개발을 접목시켜 시간을 단축시키고 편리한 개발환경을 제공하여 보다 빠른 Web Project 제작과 정확한 작업을 수행 할 수 있도록 지원 프로젝트 개요 본 프로젝트는 OpenAI API와 웹 개발 기술을 융합하여 사용자가 보다 편리하고 효율적으로 웹 프로젝트를 제작할 수 있도록 지원하는 시스템입니다. 국가적 및 글로벌 차원에서 관심이 증가하고 있는 AI 기술을 활용하여 개발자들에게 시간 단축, 정확한 작업 수행, 개발 환경 개선을 목표 본 프로젝트는 React와 Spring Boot를 기반으로 설계, AI API, Oracle DB, 그리고 다양한 웹 개발 기술을 통합하여 회원 등급별 권한 관리, 데이터 저장 및 분석, 사용자 친화적 UI/UX 등 현대적이고 기능적인 웹 플랫폼을 제공 이를 통해 다양한 사용자(일반 사용자, 관리자)가 편리하게 웹 제작, 데이터 관리, 고객 지원 등을 수행할 수 있는 맞춤형 웹 서비스를 제공하는 것이 목표 |
구현기능 | 메인 페이지 - 로고 JS 애니메이션 적용. - 풀페이지 스크롤 라이브러리 적용 및 기능 구현. - 채팅 API 기능 추가. - SVG 기능 개선. - 페이지 사용 설명 영상 편집 및 적용. - 모든 페이지 반응형 적용. 회사 소개 페이지 - 회사 위치(지도) 및 팀원 소개 기능 구현 웹 제작 페이지 - Web, Funtion, DB 별 AI API를 사용한 제작 기능 구현 결제내역 페이지 - 결제단계, 결제일 등 결제 정보 내용 기능 구현 고객지원 페이지 - 공지사항 게시판, 프로젝트 게시판, 자유게시판, 문의사항 게시판 기능 구현 - 조회수 및 게시글 신고/수정/삭제/댓글/답글 기능 구현 가이드 페이지 - 결제 수단 및 결제 단계 / 적용 기능 구현 관리자 페이지 - 대쉬보드, 구독 회원 관리, 고객 관리, 채팅 관리, 게시물 관리, 신고 관리 기능 구현 로그인 페이지 - 회원가입/소셜로그인 기능 구현 마이페이지 - 사용기록, 프로필 수정, 비밀번호 변경 기능 구현 |
설계의 주안점 | 사용자 중심의 UI/UX 설계 - 애니메이션 적용: 로고 JS 애니메이션, 스크롤 효과 등을 활용하여 시각적 흥미 유발. - 명확한 정보 구조: 웹 제작, 고객 지원, 결제 내역 등의 기능을 카테고리별로 체계화. 효율적인 AI 기술 활용 - AI API를 사용하여 사용자 요청에 따른 자동 웹 페이지 제작, DB 작성, 기능 구현 지원. - 개발자 및 사용자 간 업무 효율성을 극대화하는 기능 제공. 회원 및 권한 관리 시스템 - 회원 등급별 기능 제어: 등급별로 사용 가능한 기능을 제한하여 시스템 안전성 확보. - 소셜 로그인 및 인증: Naver, Google API와 이메일 인증 기능을 통한 보안 강화. 데이터 처리 및 저장 안정성 - Oracle DB 및 Spring Framework를 활용하여 데이터 관리 안정성 및 성능 최적화. - AI API를 활용한 데이터 저장 및 처리 기능 구현. 관리자 편의 기능 - 대시보드, 구독 회원 관리, 고객 관리, 게시물 신고 관리 등의 효율적인 관리 도구 제공. - 실시간 데이터 처리 및 시각화: 차트와 서버 상태 확인 기능 구현. 협업 및 유지보수 용이성 - GitHub 기반의 협업 환경 구축 및 코드 관리. - CORS 통신 및 외부 IP 차단: 외부 접근 제어를 통한 보안 강화. - 환경 변수 관리(env 파일)로 유지보수 효율성 향상. 현대적 기술 스택 활용 - 최신 웹 기술인 React, Spring Boot, JSON, Oracle DB 등을 사용하여 확장성과 유지보수성을 확보. - 다양한 라이브러리 및 API 활용으로 기능 구현의 편의성 강화. |
사용기술 및 개발환경 |
Development Environment - STS, VS Code, SQL Developer Frameworks & Language - Java, HTML/CSS, JavaScript (JS), Spring Framework, MyBatis, Maven Libraries - React, Oracle Database, Tomcat, JDBC, JSON, GSON, Lombok Tools - Git, Figma, Canva |
![]() ![]() |