Merge pull request #37 from A-to-P/feat/#36-myConsulting.html

Feat/#36 my consulting.html
A-to-P · Jul 2, 2023 · 56ee39f · 56ee39f
2 parents 3563036 + b1d5eb3
commit 56ee39f
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 8 deletions.
diff --git a/base/templates/base.html b/base/templates/base.html
@@ -64,5 +64,11 @@
       </div>
       {% endblock %}
     </div>
+
+    <!-- base.html에 적용될 자바스크립트 경로 -->
+    <script  type="text/javascript" src="{% static '/js/base.js' %}"></script>
+
+    <!-- 다음 html에 적용할 js 파일 경로 넣는 곳 -->
+    {% block js %}{% endblock %}
   </body>
 </html>
diff --git a/consulting/static/css/consultingSpace.css b/consulting/static/css/consultingSpace.css
diff --git a/consulting/static/css/consulting_template.css b/consulting/static/css/consulting_template.css
@@ -0,0 +1,142 @@
+.myConsulting_wrapper{
+    margin: 2rem;
+}
+
+.myConsulting_container{
+    padding: 1rem 2rem;
+    height: fit-content;
+    border-radius: 1rem;
+    background-color: rgb(178, 204, 243);
+}
+
+.myConsulting_title{
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+/*-----------위------------*/
+
+div[class^="request_"]:not(.request_summary){  /*~로 시작하는 속성 선택*/
+    margin: 0.5rem;
+    padding: 0.5rem 1.5rem;
+    background-color: white;
+}
+
+.request_category, .request_money{
+    display: inline-block;
+    width: fit-content;
+}
+
+.request_summary_container{
+    clear:both;
+}
+
+.request_summary{
+    overflow: hidden;
+    white-space: normal;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;   /* 말줄임표로 보이는 라인 수*/
+    -webkit-box-orient: vertical;
+}
+
+.request_button {
+    float: right;
+    margin: 0.5rem 1rem;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.5rem;
+    border: none;
+    background-color: rgb(75, 126, 255);
+    color: white;
+}
+
+
+/*-----------아래------------*/
+
+.myConsulting_consulting_container{
+    display: flex;
+    flex-direction: row;
+}
+
+
+/* chat 영역 */
+
+.chat_wrapper{
+    width: 50%;
+    height: fit-content;
+}
+
+.info_wrapper{
+    padding: 1rem;
+    width: 50%;
+}
+
+.chat_container{
+    margin-bottom: 1rem;
+    height: 25rem;
+    background-color: white;
+}
+
+.chat_input_container{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 0 1rem;
+    height: 4rem;
+    background-color: white;
+}
+
+#chat_file_button{
+    width: 3rem;
+    height: inherit;
+    background-image: url(../../static/img/clip.png);
+    background-size: contain;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    border: none;
+}
+
+#chat_inputbox{
+    margin: 0 1rem;
+    padding: 0 1rem;
+    width: 75%;
+    height: 2rem;
+    background-color: white;
+    font-size: 1rem;
+}
+
+#chat_submit_button{
+    padding: 0.5rem;
+    width: 5rem;
+    border: solid 0.2rem rgb(55, 70, 205);
+    border-radius: 1rem;
+    background-color: white;
+}
+
+/* info 영역 */
+
+.info_title{
+    font-weight: 600;
+}
+
+.info_container{
+    padding: 2rem 1rem;
+    height: fit-content;
+    border-radius: 1rem;
+    background-color: rgb(55, 70, 205);
+}
+
+.consultant_img{
+    margin: 0.5rem auto;
+    height: 5rem;
+    width: 5rem;
+    border-radius: 100%;
+    background-color: rgb(5, 5, 63);
+}
+
+div[class^="consultant_"]:not(.consultant_img){  /*~로 시작하는 속성 선택*/
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    background-color: white;
+}
diff --git a/consulting/static/css/myConsulting.css b/consulting/static/css/myConsulting.css
diff --git a/consulting/static/img/clip.png b/consulting/static/img/clip.png
diff --git a/consulting/templates/consultingSpace.html b/consulting/templates/consultingSpace.html
@@ -1,6 +1,11 @@
-{% extends 'profile_template.html' %}
+{% extends 'consulting_template.html' %}
 {% load static %}
 
+{% block static %}
+<link rel="stylesheet" href="{% static 'css/profile.css' %}" >  
+<link rel="stylesheet" href="{% static 'css/consulting_template.css' %}" >  
+<link rel="stylesheet" href="{% static 'css/myConsulting.css' %}" >  
+{% endblock %}
 
 {% block title %}
   컨설팅 스페이스 

diff --git a/consulting/templates/consulting_template.html b/consulting/templates/consulting_template.html
@@ -0,0 +1,60 @@
+{% extends 'profile_template.html' %} 
+{% load static %}
+
+{% block static %}
+  <link rel="stylesheet" href="{% static 'css/profile.css' %}" >  
+  <link rel="stylesheet" href="{% static 'css/consulting_template.css' %}" >  
+{% endblock %}
+
+<!-- mainContent -->
+{% block maincontent %}  
+   <div class="myConsulting_wrapper"> <!--위 의뢰글-->
+    <div class="myConsulting_title">컨설팅 의뢰 내용</div>
+    <div class="myConsulting_container myConsulting_request_container">
+      <div class="request_title">분식점 마케팅 의뢰합니다</div>
+      <div class="request_category">마케팅</div>
+      <div class="request_money">200000</div>
+      <button type="button" class="request_button" onclick="location.href='detailedRequest'">의뢰 내용 상세 보기</button>
+      <div class="request_summary_container">
+        <div class="request_summary">
+          의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약의뢰내용요약
+        </div>
+      </div>
+    </div>
+   </div>
+
+   <div class="myConsulting_wrapper"><!--아래 채팅-->
+    <div class="myConsulting_title">진행 중인 컨설팅</div>
+    <div class="myConsulting_container myConsulting_consulting_container">
+
+      <div class="chat_wrapper"> <!--왼쪽 채팅-->
+        <div class="chat_container"></div>
+        <div class="chat_input_container">
+          <input type="file" name="file" id="chat_file_input" style="display:none"></input>
+          <button type="button" id="chat_file_button" onclick="document.getElementById('chat_file_input').click();"></button>
+          <input type="text" id="chat_inputbox">  <!--채팅 입력창-->
+          <button type="submit" id="chat_submit_button">전송</button>
+        </div>
+      </div>
+
+      <div class="info_wrapper"> <!--오른쪽 정보-->
+        <div class="info_container">
+          <div class="info_title">컨설턴트 정보</div>
+          <div class="consultant_img"></div>
+          <div class="consultant_name">컨설턴트 이름 : </div>
+          <div class="consultant_category">컨설팅 분야 : 마케팅</div>
+          <div class="consultant_time">연락 가능 시간 : 10:00 ~ 18:00</div>
+          <div class="consultant_star">★★★★★</div>
+        </div>
+      </div>
+
+    </div>
+
+   </div>
+{% endblock %}
+
+{% block js %}
+<script type="text/javascript">
+
+</script>
+{% endblock %}
diff --git a/consulting/templates/myConsulting.html b/consulting/templates/myConsulting.html
@@ -1,6 +1,11 @@
-{% extends 'profile_template.html' %} 
+{% extends 'consulting_template.html' %} 
 {% load static %}
 
+{% block static %}
+  <link rel="stylesheet" href="{% static 'css/profile.css' %}" >  
+  <link rel="stylesheet" href="{% static 'css/consulting_template.css' %}" >  
+  <link rel="stylesheet" href="{% static 'css/myConsulting.css' %}" >  
+{% endblock %}
 
 {% block title %}
   마이 컨설팅 
@@ -20,9 +25,4 @@
 <p class="menu">
   <a href="">컨설팅 히스토리</a>
 </p>
-{% endblock menu %}  
-
-
-{% block maincontent %}  
-   여기는 마이 컨설팅 페이지입니다. 
-{% endblock %}
+{% endblock menu %}