diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index e99f66e..de70b86 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -70,7 +70,7 @@ export default defineConfig({
link: 'https://github.com/skkuding/next/blob/main/CONTRIBUTING.md'
},
{
- text: 'API 문서',
+ text: 'API 문서 (Bruno)',
link: '/dev/intro/bruno'
}
]
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 9c182f0..587cd2d 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,13 +1,12 @@
+import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './vars.css'
export default {
- // root component to wrap each page
- ...DefaultTheme,
-
+ extends: DefaultTheme,
enhanceApp({ app, router, siteData }) {
// app is the Vue 3 app instance from `createApp()`.
// router is VitePress' custom router. `siteData` is
// a `ref` of current site-level metadata.
}
-}
+} satisfies Theme
diff --git a/dev/intro/assets/backend-preview.png b/dev/intro/assets/backend-preview.png
deleted file mode 100644
index ff72940..0000000
Binary files a/dev/intro/assets/backend-preview.png and /dev/null differ
diff --git a/dev/intro/assets/frontend-preview.png b/dev/intro/assets/frontend-preview.png
deleted file mode 100644
index ddbbe3e..0000000
Binary files a/dev/intro/assets/frontend-preview.png and /dev/null differ
diff --git a/dev/intro/assets/git-clone.png b/dev/intro/assets/git-clone.png
index 09e82d3..2d30d8b 100644
Binary files a/dev/intro/assets/git-clone.png and b/dev/intro/assets/git-clone.png differ
diff --git a/dev/intro/assets/gitpod.png b/dev/intro/assets/gitpod.png
new file mode 100644
index 0000000..388e085
Binary files /dev/null and b/dev/intro/assets/gitpod.png differ
diff --git a/dev/intro/assets/new-wsl-window.png b/dev/intro/assets/new-wsl-window.png
index f2057cb..f29f98e 100644
Binary files a/dev/intro/assets/new-wsl-window.png and b/dev/intro/assets/new-wsl-window.png differ
diff --git a/dev/intro/assets/open-codespaces.png b/dev/intro/assets/open-codespaces.png
new file mode 100644
index 0000000..4a6d33a
Binary files /dev/null and b/dev/intro/assets/open-codespaces.png differ
diff --git a/dev/intro/assets/remote-containers.png b/dev/intro/assets/remote-containers.png
deleted file mode 100644
index 8cc9766..0000000
Binary files a/dev/intro/assets/remote-containers.png and /dev/null differ
diff --git a/dev/intro/assets/remote-wsl.png b/dev/intro/assets/remote-wsl.png
deleted file mode 100644
index 1a4f33b..0000000
Binary files a/dev/intro/assets/remote-wsl.png and /dev/null differ
diff --git a/dev/intro/assets/reopen-in-container.png b/dev/intro/assets/reopen-in-container.png
index 335a624..d14640c 100644
Binary files a/dev/intro/assets/reopen-in-container.png and b/dev/intro/assets/reopen-in-container.png differ
diff --git a/dev/intro/assets/vscode-dev-containers.png b/dev/intro/assets/vscode-dev-containers.png
new file mode 100644
index 0000000..7c712c4
Binary files /dev/null and b/dev/intro/assets/vscode-dev-containers.png differ
diff --git a/dev/intro/assets/vscode-download.png b/dev/intro/assets/vscode-download.png
deleted file mode 100644
index 74ce4c8..0000000
Binary files a/dev/intro/assets/vscode-download.png and /dev/null differ
diff --git a/dev/intro/assets/vscode-wsl.png b/dev/intro/assets/vscode-wsl.png
new file mode 100644
index 0000000..3eb2bf8
Binary files /dev/null and b/dev/intro/assets/vscode-wsl.png differ
diff --git a/dev/intro/getting-started.md b/dev/intro/getting-started.md
index 33c00ae..3669d2a 100644
--- a/dev/intro/getting-started.md
+++ b/dev/intro/getting-started.md
@@ -1,162 +1,234 @@
-# Getting Started!
+# Getting Started
-스꾸딩 팀과 함께 SKKU Coding Platform 개발을 시작하려면 아래 가이드를 따라주세요.
-가능한 개발 환경은 크게 세 가지가 있습니다.
+코드당 개발 환경을 세팅할 수 있는 환경은 크게 세 가지가 있습니다.
-1. Visual Studio Code + Container
-2. GitPod
-3. Manual
+1. [**Visual Studio Code**](#visual-studio-code)
+2. [**Dev Container (RAM 16GB 이상 권장)**](#dev-container)
+3. [**Remote Development (GitHub Codespaces / Gitpod)**](#remote-development)
-가장 권장하는 개발 환경은 Container 내에서 개발하는 Visual Studio Code이지만, 어려울 경우에는 GitPod을 이용하거나 직접 세팅할 수도 있습니다.
+프론트엔드 개발은 **1번**, 백엔드 개발은 **2번** 환경을 권장해요.
-## Visual Studio Code (이하 VSCode)
+가장 권장하는 개발 환경은 2번 Dev Container이지만, 많은 리소스를 필요로 하고 노트북의 배터리 소모가 빠를 수 있어요.
+더 적은 리소스로 쾌적한 개발을 원하는 경우에는 GitHub Codespaces 또는 Gitpod을 이용하는 걸 권장해요.
-### 1. 기본 도구 설치 (Git, WSL2(Windows), Docker)
+## Visual Studio Code
-- **Git**: Windows는 [https://git-scm.com/download/win](https://git-scm.com/download/win)에서 다운로드하고, Mac은 [https://git-scm.com/download/mac](https://git-scm.com/download/mac)에서 다운로드합니다.
- Linux는 패키지 관리도구로 쉽게 설치할 수 있습니다. (예: Debian 계열인 경우 `sudo apt install git-all`)
+### 1. 기본 도구 설치
-- **WSL2(Windows)**: 자세한 설치 방법은 [WSL 설치 공식 가이드](https://docs.microsoft.com/ko-kr/windows/wsl/install)를 참고해주세요.
+::: code-group
-- **Docker**: Windows는 WSL2를 먼저 설치하고, [Docker Desktop for Windows](https://docs.docker.com/desktop/install/windows-install/)를 설치하면 됩니다.
- Mac은 [Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/)을 설치하면 됩니다.
- Linux는 자신의 배포판에 맞는 버전을 [공식 홈페이지](https://docs.docker.com/engine/install/)에서 찾아 설치하면 됩니다.
+
-### 2. VSCode 설치
+- **WSL**: PowerShell 또는 Windows 명령 프롬프트를 마우스 오른쪽 단추로 클릭하고 "관리자 권한으로 실행"을 선택하여 열고 `wsl --install` 명령을 입력한 다음 컴퓨터를 다시 시작해주세요.
-[VSCode 홈페이지](https://code.visualstudio.com/)에서 VSCode 설치 파일을 다운로드 받고, 파일을 실행하여 설치합니다.
+- **Git**: WSL 터미널을 열고 [https://git-scm.com/download/linux](https://git-scm.com/download/linux)을 참고하여 설치합니다. 미리 Git이 설치되어 있을 수 있으니 터미널에서 `git --version` 명령어를 입력해 확인해주세요.
-
+
+
WSL이 뭔가요?
+
Windows Subsystem for Linux(WSL)은 Windows에서 Linux 커널을 실행할 수 있게 해주는 기능입니다. 스꾸딩의 개발 환경은 리눅스에 최적화되어있기 때문에 WSL 사용을 권장해요.
+
-### 3. Remote - Containers 확장 설치
+
-
+- **Git**: [https://git-scm.com/download/mac](https://git-scm.com/download/mac)을 참고하여 설치합니다. 미리 Git이 설치되어 있을 수 있으니 터미널에서 `git --version` 명령어를 입력해 확인해주세요.
-### 4. Clone Repository
+
+
+
-GitHub에서 [skkuding/next](https://github.com/skkuding/next) repository를 clone 받습니다.
-왼쪽의 'Source Control' icon을 눌러(단축키 Ctrl+Shift+G, ⌃⇧G) 'Clone Repository' 버튼을 누르고, skkuding/next를 검색하여 원하는 위치에 받습니다.
+- **Git**: [https://git-scm.com/download/linux](https://git-scm.com/download/linux)를 참고하여 설치합니다. 미리 Git이 설치되어 있을 수 있으니 터미널에서 `git --version` 명령어를 입력해 확인해주세요.
+
+
-::: warning Windows 유저라면...
-Windows file system에 clone 받는 것보다 WSL file system에 clone 받는 것을 권장합니다.
-[파일 저장 시 인식하지 못하는 문제](https://github.com/microsoft/WSL/issues/4739)를 비롯한 여러 문제가 있습니다.
-WSL에 clone 받는 방법은 아래 설명을 참고해주세요.
:::
-
+### 2. Visual Studio Code 설치
-#### 4-1. WSL에 Clone 받기 (Windows만)
+[Visual Studio Code 홈페이지](https://code.visualstudio.com/)에서 VSCode 설치 파일을 다운로드 받고, 파일을 실행하여 설치합니다.
-3번처럼 'Extensions' 탭을 열어 "remote wsl"을 검색창에 입력합니다.
-'Remote - WSL'을 선택하고 'Install' 버튼을 눌러 설치합니다.
+### 3. WSL 환경 열기 (Windows만)
-
+> Windows 환경이 아니라면 이 단계를 건너뛰세요 :fast_forward:
-왼쪽 아래의 `><` 모양 아이콘을 누르고 'New WSL Window' 옵션을 선택하여 WSL 환경에서 VSCode를 시작합니다.
+Visual Studio Code를 열고 왼쪽의 'Extensions' icon을 눌러 "WSL"을 검색창에 입력합니다.
+WSL 확장을 선택하고 'Install' 버튼을 눌러 설치합니다.
-
+
-이후 4번과 같은 방식으로 WSL 내에 clone하면 됩니다.
+왼쪽 아래의 `><` 모양 아이콘을 누르고 'Connect to WSL in New Window'를 선택하여 WSL 환경에서 VSCode를 시작합니다.
-### 5. VSCode로 repository 열기
+
+ 
+
-왼쪽의 'Explorer' icon을 눌러(단축키 Ctrl+Shift+E, ⇧⌘E) 'Open Folder' 버튼을 누르고, clone 받았던 repository 폴더를 엽니다.
+### 4. Clone Repository
-Repository가 열리면 좌측 하단의 `><` 모양 아이콘을 누르고, "Reopen in Container" 옵션을 선택합니다.
-이후 자동으로 Docker container가 생성되며 도구와 라이브러리, VSCode 확장들이 설치됩니다.
-초기 구성에는 5~10분 정도 소요되지만, 다시 실행할 때에는 오래 걸리지 않습니다.
+::: warning Windows 사용자라면 WSL 안에 clone해주세요!
-
+Windows file system에 clone 받는 것보다(`/mnt/c`) WSL 내에 clone 받는 것을 권장해요(`~/`).
+WSL에서 Windows file system에 접근하면 [파일 저장 이벤트를 인식하지 못하는 문제](https://github.com/microsoft/WSL/issues/4739)를 비롯해 성능 저하 등 여러 문제가 있습니다. 무슨 말인지 모르겠다면 3번 단계처럼 WSL 환경을 열고, 아래 가이드를 따라주세요!
-### 6. Preview server 열기
+:::
-Container 세팅이 완료되면, 터미널을 열어(단축키 Ctrl+\`, ⌃\`) 명령어를 입력해 개발용 preview server를 시작합니다.
+Visual Studio Code를 열고 왼쪽의 'Source Control' icon을 눌러 'Clone Repository' 버튼을 눌러주세요.
+GitHub 로그인을 요청한다면 로그인을 해주세요.
+이후 'Clone from GitHub'를 선택한 다음 skkuding/codedang을 검색하여 원하는 위치에 clone 받습니다.
-#### 6-1. Frontend
+
+
+::: warning 백엔드 서버를 실행하려면 Dev Container 세팅을 계속해주세요.
+
+백엔드 서버 실행을 위해서는 다른 세팅이 더 필요해요. 다음 단계들을 건너 뛰고, [Dev Container 가이드](#dev-container)를 따라 세팅을 계속해주세요.
+
+:::
+
+### 5. Node.js, pnpm 설치
+
+Node.js 설치를 위해 Node.js 버전 관리 도구인 nvm을 설치해야 해요.
+터미널을 열어(단축키 Ctrl + \` 또는 ⌃ + \`) 다음 명령어를 입력해주세요.
```sh
-cd frontend
-pnpm dev
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+exit
```
-Story(component 문서)를 보고 싶으면, `pnpm story` 명령어를 입력해주세요.
+이후 터미널을 다시 열고, 다음 명령어를 입력해 Node.js를 설치해주세요.
-
+```sh
+nvm install --lts # Node.js 최신 LTS 버전을 설치합니다.
+```
-#### 6-2. Backend
+이후 pnpm을 설치해주세요.
```sh
-cd backend
-pnpm start:dev
+corepack enable # pnpm을 사용하기 위해 corepack을 활성화합니다.
+pnpm i # 프로젝트에 필요한 패키지를 설치합니다.
```
-
+::: tip 프론트엔드라면 아래 확장들을 설치해주세요!
-## GitPod
+Dev Container를 사용하지 않는다면 직접 확장 기능을 설치해야 해요. 아래 확장 기능들을 설치해주세요.
-컴퓨터의 사양이 부족하거나 로컬 개발 환경이 제한적인 경우 브라우저로 원격 개발을 하는 GitPod이 좋습니다.
-한 달에 50시간까지 무료고, 학생 인증을 하면 한 달에 9달러로 제한 없이 사용할 수 있습니다.
-아래 버튼을 눌러 바로 시작하거나 아래 설명을 따르면 됩니다.
+- **EditorConfig (필수)**: 코드 스타일을 통일해주는 확장 기능이에요.
+- **Prettier (필수)**: 코드 formatting을 자동으로 해주는 확장 기능이에요.
+- **ESLint (필수)**: 코드 품질을 검사해주는 확장 기능이에요.
+- **Apollo GraphQL (필수)**: GraphQL 자동 완성과 검사를 해주는 확장 기능이에요.
+- **GitLens**: Git 관련 기능을 확장해주는 확장 기능이에요.
+- **Git History**: Git commit 기록을 쉽게 확인할 수 있는 확장 기능이에요.
-[](https://gitpod.io/#https://github.com/skkuding/next)
+:::
-### 1. GitHub Repository 열기
+### 6. 서버 실행
-브라우저에서 [skkuding/next](https://github.com/skkuding/next) repository를 엽니다.
+프론트엔드 서버를 실행하려면 터미널을 열어(단축키 Ctrl + \` 또는 ⌃ + \`) 다음 명령어를 입력해주세요.
-> TODO: img
+```sh
+cd apps/frontend
+pnpm dev
+```
-### 2. URL 입력
+이제 브라우저에서 [http://localhost:5525](http://localhost:5525)를 열면 개발 서버를 확인할 수 있어요!
-GitHub 전체 URL의 앞에 `gitpod.io/#`을 입력하고 해당 주소로 접속합니다.
-예: `gitpod.io/#https://github.com/skkuding/next`
+## Dev Container
-::: tip
-GitPod은 branch, pull request, commit 등의 context 별로 workspace를 생성하는 것도 가능합니다!
+Dev Container는 Docker 컨테이너 안에서 VSCode 환경을 구축하는 방법입니다. 백엔드 서버 실행에 필요한 데이터베이스, Redis 등을 포함하고 있고, 여러 설정이 자동으로 이루어져 빠르게 개발을 시작할 수 있어요.
-- Branch `123-feat-name`의 코드로 workspace를 생성하려면: `gitpod.io/#https://github.com/skkuding/next/tree/123-feat-name`
-- PR #123의 코드로 workspace를 생성하려면: `gitpod.io/#https://github.com/skkuding/next/pull/123`
+**Dev Container 세팅을 시작하기 전, [Visual Studio Code](#visual-studio-code) 세팅의 1~4번을 완료해주세요!**
-더 자세한 내용은 [공식 문서](https://www.gitpod.io/docs/introduction/learn-gitpod/context-url)에서 확인해주세요.
-:::
+### 1. Docker 설치
+
+::: code-group
+
+
+
+WSL 설치 이후 [Docker Desktop](https://docs.docker.com/desktop/install/windows-install/)을 설치합니다.
+
+
-> TODO: img
+
-### 3. GitHub 계정 연결
+[Docker Desktop](https://docs.docker.com/desktop/install/mac-install/)을 설치합니다.
-화면에 나오는 대로 GitHub 계정을 GitPod에 연결합니다.
+
-> TODO: img
+
-### 4. Preview server 열기
+터미널에서 다음 명령어를 실행하세요: `curl -fsSL https://get.docker.com | sudo sh`
-GitPod이 자동으로 세팅을 마치면 [위의 Visual Studio Code와 같은 방법](#_6-preview-server-열기)으로 preview server를 열 수 있습니다.
+이후 [Post-installation steps for Linux](https://docs.docker.com/engine/install/linux-postinstall/) 가이드를 따라주세요.
-## Manually
+
-::: warning Not Recommended 🤔
-직접 모든 환경을 세팅하는 것은 특별한 경우가 아니라면 권장하지 않습니다.
-꼭 필요한 경우에만 사용해주세요!
:::
-### 1. 기본 도구 설치 (Git, WSL2(Windows), Docker)
+### 2. Dev Container 확장 설치
-[위의 Visual Studio Code와 같은 방법](#_1-기본-도구-설치-git-wsl2-windows-docker)으로 기본 도구들을 설치해주세요.
+Visual Studio Code에서 왼쪽의 'Extensions' icon을 눌러 "Dev Containers"를 검색창에 입력합니다.
+Dev Containers 확장을 선택하고 'Install' 버튼을 눌러 설치합니다.
-### 2. Node.js 설치
+
-```sh
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
-```
+### 3. Reopen in Container
+
+[Visual Studio Code 섹션의 3번](#3-clone-repository)에서 clone 받은 repository를 연 상태에서 좌측 하단의 `><` 모양 아이콘을 누르고, "Reopen in Container" 옵션을 선택합니다.
+이후 자동으로 Docker container가 생성되며 자동으로 설정이 진행돼요.
+초기 구성에는 5~10분 정도 소요되지만, 다시 실행할 때에는 그리 오래 걸리지 않아요.
+
+
+
+### 4. 서버 실행
+
+백엔드 서버 실행을 위해서는 터미널을 열어(단축키 Ctrl + \` 또는 ⌃ + \`) 다음 명령어를 입력해주세요.
```sh
-nvm install node
-nvm use node
+cd apps/backend
+pnpm start:dev
```
-### 3. setup script 실행
+## Remote Development
+
+Dev Container는 가장 이상적인 개발 환경이지만, 많은 리소스를 필요로 하고 노트북의 배터리 소모가 빠를 수 있어요.
+컴퓨터의 사양이 부족하거나 로컬 개발 환경이 제한적인 경우 브라우저로 원격 개발을 하는 GitHub Codespaces 또는 Gitpod이 적합해요.
+서버 환경을 제공해서 브라우저로 접속해 개발을 할 수 있어요.
+
+GitHub Codespaces는 CPU 2코어 RAM 8GB 기준 한 달에 60시간 무료, Gitpod은 4코어 RAM 8GB 기준 한 달에 50시간 무료예요.
+이 이상 사용하면 과금이 될 수 있으니, 가격을 확인하고 사용해주세요!
+
+::: tip GitHub 학생 인증을 받으면 Codespaces를 더 많이 사용할 수 있어요!
+
+GitHub Student Developer Pack을 신청하면 GitHub Codespaces를 CPU 2코어 기준 한 달에 90시간 무료로 사용할 수 있어요.
+이 외에도 다양한 혜택이 있으니 [여기](https://education.github.com/pack)에서 신청하세요!
+
+:::
+
+### Option 1. GitHub Codespaces
+
+브라우저에서 [skkuding/codedang](https://github.com/skkuding/codedang) repository를 열고, 오른쪽 상단의 'Code' 버튼을 누른 후 'Create codespace on main'을 선택하면 Codespaces로 바로 접속할 수 있어요!
+
+더 자세한 내용은 [공식 문서](https://docs.github.com/ko/codespaces)에서 확인해주세요.
+
+
+ 
+
+
+### Option 2. Gitpod
+
+아래 버튼을 눌러 바로 Gitpod으로 접속할 수 있어요!
+
+[](https://gitpod.io/#https://github.com/skkuding/next)
+
+또는 브라우저에서 [skkuding/codedang](https://github.com/skkuding/codedang) repository를 열고, 전체 URL의 앞에 `gitpod.io/#`을 입력하고 해당 주소로 접속해주세요. (예: `gitpod.io/#https://github.com/skkuding/codedang`)
+
+더 자세한 내용은 [공식 문서](https://www.gitpod.io/docs)에서 확인해주세요.
+
+::: tip
+Gitpod은 branch, pull request, commit 등의 context 별로 workspace를 생성하는 것도 가능합니다!
+
+- Branch `123-feat-name`의 코드로 workspace를 생성하려면: `gitpod.io/#https://github.com/skkuding/codedang/tree/123-feat-name`
+- PR #123의 코드로 workspace를 생성하려면: `gitpod.io/#https://github.com/skkuding/codedang/pull/123`
+
+:::
-### 4. Visual Studio Code 확장
+