diff --git a/campics_/content/migrations/0009_feed_created_at.py b/campics_/content/migrations/0009_feed_created_at.py
new file mode 100644
index 0000000000000000000000000000000000000000..9bfd650ae4f2eb9c57618285bbb5837e889d2474
--- /dev/null
+++ b/campics_/content/migrations/0009_feed_created_at.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.0.4 on 2022-06-01 06:23
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('content', '0008_auto_20211014_1246'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='feed',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
+            preserve_default=False,
+        ),
+    ]
diff --git a/campics_/content/migrations/0010_feed_univ.py b/campics_/content/migrations/0010_feed_univ.py
new file mode 100644
index 0000000000000000000000000000000000000000..fb3e1b8b73ca771fcdca26443806ac5386c2512d
--- /dev/null
+++ b/campics_/content/migrations/0010_feed_univ.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.0.4 on 2022-06-01 07:43
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('content', '0009_feed_created_at'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='feed',
+            name='univ',
+            field=models.CharField(default=django.utils.timezone.now, max_length=15),
+            preserve_default=False,
+        ),
+    ]
diff --git a/campics_/content/migrations/0011_remove_feed_created_at.py b/campics_/content/migrations/0011_remove_feed_created_at.py
new file mode 100644
index 0000000000000000000000000000000000000000..17f8b920d16d78c2d223c6b19e99253a8da721bf
--- /dev/null
+++ b/campics_/content/migrations/0011_remove_feed_created_at.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.0.4 on 2022-06-01 08:39
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('content', '0010_feed_univ'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='feed',
+            name='created_at',
+        ),
+    ]
diff --git a/campics_/content/migrations/0012_feedview_feed_type_feed_views_and_more.py b/campics_/content/migrations/0012_feedview_feed_type_feed_views_and_more.py
new file mode 100644
index 0000000000000000000000000000000000000000..a1c273128c10f4faea0d391258365088b8c3ab9d
--- /dev/null
+++ b/campics_/content/migrations/0012_feedview_feed_type_feed_views_and_more.py
@@ -0,0 +1,35 @@
+# Generated by Django 4.0.4 on 2022-06-04 03:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('content', '0011_remove_feed_created_at'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='FeedView',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('email', models.EmailField(max_length=100, verbose_name='email')),
+                ('feed_id', models.IntegerField()),
+            ],
+        ),
+        migrations.AddField(
+            model_name='feed',
+            name='type',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='feed',
+            name='views',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddIndex(
+            model_name='feedview',
+            index=models.Index(fields=['email'], name='content_fee_email_a02fc8_idx'),
+        ),
+    ]
diff --git a/campics_/content/models.py b/campics_/content/models.py
index 789c1c388575d31264b757e82539f4730b374328..fad019284df68f737eec213f508c4c289a6a83ff 100644
--- a/campics_/content/models.py
+++ b/campics_/content/models.py
@@ -1,5 +1,5 @@
 from django.db import models
-
+from django.utils import timezone
 
 # Create your models here.
 class Feed(models.Model):
@@ -9,9 +9,22 @@ class Feed(models.Model):
     email = models.EmailField(verbose_name='email', max_length=100, blank=True, null=True)
     user_id = models.CharField(max_length=30, blank=True, null=True)
     like_count = models.IntegerField(default=0)
-    views = models.IntegerField(default=0) #조회수
+    view_count = models.IntegerField(default=0) #조회수
     type = models.BooleanField(default=False) #전경 포토존
-    univ = models.CharField(max_length=30) #대학
+    univ = models.CharField(max_length=15)
+
+class Reply(models.Model):
+    feed_id = models.IntegerField()
+    created_at = models.DateTimeField(auto_now_add=True)
+    user_id = models.CharField(max_length=30, blank=True, null=True)
+    content = models.TextField()
+    email = models.EmailField(verbose_name='email', max_length=100, blank=True, null=True)
+
+    class Meta:
+        indexes = [
+            models.Index(fields=['feed_id'])
+        ]
+
 
 class FeedLike(models.Model):
     feed_id = models.IntegerField()
@@ -24,8 +37,18 @@ class FeedLike(models.Model):
             models.Index(fields=['email']),
         ]
 
-
 class FeedView(models.Model):
+    feed_id = models.IntegerField()
+    email = models.CharField(max_length=30, blank=True, null=True)
+    is_view = models.BooleanField(default=False)
+
+    class Meta:
+        indexes = [
+            models.Index(fields=['feed_id']),
+            models.Index(fields=['email']),
+        ]
+        
+class Bookmark(models.Model):
     email = models.EmailField(verbose_name='email', max_length=100)
     feed_id = models.IntegerField()
 
diff --git a/campics_/content/urls.py b/campics_/content/urls.py
index fdd5cadf17cd010d9e61f35a2e641d02de288519..351165c72c51f72e4c917537be209d2baf415eaa 100644
--- a/campics_/content/urls.py
+++ b/campics_/content/urls.py
@@ -1,11 +1,16 @@
 from django.urls import path
-from .views import UploadFeed, LikeFeed, DeleteFeed, searchUniv, searchUser
+from .views import UploadFeed, CreateReply, LikeFeed, ViewFeed, BookmarkFeed, DeleteFeed, searchUniv, searchUser
 
 
 urlpatterns = [
     path('upload', UploadFeed.as_view(), name='upload_feed'),
     path('delete', DeleteFeed.as_view(), name='delete_feed'),
     path('like', LikeFeed.as_view(), name='like'),
+    path('view', ViewFeed.as_view(), name='view'),
+    path('bookmark', BookmarkFeed.as_view(), name='bookmark'),
+
+    ## 시환님꺼
+    path('delete', DeleteFeed.as_view(), name='delete_feed'),
     path('searchUniv', searchUniv.as_view(), name='seacrh_univ'),
     path('searchUser', searchUser.as_view(), name='search_user'),
 ]
diff --git a/campics_/content/views.py b/campics_/content/views.py
index 39bd045113dfac04347150ec432aa3a6b4dbcdac..74843aea4e8bd2d2a7496d42b1029eaec34176d4 100644
--- a/campics_/content/views.py
+++ b/campics_/content/views.py
@@ -1,6 +1,6 @@
 from django.shortcuts import render
 from rest_framework.views import APIView
-from content.models import Feed, FeedLike, FeedView
+from content.models import Feed, Reply, FeedLike, FeedView, Bookmark
 from rest_framework.response import Response
 from user.models import User, Univ
 from rest_framework.response import Response
@@ -73,6 +73,87 @@ class LikeFeed(APIView):
 
         return Response(status=200, data=dict(message='피드 좋아요 완료.'))
 
+class ViewFeed(APIView):
+    def post(self, request):
+        feed_id = request.data.get('feed_id') #id?
+        email = request.data.get('email')
+        is_view = request.data.get('is_view', 'True')
+
+        if is_view.lower() == 'false':
+            is_view = False
+        else:
+            is_view = True
+        feed_view = FeedView.objects.filter(feed_id=feed_id, email=email).first()
+
+        if feed_view is None:
+            FeedView.objects.create(feed_id=feed_id,
+                                    email=email,
+                                    is_view=is_view,
+                                    )
+        else:
+            feed_view.is_view = is_view
+            feed_view.save()
+
+        return Response(status=200, data=dict(message='피드 조회 완료.'))
+
+class CreateReply(APIView):
+    def post(self, request):
+        feed_id = request.data.get('feed_id')
+        email = request.data.get('email')
+
+        # feed_id = 1
+        # email = "ksshhses@ajou.ac.kr"
+
+        feed = Feed.objects.filter(id=feed_id).first()
+
+        if feed is None:
+            return Response(status=500, data=dict(message='삭제 실패'))
+
+        if feed.email == email:
+            feed.delete()
+            return render(request, "jinstagram/main.html") #프로필페이지
+        else:
+            return Response(status=500, data=dict(message='삭제 실패'))
+
+class searchUniv(APIView):
+    def get(self, request):
+        # search_word = request.data.get('univ')
+        search_word = '대학'
+
+        univ_list = Univ.objects.filter(univ__contains=search_word).values('univ')
+
+        if univ_list.count() == 0:
+            return Response(status=404, data=dict(message='대학이 없습니다.'))
+        else:
+            return Response(status=200, data=dict(univ=univ_list))
+
+class searchUser(APIView):
+    def get(self, request):
+        # search_word = request.data.get('user')
+        search_word = 's1'
+        user_list = Feed.objects.filter(user_id__contains=search_word) # .values() 뭐 필요?
+
+        return Response(status=200, data=dict(message='북마크 설정 완료.'))
+
+## 시환님꺼
+class DetailFeed(APIView):
+    def get(self, request):
+        email = request.session.get('email', None)
+        if email is None:
+            return render(request, 'user/login.html')
+
+        user = User.objects.filter(email=email).first()
+        if user is None:
+            return render(request, 'user/login.html')
+
+        # feed 가지고 오기
+        feed = Feed.objects.get(feed_id=id)
+
+        if feed.email == user.email:
+            return(request, 'deatil_delete.html', feed)
+        else:
+            return(request, 'detail.html', feed)
+
 class DeleteFeed(APIView):
     def post(self, request):
         feed_id = request.data.get('feed_id')
diff --git a/campics_/jinstagram/urls.py b/campics_/jinstagram/urls.py
index cc94fc43daf895f7b955bf4e8e8bb3162ccf892c..55f4a9bbf8d6ff629c98429553274be28aede739 100644
--- a/campics_/jinstagram/urls.py
+++ b/campics_/jinstagram/urls.py
@@ -14,7 +14,7 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.urls import path
-from .views import Main, Profile, Ranking
+from .views import Main, Post, Profile, Ranking
 from django.conf import settings
 from django.conf.urls.static import static
 from django.urls import path, include
@@ -22,6 +22,7 @@ from django.urls import path, include
 
 urlpatterns = [
     path('', Main.as_view(), name='main'),
+    path('post', Post.as_view(), name='post'),
     path('profile', Profile.as_view(), name='profile'),
     path('ranking', Ranking.as_view(), name='ranking'),
     path('user/', include('user.urls')),
diff --git a/campics_/jinstagram/views.py b/campics_/jinstagram/views.py
index 046a52f8780ef6075818199e236b2d9a0b2244a3..dc1d830156053017d761b219f39888696eb3e79a 100644
--- a/campics_/jinstagram/views.py
+++ b/campics_/jinstagram/views.py
@@ -1,11 +1,108 @@
 from django.shortcuts import render
 from rest_framework.views import APIView
-from content.models import Feed, FeedLike, FeedView
-from user.models import User, Univ
+from content.models import Feed, Reply, FeedLike, FeedView, Bookmark
+from user.models import User, Follow, Univ
 from django.db.models import Count, Sum
 
-
 class Main(APIView):
+    def get(self, request):
+        email = request.session.get('email', None)
+        if email is None:
+            return render(request, 'user/login.html')
+
+        user = User.objects.filter(email=email).first()
+        if user is None:
+            return render(request, 'user/login.html')
+
+        feed_object_list = Feed.objects.filter(univ=user.univ).order_by('-id')
+
+        ##### 게시글 정렬 #####
+        order_condition = request.GET.get('order', None)
+
+        if order_condition == 'recent':
+            feed_object_list.order_by('-id')
+
+        if order_condition == 'likesCount':
+            feed_object_list.order_by('-like_count')
+
+        ####################
+
+        row_feed_list = []
+        feed_list = []
+        for feed in feed_object_list:
+            like_count = FeedLike.objects.filter(feed_id=feed.id, is_like=True).count()
+            is_like = FeedLike.objects.filter(feed_id=feed.id, is_like=True, email=email).exists()
+            row_feed_list.append(dict(
+                id=feed.id,
+                user_id=feed.user_id,
+                image=feed.image,
+                like_count=like_count,
+                is_like=is_like,
+            ))
+
+            if len(row_feed_list) == 3:
+                feed_list.append(dict(row_feed_list=row_feed_list))
+                row_feed_list = []
+
+        if len(row_feed_list) > 0:
+            feed_list.append(dict(row_feed_list=row_feed_list))
+
+        return render(request,
+                      'jinstagram/imgboard.html',
+                      context=dict(feed_list=feed_list,
+                                   user=user))
+
+class Post(APIView):
+    def get(self, request):
+        email = request.session.get('email', None)
+        if email is None:
+            return render(request, 'user/login.html')
+
+        user = User.objects.filter(email=email).first()
+        if user is None:
+            return render(request, 'user/login.html')
+
+        id=request.data.get('id')
+        feed = Feed.objects.get(id=id)
+        like_count = FeedLike.objects.filter(feed_id=feed.id, is_like=True).count()
+        feed.like_count=like_count
+        is_like = FeedLike.objects.filter(feed_id=feed.id, is_like=True, email=email).exists()
+        view_count = FeedView.objects.filter(feed_id=feed.id, is_view=True).count()
+        feed.view_count = view_count
+        is_view = FeedView.objects.filter(feed_id=feed.id, is_view=True, email=email).exists()
+        feed.save()
+
+        profile_image = User.objects.filter(email=feed.email).first().thumbnail or 'default_profile.jpg'
+        print(like_count)
+        return render(request,
+                      'jinstagram/post.html',
+                      context=dict(id=feed.id,
+                                   profile_image=profile_image,
+                                   user_id=feed.user_id,
+                                   image=feed.image,
+                                   content=feed.content,
+                                   like_count=like_count,
+                                   is_like=is_like,
+                                   view_count=view_count,
+                                   is_view=is_view
+                                   ))
+
+
+class Ranking(APIView):
+    def get(self, request):
+
+        univ_list = Feed.objects.values('univ')\
+            .annotate(score=Count('univ') + Sum('views') + Sum('like_count'))\
+            .order_by('-score')
+
+        print(univ_list)
+        for i in range(len(univ_list)):
+            print(i, univ_list[i]['univ'])
+        return render(request,
+                      'jinstagram/ranking.html',
+                      context=dict(univ_list=univ_list))
+
+class Detail(APIView):
     def get(self, request):
         email = request.session.get('email', None)
         if email is None:
@@ -32,7 +129,7 @@ class Main(APIView):
             ))
 
         return render(request,
-                      'jinstagram/main.html',
+                      'jinstagram/boarddetail.html',
                       context=dict(feed_list=feed_list,
                                    user=user))
 
diff --git a/campics_/templates/.DS_Store b/campics_/templates/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..dd593c5d56897d4102c20f74dfe1cbb93d7d15a1
Binary files /dev/null and b/campics_/templates/.DS_Store differ
diff --git a/campics_/templates/jinstagram/imgboard.html b/campics_/templates/jinstagram/imgboard.html
index 39851794245dca403b8f4a204ab4825e53b28fc6..dac3326f661cd72a94b9078b62611bf6f1940b4d 100644
--- a/campics_/templates/jinstagram/imgboard.html
+++ b/campics_/templates/jinstagram/imgboard.html
@@ -9,10 +9,241 @@
     <title>포토존</title>
     <link href="{% static '/css/bootstrap.css' %}" rel="stylesheet" >
     <link rel="stylesheet" href="{% static '/bootstrap-icons-1.8.2/bootstrap-icons.css' %}">
-    <script src="{% static '/jquery/jquery.min.js' %}"></script>
+    <!-- <script src="{% static '/jquery/jquery.min.js' %}"></script> -->
     <script src="{% static '/js/bootstrap.min.js' %}"></script>
     
+    <!-- 요기에 구글 머티리얼 아이콘 -->
+    <link
+            href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+            rel="stylesheet">
+
+      <!-- jquery 사용하기 위해 -->
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
+
+  <style>
+      .main_body {
+        display: flex;
+        justify-content: center;
+        padding-top: 50px;
+        background-color: #FAFAFA;
+    }
+
+    .left_body {
+    {#background-color: skyblue;#} margin-right: 100px;
+        width: 600px;
+        height: 2000px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right_body {
+    {#background-color: yellow;#} padding-top: 20px;
+        width: 300px;
+        height: 1000px;
+        left: 72%;
+        position: fixed
+    }
+
+    .feed_box {
+        background-color: white;
+        width: 580px;
+        margin: 10px;
+        min-height: auto;
+        padding-bottom: 10px;
+    }
+
+    .feed_img {
+        width: 100%;
+        object-fit: contain;
+    }
+
+    .feed_content {
+        padding: 0px 10px;
+    }
+
+    .feed_like {
+        padding: 0px 10px;
+    }
+
+    .feed_reply {
+        padding: 0px 10px;
+        display: flex;
+        flex-direction: column;
+    }
+
+
+    .feed_txt {
+        font-size: 14px;
+    }
+
+
+    .feed_icon {
+        padding: 5px 5px 0px 5px;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    span {
+        padding-right: 5px;
+    }
+
+    .feed_name {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+
+    .feed_name_txt {
+        font-size: 14px;
+        padding: 0px 10px;
+        font-weight: bold;
+    }
+
+    .profile_box {
+        width: 40px;
+        height: 40px;
+        border-radius: 70%;
+        overflow: hidden;
+    }
+
+    .profile_img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .name_content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .name_content_txt {
+        font-size: 12px;
+        padding: 0px 10px;
+        font-weight: bold;
+        color: lightgray;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 190px;
+    }
+
+    .big_profile_box {
+        width: 60px;
+        height: 60px;
+        border-radius: 70%;
+        overflow: hidden;
+    }
+
+    .link_txt {
+        font-size: 14px;
+        font-weight: bold;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    .recommend_box {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px;
+        font-size: 14px;
+        font-weight: bold;
+        align-items: center;
+    }
+
+    .comment_box {
+        margin: 40px 0 0 5px;
+        font-size: 12px;
+        font-weight: bold;
+        color: lightgray;
+        display: flex;
+        flex-direction: column;
+    }
+
+    @media screen and (max-width: 1280px) {
+        .right_body {
+            display: none;
+        }
+    }
+
+      .modal_overlay {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          display: none;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background: rgba(0,0,0,0.8);
+          backdrop-filter: blur(1.5px);
+          -webkit-backdrop-filter: blur(1.5px);
+      }
+
+      .modal_window {
+          background: white;
+          backdrop-filter: blur(13.5px);
+          -webkit-backdrop-filter: blur(13.5px);
+          border-radius: 10px;
+          border: 1px solid rgba(255,255,255,0.18);
+          width: 800px;
+          height: 600px;
+          position: relative;
+          padding: 10px;
+      }
+
+      
+      .modal_title{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        font-weight: bold;
+        font-size: 20px;
+    }
+
+    .modal_title_side{
+        flex: 0 0 40px;
+        text-align: center;
+    }
+
+    .modal_image_upload{
+        outline: 2px dashed black ;
+        outline-offset:-10px;
+        text-align: center;
+        transition: all .15s ease-in-out;
+        width:780px;
+        height: 548px;
+    }
+
+    .modal_image_upload_content{
+        outline: 2px dashed black ;
+        outline-offset:-10px;
+        text-align: center;
+        transition: all .15s ease-in-out;
+        width:500px;
+        height: 548px;
+    }
+
+    .modal_image_content{
+        display: flex;
+        flex-direction: row;
+    }
+
+    .modal_content_write{
+        display: flex;
+        flex-direction: column;
+        border-left: 1px solid rgba(0, 0, 0, 0.18);;
+    }
+
+    .feed_content_textarea{
+        resize: none;
+        width: 294px;
+        border: none;
+    }
+  </style>
+
   <body>
     <div class="container">
         <!-- Page Top Start -->
@@ -20,112 +251,37 @@
             <div class="text-bg-primary py-1" >
                 <div class="row align-middle">
                     <div class="col col-2 text-start">
-                        <a href="login.html" class="btn btn-sm fs-4 fw-bold text-light ">
+                        <a href="{% url 'login' %}"  class="btn btn-sm fs-4 fw-bold text-light ">
                             <i class="bi bi-arrow-bar-left fs"></i>
                         </a> 
                     </div>
                     <div class="col col-8 text-center ">
-                        <span class="fs-3 fw-normal align-middle" >아주대학교</span>
+                        <span class="fs-3 fw-normal align-middle" >{{ user.univ }}</span>
                     </div>
                     <div class="col col-2 text-end" >
-                        <a href="#" class="btn btn-sm fs-4 fw-bold text-light ">
+                        <a href="#" class="btn btn-sm fs-4 fw-bold text-light ">    <!-- 정렬 버튼-->
+                            <i class="bi bi-filter fs"></i>
+                        </a>
+                        <a href="#" class="btn btn-sm fs-4 fw-bold text-light ">    <!-- 정렬 버튼-->
                             <i class="bi bi-filter fs"></i>
                         </a>
                     </div>
+                    
                 </div>
             </div>
         </div>
         <!-- Page Top End -->
         <!-- Page Content Start -->  
         <div class="mt-5">
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>  
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
+            {% for feed in feed_list %}
+                <div class="row " style="display: flex; flex-direction: row">
+                    {% for row_feed in feed.row_feed_list %}
+                        <div class="col col-4 g-1">
+                            <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}" width="400px" height="300px">
+                        </div>
+                    {% endfor %}
                 </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-            </div>
-            <div class="row ">
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a>
-                </div>
-                <div class="col col-4 g-1">
-                    
-                </div>
-            </div>
+            {% endfor %}
         </div> 
         
         <!-- Page Content end -->
@@ -134,29 +290,35 @@
             <div class="text-bg-primary py-1" >
                 <div class="row align-middle">
                     <div class="col col-2 text-center">
-                        <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ">
+                        <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ">
                             <i class="bi bi-view-list fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light"  alt="all">
+                        <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light"  alt="all">
                             <i class="bi bi-view-stacked fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="ranking.html" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking">
+                        <a href="{% url 'ranking' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking">
                             <i class="bi bi-list-ol fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light " alt="my list">
+                        <a href="{% url 'profile' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="my list">
                             <i class="bi bi-tags fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="add.html" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
+                        <!-- <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light" alt="등록">
                             <i class="bi bi-plus-circle fs"></i>
-                        </a>
+                        </span> -->
+                        <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
+                            <i class="bi bi-plus-circle fs"></i>
+                        </span>
+                        <!-- <a href="add.html" id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
+                            <i class="bi bi-plus-circle fs"></i>
+                        </a> -->
                     </div>
                     <div class="col col-2 text-center">
                         <a href="univserach.html" class="btn btn-sm fs-3 fw-bold text-light " alt="대학검색">
@@ -168,5 +330,209 @@
         </div>
         <!-- Page bottom End -->
     </div>
+
+    <div id="modal_add_feed" class="modal_overlay">
+        <div class="modal_window">
+            <div class="modal_title">
+                <div class="modal_title_side"></div>
+                <div> 새 게시물 </div>
+                <div class="modal_title_side">
+                    <span id="close_modal" class="material-icons-outlined">
+                        close
+                    </span>
+                    
+                </div>
+            </div>
+
+            <div class="modal_image_upload">
+                <span style="text-align: center"></span>
+            </div>
+        </div>        
+    </div>
+
+    
+    <div id="modal_add_feed_content" class="modal modal_overlay_content">
+        <div class="modal_window">
+            <div class="modal_title">
+                <div class="modal_title_side"></div>
+                <div style="margin: 5px"> 새 게시물</div>
+                <div class="modal_title_side">
+                    <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px">
+                        close
+                    </span>
+                </div>
+            </div>
+            <div class="modal_image_content">
+                <div id="input_image" class="modal_image_upload_content">
+    
+                </div>
+                <div class="modal_content_write">
+                    <div class="feed_name">
+                        <div class="profile_box">
+                            <img id="input_profile_image" class="profile_img"
+                                 src="{% get_media_prefix %}{{ user.thumbnail }}">
+                        </div>
+                        <span id="input_user_id" class="feed_name_txt"> {{ user.user_id }} </span>
+                        <span id="input_email" style="display: none"> {{ user.email }} </span>
+                    </div>
+                    <div style="height: 440px">
+                        <textarea id="input_content" class="feed_content_textarea form-control col-sm-5" rows="10"
+                                  placeholder="설명을 입력하세요..."></textarea>
+                    </div>
+                    <div style="width: 100%; text-align: center">
+                        <button id="button_write_feed" type="button" class="btn btn-primary" style="width: 268px"> 공유하기
+                        </button>
+                    </div>
+                </div>
+            </div>
+    
+        </div>
+    </div>
+
+
+
+    <!-- Optional JavaScript; choose one of the two! -->
+<script>
+    // 모달 띄우기 코드
+    const modal = document.getElementById("modal_add_feed");
+    const buttonAddFeed = document.getElementById("add_feed");
+    buttonAddFeed.addEventListener("click", e => {
+        modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌
+        modal.style.display = "flex";
+    });
+
+    // 모달 닫기 코드
+    const buttonCloseModal = document.getElementById("close_modal");
+    buttonCloseModal.addEventListener("click", e => {
+        modal.style.display = "none";
+    });
+
+    $('.close_modal').on("click", () => {
+        closeModal();
+    });
+
+    $('.go_home').on("click", () => {
+        location.replace('/');
+    });
+
+    function closeModal() {
+        $('.modal').css({
+            display: 'none'
+        });
+    };
+
+    $('.modal_image_upload')
+        .on("dragover", dragOver)
+        .on("dragleave", dragOver)
+        .on("drop", uploadFiles);
+
+    function dragOver(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (e.type == "dragover") {
+            $(e.target).css({
+                "background-color": "black",
+                "outline-offset": "-20px"
+            });
+        } else {
+            $(e.target).css({
+                "background-color": "white",
+                "outline-offset": "-10px"
+            });
+        }
+    };
+
+    let files;
+
+    function uploadFiles(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        console.log(e.dataTransfer)
+        console.log(e.originalEvent.dataTransfer)
+
+        e.dataTransfer = e.originalEvent.dataTransfer;
+
+        files = e.dataTransfer.files;
+        if (files.length > 1) {
+            alert('하나만 올려라.');
+            return;
+        }
+
+        if (files[0].type.match(/image.*/)) {
+            $('#modal_add_feed_content').css({
+                display: 'flex'
+            });
+            $('.modal_image_upload_content').css({
+                "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
+                "outline": "none",
+                "background-size": "contain",
+                "background-repeat": "no-repeat",
+                "background-position": "center"
+            });
+            $('#modal_add_feed').css({
+                display: 'none'
+            })
+        } else {
+            alert('이미지가 아닙니다.');
+            return;
+        }
+    };
+
+    $('#button_write_feed').on('click', () => {
+        const image = $('#input_image').css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
+        const content = $('#input_content').val();
+        const profile_image = $('#input_profile_image').attr('src');
+        const user_id = $.trim($('#input_user_id').text());
+        const email = $.trim($('#input_email').text());
+        const univ = $.trim($('#input_univ').text());
+
+        const file = files[0];
+
+        let fd = new FormData();
+
+        fd.append('file', file);
+        fd.append('image', image);
+        fd.append('content', content);
+        fd.append('profile_image', profile_image);
+        fd.append('user_id', user_id);
+        fd.append('email', email);
+        fd.append('univ', univ);
+
+        if (image.length <= 0) {
+            alert("이미지가 비어있습니다.");
+        } else if (content.length <= 0) {
+            alert("설명을 입력하세요");
+        } else if (profile_image.length <= 0) {
+            alert("프로필 이미지가 비어있습니다.");
+        } else if (user_id.length <= 0) {
+            alert("사용자 id가 없습니다.");
+        } else {
+            writeFeed(fd);
+            console.log(files[0]);
+        }
+    });
+
+    function writeFeed(fd) {
+        $.ajax({
+            url: "/content/upload",
+            data: fd,
+            method: "POST",
+            processData: false,
+            contentType: false,
+            success: function (data) {
+                console.log("성공");
+            },
+            error: function (request, status, error) {
+                console.log("에러");
+            },
+            complete: function () {
+                console.log("무조건실행");
+                closeModal();
+                location.reload();
+            }
+        })
+    };
+</script>
   </body>
 </html>
\ No newline at end of file
diff --git a/campics_/templates/jinstagram/main.html b/campics_/templates/jinstagram/main.html
index eec4de9f28e3c2c99864cc823168e847bfb25c60..1ded46a727c7a7dbdf076873f8d35e3be8236645 100644
--- a/campics_/templates/jinstagram/main.html
+++ b/campics_/templates/jinstagram/main.html
@@ -535,131 +535,6 @@
         document.body.style.overflowY = "hidden"; // 스크롤 없애기
     });
 
-    <!-- jquery 부분 -->
-    <!-- @@@댓글 달기 -->
-    $('.write_reply').click(function () {
-        console.log($(this).prev().val());
-        console.log($(this).attr('feed_id'));
-        let success = false;
-        let content = $(this).prev().val();
-        let feed_id = Number($(this).attr('feed_id'));
-
-        $.ajax({
-            url: "/content/reply/create",
-            data: {
-                email: '{{ user.email }}',
-                user_id: '{{ user.user_id }}',
-                content: content,
-                feed_id: feed_id
-            },
-            method: "POST",
-            dataType: "json",
-            async: false,
-            success: function (data){
-                alert(data.message);
-                success=true
-            },
-            error:function (request, status, error){
-                let data = JSON.parse(request.responseText);
-                console.log(data.message);
-                alert(data.message);
-            }
-        });
-        console.log(success)
-        if(success == true){
-            $(this).parent().prev().append('<span class="feed_txt"><b> {{ user.user_id }} </b> '+ content +' </span>');
-            $('.write_reply_input').val('');
-        }
-    });
-
-    <!-- @@@좋아요 누르기 -->
-    $('.favorite_icon').click(function () {
-        console.log($(this).prev().val());
-        console.log($(this).attr('feed_id'));
-        let success = false;
-        let icon = $.trim($(this).html());
-        console.log('지금현재 상태 : ' + icon);
-        let is_like = false;
-        if( icon == 'favorite_border'){
-            is_like = true;
-        }
-        let feed_id = Number($(this).attr('feed_id'));
-
-        $.ajax({
-            url: "/content/like",
-            data: {
-                email: '{{ user.email }}',
-                is_like: is_like,
-                feed_id: feed_id
-            },
-            method: "POST",
-            dataType: "json",
-            async: false,
-            success: function (data){
-                success=true
-            },
-            error:function (request, status, error){
-                let data = JSON.parse(request.responseText);
-                console.log(data.message);
-            }
-        });
-        console.log(success)
-        if(success == true){
-            console.log(is_like)
-            if(is_like){
-                $(this).html('favorite');
-                let like_count_object = $(this).parent().parent().next().find('p').find('span');
-                let like_count = Number(like_count_object.html());
-                like_count_object.html(like_count + 1);
-                console.log(like_count);
-            }else{
-                $(this).html('favorite_border');
-                let like_count_object = $(this).parent().parent().next().find('p').find('span');
-                let like_count = Number(like_count_object.html());
-                like_count_object.html(like_count - 1);
-                console.log(like_count);
-            }
-        }
-    });
-
-    <!-- @@@북마크 누르기 -->
-    $('.bookmark_icon').click(function () {
-        let success = false;
-        let icon = $.trim($(this).html());
-        let is_bookmarked = false;
-        if( icon == 'turned_in_not'){
-            is_bookmarked = true;
-        }
-        let feed_id = Number($(this).attr('feed_id'));
-
-        $.ajax({
-            url: "/content/bookmark",
-            data: {
-                email: '{{ user.email }}',
-                is_bookmarked: is_bookmarked,
-                feed_id: feed_id
-            },
-            method: "POST",
-            dataType: "json",
-            async: false,
-            success: function (data){
-                success=true
-            },
-            error:function (request, status, error){
-                let data = JSON.parse(request.responseText);
-            }
-        });
-        if(success == true){
-            if(is_bookmarked){
-                $(this).html('turned_in');
-            }else{
-                $(this).html('turned_in_not');
-            }
-        }
-    });
-
-
-
     $('.close_modal').on("click", () => {
         closeModal();
     });
@@ -741,6 +616,7 @@
         const profile_image = $('#input_profile_image').attr('src');
         const user_id = $.trim($('#input_user_id').text());
         const email = $.trim($('#input_email').text());
+        const univ = $.trim($('#input_univ').text());
 
         const file = files[0];
 
@@ -752,6 +628,7 @@
         fd.append('profile_image', profile_image);
         fd.append('user_id', user_id);
         fd.append('email', email);
+        fd.append('univ', univ);
 
         if (image.length <= 0) {
             alert("이미지가 비어있습니다.");
diff --git a/campics_/templates/jinstagram/profile copy.html b/campics_/templates/jinstagram/profile copy.html
new file mode 100644
index 0000000000000000000000000000000000000000..66cda95b04fad2c8955bd5107451b066ed4c621f
--- /dev/null
+++ b/campics_/templates/jinstagram/profile copy.html	
@@ -0,0 +1,651 @@
+<!doctype html>
+<html lang="en">
+<head>
+    {% load static %}
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+
+    <!-- 요기에 구글 머티리얼 아이콘 -->
+    <link
+            href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+            rel="stylesheet">
+
+    <!-- jquery 사용하기 위해 -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+
+    <title>여기에 진스타그램 만들꺼임 </title>
+</head>
+
+<style>
+    .main_body {
+        display: flex;
+        justify-content: center;
+        padding-top: 50px;
+        z-index: 1;
+        background-color: #FAFAFA;
+    }
+    .sub_body{
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        min-width: 780px;
+    }
+
+    span {
+        padding-right: 5px;
+    }
+
+    .feed_name {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+
+    .row_feed {
+        width: 240px;
+        height: 240px;
+        object-fit: cover;
+        margin: 10px;
+    }
+
+    .feed_name_txt {
+        font-size: 14px;
+        padding: 0px 10px;
+        font-weight: bold;
+    }
+
+    .profile_box {
+        width: 40px;
+        height: 40px;
+        border-radius: 70%;
+        overflow: hidden;
+    }
+
+    .navi_profile_box {
+        width: 30px;
+        height: 30px;
+        border-radius: 70%;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    .profile_img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .modal {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.8);
+        backdrop-filter: blur(1.5px);
+        -webkit-backdrop-filter: blur(1.5px);
+    }
+
+    .modal_window {
+        background: white;
+        backdrop-filter: blur(13.5px);
+        -webkit-backdrop-filter: blur(13.5px);
+        border-radius: 10px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        width: 800px;
+        height: 600px;
+        position: relative;
+    }
+
+    .modal_title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        font-weight: bold;
+        font-size: 20px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+    }
+
+    .modal_title_side {
+        margin: 5px;
+        flex: 0 0 40px;
+        text-align: center;
+    }
+
+    .modal_image_upload {
+        outline: 2px dashed black;
+        outline-offset: -10px;
+        transition: all .15s ease-in-out;
+        width: 798px;
+        height: 548px;
+        text-align: center;
+        line-height: 548px;
+    }
+
+    .modal_image_upload_content {
+        outline: 2px dashed black;
+        outline-offset: -10px;
+        text-align: center;
+        transition: all .15s ease-in-out;
+        width: 500px;
+        height: 548px;
+    }
+
+    .modal_image_content {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .modal_content_write {
+        display: flex;
+        flex-direction: column;
+        border-left: 1px solid rgba(0, 0, 0, 0.18);;
+    }
+
+    .feed_content_textarea {
+        resize: none;
+        width: 294px;
+        border: none;
+    }
+
+    .navi_icons {
+        padding-right: 18px;
+        font-size: 28px;
+        cursor: pointer;
+    }
+
+    .big_profile_box {
+        width: 150px;
+        height: 150px;
+        border-radius: 70%;
+        overflow: hidden;
+        margin: 30px;
+    }
+
+</style>
+
+<body>
+
+<div style="min-width: 1024px">
+    <!-- 상단 내비게이션 바 -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom"
+         style="width: 100%;height: 50px;position: fixed;z-index: 9999">
+        <div class="container" style="min-width: 800px">
+            <img class="go_home" style="height: 30px; object-fit: contain;cursor: pointer"
+                 src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
+            <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
+            <div style="display: flex; flex-direction: row; align-items: center; ">
+                <span class="material-icons navi_icons go_home">home</span>
+                <span id="add_feed" class="material-icons-outlined navi_icons">add_box</span>
+                <span class="material-icons-outlined navi_icons">explore</span>
+                <span class="material-icons-outlined navi_icons ">
+                    favorite_border
+                </span>
+                <div class="dropdown" style="position: relative; z-index: 9999">
+                    <div class="navi_profile_box" id="dropdownMenuButton1"
+                         data-bs-toggle="dropdown" aria-expanded="false">
+                        <img class="profile_img"
+                             src="{% get_media_prefix %}{{ user.thumbnail }}">
+                    </div>
+
+                    <ul class="dropdown-menu" style="left: -130px" aria-labelledby="dropdownMenuButton1">
+                        <li><a class="dropdown-item" href="#">프로필</a></li>
+                        <li><a class="dropdown-item" href="#">저장됨</a></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li><a class="dropdown-item" href="{% url 'logout' %}">로그아웃</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 바디 영역 -->
+    <div class="main_body">
+        <div class="sub_body">
+            <!-- 프로필 영역 -->
+            <div style="display: flex; flex-direction: row">
+                <div class="big_profile_box">
+                    <img class="profile_img"
+                         src="{% get_media_prefix %}{{ user.thumbnail }}">
+                </div>
+                <div style="display: flex; flex-direction: column; margin: 40px 60px">
+                    <div class="mb-3" style="display: flex; flex-direction: row;">
+                        <div style="font-size: 24px"> {{ user.user_id }} </div>
+                        <div>
+                            <button id="button_write_feed" type="button"
+                                    style="margin-left: 10px;font-size: 14px;width: 120px; border: 1px solid silver; background-color: transparent" onclick="ajaxFileUpload()">
+                                프로필사진 변경
+                            </button>
+                            <input id="ajaxFile" type="file" onchange="ajaxFileChange()" name="profile" style="display: none">
+                        </div>
+                    </div>
+                    <div class="mb-3" style="display: flex; flex-direction: row; margin-right: 100px">
+                        <div style="margin-right: 30px;"> 게시물 <span style="font-weight: bold"> {{ feed_count }} </span></div>
+                        <div style="margin-right: 30px"> 팔로워 <span style="font-weight: bold"> {{ follower_count }} </span></div>
+                        <div style="margin-right: 30px"> 팔로우 <span style="font-weight: bold"> {{ following_count }} </span></div>
+                    </div>
+                    <div style="display: flex; flex-direction: row">
+                        <div style="font-size: 18px;font-weight: bold"> {{ user.name }} </div>
+                    </div>
+
+                </div>
+            </div>
+            <!-- 중앙 메뉴 -->
+            <div style="font-size: 14px;padding: 0 140px;border-top: 1px solid silver; display: flex;width: 100%; flex-direction: row; justify-content: space-evenly">
+                <div target_id="menu_feed" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px; border-top: 1px solid gray;font-weight: bold"> <span class="material-icons-outlined" style="font-size: 16px">
+grid_on
+</span> 게시물 </div>
+                <div target_id="menu_bookmark" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px">
+bookmark_border
+</span> 저장됨 </div>
+                <div target_id="menu_taged" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px">
+assignment_ind
+</span>태그됨 </div>
+            </div>
+            <!-- 하단 컨텐츠 -->
+            <div id="menu_feed" class="menu_content_box" style="display: flex; flex-direction: column">
+                {% for feed in feed_list %}
+                    <div style="display: flex; flex-direction: row">
+                        {% for row_feed in feed.row_feed_list %}
+                            <div>
+                                <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}" >
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
+            <div id="menu_bookmark" class="menu_content_box" style="display: none; flex-direction: column">
+                {% for feed in bookmark_feed_list %}
+                    <div style="display: flex; flex-direction: row">
+                        {% for row_feed in feed.row_bookmark_feed_list %}
+                            <div>
+                                <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}">
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
+            <div id="menu_taged" class="menu_content_box" style="display: none; flex-direction: column">
+                {% for feed in feed_list %}
+                    <div style="display: flex; flex-direction: row">
+                        {% for row_feed in feed.row_feed_list %}
+                            <div>
+                                <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}">
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+
+    </div>
+
+
+</div>
+<div id="modal_add_feed" class="modal modal_overlay">
+    <div class="modal_window">
+        <div class="modal_title">
+            <div class="modal_title_side"></div>
+            <div> 새 게시물</div>
+            <div class="modal_title_side">
+                <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px">
+                    close
+                </span>
+            </div>
+        </div>
+        <div class="modal_image_upload">
+            <span style="text-align: center"> 사진을 여기에 끌어다 놓으세요. </span>
+
+        </div>
+    </div>
+</div>
+
+<div id="modal_add_feed_content" class="modal modal_overlay_content">
+    <div class="modal_window">
+        <div class="modal_title">
+            <div class="modal_title_side"></div>
+            <div style="margin: 5px"> 새 게시물</div>
+            <div class="modal_title_side">
+                <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px">
+                    close
+                </span>
+            </div>
+        </div>
+        <div class="modal_image_content">
+            <div id="input_image" class="modal_image_upload_content">
+
+            </div>
+            <div class="modal_content_write">
+                <div class="feed_name">
+                    <div class="profile_box">
+                        <img id="input_profile_image" class="profile_img"
+                             src="{% get_media_prefix %}{{ user.thumbnail }}">
+                    </div>
+                    <span id="input_user_id" class="feed_name_txt"> {{ user.user_id }} </span>
+                    <span id="input_email" style="display: none"> {{ user.email }} </span>
+                </div>
+                <div style="height: 440px">
+                    <textarea id="input_content" class="feed_content_textarea form-control col-sm-5" rows="10"
+                              placeholder="설명을 입력하세요..."></textarea>
+                </div>
+                <div style="width: 100%; text-align: center">
+                    <button id="button_write_feed" type="button" class="btn btn-primary" style="width: 268px"> 공유하기
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<!-- Optional JavaScript; choose one of the two! -->
+<script>
+    // 모달 띄우기 코드
+    const modal = document.getElementById("modal_add_feed");
+    const buttonAddFeed = document.getElementById("add_feed");
+    buttonAddFeed.addEventListener("click", e => {
+        modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌
+        modal.style.display = "flex";
+        document.body.style.overflowY = "hidden"; // 스크롤 없애기
+    });
+
+    <!-- jquery 부분 -->
+    <!-- @@@댓글 달기 -->
+    $('.write_reply').click(function () {
+        console.log($(this).prev().val());
+        console.log($(this).attr('feed_id'));
+        let success = false;
+        let content = $(this).prev().val();
+        let feed_id = Number($(this).attr('feed_id'));
+
+        $.ajax({
+            url: "/content/reply/create",
+            data: {
+                email: '{{ user.email }}',
+                user_id: '{{ user.user_id }}',
+                content: content,
+                feed_id: feed_id
+            },
+            method: "POST",
+            dataType: "json",
+            async: false,
+            success: function (data) {
+                alert(data.message);
+                success = true
+            },
+            error: function (request, status, error) {
+                let data = JSON.parse(request.responseText);
+                console.log(data.message);
+                alert(data.message);
+            }
+        });
+        console.log(success)
+        if (success == true) {
+            $(this).parent().prev().append('<span class="feed_txt"><b> {{ user.user_id }} </b> ' + content + ' </span>');
+        }
+    });
+
+    <!-- @@@좋아요 누르기 -->
+    $('.favorite_icon').click(function () {
+        console.log($(this).prev().val());
+        console.log($(this).attr('feed_id'));
+        let success = false;
+        let icon = $.trim($(this).html());
+        console.log('지금현재 상태 : ' + icon);
+        let is_like = false;
+        if (icon == 'favorite_border') {
+            is_like = true;
+        }
+        let feed_id = Number($(this).attr('feed_id'));
+
+        $.ajax({
+            url: "/content/like",
+            data: {
+                email: '{{ user.email }}',
+                is_like: is_like,
+                feed_id: feed_id
+            },
+            method: "POST",
+            dataType: "json",
+            async: false,
+            success: function (data) {
+                alert(data.message);
+                success = true
+            },
+            error: function (request, status, error) {
+                let data = JSON.parse(request.responseText);
+                console.log(data.message);
+                alert(data.message);
+            }
+        });
+        console.log(success)
+        if (success == true) {
+            console.log(is_like)
+            if (is_like) {
+                $(this).html('favorite');
+                let like_count_object = $(this).parent().parent().next().find('p').find('span');
+                let like_count = Number(like_count_object.html());
+                like_count_object.html(like_count + 1);
+                console.log(like_count);
+            } else {
+                $(this).html('favorite_border');
+                let like_count_object = $(this).parent().parent().next().find('p').find('span');
+                let like_count = Number(like_count_object.html());
+                like_count_object.html(like_count - 1);
+                console.log(like_count);
+            }
+        }
+    });
+
+
+    $('.close_modal').on("click", () => {
+        closeModal();
+    });
+
+    function closeModal() {
+        $('.modal').css({
+            display: 'none'
+        });
+        $(document.body).css({
+            overflowY: 'visible'
+        });
+    };
+
+    $('.modal_image_upload')
+        .on("dragover", dragOver)
+        .on("dragleave", dragOver)
+        .on("drop", uploadFiles);
+
+    function dragOver(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (e.type == "dragover") {
+            $(e.target).css({
+                "background-color": "black",
+                "outline-offset": "-20px"
+            });
+        } else {
+            $(e.target).css({
+                "background-color": "white",
+                "outline-offset": "-10px"
+            });
+        }
+    };
+
+    let files;
+
+    function uploadFiles(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        console.log(e.dataTransfer)
+        console.log(e.originalEvent.dataTransfer)
+
+        e.dataTransfer = e.originalEvent.dataTransfer;
+
+        files = e.dataTransfer.files;
+        if (files.length > 1) {
+            alert('하나만 올려라.');
+            return;
+        }
+
+        if (files[0].type.match(/image.*/)) {
+            $('#modal_add_feed_content').css({
+                display: 'flex'
+            });
+            $('.modal_image_upload_content').css({
+                "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
+                "outline": "none",
+                "background-size": "contain",
+                "background-repeat": "no-repeat",
+                "background-position": "center"
+            });
+            $('#modal_add_feed').css({
+                display: 'none'
+            })
+        } else {
+            alert('이미지가 아닙니다.');
+            return;
+        }
+    };
+
+    $('#button_write_feed').on('click', () => {
+        const image = $('#input_image').css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
+        const content = $('#input_content').val();
+        const profile_image = $('#input_profile_image').attr('src');
+        const user_id = $('#input_user_id').text();
+        const email = $('#input_email').text();
+
+        const file = files[0];
+
+        let fd = new FormData();
+
+        fd.append('file', file);
+        fd.append('image', image);
+        fd.append('content', content);
+        fd.append('profile_image', profile_image);
+        fd.append('user_id', user_id);
+        fd.append('email', email);
+
+        if (image.length <= 0) {
+            alert("이미지가 비어있습니다.");
+        } else if (content.length <= 0) {
+            alert("설명을 입력하세요");
+        } else if (profile_image.length <= 0) {
+            alert("프로필 이미지가 비어있습니다.");
+        } else if (user_id.length <= 0) {
+            alert("사용자 id가 없습니다.");
+        } else {
+            writeFeed(fd);
+            console.log(files[0]);
+        }
+    });
+
+    function writeFeed(fd) {
+        $.ajax({
+            url: "/content/upload",
+            data: fd,
+            method: "POST",
+            processData: false,
+            contentType: false,
+            success: function (data) {
+                console.log("성공");
+            },
+            error: function (request, status, error) {
+                console.log("에러");
+            },
+            complete: function () {
+                console.log("무조건실행");
+                closeModal();
+                location.reload();
+            }
+        })
+    };
+
+    $('.menu_content').click(function (event){
+        $('.menu_content').css({
+            'border-top': 'none',
+            'font-weight' : 'lighter'
+        });
+        $(this).css({
+            'border-top' : '1px solid gray',
+            'font-weight' : 'bold'
+        });
+
+        $('.menu_content_box').css({
+            display : 'none'
+        });
+
+        let target_id = $(this).attr('target_id')
+
+        $('#'+target_id).css({
+            display : 'flex'
+        });
+    });
+
+    $('.go_home').on("click", () => {
+        location.replace('/');
+    });
+
+    function ajaxFileUpload() {
+        // 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다.
+        $("#ajaxFile").click();
+    }
+
+    function ajaxFileChange() {
+        // 파일이 선택되면 업로드를 진행한다.
+        ajaxFileTransmit();
+    }
+
+    function ajaxFileTransmit() {
+        var formData = new FormData();
+        formData.append("file", $("#ajaxFile")[0].files[0]);
+
+        $.ajax({
+              url : "{% url 'profile_update' %}"
+            , type : "POST"
+            , processData : false
+            , contentType : false
+            , data : formData
+            , dataType: "json"
+            , success:function(obj) {
+                let uuid = obj.uuid;
+                console.log(uuid);
+                $('.profile_img').attr('src','{% get_media_prefix %}' + uuid);
+                console.log($('.profile_img').attr('src'));
+
+            }
+        });
+    }
+
+
+</script>
+
+
+<!-- Option 1: Bootstrap Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
+        crossorigin="anonymous">
+
+
+</script>
+
+<!-- Option 2: Separate Popper and Bootstrap JS -->
+<!--
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
+-->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/campics_/templates/jinstagram/profile.html b/campics_/templates/jinstagram/profile.html
index 33cf4a58304451170e3d16dedf295d1fd620122a..824231672f3b89d341774dd69bb7750353317e49 100644
--- a/campics_/templates/jinstagram/profile.html
+++ b/campics_/templates/jinstagram/profile.html
@@ -1,651 +1,149 @@
+<!-- static 로딩 -->
+{% load static %}
+
 <!doctype html>
-<html lang="en">
-<head>
-    {% load static %}
-    <!-- Required meta tags -->
+<html lang="ko">
+  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
-
+    <title>포토존</title>
+    <link href="{% static '/css/bootstrap.css' %}" rel="stylesheet" >
+    <link rel="stylesheet" href="{% static '/bootstrap-icons-1.8.2/bootstrap-icons.css' %}">
+    <!-- <script src="{% static '/jquery/jquery.min.js' %}"></script> -->
+    <script src="{% static '/js/bootstrap.min.js' %}"></script>
+    
     <!-- 요기에 구글 머티리얼 아이콘 -->
     <link
             href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
             rel="stylesheet">
 
-    <!-- jquery 사용하기 위해 -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-
-    <title>여기에 진스타그램 만들꺼임 </title>
-</head>
-
-<style>
-    .main_body {
-        display: flex;
-        justify-content: center;
-        padding-top: 50px;
-        z-index: 1;
-        background-color: #FAFAFA;
-    }
-    .sub_body{
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        min-width: 780px;
-    }
-
-    span {
-        padding-right: 5px;
-    }
-
-    .feed_name {
-        padding: 10px;
-        display: flex;
-        align-items: center;
-    }
-
-    .row_feed {
-        width: 240px;
-        height: 240px;
-        object-fit: cover;
-        margin: 10px;
-    }
-
-    .feed_name_txt {
-        font-size: 14px;
-        padding: 0px 10px;
-        font-weight: bold;
-    }
-
-    .profile_box {
-        width: 40px;
-        height: 40px;
-        border-radius: 70%;
-        overflow: hidden;
-    }
-
-    .navi_profile_box {
-        width: 30px;
-        height: 30px;
-        border-radius: 70%;
-        overflow: hidden;
-        cursor: pointer;
-    }
-
-    .profile_img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-
-    .modal {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        display: none;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        background: rgba(0, 0, 0, 0.8);
-        backdrop-filter: blur(1.5px);
-        -webkit-backdrop-filter: blur(1.5px);
-    }
-
-    .modal_window {
-        background: white;
-        backdrop-filter: blur(13.5px);
-        -webkit-backdrop-filter: blur(13.5px);
-        border-radius: 10px;
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        width: 800px;
-        height: 600px;
-        position: relative;
-    }
-
-    .modal_title {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        font-weight: bold;
-        font-size: 20px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.18);
-    }
-
-    .modal_title_side {
-        margin: 5px;
-        flex: 0 0 40px;
-        text-align: center;
-    }
-
-    .modal_image_upload {
-        outline: 2px dashed black;
-        outline-offset: -10px;
-        transition: all .15s ease-in-out;
-        width: 798px;
-        height: 548px;
-        text-align: center;
-        line-height: 548px;
-    }
-
-    .modal_image_upload_content {
-        outline: 2px dashed black;
-        outline-offset: -10px;
-        text-align: center;
-        transition: all .15s ease-in-out;
-        width: 500px;
-        height: 548px;
-    }
-
-    .modal_image_content {
-        display: flex;
-        flex-direction: row;
-    }
-
-    .modal_content_write {
-        display: flex;
-        flex-direction: column;
-        border-left: 1px solid rgba(0, 0, 0, 0.18);;
-    }
-
-    .feed_content_textarea {
-        resize: none;
-        width: 294px;
-        border: none;
-    }
-
-    .navi_icons {
-        padding-right: 18px;
-        font-size: 28px;
-        cursor: pointer;
-    }
-
-    .big_profile_box {
-        width: 150px;
-        height: 150px;
-        border-radius: 70%;
-        overflow: hidden;
-        margin: 30px;
-    }
-
-</style>
-
-<body>
-
-<div style="min-width: 1024px">
-    <!-- 상단 내비게이션 바 -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom"
-         style="width: 100%;height: 50px;position: fixed;z-index: 9999">
-        <div class="container" style="min-width: 800px">
-            <img class="go_home" style="height: 30px; object-fit: contain;cursor: pointer"
-                 src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
-            <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
-            <div style="display: flex; flex-direction: row; align-items: center; ">
-                <span class="material-icons navi_icons go_home">home</span>
-                <span id="add_feed" class="material-icons-outlined navi_icons">add_box</span>
-                <span class="material-icons-outlined navi_icons">explore</span>
-                <span class="material-icons-outlined navi_icons ">
-                    favorite_border
-                </span>
-                <div class="dropdown" style="position: relative; z-index: 9999">
-                    <div class="navi_profile_box" id="dropdownMenuButton1"
-                         data-bs-toggle="dropdown" aria-expanded="false">
-                        <img class="profile_img"
-                             src="{% get_media_prefix %}{{ user.thumbnail }}">
+      <!-- jquery 사용하기 위해 -->
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  </head>
+
+  <body>
+    <div class="container">
+        <!-- Page Top Start -->
+        <div class="fixed-top">
+            <div class="text-bg-primary py-1" >
+                <div class="row align-middle">
+                    <div class="col col-2 text-start">
+                        <a href="{% url 'login' %}"  class="btn btn-sm fs-4 fw-bold text-light ">
+                            <i class="bi bi-arrow-bar-left fs"></i>
+                        </a> 
                     </div>
-
-                    <ul class="dropdown-menu" style="left: -130px" aria-labelledby="dropdownMenuButton1">
-                        <li><a class="dropdown-item" href="#">프로필</a></li>
-                        <li><a class="dropdown-item" href="#">저장됨</a></li>
-                        <li>
-                            <hr class="dropdown-divider">
-                        </li>
-                        <li><a class="dropdown-item" href="{% url 'logout' %}">로그아웃</a></li>
-                    </ul>
+                    <div class="col col-8 text-center ">
+                        <span class="fs-3 fw-normal align-middle" >{{ user.univ }}</span>
+                    </div>
+                    <div class="col col-2 text-end" >
+                        <a href="#" class="btn btn-sm fs-4 fw-bold text-light ">
+                            <i class="bi bi-filter fs"></i>
+                        </a>
+                        <a href="#" class="btn btn-sm fs-4 fw-bold text-light ">
+                            <i class="bi bi-filter fs"></i>
+                        </a>
+                    </div>
+                    
                 </div>
             </div>
         </div>
-    </nav>
-
-    <!-- 바디 영역 -->
-    <div class="main_body">
-        <div class="sub_body">
-            <!-- 프로필 영역 -->
-            <div style="display: flex; flex-direction: row">
-                <div class="big_profile_box">
-                    <img class="profile_img"
-                         src="{% get_media_prefix %}{{ user.thumbnail }}">
-                </div>
-                <div style="display: flex; flex-direction: column; margin: 40px 60px">
-                    <div class="mb-3" style="display: flex; flex-direction: row;">
-                        <div style="font-size: 24px"> {{ user.user_id }} </div>
-                        <div>
-                            <button id="button_write_feed" type="button"
-                                    style="margin-left: 10px;font-size: 14px;width: 120px; border: 1px solid silver; background-color: transparent" onclick="ajaxFileUpload()">
-                                프로필사진 변경
-                            </button>
-                            <input id="ajaxFile" type="file" onchange="ajaxFileChange()" name="profile" style="display: none">
+        <!-- Page Top End -->
+        <!-- Page Content Start -->  
+        <div class="mt-5">
+            {% for feed in feed_list %}
+                <div class="row " style="display: flex; flex-direction: row">
+                    {% for row_feed in feed.row_feed_list %}
+                        <div class="col col-4 g-1">
+                            <a href="boarddetail.html"><img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}" width="400px" height="300px"></a>
                         </div>
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        </div> 
+       
+        
+        <!-- Page Content end -->
+        <!-- Page bottom Start -->
+        <div class="fixed-bottom">
+            <div class="text-bg-primary py-1" >
+                <div class="row align-middle">
+                    <div class="col col-2 text-center">
+                        <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ">
+                            <i class="bi bi-view-list fs"></i>
+                        </a>
                     </div>
-                    <div class="mb-3" style="display: flex; flex-direction: row; margin-right: 100px">
-                        <div style="margin-right: 30px;"> 게시물 <span style="font-weight: bold"> {{ feed_count }} </span></div>
-                        <div style="margin-right: 30px"> 팔로워 <span style="font-weight: bold"> {{ follower_count }} </span></div>
-                        <div style="margin-right: 30px"> 팔로우 <span style="font-weight: bold"> {{ following_count }} </span></div>
-                    </div>
-                    <div style="display: flex; flex-direction: row">
-                        <div style="font-size: 18px;font-weight: bold"> {{ user.name }} </div>
+                    <div class="col col-2 text-center">
+                        <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light"  alt="all">
+                            <i class="bi bi-view-stacked fs"></i>
+                        </a>
                     </div>
-
-                </div>
-            </div>
-            <!-- 중앙 메뉴 -->
-            <div style="font-size: 14px;padding: 0 140px;border-top: 1px solid silver; display: flex;width: 100%; flex-direction: row; justify-content: space-evenly">
-                <div target_id="menu_feed" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px; border-top: 1px solid gray;font-weight: bold"> <span class="material-icons-outlined" style="font-size: 16px">
-grid_on
-</span> 게시물 </div>
-                <div target_id="menu_bookmark" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px">
-bookmark_border
-</span> 저장됨 </div>
-                <div target_id="menu_taged" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px">
-assignment_ind
-</span>태그됨 </div>
-            </div>
-            <!-- 하단 컨텐츠 -->
-            <div id="menu_feed" class="menu_content_box" style="display: flex; flex-direction: column">
-                {% for feed in feed_list %}
-                    <div style="display: flex; flex-direction: row">
-                        {% for row_feed in feed.row_feed_list %}
-                            <div>
-                                <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}">
-                            </div>
-                        {% endfor %}
+                    <div class="col col-2 text-center">
+                        <a href="{% url 'ranking' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking">
+                            <i class="bi bi-list-ol fs"></i>
+                        </a>
                     </div>
-                {% endfor %}
-            </div>
-            <div id="menu_bookmark" class="menu_content_box" style="display: none; flex-direction: column">
-                {% for feed in bookmark_feed_list %}
-                    <div style="display: flex; flex-direction: row">
-                        {% for row_feed in feed.row_bookmark_feed_list %}
-                            <div>
-                                <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}">
-                            </div>
-                        {% endfor %}
+                    <div class="col col-2 text-center">
+                        <a href="{% url 'profile' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="my list">
+                            <i class="bi bi-tags fs"></i>
+                        </a>
                     </div>
-                {% endfor %}
-            </div>
-            <div id="menu_taged" class="menu_content_box" style="display: none; flex-direction: column">
-                {% for feed in feed_list %}
-                    <div style="display: flex; flex-direction: row">
-                        {% for row_feed in feed.row_feed_list %}
-                            <div>
-                                <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}">
-                            </div>
-                        {% endfor %}
+                    <div class="col col-2 text-center">
+                        <!-- <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light" alt="등록">
+                            <i class="bi bi-plus-circle fs"></i>
+                        </span> -->
+                        <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
+                            <i class="bi bi-plus-circle fs"></i>
+                        </span>
+                        <!-- <a href="add.html" id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
+                            <i class="bi bi-plus-circle fs"></i>
+                        </a> -->
                     </div>
-                {% endfor %}
-            </div>
-        </div>
-
-    </div>
-
-
-</div>
-<div id="modal_add_feed" class="modal modal_overlay">
-    <div class="modal_window">
-        <div class="modal_title">
-            <div class="modal_title_side"></div>
-            <div> 새 게시물</div>
-            <div class="modal_title_side">
-                <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px">
-                    close
-                </span>
-            </div>
-        </div>
-        <div class="modal_image_upload">
-            <span style="text-align: center"> 사진을 여기에 끌어다 놓으세요. </span>
-
-        </div>
-    </div>
-</div>
-
-<div id="modal_add_feed_content" class="modal modal_overlay_content">
-    <div class="modal_window">
-        <div class="modal_title">
-            <div class="modal_title_side"></div>
-            <div style="margin: 5px"> 새 게시물</div>
-            <div class="modal_title_side">
-                <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px">
-                    close
-                </span>
-            </div>
-        </div>
-        <div class="modal_image_content">
-            <div id="input_image" class="modal_image_upload_content">
-
-            </div>
-            <div class="modal_content_write">
-                <div class="feed_name">
-                    <div class="profile_box">
-                        <img id="input_profile_image" class="profile_img"
-                             src="{% get_media_prefix %}{{ user.thumbnail }}">
+                    <div class="col col-2 text-center">
+                        <a href="univserach.html" class="btn btn-sm fs-3 fw-bold text-light " alt="대학검색">
+                            <i class="bi bi-search fs"></i>
+                        </a>
                     </div>
-                    <span id="input_user_id" class="feed_name_txt"> {{ user.user_id }} </span>
-                    <span id="input_email" style="display: none"> {{ user.email }} </span>
-                </div>
-                <div style="height: 440px">
-                    <textarea id="input_content" class="feed_content_textarea form-control col-sm-5" rows="10"
-                              placeholder="설명을 입력하세요..."></textarea>
-                </div>
-                <div style="width: 100%; text-align: center">
-                    <button id="button_write_feed" type="button" class="btn btn-primary" style="width: 268px"> 공유하기
-                    </button>
                 </div>
             </div>
         </div>
-
+        <!-- Page bottom End -->
     </div>
-</div>
 
-<!-- Optional JavaScript; choose one of the two! -->
-<script>
-    // 모달 띄우기 코드
-    const modal = document.getElementById("modal_add_feed");
-    const buttonAddFeed = document.getElementById("add_feed");
-    buttonAddFeed.addEventListener("click", e => {
-        modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌
-        modal.style.display = "flex";
-        document.body.style.overflowY = "hidden"; // 스크롤 없애기
-    });
-
-    <!-- jquery 부분 -->
-    <!-- @@@댓글 달기 -->
-    $('.write_reply').click(function () {
-        console.log($(this).prev().val());
-        console.log($(this).attr('feed_id'));
-        let success = false;
-        let content = $(this).prev().val();
-        let feed_id = Number($(this).attr('feed_id'));
-
-        $.ajax({
-            url: "/content/reply/create",
-            data: {
-                email: '{{ user.email }}',
-                user_id: '{{ user.user_id }}',
-                content: content,
-                feed_id: feed_id
-            },
-            method: "POST",
-            dataType: "json",
-            async: false,
-            success: function (data) {
-                alert(data.message);
-                success = true
-            },
-            error: function (request, status, error) {
-                let data = JSON.parse(request.responseText);
-                console.log(data.message);
-                alert(data.message);
-            }
-        });
-        console.log(success)
-        if (success == true) {
-            $(this).parent().prev().append('<span class="feed_txt"><b> {{ user.user_id }} </b> ' + content + ' </span>');
-        }
-    });
+    
+    
 
-    <!-- @@@좋아요 누르기 -->
-    $('.favorite_icon').click(function () {
-        console.log($(this).prev().val());
-        console.log($(this).attr('feed_id'));
-        let success = false;
-        let icon = $.trim($(this).html());
-        console.log('지금현재 상태 : ' + icon);
-        let is_like = false;
-        if (icon == 'favorite_border') {
-            is_like = true;
-        }
-        let feed_id = Number($(this).attr('feed_id'));
+<script>
+    // 상세페이지 이동 코드
+    $('#button_join').on('click',()=>{
+        console.log('클릭했다.');
+        let user_id = $('#user_id').val();
+        let password = $('#password').val();
+        let nickname = $('#nicknickname').val();
+        let univname = $('#univname').val();
+        
+        console.log('아이디 :' + user_id + ', 비밀번호 :'  + password + ', 닉네임 :'  +  nickname + ', 학교이름 :'  +  univname);
 
         $.ajax({
-            url: "/content/like",
+            url: "/user/join",
             data: {
-                email: '{{ user.email }}',
-                is_like: is_like,
-                feed_id: feed_id
+                user_id: user_id,
+                password: password,
+                nickname: nickname,
+                univname: univname
             },
             method: "POST",
             dataType: "json",
-            async: false,
-            success: function (data) {
-                alert(data.message);
-                success = true
+            success: function (data){
+                alert(data.message); 
+                location.replace("{% url 'login'%}");
             },
-            error: function (request, status, error) {
+            error:function (request, status, error){
                 let data = JSON.parse(request.responseText);
                 console.log(data.message);
                 alert(data.message);
             }
         });
-        console.log(success)
-        if (success == true) {
-            console.log(is_like)
-            if (is_like) {
-                $(this).html('favorite');
-                let like_count_object = $(this).parent().parent().next().find('p').find('span');
-                let like_count = Number(like_count_object.html());
-                like_count_object.html(like_count + 1);
-                console.log(like_count);
-            } else {
-                $(this).html('favorite_border');
-                let like_count_object = $(this).parent().parent().next().find('p').find('span');
-                let like_count = Number(like_count_object.html());
-                like_count_object.html(like_count - 1);
-                console.log(like_count);
-            }
-        }
-    });
-
-
-    $('.close_modal').on("click", () => {
-        closeModal();
-    });
-
-    function closeModal() {
-        $('.modal').css({
-            display: 'none'
-        });
-        $(document.body).css({
-            overflowY: 'visible'
-        });
-    };
-
-    $('.modal_image_upload')
-        .on("dragover", dragOver)
-        .on("dragleave", dragOver)
-        .on("drop", uploadFiles);
-
-    function dragOver(e) {
-        e.stopPropagation();
-        e.preventDefault();
-
-        if (e.type == "dragover") {
-            $(e.target).css({
-                "background-color": "black",
-                "outline-offset": "-20px"
-            });
-        } else {
-            $(e.target).css({
-                "background-color": "white",
-                "outline-offset": "-10px"
-            });
-        }
-    };
-
-    let files;
-
-    function uploadFiles(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        console.log(e.dataTransfer)
-        console.log(e.originalEvent.dataTransfer)
-
-        e.dataTransfer = e.originalEvent.dataTransfer;
-
-        files = e.dataTransfer.files;
-        if (files.length > 1) {
-            alert('하나만 올려라.');
-            return;
-        }
-
-        if (files[0].type.match(/image.*/)) {
-            $('#modal_add_feed_content').css({
-                display: 'flex'
-            });
-            $('.modal_image_upload_content').css({
-                "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
-                "outline": "none",
-                "background-size": "contain",
-                "background-repeat": "no-repeat",
-                "background-position": "center"
-            });
-            $('#modal_add_feed').css({
-                display: 'none'
-            })
-        } else {
-            alert('이미지가 아닙니다.');
-            return;
-        }
-    };
-
-    $('#button_write_feed').on('click', () => {
-        const image = $('#input_image').css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
-        const content = $('#input_content').val();
-        const profile_image = $('#input_profile_image').attr('src');
-        const user_id = $('#input_user_id').text();
-        const email = $('#input_email').text();
-
-        const file = files[0];
-
-        let fd = new FormData();
-
-        fd.append('file', file);
-        fd.append('image', image);
-        fd.append('content', content);
-        fd.append('profile_image', profile_image);
-        fd.append('user_id', user_id);
-        fd.append('email', email);
-
-        if (image.length <= 0) {
-            alert("이미지가 비어있습니다.");
-        } else if (content.length <= 0) {
-            alert("설명을 입력하세요");
-        } else if (profile_image.length <= 0) {
-            alert("프로필 이미지가 비어있습니다.");
-        } else if (user_id.length <= 0) {
-            alert("사용자 id가 없습니다.");
-        } else {
-            writeFeed(fd);
-            console.log(files[0]);
-        }
-    });
-
-    function writeFeed(fd) {
-        $.ajax({
-            url: "/content/upload",
-            data: fd,
-            method: "POST",
-            processData: false,
-            contentType: false,
-            success: function (data) {
-                console.log("성공");
-            },
-            error: function (request, status, error) {
-                console.log("에러");
-            },
-            complete: function () {
-                console.log("무조건실행");
-                closeModal();
-                location.reload();
-            }
-        })
-    };
-
-    $('.menu_content').click(function (event){
-        $('.menu_content').css({
-            'border-top': 'none',
-            'font-weight' : 'lighter'
-        });
-        $(this).css({
-            'border-top' : '1px solid gray',
-            'font-weight' : 'bold'
-        });
-
-        $('.menu_content_box').css({
-            display : 'none'
-        });
-
-        let target_id = $(this).attr('target_id')
-
-        $('#'+target_id).css({
-            display : 'flex'
-        });
-    });
-
-    $('.go_home').on("click", () => {
-        location.replace('/');
     });
-
-    function ajaxFileUpload() {
-        // 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다.
-        $("#ajaxFile").click();
-    }
-
-    function ajaxFileChange() {
-        // 파일이 선택되면 업로드를 진행한다.
-        ajaxFileTransmit();
-    }
-
-    function ajaxFileTransmit() {
-        var formData = new FormData();
-        formData.append("file", $("#ajaxFile")[0].files[0]);
-
-        $.ajax({
-              url : "{% url 'profile_update' %}"
-            , type : "POST"
-            , processData : false
-            , contentType : false
-            , data : formData
-            , dataType: "json"
-            , success:function(obj) {
-                let uuid = obj.uuid;
-                console.log(uuid);
-                $('.profile_img').attr('src','{% get_media_prefix %}' + uuid);
-                console.log($('.profile_img').attr('src'));
-
-            }
-        });
-    }
-
-
-</script>
-
-
-<!-- Option 1: Bootstrap Bundle with Popper -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
-        crossorigin="anonymous">
-
-
 </script>
-
-<!-- Option 2: Separate Popper and Bootstrap JS -->
-<!--
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
--->
-
-</body>
+  </body>
 </html>
\ No newline at end of file
diff --git a/campics_/templates/jinstagram/ranking.html b/campics_/templates/jinstagram/ranking.html
index fcfbb37b3be3bd67d2482b3c6463f5e3f1b8b439..f05e692c3d5c4f7ad2e495972d992e25a5ef9276 100644
--- a/campics_/templates/jinstagram/ranking.html
+++ b/campics_/templates/jinstagram/ranking.html
@@ -9,8 +9,10 @@
     <title>순위</title>
     <link href="{% static '/css/bootstrap.css' %}" rel="stylesheet" >
     <link rel="stylesheet" href="{% static '/bootstrap-icons-1.8.2/bootstrap-icons.css' %}">
-    <script src="{% static '/jquery/jquery.min.js' %}"></script>
+    <!-- <script src="{% static '/jquery/jquery.min.js' %}"></script> -->
     <script src="{% static '/js/bootstrap.min.js' %}"></script>
+    <!-- jquery 사용하기 위해 -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
   </head>
   <body>
@@ -51,6 +53,7 @@
                     <tbody>
                         {% for univ in univ_list %}
                           <tr>
+                            <td class="align-middle">1</td>  
                             <td class="align-middle">{{univ.univ}}</td>
                             <td class="align-middle">{{univ.score}}</td>
                           </tr>
@@ -65,29 +68,29 @@
             <div class="text-bg-primary py-1" >
                 <div class="row align-middle">
                     <div class="col col-2 text-center">
-                        <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ">
+                        <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ">
                             <i class="bi bi-view-list fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light"  alt="all">
+                        <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light"  alt="all">
                             <i class="bi bi-view-stacked fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="ranking.html" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking">
+                        <a href="{% url 'ranking' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking">
                             <i class="bi bi-list-ol fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light " alt="my list">
+                        <a href="{% url 'profile' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="my list">
                             <i class="bi bi-tags fs"></i>
                         </a>
                     </div>
                     <div class="col col-2 text-center">
-                        <a href="add.html" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
+                        <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록">
                             <i class="bi bi-plus-circle fs"></i>
-                        </a>
+                        </span>
                     </div>
                     <div class="col col-2 text-center">
                         <a href="univserach.html" class="btn btn-sm fs-3 fw-bold text-light " alt="대학검색">
diff --git a/campics_/templates/jinstagram/univserach.html b/campics_/templates/jinstagram/univsearch.html
similarity index 100%
rename from campics_/templates/jinstagram/univserach.html
rename to campics_/templates/jinstagram/univsearch.html
diff --git a/campics_/user/migrations/0007_univ.py b/campics_/user/migrations/0007_univ.py
new file mode 100644
index 0000000000000000000000000000000000000000..9667105e4bd00c15b81463ee2301fd0c1e281bbf
--- /dev/null
+++ b/campics_/user/migrations/0007_univ.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.0.4 on 2022-06-01 02:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('user', '0006_auto_20211014_1134'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Univ',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('univ', models.CharField(max_length=15)),
+            ],
+            options={
+                'db_table': 'univ',
+            },
+        ),
+    ]
diff --git a/campics_/user/migrations/0008_user_univ.py b/campics_/user/migrations/0008_user_univ.py
new file mode 100644
index 0000000000000000000000000000000000000000..b24aa889978061587391fd8abcc313f81d2b9dd3
--- /dev/null
+++ b/campics_/user/migrations/0008_user_univ.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.0.4 on 2022-06-01 07:43
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('user', '0007_univ'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='univ',
+            field=models.CharField(default=django.utils.timezone.now, max_length=15),
+            preserve_default=False,
+        ),
+    ]
diff --git a/campics_/user/models.py b/campics_/user/models.py
index e0a79f1a939ac037edc3b45b808f9d760427403b..8685cf407ada3edf3fe7788d92c2c3f607aad9b8 100644
--- a/campics_/user/models.py
+++ b/campics_/user/models.py
@@ -8,7 +8,7 @@ class User(AbstractBaseUser):
     email = models.EmailField(verbose_name='email', max_length=100, blank=True, null=True, unique=True)
     user_id = models.CharField(max_length=30, blank=True, null=True)
     thumbnail = models.CharField(max_length=256, default='default_profile.jpg', blank=True, null=True)
-    univ = models.CharField(max_length=30)
+    univ = models.CharField(max_length=15)
 
     USERNAME_FIELD = 'id'
     REQUIRED_FIELDS = ['user_id']
@@ -24,5 +24,23 @@ class User(AbstractBaseUser):
         db_table = 'users'
 
 
+class Follow(models.Model):
+    follower = models.EmailField(verbose_name='email', max_length=100)
+    following = models.EmailField(verbose_name='email', max_length=100)
+    is_live = models.BooleanField(default=False)
+
+    class Meta:
+        db_table = 'follow'
+        constraints = [
+            models.UniqueConstraint(fields=['follower', 'following'], name='follower-following')
+        ]
+        indexes = [
+            models.Index(fields=['follower']),
+            models.Index(fields=['following']),
+        ]
+
 class Univ(models.Model):
-    univ = models.CharField(max_length=30)
+    univ = models.CharField(max_length=15)
+
+    class Meta:
+        db_table = 'univ'