refactor: create assets folder

group-admin/group.md

@@ -4,60 +4,64 @@
 
 ::: warning Group 내의 계층 관련 ⛔️
 Group 내에서는 두 가지의 계층이 존재합니다.
-- __GroupLeader__ : 그룹의 관리자 역할으로, Group 및 Member 관리에 관한 권한들을 갖고 있습니다. 
-- __GroupMember__ : 그룹 내의 일반적인 Member 역할입니다. 
+
+- **GroupLeader** : 그룹의 관리자 역할으로, Group 및 Member 관리에 관한 권한들을 갖고 있습니다.
+- **GroupMember** : 그룹 내의 일반적인 Member 역할입니다.
 
 본 Section의 독자는 GroupLeader로 가정합니다.
 :::
-## 그룹 관리 
+
+## 그룹 관리
 
 ### 새로운 그룹 생성
 
 Manager 이상 계층의 관리자는 직접 그룹을 생성할 수 있습니다.
 
 Group 페이지에서 <code>+Create Group</code> 버튼을 클릭하면 그룹 생성창으로 넘어갑니다.
-![My Groups](pic/myGroup.png)
+![My Groups](assets/myGroup.png)
 
 원하는 Group Name, Group Configuration, Group Description을 작성하고 Save를 클릭하면 그룹이 생성됩니다. 이때, 그룹을 생성한 관리자는 자동으로 해당 그룹의 GroupLeader로 설정됩니다.
-![Create Group](pic/group-create-detail.png)
+![Create Group](assets/group-create-detail.png)
 Group Configuration의 자세한 설명은 아래와 같습니다.
-  - __Show On List__ : 
-    자신의 그룹의 전체 공개(All Groups에 표시) 여부를 결정합니다.
-  - __Allow Join From Search__ : 그룹 목록에서 해당 그룹을 선택한 사용자들에게 그룹 가입 버튼의 공개 여부를 결정합니다.
-  - __Allow Join With URL__ : 그룹 가입용 URL 발급 가능 여부를 결정합니다. (⚠️ Allow Join From Search와 Allow Join With URL이 모두 <code>False</code>라면 경고창을 반환합니다.)
-  - __Require Approval Before Join__ : 가입 승인 절차의 유무를 결정합니다. <code>False</code>라면 승인 절차없이 즉시 가입이 완료됩니다.
+
+- **Show On List** :
+  자신의 그룹의 전체 공개(All Groups에 표시) 여부를 결정합니다.
+- **Allow Join From Search** : 그룹 목록에서 해당 그룹을 선택한 사용자들에게 그룹 가입 버튼의 공개 여부를 결정합니다.
+- **Allow Join With URL** : 그룹 가입용 URL 발급 가능 여부를 결정합니다. (⚠️ Allow Join From Search와 Allow Join With URL이 모두 <code>False</code>라면 경고창을 반환합니다.)
+- **Require Approval Before Join** : 가입 승인 절차의 유무를 결정합니다. <code>False</code>라면 승인 절차없이 즉시 가입이 완료됩니다.
 
 ### 기존 그룹 관리
+
 관리자들은 상단 Header 중 Group을 눌러 자신이 속한 그룹들을 확인할 수 있습니다.
 
 이때, 자신이 GroupLeader로 속한 그룹은 그룹명 우측 상단에 톱니바퀴(⚙️) 모양의 아이콘이 뜨게 됩니다.
-![My Groups](pic/myGroup.png)
+![My Groups](assets/myGroup.png)
 
 톱니바퀴 아이콘(⚙️)을 클릭시 관리자용 그룹 창으로 이동하게 됩니다.
 
 관리자는 그룹 창에서 (1) 그룹 세부설정 수정 (2) 초대 URL 생성 (3) 그룹 삭제를 할 수 있습니다.
-![Group Config](pic/group-detail.png)
+![Group Config](assets/group-detail.png)
+
+- **그룹 세부설정 수정**
 
-- __그룹 세부설정 수정__
-
   관리자는 그룹명 옆의 연필 아이콘(📝)을 클릭해 그룹 세부 설정을 수정할 수 있습니다.
-  ![Group Config](pic/group-config-detail.png)
+  ![Group Config](assets/group-config-detail.png)
   Group Name, Group Configuration, Description을 수정할 수 있습니다.
 
-- __초대 URL 생성__
+- **초대 URL 생성**
 
-  <code>Create URL</code> 버튼을 클릭하여 학생들이 클릭시 해당 그룹에 가입할 수 있는 일회용 초대 URL을 생성할 수 있습니다. 
+  <code>Create URL</code> 버튼을 클릭하여 학생들이 클릭시 해당 그룹에 가입할 수 있는 일회용 초대 URL을 생성할 수 있습니다.
 
-- __그룹 삭제__
+- **그룹 삭제**
 
   Admin, SuperAdmin 계층의 관리자는 바로 그룹을 삭제할 수 있으며, 이외의 관리자는 자신이 생성한 그룹에 한해서 삭제할 수 있습니다.
 
 ## 멤버 관리
 
-![Group Config](pic/group-detail.png)
+![Group Config](assets/group-detail.png)
 관리자는 관리자용 그룹창에서 Member 탭을 통해 관리자용 멤버창으로 접속할 수 있습니다.
 
-![Group Member](pic/group-member.png)
+![Group Member](assets/group-member.png)
 
 관리자용 멤버창에서 사용할 수 있는 기능들은 아래와 같습니다.
 
@@ -67,14 +71,14 @@ Group Configuration의 자세한 설명은 아래와 같습니다.
 
 계층 변경은 두 가지의 경우가 존재합니다.
 
-- __GroupLeader에서 GroupMember로 downgrade__
+- **GroupLeader에서 GroupMember로 downgrade**
 
   Member 탭의 GroupLeaders 목록에서 ⬇ 버튼을 클릭하면 해당 멤버의 계층을 GroupMember로 downgrade할 수 있습니다.
 
   > 이때, 모든 GroupLeader를 GroupMember로 downgrade할 수 없습니다.(최소 한 명의 GroupLeader가 존재해야 합니다.)
   > 또한 Admin 및 SuperAdmin 계층의 사용자는 downgrade할 수 없습니다.
 
-- __GroupMember에서 GroupLeader로 upgrade__
+- **GroupMember에서 GroupLeader로 upgrade**
 
   Member 탭의 GroupMembers 목록에서 ⬆ 버튼을 클릭하면 해당 멤버의 계층을 GroupLeader로 upgrade할 수 있습니다.
 
@@ -84,6 +88,5 @@ Group Configuration의 자세한 설명은 아래와 같습니다.
 
 ### 그룹 가입 승인 및 거절
 
-![Group Approval](pic/group-approval.png)
+![Group Approval](assets/group-approval.png)
 관리자는 Group Member Approval 목록에서 대기중인 그룹 가입신청 내역들을 확인할 수 있으며, 승인(✅) 혹은 거절(❎)을 선택할 수 있습니다.
-

group-admin/problem.md

@@ -1,51 +1,52 @@
 # 문제 생성 및 관리하기
+
 본 Section에서는 문제를 생성하고 관리하는 기능들을 소개합니다.
 
 ## 문제 생성 및 삭제하기
+
 관리자들은 상단 Header 중 Group을 눌러 자신이 속한 그룹들을 확인할 수 있습니다.
 
 이때, 자신이 GroupLeader로 속한 그룹은 그룹명 우측 상단에 톱니바퀴(⚙️) 모양의 아이콘이 뜨게 됩니다.
-![My Groups](pic/myGroup.png)
+![My Groups](assets/myGroup.png)
 
 톱니바퀴 아이콘(⚙️)을 클릭시 관리자용 그룹 창으로 이동하게 됩니다.
 
-![Group Config](pic/group-detail.png) 
+![Group Config](assets/group-detail.png)
 
-관리자는 옆 Problem 탭을 통해 관리자용 Problem 창으로 이동할 수 있습니다. 
+관리자는 옆 Problem 탭을 통해 관리자용 Problem 창으로 이동할 수 있습니다.
 
-![Problem Create](pic/problem-create.png) 
+![Problem Create](assets/problem-create.png)
 
 ### 문제 생성하기
 
 그룹 내에서 문제를 생성할 수 있는 방법은 세 경우가 있습니다.
 
-- __문제를 직접 생성하는 경우__ (<code>Create</code>버튼)
+- **문제를 직접 생성하는 경우** (<code>Create</code>버튼)
 
   <code>Create</code>버튼을 누르면 직접 문제를 생성할 수 있습니다.
-  ![Problem Create](pic/problem-create-detail.png) 
+  ![Problem Create](assets/problem-create-detail.png)
   문제의 세부 구성사항은 아래와 같습니다.
-  - __Title__ : 문제의 제목을 설정합니다.
-  - __Difficulty__ : 문제의 난이도를 설정합니다 Level 1~5까지 존재합니다.
-  - __Language__ : 문제의 지원언어를 설정합니다. 종류는 `C`, `C++`,`Java`, `Python3`로 이루어져 있습니다.
-  - __Description__ : 문제의 설명을 설정합니다.
-  - __Input Description__ : 입력과 관련한 설명을 설정합니다.
-  - __Output Description__ : 출력과 관련한 설명을 설정합니다.
-  - __Time Limit(ms)__ : 시간 제한을 설정합니다. 단위는 ms(밀리초)입니다.
-  - __Memory Limit(MB)__ : 메모리 제한을 설정합니다. 단위는 MB(메가바이트)입니다.
-  - __Hint__ : 표시될 힌트를 설정합니다.
-  - __Input Sample, Output Sample__ : 사용자에게 보여질 입력, 출력 예시를 설정합니다.
-  - __Testcase__ : 테스트케이스를 설정합니다.
-
-- __문제를 Import하는 경우__ (<code>Import</code>버튼)
+
+  - **Title** : 문제의 제목을 설정합니다.
+  - **Difficulty** : 문제의 난이도를 설정합니다 Level 1~5까지 존재합니다.
+  - **Language** : 문제의 지원언어를 설정합니다. 종류는 `C`, `C++`,`Java`, `Python3`로 이루어져 있습니다.
+  - **Description** : 문제의 설명을 설정합니다.
+  - **Input Description** : 입력과 관련한 설명을 설정합니다.
+  - **Output Description** : 출력과 관련한 설명을 설정합니다.
+  - **Time Limit(ms)** : 시간 제한을 설정합니다. 단위는 ms(밀리초)입니다.
+  - **Memory Limit(MB)** : 메모리 제한을 설정합니다. 단위는 MB(메가바이트)입니다.
+  - **Hint** : 표시될 힌트를 설정합니다.
+  - **Input Sample, Output Sample** : 사용자에게 보여질 입력, 출력 예시를 설정합니다.
+  - **Testcase** : 테스트케이스를 설정합니다.
+
+- **문제를 Import하는 경우** (<code>Import</code>버튼)
 
   추후 추가할 예정입니다.
 
-- __문제를 파일로 업로드 하는 경우__   (<code>File Upload</code>버튼)
+- **문제를 파일로 업로드 하는 경우** (<code>File Upload</code>버튼)
 
   Excel 파일을 업로드하여 여러 개의 문제 및 테스트 케이스들을 업로드할 수 있습니다.
 
 ### 문제 삭제하기
 
-문제 옆 🗑️ 버튼을 클릭하면 문제를 삭제할 수 있습니다. 
-
-
+문제 옆 🗑️ 버튼을 클릭하면 문제를 삭제할 수 있습니다.

intro/bruno.md

@@ -21,7 +21,7 @@ https://www.usebruno.com/downloads
 Bruno를 실행하고 'Open Collection'을 클릭합니다.
 Codedang 폴더에서 collection 폴더의 client 또는 admin을 선택합니다.
 
-![Open Collection](bruno-start.png)
+![Open Collection](assets/bruno-start.png)
 
 ### 3. 환경 변수 설정
 
@@ -30,13 +30,13 @@ Codedang 폴더에서 collection 폴더의 client 또는 admin을 선택합니
 - Development: 개발 서버 (https://dev.codedang.com)
 - Local: 로컬 서버 (http://localhost)
 
-![Environment](bruno-env.png)
+![Environment](assets/bruno-env.png)
 
 ### 4. 확인
 
 왼쪽 탭에서 request를 선택하여 실행할 수 있습니다. `baseUrl`이 초록색으로 표시되는지 확인해주세요.
 
-![Select](bruno-select.png)
+![Select](assets/bruno-select.png)
 
 ## Convention 🤙
 
@@ -72,9 +72,11 @@ Endpoint마다 'Succeed' request의 'Docs' 탭에 아래 Format을 준수하여
 
 ```markdown
 ## API 제목
+
 API가 수행하는 역할을 기재합니다.
 
 ### Args / Query / Params / Body
+
 필요한 경우, Args/Query/Params/Body에 대한 설명을 표로 정리합니다.
 이름, 타입, 의미, 기본값, 제약사항을 포함해야 합니다.
 (예)
@@ -85,19 +87,21 @@ API가 수행하는 역할을 기재합니다.
 |problemId|Int|problemId와 contestId중 하나는 반드시 포함한다.|
 |contestId|Int|problemId와 contestId중 하나는 반드시 포함한다.|
 
-
 ### Error Case
+
 API를 호출했을 때 발생 가능한 Error Case의 이름과 설명을 기재합니다.
 Error case의 이름은 실패하는 파일의 이름과 일치시켜주세요.
 이름은 '#' 4개, 설명은 줄글로 작성합니다.
 (예)
+
 #### BAD_USER_INPUT(1)
+
 password가 조건에 맞지 않는 경우.
 ```
 
 ### Scripts
 
-로그인 및 권한이 필요한 request의 경우, Pre Request에서 사전 인증 작업을 수행해주세요. GraphQL의 경우, Admin 계정으로 로그인하는 작업이 전역으로 적용되어 있습니다.  
+로그인 및 권한이 필요한 request의 경우, Pre Request에서 사전 인증 작업을 수행해주세요. GraphQL의 경우, Admin 계정으로 로그인하는 작업이 전역으로 적용되어 있습니다.
 
 ~~Request를 보낼 때 상황별로 결과가 달라지지 않게 해주세요. 다시 말해 **언제나 동일한 결과**가 오게 해주세요.~~
 
@@ -106,14 +110,18 @@ password가 조건에 맞지 않는 경우.
 모든 request마다 test를 충분히 작성해주세요(상태 코드 검사, body 검사 등). PR이 merge될 때마다 자동으로 E2E 검사가 이뤄집니다.
 
 다음 항목을 포함해야 합니다.
+
 #### REST API
+
 - 성공하는 경우
   - res.status
   - res.body의 모든 property
 - 실패하는 경우
   - res.status
   - res.message
+
 #### GraphQL
+
 - 성공하는 경우
   - res.body.data[0] 존재 유무
 - 실패하는 경우
@@ -122,7 +130,7 @@ password가 조건에 맞지 않는 경우.
 
 ### GraphQL
 
-![GraphQL Docs](graphql-docs.png)
+![GraphQL Docs](assets/graphql-docs.png)
 GraphQL 서버 개발 시, field 타입을 정확하게 지정하여 Docs panel만으로 필드 및 반환 객체의 이름과 타입 정보를 알 수 있게 해 주세요.
 
 Query나 Mutation에 인자가 들어가는 경우, `Variables` 항목에 분리하여 작성해주세요.

intro/getting-started.md

@@ -7,33 +7,33 @@
 2. GitPod
 3. Manual
 
-가장 권장하는 개발 환경은 Container 내에서 개발하는 Visual Studio Code이지만, 어려울 경우에는 GitPod을 이용하거나 직접 세팅할 수도 있습니다. 
+가장 권장하는 개발 환경은 Container 내에서 개발하는 Visual Studio Code이지만, 어려울 경우에는 GitPod을 이용하거나 직접 세팅할 수도 있습니다.
 
 ## Visual Studio Code (이하 VSCode)
 
 ### 1. 기본 도구 설치 (Git, WSL2(Windows), Docker)
 
 - **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`)
+  Linux는 패키지 관리도구로 쉽게 설치할 수 있습니다. (예: Debian 계열인 경우 `sudo apt install git-all`)
 
 - **WSL2(Windows)**: 자세한 설치 방법은 [WSL 설치 공식 가이드](https://docs.microsoft.com/ko-kr/windows/wsl/install)를 참고해주세요.
 
-- **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/)에서 찾아 설치하면 됩니다.
+- **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 설치
 
 [VSCode 홈페이지](https://code.visualstudio.com/)에서 VSCode 설치 파일을 다운로드 받고, 파일을 실행하여 설치합니다.
 
-![VSCode Download](vscode-download.png)
+![VSCode Download](assets/vscode-download.png)
 
 ### 3. Remote - Containers 확장 설치
 
 왼쪽의 'Extensions' icon을 눌러(단축키 Ctrl+Shift+X, ⇧⌘X) "remote containers"를 검색창에 입력합니다.
 'Remote - Containers'를 선택하고 'Install' 버튼을 눌러 설치합니다.
 
-![Remote - Containers](remote-containers.png)
+![Remote - Containers](assets/remote-containers.png)
 
 ### 4. Clone Repository
 
@@ -46,18 +46,18 @@ Windows file system에 clone 받는 것보다 WSL file system에 clone 받는 
 WSL에 clone 받는 방법은 아래 설명을 참고해주세요.
 :::
 
-![Git Clone in VSCode](git-clone.png)
+![Git Clone in VSCode](assets/git-clone.png)
 
 #### 4-1. WSL에 Clone 받기 (Windows만)
 
 3번처럼 'Extensions' 탭을 열어 "remote wsl"을 검색창에 입력합니다.
 'Remote - WSL'을 선택하고 'Install' 버튼을 눌러 설치합니다.
 
-![Remote - WSL](remote-wsl.png)
+![Remote - WSL](assets/remote-wsl.png)
 
 왼쪽 아래의 `><` 모양 아이콘을 누르고 'New WSL Window' 옵션을 선택하여 WSL 환경에서 VSCode를 시작합니다.
 
-![New WSL Window](new-wsl-window.png)
+![New WSL Window](assets/new-wsl-window.png)
 
 이후 4번과 같은 방식으로 WSL 내에 clone하면 됩니다.
 
@@ -69,7 +69,7 @@ Repository가 열리면 좌측 하단의 `><` 모양 아이콘을 누르고, "Re
 이후 자동으로 Docker container가 생성되며 도구와 라이브러리, VSCode 확장들이 설치됩니다.
 초기 구성에는 5~10분 정도 소요되지만, 다시 실행할 때에는 오래 걸리지 않습니다.
 
-![Reopen in Container](reopen-in-container.png)
+![Reopen in Container](assets/reopen-in-container.png)
 
 ### 6. Preview server 열기
 
@@ -84,7 +84,7 @@ pnpm dev
 
 Story(component 문서)를 보고 싶으면, `pnpm story` 명령어를 입력해주세요.
 
-![Frontend Preview](frontend-preview.png)
+![Frontend Preview](assets/frontend-preview.png)
 
 #### 6-2. Backend
 
@@ -93,7 +93,7 @@ cd backend
 pnpm start:dev
 ```
 
-![Backend Preview](backend-preview.png)
+![Backend Preview](assets/backend-preview.png)
 
 ## GitPod
 

intro/index.md

@@ -12,4 +12,4 @@
 스꾸딩 팀 뿐만 아니라 누구나 수정하고 싶은 기능을 건의하고, 심지어 직접 구현할 수 있습니다.
 자세한 내용은 [GitHub에서 확인해보세요.](https://github.com/skkuding) (이슈 & PR은 언제나 환영이에요!)
 
-![코드당](codedang.png)
+![코드당](assets/codedang.png)

project/stage-server.md

@@ -2,7 +2,7 @@
 
 스테이지 서버는 배포 전 테스트를 위한 서버로, [dev.codedang.com](https://dev.codedang.com/)에서 확인할 수 있습니다.
 
-![배포 과정](./deploy-pipeline.png)
+![배포 과정](assets/deploy-pipeline.png)
 
 `main` 브랜치에 올라간 코드는 `deployment` environment에서 자동으로 스테이지 서버에 배포되며,
 수동으로 production 배포를 trigger하면 `production` environment에서 진행합니다.
@@ -63,4 +63,4 @@ GitHub의 codedang repository에서 `Settings` > 좌측 사이드 바 `Actions`
 
 이후 설명된 내용을 따라 Runner를 등록합니다.
 
-![GitHub Action Runner 등록](./github-actions-runner.png)
+![GitHub Action Runner 등록](assets/github-actions-runner.png)