Feat: 스터디 페이지 추가

데이터 작성 필요

README.md

@@ -20,6 +20,7 @@
 </div>
 
 ## Table of Content
+
 - [Introduction](#introduction)
 - [Prerequisites](#prerequisites)
 - [Installation](#installation)
@@ -29,50 +30,66 @@
 - [Maintainers](#maintainers)
 
 ## Introduction
+
 <div align="center">
     <img src="./assets/img/GDSC DEU main page.png" alt="GDSC DEU logo">
 </div>
 GDSC DEU members can write blog post and introduce their project at this repository. And you can read GDSC DEU information at <a href="https://gdsc-deu.github.io">https://gdsc-deu.github.io</a>.
 
 ## Prerequisites
+
 - Ruby version **2.5.0** or higher
 - RubyGems
 - GCC and Make
 
 See [prerequrisites](https://jekyllrb.com/docs/installation/#requirements) for guides and details.
 
 ## Installation
-> **💡** This installation is for project for run locally.
+
+### Install Locally
 
 Below is an example of how you can instruct your audience on installing and setting up your app.
+
 1. Install all [prerequisites](#prerequisites).
 2. Install the jekyll and bundler gems.
-    ```terminal
-    gem install jekyll bundler
-    ```
+   ```terminal
+   gem install jekyll bundler
+   ```
 3. Clone the repo and change into the repo's directory.
-    ```terminal
-    git clone https://github.com/GDSC-DEU/gdsc-deu.github.io.git
-    cd ./gdsc-deu.github.io
-    ```
-3. Install all dependency.
-    ```
-    bundle install
-    ```
+   ```terminal
+   git clone https://github.com/GDSC-DEU/gdsc-deu.github.io.git
+   cd ./gdsc-deu.github.io
+   ```
+4. Install all dependency.
+   ```
+   bundle install
+   ```
+
+### Using Dokcer
+
+You can also use Docker to run the site locally.
+
+```bash
+docker run --volume="$PWD:/srv/jekyll" -p 4000:4000 -it jekyll/jekyll jekyll serve
+```
 
 ## Development
+
 ### Run development instance (with hot-reload)
+
 ```
 bundle exec jekyll serve
 ```
-* You can check the demo site by accessing [https://localhost:4000](https://localhost:4000).
+
+- You can check the demo site by accessing [https://localhost:4000](https://localhost:4000).
 
 ### Directory Structure
+
 ```bash
 GDSC-DEU.GITHUB.IO/
 ├── _data                      # Well-formatted site data.
 ├── _includes                  # The partials of layouts and posts.
-├── _layouts                   # The templates that wrap posts. 
+├── _layouts                   # The templates that wrap posts.
 ├── _members                   # GDSC Member Information.
 ├── _pages                     # Website pages (that are not posts)
 ├── _posts                     # Where all blog posts will go.
@@ -91,23 +108,29 @@ GDSC-DEU.GITHUB.IO/
 ```
 
 ## Style Guide
-* Use the **[Google HTML/CSS Guideline](https://google.github.io/styleguide/htmlcssguide.html)**.
+
+- Use the **[Google HTML/CSS Guideline](https://google.github.io/styleguide/htmlcssguide.html)**.
 
 ## Contributing
+
 1. Create issues about the work.
 2. Create a branch on the issue.
 3. Commit, push to the created branch.
 4. When the work is completed, request a pull request to main branch after rebaseing the main branch.
 5. Review the code and merge it.
 
 ### Branching
+
 Use author name and issue number into the branch names according to the format below:
+
 ```
 <author>_<issue-number>_<branch-type>_<branch-name>
 ```
+
 E.g., **jiyoon_43_feature_new-experimental-changes**
 
 ### Commit Message
+
 Referred to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
 
 ```
@@ -117,7 +140,7 @@ Referred to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0
 ```
 
 ## Maintainers
-Current Maintainers:
-* Jiyoon Bak (jiy00nn) - https://github.com/jiy00nn
 
+Current Maintainers:
 
+- Jiyoon Bak (jiy00nn) - https://github.com/jiy00nn

_data/navigation.yml

@@ -1,12 +1,12 @@
 - name: Home
   link: /
-- name: Blog
-  link: /blog/
-- name: Project
-  link: /project/
+- name: About Us
+  link: /about-us/
 - name: Member
   link: /member/
+- name: Blog
+  link: /blog/
 - name: Study
   link: /study/
-- name: About Us
-  link: /about-us/
+- name: Project
+  link: /project/

_data/studies.yaml

@@ -0,0 +1,75 @@
+- title: Spring Study
+  tags:
+    - Spring
+    - Java
+  description: "스프링 프레임워크를 공부하며 스프링의 기본적인 개념과 사용법을 익히는 스터디입니다."
+  start: 2021-03-02
+  end: 2021-05-25
+  image: /assets/img/logos/Spring-Boot-Logo.png
+  members:
+    - id: cmsong111
+    - id: jhkim
+
+- title: 리액티브 스프링 Study
+  tags:
+    - Spring
+    - Java
+  description: "스프링 프레임워크를 공부하며 스프링의 기본적인 개념과 사용법을 익히는 스터디입니다."
+  start: 2021-03-02
+  end: 2023-05-25
+  image: /assets/img/logos/Spring-Boot-Logo.png
+  members:
+    - id: cmsong111
+    - id: jhkim
+
+- title: Web Basic 스터디
+  tags:
+    - Web
+    - HTML
+    - CSS
+    - JavaScript
+  description: "웹 프론트엔드 개발을 위한 기초 지식을 습득하는 스터디입니다."
+  start: 2021-02-15
+  end: 2022-04-30
+  image: /assets/img/logos/web-logo.png
+  members:
+    - id: jhkim
+    - id: cmsong111
+
+- title: Spring Study
+  tags:
+    - Spring
+    - Java
+  description: "스프링 프레임워크를 공부하며 스프링의 기본적인 개념과 사용법을 익히는 스터디입니다."
+  start: 2021-03-02
+  end: 2021-05-25
+  image: /assets/img/logos/Spring-Boot-Logo.png
+  members:
+    - id: cmsong111
+    - id: jhkim
+
+- title: 리액티브 스프링 Study
+  tags:
+    - Spring
+    - Java
+  description: "스프링 프레임워크를 공부하며 스프링의 기본적인 개념과 사용법을 익히는 스터디입니다."
+  start: 2021-03-02
+  end: 2023-05-25
+  image: /assets/img/logos/Spring-Boot-Logo.png
+  members:
+    - id: cmsong111
+    - id: jhkim
+
+- title: Web Basic 스터디
+  tags:
+    - Web
+    - HTML
+    - CSS
+    - JavaScript
+  description: "웹 프론트엔드 개발을 위한 기초 지식을 습득하는 스터디입니다."
+  start: 2021-02-15
+  end: 2022-04-30
+  image: /assets/img/logos/web-logo.png
+  members:
+    - id: jhkim
+    - id: cmsong111

_pages/study.html

@@ -0,0 +1,47 @@
+---
+layout: default
+title: Study
+permalink: /study/
+---
+
+<style>
+    img {
+        height: 180px;
+        width: 100%;
+        object-fit: contain;
+    }
+</style>
+
+Study
+
+📖 스터디 진행
+<div class="container">
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
+        {% assign sorted = site.data.studies | sort: 'end' | reverse %}
+        {% for study in sorted %}
+        <div class="card" style="width: 18rem;">
+            <img class="card-img-top" src="{{ study.image  | relative_url }}" alt="Card image cap">
+            <div class="card-body">
+                <h4 class="card-title">
+                    {{ study.title }}
+                </h4>
+                <p class="card-text">
+                    {{ study.description }}
+                </p>
+                참가자
+                <ul>
+                    {% for member in study.members %}
+                    <li>{{ member.id }}</li>
+                    {% endfor %}
+                </ul>
+
+            </div>
+            <div class="card-footer bg-transparent ">
+                {% for tag in study.tags %}
+                <span class="badge bg-secondary">{{ tag }}</span>
+                {% endfor %}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>