FAQ 페이지 추가

_config.yml

@@ -31,6 +31,8 @@ collections:
   lists:
     output: false
 
+  faqs:
+    output: false
 
 # Use this for production
 #sass:

_data/faqs/activity.yaml

@@ -0,0 +1,34 @@
+- chatroom: "활동 내용"
+  chats: 
+  - speaker: "guest"
+    messages: 
+    - "하이아크에서는 어떤 활동을 하나요?"
+  - speaker: "admin"
+    messages: 
+    - "하이아크의 주 목적은 ICPC, SCPC 등 여러 프로그래밍 대회에 참여해서 높은 성적을 받는 것입니다."
+    - "프로그래밍 대회에 참여하는 것이 주요 활동입니다."
+    - "SCPC, ICPC, 카카오 코드 페스티벌 등 오프라인에서 진행되는 프로그래밍 대회는 물론이며"
+    - "Codeforces, Google Code Jam, TopCoder 등 온라인에서 진행되는 대회도 참여합니다."
+  - speaker: "guest"
+    messages:
+    - "코린이인데 가입해도 되나요? ㅜㅜ"
+  - speaker: "admin"
+    messages:
+    - "팀을 구성해서 프로그래밍 대회를 나가다보면 지식의 격차가 발생할 수 있습니다."
+    - "지식의 격차를 해소하기 위해, 정기적으로 프로그래밍 대회에 나오는 자료구조/알고리즘 유형을 소개하는 강의를 엽니다."
+    - "그리고, 저학년도 프로그래밍 대회에 쉽게 진입할 수 있도록 하기 위해 저학년 대상 강의를 개설하기도 합니다."
+  - speaker: "guest"
+    messages: 
+    - "수준별로 알고리즘 수업을 개설한다고 봐도 되는거군요?"
+  - speaker: "admin"
+    messages: 
+    - "네. 그렇습니다."
+    - "1학년이라도 금방 진입할 수 있도록, 언어 기초 강의도 개설합니다."
+  - speaker: "guest"
+    messages: 
+    - "프로그래밍 대회에 참여하면 어떤 이점이 있나요?"
+  - speaker: "admin"
+    messages: 
+    - "프로그래밍 대회에서 운 좋게 상을 받게 되면 이력서에 한 줄이라도 더 추가할 수 있습니다."
+    - "상을 받지 못하게 되도 괜찮습니다. 꾸준히 참여해온 기록 만으로도 프로그래밍에 대한 관심을 정량적으로 드러내는 수단이 될 수 있습니다."
+    - "프로그래밍 대회 문제를 많이 접하다보면 코딩테스트는 쉽게 보일 정도로 자신감도 생기게 되며, 구현 능력도 눈에 띄게 올라가게 됩니다."

_data/faqs/registration.yaml

@@ -0,0 +1,19 @@
+- chatroom: "가입 조건"
+  chats:   
+  - speaker: "guest"
+    messages: 
+    - "가입 조건이 어떻게 되나요?"
+    - "신입생이라서 배경지식이 거의 없는데, 가입해도 괜찮나요?"
+  - speaker: "admin"
+    messages: 
+    - "배경지식이 없는 사람이라도 누구나 가입이 가능합니다."
+    - "다 같이 프로그래밍 대회에 나갈 수 있도록 처음부터 가르쳐드립니다."
+    - "다만, 1년 이상 활동할 수 있으셔야 학회에서 얻어갈 수 있는 것이 많습니다."
+  - speaker: "guest"
+    messages: 
+    - "고학년이 가입해도 괜찮다는 건가요?"
+  - speaker: "admin"
+    messages: 
+    - "네. 괜찮습니다."
+    - "고학년일수록 배경지식의 유무에 따라 얻어갈 수 있는 정도가 다릅니다."
+    - "따라서, 몇 가지 추가적인 정보를 요구할 수 있습니다."

_faqs/faq.md

@@ -0,0 +1,91 @@
+---
+---
+
+{% assign faq_list = site.data.faqs %}
+{% assign faq_size = faq_list.size | minus: 1 %}
+
+{% comment %}
+    {% for faq in faq_list %}
+        {{ faq | jsonify }} <br/>
+        {{ faq[0] }} <br/>
+        {{ faq[1][0] | jsonify }} <br />
+        {{ faq[1][0].chatroom }} <br/> <!-- 방 이름 -->
+        {{ faq[1][0].chats }} <br /> <!-- 대화 내용 -->
+        {% for chat in faq[1][0].chats %}
+            {{ chat.speaker }} <br/> <!-- 발화자 -->
+            {% for message in chat.messages %}
+                {{ message }} <!-- 메시지 -->
+            {% endfor %}
+        {% endfor %}
+        <br />
+    {% endfor %}
+{% endcomment %}
+
+<div id="faq-container" class="fullscreen">
+    <header id="kakao-head">
+        <div id="header-text">
+            <a href="/">&larr;</a> {{ site.title }} FAQ
+        </div>
+    </header>
+
+    {% for faq in faq_list %}
+
+        {% assign faq_idx = forloop.index %}
+
+        <div class="faq pointer" data-chatroom-id="{{faq_idx}}" onclick="clickFaq({{faq_idx}})">
+            <div class="icon">
+                <img src="/favicon.png">
+            </div>
+            <div class="content">
+                <div class="title">
+                    {{ faq[1][0].chatroom }}
+                </div>
+                <div class="preview">
+                    ...
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</div>
+
+<div id="chatroom-container" class="fullscreen hide">
+
+
+{% for faq in faq_list %}
+
+    {% assign faq_idx = forloop.index %}
+
+    <div class="chatroom-{{faq_idx}} hide" data-chatroom-id="{{faq_idx}}">
+        <header id="kakao-head">
+            <div id="header-text">
+                <a class="pointer" onclick="goBackToFaqList({{ faq_idx }})">&larr;</a>
+                {{ faq[1][0].chatroom }}
+            </div>
+        </header>
+
+        <div class="chatroom-content">
+        {% for chat in faq[1][0].chats %}
+            <div class="messages-wrapper {{ chat.speaker }}">
+                <div class="icon {{ chat.speaker}}">
+                    <img src="/favicon.png" />
+                </div>
+                <div class="messages {{ chat.speaker }}"> 
+                {% for message in chat.messages %}
+                    <div class="message {{chat.speaker}}">
+                        <div class="speech-bubble">
+                            {{ message }}
+                        </div>
+                    </div>
+                {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+        </div>
+    </div>
+{% endfor %}
+    {% comment %}
+        {{ faq_list[0].chatroom }}
+        {{ faq_list[0]}}
+    {% endcomment %}
+
+</div>

_layouts/faq.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js" lang="ko">
+<!--<![endif]-->
+
+	<head>
+		{% include head.html %}
+
+		<link href="../css/fancy-inputs.css" rel="stylesheet">
+
+		<link href="../css/faq/main.css" rel="stylesheet">
+		<link href="../css/faq/chatroom.css" rel="stylesheet">
+	</head>
+
+	<body>
+		<!--[if lt IE 8]>
+		<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+		<![endif]-->
+
+		{{ content }}
+
+	</body>
+
+{% include footer.html %}
+<script src="../js/faq.js"></script>
+
+</html>
+

css/faq/chatroom.css

@@ -0,0 +1,120 @@
+.hide {
+    display: none;
+}
+
+.chatroom-content {
+    height: calc(100vh - 85px);
+    overflow-y: scroll;
+
+    background-color: #9bbbd4;
+}
+
+.messages-wrapper {
+    display: flex;
+    margin-top: 20px;
+    margin-left: 10px;
+}
+
+.messages-wrapper .message.guest {
+    flex: flex-end;
+}
+
+.messages-wrapper .icon {
+    display: flex;
+
+    flex-basis: 40px;
+    height: 54px;
+
+    margin-right: 5px;
+
+    justify-content: center;
+    align-items: center;
+}
+
+.messages-wrapper .icon img {
+    width: 40px;
+    border-radius: 10px;
+}
+
+.icon.guest {
+    display: none;
+}
+
+.messages {
+    width: 100%;
+}
+
+.speech-bubble {
+    max-width: calc(100vw - 20%);
+    margin-top: 5px;
+    margin-bottom: 5px;
+
+    word-break: break-all;
+}
+
+.admin.message {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.guest.message  {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.speech-bubble {
+    margin-left: 10px;
+    margin-right: 10px;
+
+    position: relative;
+    border-radius: 15px;
+    padding: 10px;
+    max-width: calc(100vw - 20%);
+    width: auto;
+}
+
+.admin .speech-bubble {
+    background-color: white;
+}
+
+.guest .speech-bubble {
+    margin-right: 20px;
+    background-color: #f7e600;
+    right: 0;
+}
+
+.messages-wrapper 
+.messages.admin
+.message.admin:first-of-type
+.speech-bubble:after {
+    content: '';
+	position: absolute;
+	left: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 10px solid transparent;
+	border-right-color: white;
+	border-left: 0;
+	border-top: 0;
+	margin-top: -5px;
+	margin-left: -10px;
+}
+
+.messages-wrapper 
+.messages.guest
+.message.guest:last-of-type
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	right: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 10px solid transparent;
+    border-left-color: #f7e600;
+	border-right: 0;
+	border-bottom: 0;
+	margin-top: -5px;
+	margin-right: -10px;
+}

css/faq/main.css

@@ -0,0 +1,65 @@
+body {
+    margin: 0;
+}
+
+header {
+    padding-top: 20px;
+    padding-left: 20px;
+    font-size: 29px;
+    font-weight: 900;
+    padding-bottom: 20px;
+
+    border-bottom: 1px solid #ddd;
+    align-items: center;
+}
+
+header a {
+    padding-right: 10px;
+    color: black;
+    text-decoration: none;
+}
+
+.faq {
+    display: flex;
+    height: 80px;
+    border-bottom: 1px solid #eee;
+}
+
+.faq .icon {
+    flex-basis: 80px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.faq .icon img {
+    width: 60px;
+    height: 60px;
+    border-radius: 20px;
+}
+
+.faq .content {
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+}
+
+.faq .title {
+    flex: 4;
+    display: flex;
+    align-items: center;
+
+    font-size: 20px;
+    font-weight: 900;
+}
+
+.faq .preview {
+    flex: 3;
+    display: flex;
+    align-items: center;
+}
+
+.pointer {
+    cursor: pointer;
+}

faq.html

@@ -0,0 +1,13 @@
+---
+layout: faq
+title: "HI-ARC"
+excerpt: HI-ARC | Hong-Ik Algorithm Research Club
+---
+
+<section>
+    {% comment %}
+    한개짜리 일 때는 콜렉션 자체를 반환 
+    {% endcomment %}
+
+    {{ site.faqs }}
+</section>