[Feat: folder css 일부]

README.md

@@ -1,13 +1,82 @@
 # 2024-Herethon-2
 2024 여기톤 : HERETHON 2조 <br><br>
 
-<img width="400px" src="./StuckProject/Static/img/LOGO.png">
+![image](https://github.com/2024-HERETHON/2024-Herethon-2/assets/128278212/5eb332b5-dced-484d-9cc9-e7aa85a118da)
+
+👉🏻 [서비스 바로가기](http://15.164.255.252/)
+- id : Stuck
+- password : Stuck1234!!
+
+👉🏻 [여기톤 기사 보기](https://n.news.naver.com/article/092/0002337413?sid=105)
 
-👉🏻 서비스 바로가기
 
 <br><br>
 ### 📙 프로젝트 소개
-우리 서비스는 말이죠~
+STUCK은 자기주도학습을 위한 AI 문제생성 및 질의응답 서비스입니다.
+학생들의 자기주도적 학습 태도 정립을 목표로 만들어진 STUCK은 다음과 같이 소비자들의 painpoint를 해결합니다.
+#### 1. 문제풀기
+* 문제 생성 탭으로 이동하여 저장하고자 하는 폴더를 생성하거나, 선택한 후 문제를 생성할 수 있습니다.
+* 문제의 이름, 생성할 문제의 개수, 문제의 유형(객관식, 주관식), 생성하고자 하는 교재의 pdf나 이미지를 업로드할 수 있습니다.<br>
+  <br>
+  <img width="400px" src="./readme_img/img_6.png">
+  <img width="400px" src="./readme_img/img_1.png">
+  <img width="400px" src="./readme_img/img.png">
+
+* 이미지를 업로드한 후 문제 생성 버튼을 클릭했다면 업로드한 이미지의 텍스트를 google cloud vision API를 통해 추출합니다.
+* 추출한 텍스트를 기반으로 프롬프팅을 통해 chatGPT에게 문제 생성을 요청합니다.
+* chatGPT의 응답을 기반으로 문제를 생성합니다.
+* 문제를 풀었다면 채점 기능을 이용할 수 있습니다.
+* 생성한 문제는 PDF와 WORD 형태로 저장할 수 있습니다.
+  * 자주 보는 문제는 즐겨찾기를 눌러 나중에 MySTUCK 페이지에서 확인할 수 있습니다.
+  <br><br>
+  <img width="300px" src="./readme_img/img_4.png">
+  <img width="300px" src="./readme_img/img_5.png">
+
+
+#### 2. 질문하기
+* 질문하기 탭으로 이동하여 문제풀기와 마찬가지로 폴더를 지정합니다.
+* 질문할 파일을 등록하고 질문 이름을 지정합니다.
+* 질문하기를 생성했다면 왼쪽에는 chatGPT를 이용한 질의응답, 오른쪽은 공부하면서 메모를 저장합니다.
+* 질의응답 채팅 내용, 메모 모두 PDF와 WORD로 저장할 수 있습니다.
+* 틀린 문제만 보기, 다시 풀기 옵션을 제공합니다.
+* 자주 보는 질문하기는 즐겨찾기를 눌러 나중에 MySTUCK 페이지에서 확인할 수 있습니다. <br><br>
+  <img width="300px" src="./readme_img/img_8.png">
+  <img width="300px" src="./readme_img/img_7.png">
+
+
+#### 3. My Stuck
+* 이전까지 생성했던 폴더 및 파일을 확인할 수 있는 공간입니다.
+* 컴퓨터 시스템의 파일탐색기와 매우 유사하며, 드래그하여 삭제, 드래그하여 폴더 및 파일 이동 기능을 모두 지원합니다.
+* 폴더 및 파일 찾기도 가능합니다.
+* 즐겨찾기한 항목은 아래에 회색으로 나타납니다.<br><br>
+  <img width="300px" src="./readme_img/img_9.png">
+
+
+#### 4. MyPage
+* 목표 설정을 할 수 있습니다.
+* 캘린더와 연동했으며 할 일을 완수한 날이 있다면 파란색 배경, 할 일을 완수하지 못했다면 회색 배경으로 나타납니다.
+* 루틴, 할 일은 추가 및 삭제가 가능합니다.
+* 목표설정 아래를 스크롤하면 내 정보를 수정할 수 있습니다. <br><br>
+  <img width="300px" src="./readme_img/img_10.png">
+  <img width="300px" src="./readme_img/img_11.png">
+
+#### 5. Home
+* 월간 달성률, 주간 달성률, 일간 달성률을 확인할 수 있습니다.
+* 즐겨찾기한 항목, 최근 열어본 문서를 확인할 수 있습니다. <br><br>
+  <img width="300px" src="./readme_img/img_12.png">
+  <img width="300px" src="./readme_img/img_13.png">
+
+#### 6. 아이디, 비밀번호 찾기
+* 아이디를 잃어버렸을 경우 이메일 입력을 통해 가입했을 때의 아이디를 찾을 수 있습니다.
+* 비밀번호를 잃어버렸을 경우 이메알, ID 입력을 통해 비밀번호를 재설정할 수 있습니다. <br><br>
+  <img width="300px" src="./readme_img/img_16.png">
+  <img width="300px" src="./readme_img/img_15.png">
+  <img width="300px" src="./readme_img/img_14.png">
+
+
+<br><br>
+### 개발기간
+2024.06.25 ~ 2024.07.06
 
 <br><br>
 ### 🦁 STUCK 개발 팀원 소개
@@ -17,10 +86,11 @@
 | <center> <img width="150px" src="https://ipainting.co.kr/wp-content/uploads/2019/02/%EB%8F%99%EB%AC%BC%EB%8F%84%EC%95%88_46.jpg"></center> | 
 | <center> 기획, 디자인 </center>                                                                                                                 |
 ####  ️Front-end
-| <center> 박수진 </center>                                                                         | <center> 송유선 </center>                                                                         | 
+
+| <center> 최수진 </center>                                                                          | <center> 송유선 </center>                                                                         | 
 |---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
 | <center> <img width="150px" src="https://avatars.githubusercontent.com/u/134383155?v=4"></center> | <center> <img width="150px" src="https://avatars.githubusercontent.com/u/164325907?v=4"></center> | 
-| <center> 역할1 </center>                                                                          | <center> 역할2 </center>                                                                           | 
+| <center> 역할1 </center>                                                                            | <center> 역할2 </center>                                                                           | 
 | <center>  [@jinsujini](https://github.com/jinsujini) </center>                                    | <center> [@s-uxun](https://github.com/s-uxun) </center>                                           | 
 
 #### Back-end

StuckProject/qna/models.py

@@ -9,6 +9,7 @@ class QuestionRoom(models.Model):
     folder = models.ForeignKey(to=Folder, on_delete=models.CASCADE,related_name="qnas")
     file = models.FileField(upload_to="file/%Y/%m/%d/")
     memo = models.CharField(max_length=10000, blank=True)
+    created_at = models.DateField(auto_now_add=True)
 
 
 class Chat(models.Model):

StuckProject/qna/templates/qna/create_question_room.html

@@ -1,96 +1,78 @@
 {% extends "base.html" %} {% load static %} {% block content %}
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="{% static 'css/create_question_room.css' %}" />
-    <title>질문하기</title>
-  </head>
-  <body>
-    <form
-      action="{% url 'qna:create-question-room' folder_id %}"
-      method="post"
-      enctype="multipart/form-data"
-    >
-      {% csrf_token %}
-      <main class="quiz_main">
-        <section class="quiz_option">
-          <div class="file_name">
-            <h6>질문 파일명</h6>
-            <input
-              type="text"
-              id="title"
-              name="title"
-              required
-              placeholder="파일명을 입력해주세요"
-            />
-          </div>
-        </section>
-        <section class="file_upload">
-          <label
-            for="file"
-            ondrop="dropHandler(event);"
-            ondragover="dragOverHandler(event);"
-          >
-            <img
-              class="cloud"
-              src="{% static 'img/drag.svg' %}"
-              alt="Drag and drop area"
-            />
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="{% static 'css/create_question_room.css' %}" />
+  <title>질문하기</title>
+</head>
+
+<body>
+  <style>
+    .navbar .nav-qna * {
+      color: #09A8FA;
+    }
+  </style>
+  <form action="{% url 'qna:create-question-room' folder_id %}" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    <main class="quiz_main">
+      <section class="quiz_option">
+        <div class="file_name">
+          <h6>질문 파일명</h6>
+          <input type="text" id="title" name="title" required placeholder="파일명을 입력해주세요" />
+        </div>
+      </section>
+      <section class="file_upload">
+        <label for="file" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+          <img class="cloud" src="{% static 'img/drag.svg' %}" alt="Drag and drop area" />
+        </label>
+        <img class="line" src="{% static 'img/line.svg' %}" />
+        <div class="upload_right" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+          <label for="file">
+            <h5>파일 선택</h5>
           </label>
-          <img class="line" src="{% static 'img/line.svg' %}" />
-          <div
-            class="upload_right"
-            ondrop="dropHandler(event);"
-            ondragover="dragOverHandler(event);"
-          >
-            <label for="file"><h5>파일 선택</h5></label>
-            <p id="file-info">지원되는 파일 형식: .pdf, .png, .jpg</p>
-            <input
-              type="file"
-              id="file"
-              name="file"
-              style="display: none"
-              required
-            />
-          </div>
-        </section>
-        <button type="submit">교재 내용 질문하기</button>
-      </main>
-    </form>
+          <p id="file-info">지원되는 파일 형식: .pdf, .png, .jpg</p>
+          <input type="file" id="file" name="file" style="display: none" required />
+        </div>
+      </section>
+      <button class="button" type="submit">교재 내용 질문하기</button>
+    </main>
+  </form>
 
-    <script>
-      document.getElementById("file").onchange = function () {
-        var fileNameDisplay = document.getElementById("file-info");
-        fileNameDisplay.textContent = this.files[0].name;
-      };
+  <script>
+    document.getElementById("file").onchange = function () {
+      var fileNameDisplay = document.getElementById("file-info");
+      fileNameDisplay.textContent = this.files[0].name;
+    };
 
-      function dragOverHandler(ev) {
-        ev.preventDefault();
-      }
+    function dragOverHandler(ev) {
+      ev.preventDefault();
+    }
 
-      function dropHandler(ev) {
-        ev.preventDefault();
+    function dropHandler(ev) {
+      ev.preventDefault();
 
-        if (ev.dataTransfer.items) {
-          if (ev.dataTransfer.items[0].kind === "file") {
-            var file = ev.dataTransfer.items[0].getAsFile();
-            console.log("Dropped file:", file.name);
+      if (ev.dataTransfer.items) {
+        if (ev.dataTransfer.items[0].kind === "file") {
+          var file = ev.dataTransfer.items[0].getAsFile();
+          console.log("Dropped file:", file.name);
 
-            var input = document.getElementById("file");
-            var dataTransfer = new DataTransfer();
-            dataTransfer.items.add(file);
-            input.files = dataTransfer.files;
+          var input = document.getElementById("file");
+          var dataTransfer = new DataTransfer();
+          dataTransfer.items.add(file);
+          input.files = dataTransfer.files;
 
-            document.getElementById("file-info").textContent = file.name;
-          }
-        } else {
-          document.getElementById("file-info").textContent =
-            ev.dataTransfer.files[0].name;
+          document.getElementById("file-info").textContent = file.name;
         }
+      } else {
+        document.getElementById("file-info").textContent =
+          ev.dataTransfer.files[0].name;
       }
-    </script>
-  </body>
+    }
+  </script>
+</body>
+
 </html>
-{% endblock %}
+{% endblock %}

StuckProject/qna/templates/qna/landing.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %} {% load static %} {% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="{% static 'css/landing.css' %}">
+</head>
+<style>
+    .navbar .nav-qna * {
+color: #09A8FA;
+}
+</style>
+<div class="empty"></div>
+<body>
+    <main>
+        <img src="{% static 'img/qna-landing.svg' %}" alt="랜딩이미지" >
+        <a href="{% url 'qna:select-folder' 0 %}"><h4>교재 내용 질문하기</h4></a>
+    </main>
+    <div class="empty"></div>
+
+</body>
+</html>
+{% endblock %}