diff --git a/_config.yml b/_config.yml index 10f9904..d3261dc 100644 --- a/_config.yml +++ b/_config.yml @@ -31,6 +31,8 @@ collections: lists: output: false + faqs: + output: false # Use this for production #sass: diff --git a/_data/faqs/activity.yaml b/_data/faqs/activity.yaml new file mode 100644 index 0000000..5f91db8 --- /dev/null +++ b/_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: + - "프로그래밍 대회에서 운 좋게 상을 받게 되면 이력서에 한 줄이라도 더 추가할 수 있습니다." + - "상을 받지 못하게 되도 괜찮습니다. 꾸준히 참여해온 기록 만으로도 프로그래밍에 대한 관심을 정량적으로 드러내는 수단이 될 수 있습니다." + - "프로그래밍 대회 문제를 많이 접하다보면 코딩테스트는 쉽게 보일 정도로 자신감도 생기게 되며, 구현 능력도 눈에 띄게 올라가게 됩니다." \ No newline at end of file diff --git a/_data/faqs/registration.yaml b/_data/faqs/registration.yaml new file mode 100644 index 0000000..0084bc6 --- /dev/null +++ b/_data/faqs/registration.yaml @@ -0,0 +1,19 @@ +- chatroom: "가입 조건" + chats: + - speaker: "guest" + messages: + - "가입 조건이 어떻게 되나요?" + - "신입생이라서 배경지식이 거의 없는데, 가입해도 괜찮나요?" + - speaker: "admin" + messages: + - "배경지식이 없는 사람이라도 누구나 가입이 가능합니다." + - "다 같이 프로그래밍 대회에 나갈 수 있도록 처음부터 가르쳐드립니다." + - "다만, 1년 이상 활동할 수 있으셔야 학회에서 얻어갈 수 있는 것이 많습니다." + - speaker: "guest" + messages: + - "고학년이 가입해도 괜찮다는 건가요?" + - speaker: "admin" + messages: + - "네. 괜찮습니다." + - "고학년일수록 배경지식의 유무에 따라 얻어갈 수 있는 정도가 다릅니다." + - "따라서, 몇 가지 추가적인 정보를 요구할 수 있습니다." diff --git a/_faqs/faq.md b/_faqs/faq.md new file mode 100644 index 0000000..b5e5e0d --- /dev/null +++ b/_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 }}
+ {{ faq[0] }}
+ {{ faq[1][0] | jsonify }}
+ {{ faq[1][0].chatroom }}
+ {{ faq[1][0].chats }}
+ {% for chat in faq[1][0].chats %} + {{ chat.speaker }}
+ {% for message in chat.messages %} + {{ message }} + {% endfor %} + {% endfor %} +
+ {% endfor %} +{% endcomment %} + +
+
+
+ ← {{ site.title }} FAQ +
+
+ + {% for faq in faq_list %} + + {% assign faq_idx = forloop.index %} + +
+
+ +
+
+
+ {{ faq[1][0].chatroom }} +
+
+ ... +
+
+
+ {% endfor %} +
+ +
+ + +{% for faq in faq_list %} + + {% assign faq_idx = forloop.index %} + +
+
+
+ ← + {{ faq[1][0].chatroom }} +
+
+ +
+ {% for chat in faq[1][0].chats %} +
+
+ +
+
+ {% for message in chat.messages %} +
+
+ {{ message }} +
+
+ {% endfor %} +
+
+ {% endfor %} +
+
+{% endfor %} + {% comment %} + {{ faq_list[0].chatroom }} + {{ faq_list[0]}} + {% endcomment %} + +
\ No newline at end of file diff --git a/_layouts/faq.html b/_layouts/faq.html new file mode 100644 index 0000000..6c22313 --- /dev/null +++ b/_layouts/faq.html @@ -0,0 +1,31 @@ + + + + + + + + + + {% include head.html %} + + + + + + + + + + + {{ content }} + + + +{% include footer.html %} + + + + diff --git a/css/faq/chatroom.css b/css/faq/chatroom.css new file mode 100644 index 0000000..3241d2a --- /dev/null +++ b/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; +} diff --git a/css/faq/main.css b/css/faq/main.css new file mode 100644 index 0000000..faecdbb --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..5ac6088 --- /dev/null +++ b/faq.html @@ -0,0 +1,13 @@ +--- +layout: faq +title: "HI-ARC" +excerpt: HI-ARC | Hong-Ik Algorithm Research Club +--- + +
+ {% comment %} + 한개짜리 일 때는 콜렉션 자체를 반환 + {% endcomment %} + + {{ site.faqs }} +
\ No newline at end of file diff --git a/js/faq.js b/js/faq.js new file mode 100644 index 0000000..cede20f --- /dev/null +++ b/js/faq.js @@ -0,0 +1,19 @@ +function clickFaq(faq_idx) { + var faqContainer = document.querySelector("#faq-container") + var chatroomContainer = document.querySelector("#chatroom-container") + var faq = document.querySelector(".chatroom-" + faq_idx.toString()); + + faq.classList.toggle('hide'); + faqContainer.classList.toggle('hide'); + chatroomContainer.classList.toggle('hide'); +} + +function goBackToFaqList(faq_idx) { + var faqContainer = document.querySelector("#faq-container") + var chatroomContainer = document.querySelector("#chatroom-container") + var faq = document.querySelector(".chatroom-" + faq_idx.toString()); + + chatroomContainer.classList.toggle('hide'); + faq.classList.toggle('hide'); + faqContainer.classList.toggle('hide'); +} \ No newline at end of file