이대규

🔗 바로가기

사용 기술

기술	내용
NextJS 13	SEO 최적화, 서버 컴포넌트, metadata 간편 생성 등을 위하여 App Router 방식이 안정화된 NextJS 13 버전을 선택하여 사용하였습니다.
cheerio	로또 당첨 정보를 불러올 때, 동행복권 사이트 크롤링을 하기 위하여 사용한 라이브러리 입니다.

기능 설명

메인 화면

💡 글자 수 세기

• 글자 수 세기 : 자기소개서와 같은 문서를 작성할 때 글자 수 제한이 있는 경우 유용하게 활용할 수 있도록 글자 수를 자동으로 카운트 해줍니다. 공백 제외, 공백 포함, byte(hwp 및 네이버 기준), 단어, 줄 수 항목으로 구성되어 있습니다.

💡 로또 번호 생성기

• 번호 생성 : 1부터 45까지 중복하지 않는 6자리의 로또 번호를 생성합니다.

💡 로또 당첨 정보

• 당첨 정보 조회 : 동행복권 사이트를 크롤링하여 최신 당첨정보를 조회할 수 있습니다.

💡 사진 크기 조정

• 크기 조정 : 이력서 사진, 프로필 사진 등에 들어갈 사진의 크기를 손쉽게 조정할 수 있도록 만든 기능입니다. ‘이미지 선택’을 눌러 파일을 업로드하고 크기를 입력한 뒤 다운로드 받을 수 있습니다.
• 빠른 선택 : 사람인 이력서 사진, 잡코리아 이력서 사진 등으로 활용하고자 하는 경우 프리셋을 통해 클릭 한번으로 비율에 맞게 크기를 조절할 수 있습니다.

💡 나이 계산기

• 나이 계산 : 출생 년월일을 입력하면 나이와 관련된 정보를 알려줍니다.

• 썸네일 만들기 : 블로그나 SNS에 활용할 수 있는 썸네일을 손쉽게 만들 수 있습니다. 기본 타입에서는 랜덤 그라디언트 배경 설정이 가능하며, 모든 모드에서 다양한 폰트를 다양하게 변경할 수 있습니다.

🔗 바로가기

사용 기술

기술	내용
NextJS 13	SEO 최적화, 서버 컴포넌트, metadata 간편 생성 등을 위하여 App Router 방식이 안정화된 NextJS 13 버전을 선택하여 사용하였습니다.
Axios	인터셉트 기능 사용과 자동 JSON 파싱으로 불필요한 중복 코드를 최소화하였습니다.
TypeScript	타입 에러를 발견하여 프로젝트 안정성을 높이기 위해 사용하였습니다.
Recoil	전역 상태 관리 라이브러리로 Recoil을 사용하였습니다. 이전에 진행하던 프로젝트에서는 Redux를 사용하였으나 보일러 플레이트 코드 등 작성해야 하는 항목이 너무 많아 불편함을 느꼈습니다. 그래서 좀 더 가볍게 사용할 수 있는 해당 라이브러리를 선택하였습니다.

기능 설명

• 본 사이트는 식단 및 건강정보 공유 플랫폼 입니다. 식단 공유는 친구로 설정된 사람끼리 가능합니다.

메인

💡 메인 화면

• 헤더 : 로고 & 메뉴 & 로그인 및 회원가입 버튼이 위치하고 있습니다.
• 캐러샐 : 자동으로 슬라이드 되는 캐러샐이 위치하고 있습니다.
• 버튼 : 공유하기, 출석체크, 자주 묻는 질문, 공지사항 페이지로 바로 이동할 수 있는 버튼이 있습니다.

---

로그인

회원가입

💡 로그인 및 회원가입

• Next-Auth를 활용하여 JSON Web Token(JWT)를 관리하고 조작합니다.
• 이메일 방식 : DB에 계정 정보를 저장 하고 관리합니다.
• oAuth : 카카오 및 구글 2가지를 지원합니다.

---

친구

💡 친구

• 친구 추가 : 추가 버튼을 눌러 상대방 이메일 입력 후 친구 요청을 할 수 있습니다.
• 요청 응답 : 요청 수락, 요청 취소, 친구 삭제, 친구 차단을 할 수 있습니다.
• 정보 보기 : 서로 친구인 경우 클릭 하여 회원 기본 정보와 함께 최근 작성한 글, 최근 작성한 댓글을 확인할 수 있습니다.

---

공유하기

💡 공유하기

• 공유하기 : 클릭 또는 파일을 끌어다가 드롭 하여 업로드 할 수 있습니다.
  • 파일당 최대 3MB, 3장까지 등록할 수 있습니다.
  • 친구로 등록된 유저에 한하여 식단을 공유할 수 있습니다.
• 받은 목록 : 친구가 나에게 보낸 식단 목록을 확인할 수 있습니다.

---

출석체크

💡 출석체크

• 출석하기 : ‘오늘 출석 하기’ 버튼을 눌러 하루에 한 번 출석체크를 할 수 있습니다. - 출석체크 시 100 포인트를 받을 수 있으며, 마이페이지에서 포인트 내역을 확인할 수 있습니다.

---

커뮤니티

💡 커뮤니티

• 글 목록 : React-Query와 Intersection Observer API를 활용하여 무한스크롤을 구현하였습니다.
• 게시글 작성 : 로그인 한 유저만 게시글을 작성할 수 있습니다.
• 보기 옵션 : 카드보기 / 리스트 보기로 변경하여 목록을 볼 수 있습니다.
• 인기 태그 Top5 : 게시글 작성 시 입력한 태그를 집계한 뒤 인기태그 5개를 보여줍니다.

---

고객센터

💡 고객센터

• 자주 묻는 질문 : 자주 묻는 질문 목록을 볼 수 있습니다.
• 1:1 문의 : 문의를 보내고 답변을 받을 수 있습니다.
• 공지사항 : 공지사항 목록을 볼 수 있습니다.

마이페이지

내 정보 수정

비밀번호 변경

내 활동

💡 마이 페이지

• 내 정보 수정 : 닉네임, 자기소개와 같은 내 정보를 수정할 수 있습니다.
• 비밀번호 변경 : 현재 비밀번호와 새로운 비밀번호를 입력한 뒤 비밀번호 변경을 할 수 있습니다.
• 활동 내역 조회 : 내 활동 내역 (게시글 및 댓글 내역) 을 확인할 수 있습니다.
• 포인트 : 적립된 포인트 금액과 내역을 확인할 수 있습니다.

---

관리자 페이지

💡 관리자 페이지

• 접근 제한 : 관리자 등급 유저만 접근 할 수 있습니다.
• 회원 관리 : 가입된 회원 목록을 볼 수 있습니다.
• 글 관리 : 작성된 글 목록을 볼 수 있습니다.
• 댓글 관리 : 작성된 댓글 목록을 볼 수 있습니다.
• API 통계 : 호출된 IP주소를 날짜별로 한눈에 보기 쉽게 그래프로 나타냅니다.
• IP 주소 통계 : 올해 접속된 IP주소를 횟수가 많은 순서로 보여줍니다.

프로젝트 소개

• 디지털 트윈 과제를 진행하면서 울산대학교의 알람, 센서 데이터와 자사의 알람, 센서 데이터를 통합으로 보여줄 수 있는 대시보드를 기획하고 만들었습니다.

프로젝트 설명

• 화면설계 및 전체 개발 과정 참여
  피그마를 활용하여 화면 설계 및 디자인을 하였으며, 프론트엔드와 백엔드 개발을 주도적으로 담당하였습니다.
• 센서 데이터 집계 및 시각화
  MongoDB로 수집된 데이터를 Aggregate를 사용하여 집계하였습니다.
  전력 사용량, 역률, 전력 소비량 등을 집계하였으며 ApexChart.js를 활용하여 시각화 하였습니다.
• 실시간으로 센서 데이터 표시 & 알람 갱신
  MongoDB로 저장된 설비 및 센서 정보를 실시간으로 불러와서 나타내었습니다. 또한 MariaDB에 저장된 알람 데이터 또한 실시간으로 불러와서 볼 수 있도록 구현하였습니다.
• reactjs-crontab을 사용한 스케줄링 구현
  1시간 단위로 집계되는 통계 정보를 최신화 하기 위해 reactjs-crontab을 사용한 스케줄링을 구현 하였습니다. 정각마다 중앙에 위치하고 있는 통계 데이터를 업데이트 합니다.

사용기술

• FrontEnd
  • React.js, JavaScript(ES6+)
• BackEnd
  • Node.js, Socket.io
• 상태 관리
  • Redux
• DB
  • MongoDB, MariaDB
• 차트 라이브러리
  • ApexChart.js, Chart.js, ReCharts.js

🔗 사이트 바로가기
🔗 영상으로 보기

팀원	역할 및 담당 기능
이대규 (팀장)	- 게시판 기능 - 상품 기능 - 부가 기능 - 전체 디자인
이주영 (팀원)	- 관리자 기능 - 상품 기능 - 부가 기능
안영빈 (팀원)	- 회원 기능 - 상품 기능

프로젝트 소개

• 5개월 가량 자바 및 스프링 수업을 듣고, 약 5주간 개발하여 만든 첫 팀 프로젝트입니다.
• 한빛여행사는 코로나 확산세가 감소됨에 따라 전국 관광지를 알리자는 취지에서 기획하고 제작하였습니다.

개발환경 및 사용기술

• Programming Language :  Java JavaScript
• Web Framework : Spring
• Web Language :  HTML5 CSS
• CSS Framework : Bootstrap
• Bulid tool : Apach Maven
• DataBase (Local) : Oracle
• DataBase (Cloud) : Oracle Cloud
• SQL Mapper : MyBatis
• Web Library : jQuery Ajax Tiles Log4j JSON
• Version Control : SVN Git
• Browser : Google Chrome
• OS : Windows
• IDE : Spring Tool Suite4 intelliJ IDEA

기능

1. 주요 기능
   여행상품구매, 여행후기 작성, 여행후기 조회, 고객센터, 관리자메뉴

2. 부가기능
   날씨정보, 오픈채팅, 추천 경로 찾기

세부 기능 소개

• 관리자

  상품 목록
  등록된 상품의 상품코드, 상품명, 여행기간, 가격을 조회하는 기능입니다.

  상품 등록
  상품명, 가격, 여행기간, 지역, 상세주소, 여행지 상세정보, 이미지를 등록하는 기능입니다.

  지도를 클릭하면 해당 위치에 마커가 찍히고 상세주소란에 마커의 주소정보가 입력됩니다.
  주소 검색으로 대략적인 위치를 찾고 마커로 상세위치를 설정할 수 있습니다.

  상품 수정
  등록된 상품의 가격과 여행기간 상세정보를 수정할 수 있는 기능입니다.

  상품삭제
  체크박스에 체크된 상품 목록을 삭제하는 기능입니다.

  회원 목록
  가입된 전체 회원의 이름, 생년월일, 연락처, 회원가입일을 조회하는 기능입니다.

  이름을 클릭하면 회원의 상세정보를 볼 수 있으며, 상세정보에는 이름, 생년월일, 성별, 연락처, 주소, 회원등급, 가입일, 구매 이력과 보유 마일리지를 조회할 수 있습니다.

  탈퇴신청 목록
  마이페이지에서 회원탈퇴를 신청한 회원들의 목록을 조회하고
  체크박스에 체크된 회원의 탈퇴를 승인하는 기능입니다.

  탈퇴승인을 하게 되면 회원의 데이터가 삭제됩니다.

  예약 관리
  구매된 상품의 예약번호, 패키지명, 예약자, 여행인원, 가격, 연락처, 예약날짜를 조회할 수 있으며 예약 취소를 할 수 있습니다.

  연월별 매출
  당해연도 1월 ~ 12월간의 월간 매출을 확인할 수 있고
  최근 5년간의 연간 매출 또한 확인할 수 있습니다.

  상담 및 문의관리
  전체 1:1 문의글을 조회할 수 있고 제목을 클릭하면 문의글의 내용을 볼 수 있으며,
  해당 문의글에 댓글을 작성할 수 있습니다.

• 회원

  회원가입 이메일 인증
  입력한 이름, 성별, 생년월일, 이메일과 같은 정보를 이메일 중복확인과 인증 절차를 거친 후 회원가입 페이지로 보냅니다.

  회원가입
  이메일 인증 페이지에서 받은 정보와 비밀번호, 주소, 연락처를 추가 입력하여 DB에 등록합니다.

  로그인
  입력한 아이디, 비밀번호를 DB에 조회하여 일치여부, 탈퇴여부를 확인하고 회원정보를 세션에 저장합니다.

  아이디 찾기
  입력한 아이디, 성별, 생년월일, 연락처를 DB에서 조회하여 아이디를 찾습니다.

  비밀번호 찾기
  입력한 이름, 생년월일, 연락처를 DB에서 조회하여 찾은 아이디와 입력한 아이디가 일치할 경우 이메일 인증 후 비밀번호를 찾습니다.

  마이 페이지
  로그인한 회원의 기본 정보와 예약 정보를 조회합니다.

  회원 정보 수정
  회원 정보를 수정하고 연락처 중복확인을 한 후 비밀번호를 입력하여 DB 정보를 수정합니다.

  비밀번호 변경
  현재 비밀번호와 새 비밀번호를 입력하여 비밀번호를 수정합니다.

  회원 탈퇴
  회원 탈퇴 처리를 할 수 있습니다. 회원 정보를 수정하여 로그인, 아이디 찾기, 비밀번호 찾기를 하는 경우가 생기지 않도록 제한합니다.

• 상품

  상품 목록
  상품 목록 페이지에는 현재 예약할 수 있는 상품들이 나타나게 됩니다.

  대표 이미지와 함께 상품 패키지명, 여행설명, 일정, 가격정보 등을 확인할 수 있습니다.
  상단에 있는 검색창 또는 메인 화면에 있는 검색창에서 원하는 상품을 검색할 수도 있습니다.

  상품 상세정보
  상품 상세정보 페이지에는 대표 이미지, 상품 정보, 별점, 여행 설명, 상세 이미지 등이 나타납니다.

  구매하기 버튼을 누르면 바로 구매 페이지로 이동하고,
  장바구니 담기 버튼을 누르면 장바구니에 등록되고 장바구니로 이동할 것인지에 대한 알림창이 나타납니다.

  단, 로그인이 되지 않은 상태라면 비회원 구매 페이지로 이동할 것인지에 대한 알림이 나타나게 되고,
  확인 버튼을 누르면 비회원 구매 페이지로 이동하게 됩니다.

  상세이미지는 슬라이드 형식으로 조회할 수 있습니다.
  또한 상품 페이지에서는 여행 위치 정보를 확인할 수 있습니다.

  여행 위치 정보는 카카오 지도 API를 사용했습니다.

  상품구매
  상품 구매는 회원 구매와 비회원 구매로 나뉩니다.

  회원 구매의 경우 회원 정보를 받아온 다음 예약자정보에 자동으로 입력하여 별도로 정보를 입력할 필요 없이 바로 결제할 수 있게 만들었습니다.

  비회원 구매를 하게 되는 경우에는 예약자 정보를 별도로 입력해야 합니다.

  상품 정보 및 예약자 정보를 확인한 다음 주문서 내역 확인 및 개인정보 제공 동의에 체크해야 결제 페이지로 이동할 수 있습니다.

  결제 시스템은 아임포트 결제 API를 이용했으며, 실제로 결제가 이루어져야만 DB에 결제 정보가 저장됩니다.

  결제에 성공하면 패키지 구매 완료 페이지로 이동되며,
  만약 중간에 결제를 취소하는 등 여러가지 이유로 결제에 실패하게 되면, 실패 페이지로 이동되고 사유도 나타나게 됩니다.

  찜 목록 (장바구니)
  찜 목록에는 구매를 원하는 상품을 담아놓을 수 있는 기능입니다.

  찜 목록에 상품을 담아 놓고 원하는 상품만 골라서 선택구매를 하거나 전체구매를 할 수 있습니다.

• 게시판

  공지사항
  공지사항은 관리자만 작성할 수 있습니다.

  글을 작성할 때 메인글 여부를 체크할 수 있고,
  메인글이라면 게시판 상단에 공지가 고정됩니다.

  또한 메인글로 등록한 공지사항은 홈페이지 최상단의 롤링 공지사항으로도 나타나게 됩니다.

  1:1 문의
  1:1 문의 게시판은 로그인 한 회원만 이용할 수 있습니다.

  문의 게시글을 올리면 관리자 메뉴에서 답변할 수 있고,
  답변이 하나이상 달린 경우 추가의견을 등록할 수 있습니다.

  여행 후기
  여행 후기는 본인이 구매한 여행상품에 대해서만 작성할 수 있도록 만들었습니다.

  후기를 작성할 때는 1점부터 5점까지 별점을 줄 수 있고,
  등록한 별점은 상품목록에 반영됩니다.추천 기능이 있어서 마음에 드는 후기라면 추천할 수 있습니다.

  추천은 로그인 한 회원만 할 수 있습니다.
  추천 정보는 데이터베이스에 저장되기 때문에 추천한 게시글에 한번 더 추천 버튼을 누르면 추천이 취소됩니다.

  하단의 검색란에서 제목, 내용, 작성자 키워드로 후기 검색 또한 가능합니다.

  베스트 후기
  후기의 추천수를 기준으로 상위 10개의 항목만 나타내는 게시판입니다.

  모든 게시판의 글쓰기 기능은 ck에디터를 적용하였고, 이미지 첨부를 할 수 있으며 페이징 처리가 되어 있습니다.

• 부가기능

  날씨정보
  날씨 정보 기능은 OpenWeatherMap API로 구현하였습니다.
  또한 Geolocation API로 사용자의 현재 위치를 확인하며, 해당 지역의 날씨 정보를 나타냅니다.

  오픈채팅
  오픈채팅 기능은 웹소켓을 사용했습니다.

  닉네임 입력 후 오픈채팅에 입장할 수 있고, 닉네임을 입력하지 않으면 Modal창이 나타나게 됩니다.
  사용자가 입력한 채팅과 함께 입장알림, 퇴장알림 등이 채팅에 나타나게 되며 원한다면 대화내용을 지울 수도 있습니다.

  추천경로
  키워드를 입력하고 검색버튼을 누른 뒤, 장소를 여러 곳 선택하고 찾기 버튼을 누르면 추천경로를 찾아줍니다.

ERD