Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md

✨ 하나뷰 (Hana View)

시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행

하나뷰 메인 화면

✏️ 기능 소개

● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인

● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)

● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입

● 관리자 페이지 조회(텔러 및 손님 상담 기록)

🎬 시연 영상

https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw

📀 ERD

image

  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과 각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.

⚙️ 시스템 아키텍처

image

  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.

📃 API

🙍‍♂️ 메인 기능

메인화면

본인인증(로그인)

화상상담

상담 기록

관리자 페이지

👨‍💻 Members

김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps

💻 Tech Stack

  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories Loading

  1. Front-End Front-EndPublic

    ⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript 2

  2. Web-RTC Web-RTCPublic

    📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML

  3. .github .githubPublic

  4. Back-End Back-EndPublic

    ⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories

Top languages

Loading…

Most used topics

Loading…

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
HanaView · GitHub
Skip to content
@HanaView

HanaView

⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)
README.md
✨ 하나뷰 (Hana View)
시간, 장소 제약 없이
화상 창구를 통해 비대면 창구 업무 수행
하나뷰 메인 화면
✏️ 기능 소개
● Redis, NCP OCR, Message API를 이용한 본인인증 및 로그인
● WebRTC를 이용한 텔러, 고객의 1:1 화상 상담(화상 통화, 화면 공유, 채팅)
● Spring Boot(Deposit, Saving, Card API)를 통한 은행 예,적금/카드 상품 가입
● 관리자 페이지 조회(텔러 및 손님 상담 기록)
🎬 시연 영상
https://youtu.be/tNko3bdyv00?si=3jry193DLumVXeOw
📀 ERD
image
  • 요구사항 명세서를 기반으로 ERD를 작성했습니다.
  • 서비스의 주체인 User와 Teller의 정보를 관리하는 2개의 테이블과 상담에 대한 상담 내역과 리뷰를 관리하는 2개의 테이블, 그리고 예금, 적금, 카드 상품의 정보를 관리하고 카테고리, 이자율, 혜택 등의 정보를 저장하는 9개의 테이블과
각 user가 만든 상품에 대한 정보를 보관하는 3개의 테이블이 존재합니다.
  • 이로써, 총 16개의 테이블로 HanaView의 DataBase를 설계했습니다.
⚙️ 시스템 아키텍처
image
  • 백엔드 서버 배포의 경우, 요구사항의 빠른 반영을 위해 Docker와 GitHub Actions를 이용해 CI/CD 환경을 구축했습니다.
  • 도커를 통해 서버의 이미지를 생성하고 이를 Hub에 등록한 후, Docker-Compose와 Github Actions를 이용하여 각각의 EC2 인스턴스에 서버를 배포했습니다.
  • 또한, 프론트 서버의 경우 Vercel을 이용함으로써 별다른 설정없이 CI/CD가 가능하도록 하였습니다.
  • 저희 서비스는 hanaview.shop이라는 도메인을 이용하였습니다.
  • Route53에 AWS Certificate Manager를 통해 발급받은 인증서를 연결하여 https로의 접근을 허용하였습니다.
  • 또한, Http 접근의 경우에는 로드밸런서를 통해 https로 리다이렉션 되도록 설정하였습니다.
  • 더불어, 각 접근은 로드밸런서를 통해 target-group 으로의 트래픽이 분산됩니다.
  • 도메인 뒤에 /api로 이어지는 URL의 경우 백엔드 기능 서버로 접근되며,
  • /rtc의 경우 WebRTC 서버로 연결됩니다
  • 그리고 그 외의 /로 이어지는 URL의 경우 웹서버인 nginx를 통해 Vercel로 접근하도록 설정하였습니다.
📃 API
🙍‍♂️ 메인 기능
메인화면
본인인증(로그인)
화상상담
상담 기록
관리자 페이지
👨‍💻 Members
김민표유다영강민주김서윤이고은임탁균
Frontend, WebRTCFrontend, WebRTCBackendFrontendBackendBackend, DevOps
💻 Tech Stack
  • IDE : IntelliJ, Visual Studio Code
  • Front-End: Vite, React, React-Query, JavaScript, SASS
  • Backend : SpringBoot, JAVA, Spring-Security, JPA, Gradle
  • Database: AWS RDS, MySQL, Redis
  • Devops: AWS, Docker, GitHub Actions, Nginx
  • API Documentation: Swagger
  • VCS: GitHub, Notion, Figma, Swagger 3.0

Popular repositories
Loading
  1. 
Front-End
Front-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    JavaScript
2

  2. 
Web-RTC
Web-RTCPublic
    
📹 Web RTC를 이용한 화상 상담 구현(화면공유, 상담, 채팅)

    HTML
  3. 
.github
.githubPublic
  4. 
Back-End
Back-EndPublic
    
⭐️ HanaView: 시간, 장소 제약 없이 화상 창구를 통해 비대면 창구 업무 수행- 하나은행 디지털 하나路 2기(2024.06.12)

    Java

Repositories

Showing 4 of 4 repositories
Top languages
Loading…
Most used topics
Loading…