diff --git a/src/unluckystrike/blog/templates/blog_base.html b/src/unluckystrike/blog/templates/blog_base.html
deleted file mode 100755
index 2fa3dab..0000000
--- a/src/unluckystrike/blog/templates/blog_base.html
+++ /dev/null
@@ -1,121 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-
-<div class="section-container">
-    <div class="container-fluid">
-        <div class="row">
-          <div class="col-sm-8 col-sm-offset-2 section-container-spacer">
-            <div class="text-center">
-              <h1 class="h2">Blog</h1>
-            </div>
-          </div>
-        
-      <div class="col-md-10">
-      <hr>
-      {% if not post_list %}
-        <h4>No results were found for your search</h4>
-      {% else %}
-      {% for post in post_list %}
-      <!--
-      CARD INTERFACE
-  
-      <div class="card mb-4">
-          <h2 class="card-title">{{ post.title }}</h2>
-          <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on }}</p>
-          <p class="card-text">{{ post.body | slice:":300" }}</p>
-          <a href="{% url 'blog_detail' post.pk %}" class="btn btn-primary">Read More &rarr;</a>
-      </div>
-      -->
-      <h2><a href="{% url 'blog_detail' post.pk %}">{{ post.title }}</a></h2>
-      <br>
-      <small>
-          {{ post.author | upper }} |&nbsp;
-          {{ post.created_on.date }} |&nbsp;
-          Categories:&nbsp;
-          {% for category in post.categories.all %}
-          <a href="{% url 'blog_category' category.name %}">
-              {{ category.name }}
-          </a>&nbsp;
-          {% endfor %}
-      </small>
-      <br>
-      <!-- Issue<hr>
-      <p>{{ post.body | safe | slice:":100" }}...</p>
-      -->
-      <a href="{% url 'blog_detail' post.pk %}" class="btn btn-default">Discover</a>
-      <br>
-      <hr>
-      {% endfor %}
-      {% endif %}
-  
-      </div>
-  
-      <!-- Search -->
-      <form action="" method="GET">
-        <div class="col-md-2">
-          <div style="float: left;" class="form-row">
-            <div class="form-row">
-              <div class="col" style="margin-top: 10px;">
-                <select style="width: 6em;" class="custom-select custom-select-md" name="type">
-                  <option value="all">ALL</option>
-                  <option value="title">TITLE</option>
-                  <option value="content">CONTENT</option>
-                </select>
-              </div>
-              <div class="col" style="margin-top: 10px;">
-                <input type="text" name="q" value="{{ q }}" placeholder="SEARCH">
-                <button type="submit" id="search_btn">SEARCH</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-  
-      <!-- Categories -->
-      <div class="col-md-2 card mb-4" id="categories-card">
-        <h5 class="card-header">Categories</h5>
-        <div class="card-body">
-          <div class="row">
-            <ul>
-              {% for category in categories %}
-              <li>
-                <a href="{% url 'blog_category' category.name %}"> {{ category.name }} ({{ category.posts.count }})</a>
-              </li>
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div>
-      </div>
-  
-      <!-- Adding pagination interface.-->
-      {% if is_paginated %}
-      <ul class="pagination justify-content-center">
-        {% if page_obj.has_previous %}
-        <li class="page-item">
-          <a class="before" href="?type={{ type }}&q={{ q }}&page={{ page_obj.previous_page_number }}" tabindex="-1">&laquo; PREV </a>
-        </li>
-        {% else %}
-        <li class="page-item disabled">
-          <a class="page-link" href="#" tabindex="-1">&laquo; PREV</a>
-        </li>
-        {% endif %}
-  
-        {% for page in page_range %}
-        <li class="page-item {% if page == page_obj.number %} activate {% endif %}">
-          <a class="page-link" href="?type={{ type }}&q={{ q }}&page={{ page }}">{{ page }} </a>
-        </li>
-        {% endfor %}
-  
-        {% if page_obj.has_next %}
-        <li class="page-item">
-          <a class="page-link" href="?type={{ type }}&q={{ q }}&page={{ page_obj.next_page_number }}" tabindex="1"> NEXT &raquo;</a>
-        </li>
-        {% else %}
-          <a class="page-item disabled" href="#" class="btn btn-default"> NEXT &raquo;</a>
-        {% endif %}
-      {% endif %}
-      </ul>
-    </div>
-
-{% endblock %}
\ No newline at end of file
diff --git a/src/unluckystrike/main/settings.py b/src/unluckystrike/main/settings.py
index e51fcf9..3abe31c 100755
--- a/src/unluckystrike/main/settings.py
+++ b/src/unluckystrike/main/settings.py
@@ -57,12 +57,24 @@
     'blog',
     'service',
     # addon apps
+    'channels',
     'letsencrypt',
     'rest_framework',
     'drf_yasg',
     'ckeditor',
 ]
 
+# Channels
+ASGI_APPLICATION = 'config.asgi.application'
+CHANNEL_LAYERS = {
+    'default': {
+        'BACKEND': 'channels_redis.core.RedisChannelLayer',
+        'CONFIG': {
+            "hosts": [('127.0.0.1', 6379)],
+        },
+    },
+}
+
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
diff --git a/src/unluckystrike/main/templates/base.html b/src/unluckystrike/main/templates/base.html
index 928c615..62c071c 100755
--- a/src/unluckystrike/main/templates/base.html
+++ b/src/unluckystrike/main/templates/base.html
@@ -96,6 +96,8 @@
               <details>
                 <summary><a href="{% url 'project_index' %}">Project</a></summary>
                 <ul>
+                  <li><a href="/projects/open-webcam-test">Open Webcam Test</a></li>
+                  <li><a href="/projects/exchange-rate">Exchange Rate</a></li>
                   <li><a href="/projects/lottery">lottery</a></li>
                   <li><a href="/projects/object-detection">Object Detection</a></li>
                   <li><a href="/projects/raspberry-pi-lab">Raspberry Pi Lab</a></li>
diff --git a/src/unluckystrike/projects/fishingram.py b/src/unluckystrike/projects/fishingram.py
new file mode 100755
index 0000000..29ff0f2
--- /dev/null
+++ b/src/unluckystrike/projects/fishingram.py
@@ -0,0 +1,40 @@
+# fishingram
+
+from rest_framework import serializers
+
+from service.models import FishingPlaceInfoData
+
+import os
+import glob
+
+from pathlib import Path
+
+BASE_DIR = Path(__file__).resolve(strict=True).parent.parent
+
+
+class FishingPlcInfoSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = FishingPlaceInfoData
+        fields = (
+            'sigun_name',
+            'sigun_code',
+            'facility_name',
+            'facility_type',
+            'refine_roadnm_addr',
+            'refine_lotnm_addr',
+            'refine_lat',
+            'refine_logt',
+            'facility_tel',
+            'wtr_ar',
+            'fishkind_nm',
+            'aceptnc_posbl_psn_cnt',
+            'wtr_facility_info',
+            'chrg_info',
+            'main_plc_info',
+            'safe_facility_info',
+            'convnce_facility_info',
+            'circumfr_tursm_info',
+            'manage_inst_telno',
+            'manage_inst_name',
+            'data_std_de'
+        )
\ No newline at end of file
diff --git a/src/unluckystrike/projects/templates/exchange-rate.html b/src/unluckystrike/projects/templates/exchange-rate.html
new file mode 100644
index 0000000..1d2b367
--- /dev/null
+++ b/src/unluckystrike/projects/templates/exchange-rate.html
@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+
+{% block title%}원달러 환율 - Unlucky Strike{% endblock title %}
+
+{% block content %}
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<style>
+/* 차트를 감싸는 컨테이너 스타일 */
+.chart-container {
+    width: 80%;
+    margin: auto;
+    padding: 20px;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+</style>
+
+<h2 id="lottery">원달러 환율</h2>
+
+<section class="component">
+    <section class="chart-container">
+    <h2>Monthly Sales Chart</h2>
+    <!-- Canvas 요소를 사용하여 차트를 그릴 공간을 마련 -->
+    <canvas id="myChart" width="800" height="400"></canvas>
+    </section>
+
+    <script>
+    // 차트 데이터 설정
+    const data = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+        datasets: [{
+        label: 'Sales',
+        backgroundColor: 'rgba(54, 162, 235, 0.6)',
+        borderColor: 'rgba(54, 162, 235, 1)',
+        borderWidth: 1,
+        data: [65, 59, 80, 81, 56, 55],
+        }]
+    };
+
+    // 차트 옵션 설정
+    const options = {
+        scales: {
+        yAxes: [{
+            ticks: {
+            beginAtZero: true
+            }
+        }]
+        }
+    };
+
+    // Canvas 요소 가져오기
+    const ctx = document.getElementById('excRateChart').getContext('2d');
+
+    // 차트 생성
+    const excRateChart = new Chart(ctx, {
+        type: 'line',
+        data: data,
+        options: options
+    });
+    </script>
+</section>
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/unluckystrike/projects/templates/fishingram.html b/src/unluckystrike/projects/templates/fishingram.html
new file mode 100755
index 0000000..7e2763b
--- /dev/null
+++ b/src/unluckystrike/projects/templates/fishingram.html
@@ -0,0 +1,205 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+
+<style>
+  .wrap {position: absolute;left: 0;bottom: 0px;width: 300px;height: 132px;margin-left: 0px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
+  .wrap * {padding: 0;margin: 0;}
+  .wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
+  .wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
+  .info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
+  .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
+  .info .close:hover {cursor: pointer;}
+  .info .body {position: relative;overflow: hidden;}
+  .info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
+  .desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+  .desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
+  .info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
+  .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
+  .info .link {color: #5085BB;}
+</style>
+
+<div class="section-container">
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-12">
+        <img src="{% static 'service/images/fishingram_logo.png' %}" class="img-responsive" alt="fishingram">
+        <div class="card-container">
+          <div class="text-center">
+            <h1 class="h2">피싱그램</h1>
+          </div>
+
+          <div class="text-center">
+          <a href="https://github.com/JoHyukJun/web" title="" class="fa-icon">
+            <i class="fa fa-github"></i>
+          </a>
+
+          <a href="https://www.unluckystrike.com/" title="" class="fa-icon">
+            <i class="fa fa-info"></i>
+          </a>
+          </div>
+          </div>
+        	<div id="map" style="width:100%;height:720px;"></div>
+
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a57fce717218d080b5b018a61738295a"></script>
+
+<script>
+var fishig_plc_positions = initPositions();
+initMap(fishig_plc_positions);
+
+
+/**
+ * init kakao map component
+ * 
+ * @param plc_data {Array} positions data
+ * 
+ */
+function initMap(plc_data) {
+  var map_container = document.getElementById('map');
+  var map_options = {
+    // certer = mt.nam
+    center: new kakao.maps.LatLng(37.551224, 126.988247),
+    level: 5
+  };
+
+  var map = new kakao.maps.Map(map_container, map_options);
+
+  // 마커 이미지의 이미지 주소
+  var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
+  
+  // 마커 이미지의 이미지 크기
+  var imageSize = new kakao.maps.Size(24, 35); 
+  
+  // 마커 이미지를 생성 
+  var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
+      
+  for (var i = 0; i < plc_data.length; i ++) {
+      // 마커를 생성
+      var marker = new kakao.maps.Marker({
+          map: map, // 마커를 표시할 지도
+          position: plc_data[i].latlng, // 마커를 표시할 위치
+          title : plc_data[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시
+          image : markerImage // 마커 이미지 
+      });
+
+      // 커스텀 오버레이에 표시할 컨텐츠 입니다
+      // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
+      // 별도의 이벤트 메소드를 제공하지 않습니다 
+      var content_plc = '<div class="wrap">' + 
+                  '    <div class="info">' + 
+                  '        <div class="title">' + 
+                  '            ' + plc_data[i].title + 
+                  '        </div>' + 
+                  '        <div class="body">' +
+                  '          <div class="ellipsis">' + plc_data[i].lotnm_addr + '</div>' + 
+                  '          <div class="jibun ellipsis">' + plc_data[i].roadnm_addr + '</div>' + 
+                  '          <div class="jibun ellipsis">' + '이용요금: ' + plc_data[i].chrg_info + '</div>' + 
+                  '        </div>' + 
+                  '    </div>' +    
+                  '</div>';
+
+      // 마커에 표시할 인포윈도우를 생성
+      var infowindow = new kakao.maps.InfoWindow({
+          content: content_plc // 인포윈도우에 표시할 내용
+      });
+
+      //var overlay = new kakao.maps.CustomOverlay({
+      //content: content_plc,
+      //map: map,
+      //position: marker.getPosition()  
+      //});
+
+      // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
+      //kakao.maps.event.addListener(marker, 'click', function() {
+      //    overlay.setMap(map);
+      //});
+
+      // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록
+      // 이벤트 리스너로는 클로저를 만들어 등록
+      // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록
+      kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
+      kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
+
+      //kakao.maps.event.addListener(marker, 'mouseover', overLayMouseOverListener(map, marker, overlay));
+      //kakao.maps.event.addListener(marker, 'mouseout', overLayMouseOutListener(overlay));
+  }
+}
+
+
+function overLayMouseOverListener(map, marker, overlay) {
+  overlay.setMap(map);
+}
+
+
+function overLayMouseOutListener(overlay) {
+  overlay.setMap(null);
+}
+
+
+/**
+ * init map postions
+ * 
+ * @returns {Array} positions data
+ */
+function initPositions() {
+  var plc = JSON.parse("{{ fishing_place_info | escapejs }}");
+
+  //var plc_name = document.getElementById("facility_name").innerText.split(',');
+  //var plc_lat = document.getElementById("refine_lat").innerText.split(',');
+  //var plc_logt = document.getElementById("refine_logt").innerText.split(',');
+
+  var fishig_plc_positions = new Array();
+
+  for (var idx = 0; idx < plc.length; idx++) {
+    var tmp_obj = new Object();
+    tmp_obj.title = plc[idx]['facility_name'];
+    tmp_obj.latlng = new kakao.maps.LatLng(plc[idx]['refine_lat'], plc[idx]['refine_logt']);
+    tmp_obj.roadnm_addr = plc[idx]['refine_roadnm_addr'];
+    tmp_obj.lotnm_addr = plc[idx]['refine_lotnm_addr'];
+    tmp_obj.chrg_info = plc[idx]['chrg_info'];
+
+    fishig_plc_positions.push(tmp_obj);
+  }
+
+  //for (var idx = 0; idx < plc_lat.length; idx++) {
+  //  var tmp_obj = new Object();
+  //  tmp_obj.title = plc_name[idx];
+  //  tmp_obj.latlng = new kakao.maps.LatLng(plc_lat[idx], plc_logt[idx]);
+    
+  //  fishig_plc_positions.push(tmp_obj);
+  //}
+  return fishig_plc_positions
+}
+              
+
+// 커스텀 오버레이를 닫기 위해 호출되는 함수
+function closeOverlay() {
+    overlay.setMap(null);     
+}
+
+
+// 인포윈도우를 표시하는 클로저를 만드는 함수
+function makeOverListener(map, marker, infowindow) {
+    return function() {
+        infowindow.open(map, marker);
+    };
+}
+
+
+// 인포윈도우를 닫는 클로저를 만드는 함수
+function makeOutListener(infowindow) {
+    return function() {
+        infowindow.close();
+    };
+}
+
+              
+</script>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/unluckystrike/projects/templates/open-webcam-test.html b/src/unluckystrike/projects/templates/open-webcam-test.html
new file mode 100755
index 0000000..ee24e68
--- /dev/null
+++ b/src/unluckystrike/projects/templates/open-webcam-test.html
@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+
+{% block title%}Open Webcam Test - Unlucky Strike{% endblock title %}
+
+{% block content %}
+
+<h2 id="lottery">Open Webcam Test</h2>
+
+<section class="component">
+    <div>
+      <div class="window" style="width: 400px">
+        <div class="title-bar">
+          <div class="title-bar-text">Open Webcam Test</a></div>
+          <div class="title-bar-controls">
+            <button aria-label="Minimize"></button>
+            <button aria-label="Maximize"></button>
+            <button aria-label="Close"></button>
+          </div>
+        </div>
+        <div class="window-body">
+          <video id="video" width="1280" height="720" autoplay></video>
+          <section class="field-row" style="justify-content: flex-end">
+            <button type="button" id="webcamRun" class="btn btn-defalut">Run</button>
+            <button type="button" id="webcamStop" class='btn btn-default'>Stop</button>
+            <button type="button" id="webcamCapture" class='btn btn-default'>Capture</button>
+          </section>
+        </div>
+      </div>
+    </div>
+    <canvas id="canvas" width="1280" height="720"></canvas>
+      <script>
+        document.getElementById("webcamRun").addEventListener("click", function() {
+          if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+	          navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
+		          var video = document.getElementById('video');
+		          video.srcObject = stream;
+		          video.play();
+	          });
+          }
+        });
+
+        document.getElementById("webcamStop").addEventListener("click", function() {
+          video.pause();
+        });
+
+        var canvas = document.getElementById('canvas');
+        var context = canvas.getContext('2d');
+        var video = document.getElementById('video');
+        document.getElementById("webcamCapture").addEventListener("click",function() {
+	        context.drawImage(video,0,0,960,720);
+        });
+      </script>
+  </section>
+
+{% endblock %}
diff --git a/src/unluckystrike/projects/views.py b/src/unluckystrike/projects/views.py
index 0503ece..dbc3f6b 100755
--- a/src/unluckystrike/projects/views.py
+++ b/src/unluckystrike/projects/views.py
@@ -21,8 +21,12 @@ def project_detail(request, project):
         return render(request, 'raspberry-pi-lab.html')
     elif project == 'deep-learning-for-advanced-driver-assistance-system-applications':
         return render(request, 'deep-learning-for-advanced-driver-assistance-system-applications.html')
+    elif project == 'open-webcam-test':
+        return render(request, 'open-webcam-test.html')
     elif project == 'lottery':
         return lottery_view(request)
+    elif project == 'exchange-rate':
+        return exchange_rate_view(request)
     else:
         return render(request, '#')
     
@@ -41,4 +45,9 @@ def lottery_view(request):
         "lottery_number": lottery_number,
     }
 
-    return render(request, 'lottery.html', context)
\ No newline at end of file
+    return render(request, 'lottery.html', context)
+
+
+def exchange_rate_view(request):
+
+    return render(request, 'exchange-rate.html')
\ No newline at end of file