✨ feat(docs): add docusaurus setting (#265)

* ✨ feat(docs): add docusaurus setting

* ✨ feat(docs): add docusaurus github action

* ♻️ chore(docs): deploy test

* ♻️ chore(docs): fix yml error

.github/workflows/docusaurus.yml

@@ -0,0 +1,36 @@
+name: Docs
+
+on:
+  push:
+    branches: [main, dev, config/docs]
+    paths:
+      - "docs/**"
+  pull_request:
+    branches: [main, dev, config/docs]
+    paths:
+      - "docs/**"
+      -
+jobs:
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Build docs
+        run: |
+          cd docs
+          yarn install
+          yarn build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          user_name: github-actions[bot]
+          user_email: 41898282+github-actionㅅs[bot]@users.noreply.github.com

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/2023-07-24-welcome/index.md

@@ -0,0 +1,64 @@
+---
+slug: welcome
+title: 스트릿 드랍을 소개합니다.
+authors: [ seonghun, siyeon, young ]
+tags: [ introduce ]
+---
+
+---
+
+### Overview
+
+🎵 **스트릿드랍은 길을 걸으며 음악을 드랍하는 음악 공유 소셜 서비스예요**
+
+석촌호수를 걸으면서 듣는 벛꽂엔딩, 첫 개강 등교길 노래 등 지금 이 거리에서 듣고 있는 노래를 공유하고 싶었던 경험이 있나요?
+
+거리에 코멘트와 함께 노래를 드랍하고, 반경 내 다른 사람이 남긴 음악을 주워 들으며 스트릿드랍의 재미를 느껴보세요!
+
+![Street Drop Banner](./street-drop-banner.png)
+
+### 지금 바로 스트릿 드랍을 만나보세요!
+
+[![App Store Download](./street-drop-download.jpg)](https://apps.apple.com/kr/app/%EC%8A%A4%ED%8A%B8%EB%A6%BF%EB%93%9C%EB%9E%8D-street-drop/id6450315928)
+
+
+
+<!--truncate-->
+
+## 스트릿 드랍 기능
+
+### 드랍하고 싶은 음악을 검색해 보세요
+드랍하고 싶은 음악이 있다면 음악명 또는 가수명을 검색해보세요. 사용자의 위치 정보나 날씨 정보를 토대로 추천 검색어도 큐레이션하고 있어요.
+
+
+![Street Drop Function Search](./function_search.png)
+
+### 음악과 함께 남기고 싶은 말을 코멘트로
+코멘트는 5자부터 40자까지 작성할 수 있어요. 드랍하기 버튼을 누르면 음표가 드랍되고, 지도 위에 드랍된 음악을 바로 확인할 수 있어요.
+
+
+![Street Drop Function Drop](./function_drop.png)
+
+### 드랍된 음악을 듣고 좋아요를 남겨주세요
+다른 유저들이 드랍한 음악을 바로 듣기로 들을 수 있어요. 좋아요를 눌러 공감 표현을 하면서 즐겁게 소통할 수 있어요.
+
+
+![Street Drop Function Comment](./function_com.png)
+
+### 나의 활동 히스토리와 현재 레벨을 확인해요
+드랍과 좋아요 히스토리를 모아보고 관리해요. 현재 레벨을 귀여운 캐릭터와 함께 확인하고, 닉네임 수정과 서비스 관련 설정까지 가능해요.
+
+
+![Street Drop Function My Page](./function_my_page.png)
+
+### 원하는 스트리밍 앱으로 음악을 들어 보세요
+유튜브 뮤직와 스포티파이 등 원하는 스트리밍 서비스로 연결할 수 있어요. 드랍한 음악 페이지의 ‘다른 앱으로 듣기’로 바로 설정할 수도 있어요.
+
+
+![Street Drop Function Setting](./function_setting.png)
+
+### 비 오는 날엔 어떤 노래를 들으시나요?
+서비스 이용 정보를 바탕으로 장소 또는 음악을 추천하는 푸시 알림을 전송하고 있어요. 현위치 주변의 실시간 드랍 개수 정보도 전송해 호기심을 자극해요.
+
+
+![Street Drop Function Push](./function_pushnoti.png)

docs/blog/2023-07-25-implement-docusaurus.md

@@ -0,0 +1,11 @@
+---
+slug: implement-docusaurus
+title: Docusaurus 도입기
+authors: [ seonghun ]
+tags: [ docs, docusaurus ]
+---
+
+안녕하세요. 스트릿 드랍에서 백엔드 개발을 하고 있는 정성훈이라고 합니다.
+
+이번 포스팅에서는 스트릿 드랍 문서화 작업을 하면서 도입하게된 Docusaurus에 대해 간단하게 소개하고자 합니다.
+Docusaurus는 페이스북 그룹에서 만든 정적 사이트 생성 라이브러리 입니다. 기본적으로 버전 관리, 다국어 지원, 검색 기능, 테마 커스터마이징 등의 다양한 기능을 제공하고 있습니다.

docs/blog/authors.yml

@@ -0,0 +1,39 @@
+seonghun:
+  name: Seonghun Jung
+  title: Backend Lead Engineer @ Street Drop
+  url: https://github.com/seonghun-dev
+  image_url: https://github.com/seonghun-dev.png
+
+
+young:
+  name: Young Yun
+  title: Backend Engineer @ Street Drop
+  url: https://github.com/yunyoung1819
+  image_url: https://github.com/yunyoung1819.png
+
+siyeon:
+  name: Siyeon Son
+  title: Backend Engineer @ Street Drop
+  url: https://github.com/siyeonSon
+  image_url: https://github.com/siyeonSon.png
+
+
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png
+
+

docs/docs/intro.md

@@ -0,0 +1,47 @@
+---
+sidebar_position: 1
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

docs/docs/tutorial-basics/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Tutorial - Basics",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
+}

docs/docs/tutorial-basics/congratulations.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 6
+---
+
+# Congratulations!
+
+You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
+
+Docusaurus has **much more to offer**!
+
+Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
+
+Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
+
+## What's next?
+
+- Read the [official documentation](https://docusaurus.io/)
+- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
+- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
+- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
+- Add a [search bar](https://docusaurus.io/docs/search)
+- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
+- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)

docs/docs/tutorial-basics/create-a-blog-post.md

@@ -0,0 +1,34 @@
+---
+sidebar_position: 3
+---
+
+# Create a Blog Post
+
+Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
+
+## Create your first Post
+
+Create a file at `blog/2021-02-28-greetings.md`:
+
+```md title="blog/2021-02-28-greetings.md"
+---
+slug: greetings
+title: Greetings!
+authors:
+  - name: Joel Marcey
+    title: Co-creator of Docusaurus 1
+    url: https://github.com/JoelMarcey
+    image_url: https://github.com/JoelMarcey.png
+  - name: Sébastien Lorber
+    title: Docusaurus maintainer
+    url: https://sebastienlorber.com
+    image_url: https://github.com/slorber.png
+tags: [greetings]
+---
+
+Congratulations, you have made your first post!
+
+Feel free to play around and edit this post as much you like.
+```
+
+A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

docs/docs/tutorial-basics/create-a-document.md

@@ -0,0 +1,57 @@
+---
+sidebar_position: 2
+---
+
+# Create a Document
+
+Documents are **groups of pages** connected through:
+
+- a **sidebar**
+- **previous/next navigation**
+- **versioning**
+
+## Create your first Doc
+
+Create a Markdown file at `docs/hello.md`:
+
+```md title="docs/hello.md"
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
+
+## Configure the Sidebar
+
+Docusaurus automatically **creates a sidebar** from the `docs` folder.
+
+Add metadata to customize the sidebar label and position:
+
+```md title="docs/hello.md" {1-4}
+---
+sidebar_label: 'Hi!'
+sidebar_position: 3
+---
+
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+It is also possible to create your sidebar explicitly in `sidebars.js`:
+
+```js title="sidebars.js"
+module.exports = {
+  tutorialSidebar: [
+    'intro',
+    // highlight-next-line
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+};
+```