[#3] Feat: 질문 게시판 로그인 여부에 따라 View 변경

로그인할 경우에만 질문 input 창이 보일 수 있도록 처리함

app.py

@@ -103,8 +103,22 @@ def api_join():
 
 
 @app.route('/detail')
-def detailPage():
-    return render_template('detail.html')
+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')

templates/index.html

@@ -11,13 +11,15 @@
 {%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="조현오 님 무엇이 궁금하신가요?">
+      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">
@@ -28,41 +30,6 @@
       <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 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 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 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 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 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 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 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>