[#4] Feat: Merge

app.py

@@ -1,18 +1,135 @@
-from flask import Flask, render_template
+from pymongo import MongoClient
+from flask import Flask, render_template, request, jsonify, redirect, url_for, session
+import hashlib
+import datetime 
+import jwt
 import time
 from pytz import timezone
-from pymongo import MongoClient
-from flask import Flask, render_template, jsonify, request
-from datetime import datetime as dt,timezone, timedelta
 from chatgpt import *
 import bson
-import json
-app = Flask(__name__)
+
 client = MongoClient('localhost', 27017)
 db = client.dbjungle
+
+app = Flask(__name__)
+SECRET_KEY = 'CRAFTON_AEIOU_5TEAM'
+app.secret_key = SECRET_KEY
+
+
 @app.route('/')
 def home():
-   return render_template('index.html')
+    if 'Authorization' in session:
+        token_receive = session['Authorization']
+        try:
+            payload = jwt.decode(token_receive, SECRET_KEY,
+                                 algorithms=['HS256'])
+            user_info = db.user.find_one({"id": payload['id']})
+            return render_template('index.html', isLogin=True, nickname=user_info["nick"])
+        except jwt.ExpiredSignatureError:
+            session.pop('Authorization', None)
+            return render_template('index.html', isLogin=False, alert="로그인 시간이 만료되었습니다. 다시 로그인 해주세요.")
+        except jwt.exceptions.DecodeError:
+            session.pop('Authorization', None)
+            return render_template('index.html', isLogin=False, alert="로그인 정보가 존재하지 않아 로그아웃 되었습니다.")
+    else:
+        return render_template('index.html')
+
+
+@app.route('/join')
+def join():
+    if 'Authorization' in session:
+        token_receive = session['Authorization']
+        try:
+            payload = jwt.decode(token_receive, SECRET_KEY,
+                                 algorithms=['HS256'])
+            user_info = db.user.find_one({"id": payload['id']})
+            return redirect(url_for("home", alert="이미 로그인 된 상태라 홈으로 이동합니다.", isLogin=True, nickname=user_info["nick"]))
+        except jwt.ExpiredSignatureError:
+            session.pop('Authorization', None)
+        except jwt.exceptions.DecodeError:
+            session.pop('Authorization', None)
+    return render_template('join.html')
+
+
+@app.route('/login')
+def login():
+    if 'Authorization' in session:
+        token_receive = session['Authorization']
+        try:
+            payload = jwt.decode(token_receive, SECRET_KEY,
+                                 algorithms=['HS256'])
+            user_info = db.user.find_one({"id": payload['id']})
+            return redirect(url_for("home", alert="이미 로그인 된 상태라 홈으로 이동합니다.", isLogin=True, nickname=user_info["nick"]))
+        except jwt.ExpiredSignatureError:
+            session.pop('Authorization', None)
+        except jwt.exceptions.DecodeError:
+            session.pop('Authorization', None)
+    return render_template('login.html')
+
+
+@app.route('/api/login', methods=['POST'])
+def api_login():
+    id_receive = request.form['id_give']
+    pw_receive = request.form['pw_give']
+    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
+    result = db.user.find_one({'id': id_receive, 'pw': pw_hash})
+
+    if result is not None:
+        payload = {
+            'id': id_receive,
+            'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=10)
+        }
+        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
+
+        session['Authorization'] = token
+        return jsonify({'result': 'success'})
+    else:
+        return jsonify({'result': 'fail', 'errorField': 'userId', 'msg': '아이디(로그인 전용 아이디) 또는 비밀번호를 잘못 입력했습니다.<br/> 입력하신 내용을 다시 확인해주세요.'})
+
+
+@app.route('/api/join', methods=['POST'])
+def api_join():
+    id_receive = request.form['id_give']
+    pw_receive = request.form['pw_give']
+    nickname_receive = request.form['nickname_give']
+
+    if (db.user.find_one({'id': id_receive}) is not None):
+        return jsonify({'result': 'fail', 'errorField': 'userId', 'msg': '이미 존재하는 아이디 입니다.'})
+    elif (db.user.find_one({'nick': nickname_receive})):
+        return jsonify({'result': 'fail', 'errorField': 'userNickname', 'msg': '이미 존재하는 닉네임 입니다.'})
+
+    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
+
+    db.user.insert_one(
+        {'id': id_receive, 'pw': pw_hash, 'nick': nickname_receive})
+
+    return jsonify({'result': 'success'})
+
+
+@app.route('/detail')
+def detail():
+    if 'Authorization' in session:
+        token_receive = session['Authorization']
+        try:
+            payload = jwt.decode(token_receive, SECRET_KEY,
+                                 algorithms=['HS256'])
+            user_info = db.user.find_one({"id": payload['id']})
+            return render_template('detail.html', isLogin=True, nickname=user_info["nick"])
+        except jwt.ExpiredSignatureError:
+            session.pop('Authorization', None)
+            return render_template('detail.html', isLogin=False, alert="로그인 시간이 만료되었습니다. 다시 로그인 해주세요.")
+        except jwt.exceptions.DecodeError:
+            session.pop('Authorization', None)
+            return render_template('detail.html', isLogin=False, alert="로그인 정보가 존재하지 않아 로그아웃 되었습니다.")
+    else:
+        return render_template('detail.html')
+
+
+@app.route('/logout')
+def logout():
+    session.pop('Authorization', None)
+    return render_template('index.html')
+
 @app.route('/api/ask/list', methods=['GET'])
 def show_articles():
     filter = {}
@@ -27,18 +144,17 @@ def show_articles():
             'title': memo['title'],
             'content': memo['content'],
             'nickname': memo['nickname'],
-            'date': dt.fromtimestamp(memo['date'])
+            'date': datetime.datetime.fromtimestamp(memo['date'])
         }
         rs.append(item)
 
     return jsonify({'code': 1, 'data': rs})
 @app.route('/api/ask/create', methods=['POST'])
 def post_article():
-
     title = request.form['title']
     nickname = request.form['nickname']
     now = int(time.time())
-    memo = {'title': title, 'content':"로딩중입니다", 'nickname':nickname,'date':now}
+    memo = {'title': title, 'content':"", 'nickname':nickname,'date':now}
     result = db.memos.insert_one(memo)
     memo['_id'] = str(result.inserted_id)
     chatgpt_comment(memo['_id'],title)
@@ -65,7 +181,7 @@ def show_comment(id):
            'nickname':memo['nickname'],
            'comment':memo['comment'],
            #'_id': str(memo['_id']),
-           'date': dt.fromtimestamp(memo['date'])
+           'date': datetime.datetime.fromtimestamp(memo['date'])
        }
        rs.append(item)
    return jsonify({'code':1,'data':rs})
@@ -77,6 +193,6 @@ def chatgpt_comment(id,title):
    completion = openai.ChatCompletion.create(model="gpt-3.5-turbo", messages=messages)
    chatgpt_reply = completion.choices[0].message["content"].strip()
    db.memos.update_one({'_id': bson.ObjectId(id)},{"$set":{"content":chatgpt_reply}})
-   
-if __name__ == '__main__':  
-   app.run('0.0.0.0',port=5000,debug=True)
+
+if __name__ == '__main__':
+    app.run('0.0.0.0', port=5000, debug=True)

templates/base.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  {% block head %}
+  <title>
+    {% block title %}{% endblock %} - 정글Wiki
+  </title>
+  {% endblock %}
+  <script>
+    {% if alert %}
+    alert("{{ alert }}")
+    {% endif %}
+  </script>
+  {% block script %} {% endblock %}
+</head>
+
+<body class="relative bg-gray-50">
+  {% include 'header.html' %}
+  <div class="mt-28 mx-24" id="content">
+    {% block content %}{% endblock %}
+  </div>
+</body>
+
+</html>

templates/detail.html

@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+
+{% block title %}상세페이지{%endblock %}
+
+{% block head %}
+
+{% include'head.html' %}
+{{ super() }}
+
+{% endblock %}
+{%block content %}
+
+<div class="important flex flex-col w-full items-center pb-32">
+  <div class="flex flex-col w-full py-2">
+    <div class="w-full border-2 border-transparent border-b-gray-300">
+      <p class="text-2xl font-bold px-3 py-3">스텍 큐 알고리즘에 대해서 알려줄 수 있나요?</p>
+    </div>
+    <div class="w-full flex justify-between py-2">
+      <p class="text-sm px-3">질문자 : [그린반] 조현오</p>
+      <p class="text-sm px-3">2023.04.04</p>
+    </div>
+    <div class="w-full flex flex-col px-3 py-2 border-dashed border-2 border-sky-500 bg-gray-200">
+      <p class="text-xl font-bold">ChatGPT:</p>
+      <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra elit donec nunc posuere
+        pulvinar libero fermentum mi. Lobortis vulputate consectetur suspendisse massa mauris. Lacus odio pretium enim
+        gravida. Netus sit a, enim enim quam quam egestas arcu.</p>
+    </div>
+    {% if isLogin == True %}
+    <form class="flex w-full gap-x-4 my-5">
+      <input id="email-address" name="question" type="text" autocomplete="false" required
+        class="flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-zinc shadow-sm ring-1 ring-inset ring-black/10 focus:ring-2 focus:ring-inset focus:ring-zinc-500 sm:text-sm sm:leading-6"
+        placeholder="답변을 도와주세요! ChatGPT 친구가 정확하지 않아요!">
+      <button type="submit"
+        class="flex-none rounded-md bg-zinc-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-500">답글달기</button>
+    </form>
+    {%endif%}
+    <div class="flex flex-col border-2 border-transparent border-t-gray-200">
+      <div class="px-8 py-3 space-y-4 border-2 border-transparent border-b-gray-200">
+        <p class="text-xl font-bold">홍길동</p>
+        <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra elit donec nunc posuere
+          pulvinar libero fermentum mi. Lobortis vulputate consectetur suspendisse massa mauris. Lacus odio pretium enim
+          gravida. Netus sit a, enim enim quam quam egestas arcu.</p>
+        <p class="text-right">
+          2023.04.04
+        </p>
+      </div>
+      <div class="px-8 py-3 space-y-4 border-2 border-transparent border-b-gray-200">
+        <p class="text-xl font-bold">홍길동</p>
+        <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra elit donec nunc posuere
+          pulvinar libero fermentum mi. Lobortis vulputate consectetur suspendisse massa mauris. Lacus odio pretium enim
+          gravida. Netus sit a, enim enim quam quam egestas arcu.</p>
+        <p class="text-right">
+          2023.04.04
+        </p>
+      </div>
+      <div class="px-8 py-3 space-y-4 border-2 border-transparent border-b-gray-200">
+        <p class="text-xl font-bold">홍길동</p>
+        <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra elit donec nunc posuere
+          pulvinar libero fermentum mi. Lobortis vulputate consectetur suspendisse massa mauris. Lacus odio pretium enim
+          gravida. Netus sit a, enim enim quam quam egestas arcu.</p>
+        <p class="text-right">
+          2023.04.04
+        </p>
+      </div>
+      <div class="px-8 py-3 space-y-4 border-2 border-transparent border-b-gray-200">
+        <p class="text-xl font-bold">홍길동</p>
+        <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra elit donec nunc posuere
+          pulvinar libero fermentum mi. Lobortis vulputate consectetur suspendisse massa mauris. Lacus odio pretium enim
+          gravida. Netus sit a, enim enim quam quam egestas arcu.</p>
+        <p class="text-right">
+          2023.04.04
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}

templates/head.html

@@ -0,0 +1,5 @@
+<meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="https://cdn.tailwindcss.com"></script>

templates/header.html

@@ -0,0 +1,34 @@
+{% block script %}
+<script>
+  function goLoginPage() {
+    window.location.href = '/login'
+  }
+  function goJoinPage() {
+    window.location.href = '/join'
+  }
+  function logout() {
+    window.location.href = '/logout'
+    alert('로그아웃!')
+  }
+</script>
+{%endblock %}
+
+<header class="h-24 w-full fixed top-0 flex flex-row justify-between items-center bg-gray-50 shadow">
+  <h1 class="text-3xl font-bold ml-5">
+    <a href="/">무엇이든 물어보세요</a>
+  </h1>
+  <div class="flex w-250 space-x-2 mr-5">
+    {% if isLogin == True %}
+    <button
+      class="relative flex justify-center items-center rounded-md bg-zinc-600 px-2 py-2 text-sm font-semibold text-white hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+      onclick="logout()">로그아웃</button>
+    {% else %}
+    <button
+      class="relative flex justify-center items-center rounded-md bg-zinc-600 px-2 py-2 text-sm font-semibold text-white hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+      onclick="goLoginPage()">로그인</button>
+    <button
+      class="relative flex justify-center items-center rounded-md bg-zinc-600 px-2 py-2 text-sm font-semibold text-white hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+      onclick="goJoinPage()">회원가입</button>
+    {%endif%}
+  </div>
+</header>

templates/index.html

@@ -1,16 +1,36 @@
-<!DOCTYPE html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      http-equiv="X-UA-Compatible"
-      content="IE=edge"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <title>정글Wiki</title>
-  </head>
-  <body></body>
-</html>
+{% extends "base.html" %}
+
+{% block title %}HOME{%endblock %}
+
+{% block head %}
+
+{% include'head.html' %}
+{{ super() }}
+
+{% endblock %}
+{%block content %}
+
+<div class="important flex flex-col w-full items-center pb-32">
+  {% if isLogin == True %}
+  <form class="flex w-full gap-x-4 my-5">
+    <input id="email-address" name="question" type="text" autocomplete="false" required
+      class="flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-zinc shadow-sm ring-1 ring-inset ring-black/10 focus:ring-2 focus:ring-inset focus:ring-zinc-500 sm:text-sm sm:leading-6"
+      placeholder="{{nickname}} 님 무엇이 궁금하신가요?">
+    <button type="submit"
+      class="flex-none rounded-md bg-zinc-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-500">질문하기</button>
+  </form>
+  {% endif %}
+
+  <div class="flex flex-col w-full py-2">
+    <div class="w-full border-2 border-transparent border-b-gray-300">
+      <p class="text-2xl font-bold px-3 py-3">질문 게시글</p>
+    </div>
+    <div class="flex flex-col py-3 border-2 border-transparent border-b-gray-200">
+      <p class="text-xl px-3">답변대기중</p>
+      <p class="text-xl font-bold px-3 pt-1">스택 큐 알고리즘에 대해서 알려줄 수 있나요?</p>
+      <p class="text-sm px-3 pt-1">2023. 04. 04</p>
+    </div>
+  </div>
+</div>
+
+{% endblock %}