TEST

.github/ISSUE_TEMPLATE/general_issue.md

@@ -0,0 +1,16 @@
+---
+name: General Issue
+about: 기존 템플릿에 맞지 않는 새로운 유형의 이슈를 제보하거나 논의하고 싶을 때 사용해주세요.
+title: '[유형] 제목입력'
+labels: ''
+assignees: ''
+---
+
+## 📝 이슈 설명 
+<!-- 어떤 문제가 발생하고 있는지 구체적으로 작성해주세요. -->
+
+## 👀 기대 동작
+<!-- 어떤 동작/결과를 기대하시는지 알려주세요. -->
+
+## 🔍 참고 사항 (선택)
+<!-- 스크린샷, 로그, 또는 해결 방안 아이디어가 있다면 공유해주세요. 작성해주세요. -->

.github/workflows/deploy-extension.yml

@@ -0,0 +1,95 @@
+name: Deploy-Chrome-Extension
+
+on:
+  push:
+    branches:
+      - production
+
+jobs:
+  build:
+    name: Build Chrome Extension
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout Git repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      # manifest.json의 버전을 자동으로 업데이트 (build 번호만 증가)
+      - name: Auto bump manifest version + version_name
+        run: yarn extension-version
+
+      # 빌드 실행
+      - name: Build project
+        run: yarn build
+
+      # 빌드된 dist + manifest.json 압축
+      - name: Archive dist folder into zip
+        run: zip -r chrome-extension-${{ github.sha }}.zip dist
+
+      # zip 파일을 GitHub Actions artifact로 업로드 (다음 job에서 사용)
+      - name: Upload zip as artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: chrome-extension
+          path: chrome-extension-${{ github.sha }}.zip
+
+  upload:
+    name: Upload to Chrome Web Store
+    runs-on: ubuntu-latest
+    needs: build
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    env:
+      EXTENSION_ID: ${{ secrets.EXTENSION_ID }}
+
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # 앞 단계에서 업로드한 artifact 다운로드
+      - name: Download built artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: chrome-extension
+
+      # Chrome Web Store CLI 설치
+      - name: Install chrome-webstore-upload-cli
+        run: yarn global add chrome-webstore-upload-cli
+
+      # 확장 프로그램 업로드
+      - name: Upload extension zip
+        run: |
+          ZIP_FILE=$(ls *.zip)
+          chrome-webstore-upload upload \
+            --source $ZIP_FILE \
+            --extension-id ${{ secrets.EXTENSION_ID }} \
+            --client-id ${{ secrets.CI_GOOGLE_CLIENT_ID }} \
+            --client-secret ${{ secrets.CI_GOOGLE_CLIENT_SECRET }} \
+            --refresh-token ${{ secrets.CI_GOOGLE_REFRESH_TOKEN }}
+
+      # 업로드 후 Web Store에 게시(publish)
+      - name: Publish extension
+        run: |
+          chrome-webstore-upload publish \
+            --extension-id ${{ secrets.EXTENSION_ID }} \
+            --client-id ${{ secrets.CI_GOOGLE_CLIENT_ID }} \
+            --client-secret ${{ secrets.CI_GOOGLE_CLIENT_SECRET }} \
+            --refresh-token ${{ secrets.CI_GOOGLE_REFRESH_TOKEN }}

.github/workflows/deploy.yml

@@ -1,24 +1,19 @@
-# 워크플로 이름: GitHub Actions 탭에서 보이는 이름
 name: Deploy-Production
 
-# 언제 실행할지 정의: main 브랜치에 push될 때 자동 실행됨
 on:
   push:
     branches:
-      - main
+      - production
 
 jobs:
   build:
-    # 어떤 환경에서 실행할지 지정 (Ubuntu 최신 LTS)
     runs-on: ubuntu-latest
 
-    # 여러 버전의 Node.js로 실행 가능하도록 matrix 전략 사용
     strategy:
       matrix:
-        node-version: [20.x] # 현재는 Node 20만 지정
+        node-version: [20.x]
 
     steps:
-      # GitHub 레포지토리 코드 체크아웃
       - name: Checkout Git repository
         uses: actions/checkout@v4
 

.husky/commit-msg

@@ -1,5 +1,8 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
+nvm use >/dev/null
 
 npx --no-install commitlint --edit "$1" || {
   echo "\n❌  커밋 메시지가 규칙을 따르지 않습니다! 🚨"

.husky/pre-commit

@@ -1,4 +1,7 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint-staged
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
+nvm use >/dev/null
+
+yarn lint-staged

.prettierignore

@@ -1,2 +1,3 @@
 node_modules
-package.json
+package.json
+*.svg

CONTRIBUTING.md

@@ -1,6 +1,10 @@
-# Delook 프로젝트 기여 가이드
+# Delook(디룩) 프로젝트 기여 가이드
 
-Delook 오픈소스 프로젝트에 관심을 가져주셔서 감사합니다. 이 문서는 Delook 프로젝트에 기여하는 방법과 절차를 안내하며, 원활한 협업을 위해 지켜야 할 규칙들을 정리했습니다. 기여 전에 아래 가이드라인을 읽고 따라 주시기 바랍니다.
+Delook(디룩) 오픈소스 프로젝트에 관심을 가져주셔서 감사합니다.
+
+이 문서는 디룩에 기여하는 방법과 절차를 안내하며, 원활한 협업을 위해 지켜야 할 규칙들을 정리했습니다.
+
+기여 전에 아래 가이드라인을 읽고 따라 주시기 바랍니다.
 
 ## 목차
 
@@ -11,26 +15,35 @@ Delook 오픈소스 프로젝트에 관심을 가져주셔서 감사합니다. 
 - [문서 작성 가이드라인](#문서-작성-가이드라인)
 - [문서 작성 스타일 가이드라인](#문서-작성-스타일-가이드)
 - [템플릿 사용 안내](#템플릿-사용-안내)
+- [이미지 삽입 가이드](#이미지-삽입-가이드)
 
 ## 기여 방식 개요
 
-Delook 프로젝트에 새로운 기능이나 문서를 기여하려면 다음 절차를 따르면 됩니다:
+현재 디룩 프로젝트는 다음 두 가지 방식의 기여를 받고 있습니다:
+
+1. **프로그래밍 관련 콘텐츠 기여**
+
+   - 새로운 프로그래밍 개념이나 지식, 기술 면접 질의응답 콘텐츠
+   - 기존 콘텐츠의 개선 및 보완
+
+2. **버그 리포트 및 개선**
+   - 발견된 버그 신고
+   - 버그 수정 및 개선
 
+> 기능 제안이나 UI 개선은 [이슈](https://github.com/delook-dev/delook/issues) 또는 [디스커션](https://github.com/delook-dev/delook/discussions)을 통해 남겨주시면 관리자가 검토 후 작업하도록 하겠습니다.
+
+기여를 진행하기 전에 다음 절차를 따라주세요:
 
 1. GitHub 저장소를 자신의 계정으로 포크(fork)합니다. 포크한 저장소를 로컬에 클론(clone)하여 개발 환경을 준비합니다.
 
 2. 작업 전 반드시 이슈(issue)를 생성합니다. 작업할 주제를 명확히 하고, 템플릿에 따라 작성해주세요.
 
-3. main 브랜치에서 새로운 브랜치를 생성해 작업합니다. (예: `feat/bookmark`)
-
-   - **문서(docs) 기여의 경우**  
-     작업 중인 브랜치가 다른 기여자의 브랜치와 충돌하지 않도록  
-     `docs/작성자명/주제` 형식으로 브랜치 이름을 명확하게 설정하는 것을 권장합니다. (예: `docs/waterbinnn/js-array`)  
+3. main 브랜치에서 새로운 브랜치를 생성해 작업합니다.
 
-      ※ 여러 개의 문서를 하나의 브랜치에서 작성하는 경우, 주제 부분에는 보다 포괄적인 범주 또는 작성 목적을 사용하는 것을 추천합니다. (예: `docs/waterbinnn/js`)
+   - **콘텐츠 기여의 경우**: `docs/작성자명/주제` 형식 (예: `docs/waterbinnn/js-array`)
+   - **버그 수정의 경우**: `fix/작성자명/버그-설명` 형식 (예: `fix/waterbinnn/scroll`)
 
-4. 커밋 메시지 규칙을 지켜 커밋을 작성합니다.  
-   커밋 메시지는 아래 지침에 따라 작성합니다 (자세한 내용은 커밋 메시지 및 PR 규칙 섹션을 참고하세요).
+4. 커밋 메시지 규칙을 지켜 커밋을 작성합니다.
 
 5. 변경 사항을 푸시한 후 Pull Request(PR)를 생성합니다.
 
@@ -40,9 +53,9 @@ Delook 프로젝트에 새로운 기능이나 문서를 기여하려면 다음 
 
 - 모든 작업은 먼저 이슈(issue)를 작성한 후 진행합니다. 반드시 이슈를 선행해주세요.
 - 작업에 맞는 이슈 템플릿을 선택해 작성해주세요.
-- 문서(docs) 기여 시에는 가능하면 문서 1건당 이슈를 하나씩 작성해주세요.
+- 콘텐츠(docs) 기여 시에는 가능하면 문서 1건당 이슈를 하나씩 작성해주세요.
   - `[DOCS]: 언어 또는 주제 카테고리  - 주제`
-  - 예: `[DOCS]: javascript - 콜백함수 개념 설명` 
+  - 예: `[DOCS]: javascript - 콜백함수 개념 설명`
 - 여러 문서를 동시에 작성할 경우에도 각각 이슈를 남기고, PR은 하나로 묶어 제출 가능합니다.
 
 ## 커밋 메시지 및 PR 규칙
@@ -180,3 +193,67 @@ dateModified: 최종 수정일 (YYYY.MM.DD)
 
 - 예시는 ####(h4)로 구분합니다.
 ```
+
+## 이미지 삽입 가이드
+
+MDX 문서에 이미지를 삽입하려면 아래 절차를 따르세요.
+
+### 1. 이미지 파일 추가
+
+이미지 파일을 아래 경로에 추가해주세요:
+
+- 경로: `public/docs-assets/${category}`
+- `${category}`는 문서 주제에 맞게 설정 (예: `javascript`)
+- 폴더가 없으면 직접 생성
+- **폴더명은 문서 카테고리와 일치해야 합니다.**
+
+> 예시:  
+> JavaScript 관련 문서인 경우 →  
+> `public/docs-assets/javascript/image.png`
+
+### 2. MDX 파일로 돌아가기
+
+이미지를 삽입할 `.mdx` 파일로 돌아갑니다.
+
+### 3. 이미지 컴포넌트 import
+
+`---` 메타태그 블록 아래에 다음 import 문을 추가합니다.
+
+```jsx
+import { ImageContainer } from '/src/components/ui/ImageContainer.tsx';
+```
+
+### 4. 이미지 컴포넌트 사용
+
+본문에 아래와 같이 <ImageContainer> 컴포넌트를 사용하세요.
+
+```tsx
+<ImageContainer category="카테고리명" fileName="파일명.png" alt="이미지 대체 텍스트" />
+```
+
+props 설명:
+
+| 속성       | 설명                                  |
+| ---------- | ------------------------------------- |
+| `category` | `public/docs-assets` 하위 폴더명      |
+| `fileName` | 이미지 파일명 (확장자 포함)           |
+| `alt`      | 이미지 대체 텍스트 (접근성 향상 목적) |
+
+### 5. 전체 예시 코드
+
+```mdx
+---
+title: 이미지 삽입 테스트
+type: concept
+language: Javascript
+tags:
+  - Javascript
+dateModified: 2025.00.00
+---
+
+import { ImageContainer } from '/src/components/ui/ImageContainer.tsx';
+
+# 이미지 삽입 예시
+
+<ImageContainer category="javascript" fileName="image.png" alt="이미지 대체 텍스트" />
+```

PRIVACY.md

@@ -0,0 +1,36 @@
+# 개인정보 처리방침
+
+디룩(Delook)은 사용자의 개인정보 보호를 중요하게 생각하며, 사용자로부터 수집하는 정보의 최소화와 안전한 처리를 최우선으로 합니다. 본 방침은 서비스(확장프로그램, 웹사이트 등)를 이용할 경우 적용되며, 서비스 이용 시 아래 내용에 동의하는 것으로 간주합니다.
+
+## 1. 수집하는 정보
+
+서비스 제공을 위해 다음과 같은 데이터를 수집할 수 있습니다:
+
+- 사용자가 설정한 테마 정보
+- 사용자가 저장한 북마크 정보
+- 콘텐츠 필터링 및 커스터마이징 관련 설정
+
+모든 데이터는 사용자의 브라우저 로컬 스토리지에만 저장되며 외부 서버로 전송되지 않습니다.
+단, Google Analytics를 통한 서비스 이용 통계 데이터는 Google의 서버로 전송될 수 있습니다.
+
+## 2. 정보의 사용 목적
+
+- 사용자의 새 탭 환경을 개인화하여 콘텐츠를 보여줍니다.
+- 사용자가 저장한 콘텐츠에 빠르게 접근할 수 있도록 합니다.
+- 사용자가 설정한 필터나 테마 등 UI를 지속적으로 반영합니다.
+
+## 3. 외부 전송 및 제3자 제공
+
+본 서비스는 서버와의 통신 없이 동작하며, 사용자의 어떠한 개인정보도 외부 서버로 전송하거나 제3자에게 제공하지 않습니다.
+
+## 4. 권한 사용 내역
+
+- `storage`: 사용자 설정(테마, 필터, 북마크 등)을 브라우저에 저장하기 위해 필요합니다. 이 정보는 외부로 전송되지 않습니다.
+
+## 5. 원천 코드 및 오픈소스
+
+디룩(Delook)은 오픈소스로, 누구나 코드를 확인하고 개선에 [기여](https://github.com/delook-dev/delook/blob/main/CONTRIBUTING.md)할 수 있습니다. 자세한 코드는 [GitHub 저장소](https://github.com/delook-dev/delook)에서 확인하실 수 있습니다:
+
+## 6. 사용자 권리
+
+본 서비스는 사용자의 개인정보를 수집하지 않기 때문에, 별도의 개인정보 열람, 수정, 삭제 요청 절차는 존재하지 않습니다. 단, 사용자는 Chrome 브라우저의 확장 프로그램 관리 또는 로컬 스토리지 삭제를 통해 언제든지 데이터를 초기화할 수 있습니다.