+ 
+ Shapic
+
+
+SNS 플랫폼에 최적화된 이미지 리사이즈 & 최적화 데스크톱 앱
+
+## 왜 만들었나
+
+고화소 사진을 Instagram 등 SNS에 그대로 올리면 플랫폼의 자동 압축과 리사이즈로 화질이 뭉개집니다. 업로드 전에 플랫폼 규격에 맞게 직접 리사이즈하면 화질 저하를 최소화할 수 있지만, 이를 위해 매번 Photoshop 같은 무거운 도구를 실행하는 건 비효율적입니다. Shapic은 드래그 앤 드롭만으로 SNS 최적화 리사이즈를 완료할 수 있도록 설계된 경량 데스크톱 앱입니다.
+
+
+
+## 주요 기능
+
+- **SNS 프리셋** — Instagram, Facebook, X(Twitter), YouTube, TikTok, LinkedIn 등 33개 내장 프리셋
+- **커스텀 프리셋** — 원하는 크기/포맷/품질로 직접 프리셋 생성
+- **다양한 리사이즈 모드** — 프리셋 맞춤(Cover/Contain), 비율 유지, 긴쪽/짧은쪽/너비/높이 기준
+- **EXIF 프레임** — 카메라·렌즈·촬영 정보를 미니멀 화이트 프레임으로 자동 삽입
+- **일괄 처리** — 여러 이미지를 한 번에 변환, 실시간 진행률 표시
+- **실시간 미리보기** — 설정 변경 시 결과물 즉시 확인, 압축률 표시
+- **포맷 변환** — JPEG(mozjpeg) / WebP 출력, 품질 조절 가능
+- **다양한 입력 포맷** — JPG, PNG, WebP, HEIF, HEIC, TIFF 지원
+
+## 다운로드
+
+| 플랫폼 | 다운로드 |
+| --------------------- | -------------------------------------------------------------- |
+| macOS (Apple Silicon) | [다운로드](https://github.com/devlasbe/shapic/releases/latest/download/Shapic-arm64.dmg) |
+| macOS (Intel) | [다운로드](https://github.com/devlasbe/shapic/releases/latest/download/Shapic-x64.dmg) |
+| Windows | [다운로드](https://github.com/devlasbe/shapic/releases/latest/download/Shapic-Setup.exe) |
+
+## macOS 설치 안내
+
+현재 Shapic은 Apple 공증을 받지 않은 상태이므로, 처음 실행 시 보안 경고가 표시됩니다.
+
+1. 다운로드한 `.dmg` 파일을 열고 Shapic을 Applications 폴더로 드래그
+2. Shapic을 실행하면 **"확인할 수 없는 개발자"** 경고가 표시됨
+3. **시스템 설정 → 개인정보 보호 및 보안** 으로 이동
+4. 하단의 **"그래도 열기"** 버튼 클릭
+5. 이후부터는 정상적으로 실행됩니다
+
+## 사용법
+
+### 1. 이미지 불러오기
+
+앱 중앙 영역에 이미지를 드래그 앤 드롭하거나, 클릭하여 파일을 선택합니다.
+
+### 2. 설정
+
+우측 패널에서 리사이즈 옵션을 설정합니다.
+
+1. **프리셋 선택** — SNS 플랫폼별 프리셋 또는 커스텀 프리셋
+2. **리사이즈 모드** — 프리셋 맞춤(Cover/Contain), 비율 유지 등
+3. **출력 포맷** — JPEG 또는 WebP, 품질 슬라이더로 조절
+4. **EXIF 프레임** — 촬영 정보가 있는 이미지에 자동 프레임 적용
+5. **출력 폴더** — 변환된 이미지가 저장될 위치 선택
+
+### 3. 변환
+
+- **단일 변환** — 선택한 이미지 1장만 변환
+- **일괄 변환** — 불러온 모든 이미지를 한 번에 변환
+
+## 기술 스택
+
+| 분류 | 기술 |
+| ------------- | ------------------------------- |
+| 프레임워크 | Electron 41 |
+| 프론트엔드 | React 19, TypeScript |
+| 스타일링 | Tailwind CSS 4 |
+| 상태 관리 | Zustand |
+| 이미지 처리 | Sharp |
+| EXIF 파싱 | exif-reader |
+| 빌드 | Electron Vite, Electron Builder |
+| 패키지 매니저 | pnpm |
+
+## 로컬 실행
+
+### 요구 사항
+
+- Node.js 22+
+- pnpm
+
+### 설치 및 실행
+
+```bash
+# 저장소 클론
+git clone https://github.com/devlasbe/shapic.git
+cd shapic
+
+# 의존성 설치
+pnpm install
+
+# 개발 모드 실행
+pnpm dev
+```
+
+### 빌드 & 패키징
+
+```bash
+# 프로덕션 빌드
+pnpm build
+
+# 앱 패키징 (dmg / exe)
+pnpm package
+```
+
+## 프로젝트 구조
+
+```
+src/
+├── main/ # Electron 메인 프로세스
+│ ├── ipc/ # IPC 핸들러 (이미지, 프리셋, 다이얼로그)
+│ └── services/ # 이미지 처리, EXIF 파싱, 프레임 렌더링
+├── preload/ # Preload 스크립트 (API 브릿지)
+├── renderer/ # React 프론트엔드
+│ └── src/
+│ ├── components/ # UI 컴포넌트 (레이아웃, 설정, 프리뷰 등)
+│ ├── hooks/ # 커스텀 훅
+│ ├── presets/ # 기본 프리셋 정의
+│ ├── stores/ # Zustand 상태 관리
+│ ├── types/ # 타입 정의
+│ └── utils/ # 유틸리티
+└── shared/ # 메인/렌더러 공유 모듈 (타입, 상수, 프리셋)
+```
+
+## 라이선스
+
+이 프로젝트는 [GPL-3.0 라이선스](./LICENSE)로 배포됩니다.
diff --git a/electron-builder.yml b/electron-builder.yml
index ff479cb..b55f62d 100644
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -1,5 +1,6 @@
-appId: com.imageforge.app
-productName: ImageForge
+appId: com.shapic.app
+productName: Shapic
+copyright: Copyright © 2026 lasbe
directories:
buildResources: resources
output: dist
@@ -13,14 +14,9 @@ asarUnpack:
mac:
target:
- dmg
- - zip
category: public.app-category.graphics-design
- artifactName: "${productName}-${version}-${arch}.${ext}"
+ artifactName: "${productName}-${arch}.${ext}"
win:
target:
- nsis
- - portable
-linux:
- target:
- - AppImage
- - deb
+ artifactName: "${productName}-Setup.${ext}"
diff --git a/package.json b/package.json
index 8982450..d5f9334 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
{
- "name": "imageforge",
+ "name": "shapic",
+ "productName": "Shapic",
"version": "1.0.0",
"description": "Image resize & optimize desktop app for SNS platforms",
"type": "module",
@@ -16,8 +17,12 @@
"electron",
"sharp"
],
- "author": "",
- "license": "ISC",
+ "author": {
+ "name": "lasbe",
+ "email": "devlasbe@gmail.com",
+ "url": "https://lasbe.kr"
+ },
+ "license": "GPL-3.0",
"dependencies": {
"clsx": "^2.1.1",
"electron-store": "^11.0.2",
diff --git a/resources/icon.icns b/resources/icon.icns
new file mode 100644
index 0000000..6eba98d
Binary files /dev/null and b/resources/icon.icns differ
diff --git a/resources/icon.png b/resources/icon.png
new file mode 100644
index 0000000..ccff251
Binary files /dev/null and b/resources/icon.png differ
diff --git a/src/main/index.ts b/src/main/index.ts
index 5e6bb29..588b2ee 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,8 +1,10 @@
-import { app, BrowserWindow, shell, protocol, net } from 'electron'
-import { join } from 'path'
-import { registerAllIpcHandlers } from './ipc/index.js'
+import { app, BrowserWindow, shell, protocol, net, Menu, nativeImage } from "electron";
+import { join } from "path";
+import { registerAllIpcHandlers } from "./ipc/index.js";
-let mainWindow: BrowserWindow | null = null
+app.name = "Shapic";
+
+let mainWindow: BrowserWindow | null = null;
const createWindow = () => {
mainWindow = new BrowserWindow({
@@ -10,53 +12,122 @@ const createWindow = () => {
height: 800,
minWidth: 900,
minHeight: 600,
- title: 'ImageForge',
- titleBarStyle: 'hiddenInset',
+ title: "Shapic",
+ icon: join(__dirname, "../../resources/icon.png"),
+ titleBarStyle: "hiddenInset",
trafficLightPosition: { x: 12, y: 14 },
webPreferences: {
- preload: join(__dirname, '../preload/index.js'),
+ preload: join(__dirname, "../preload/index.mjs"),
nodeIntegration: false,
contextIsolation: true,
sandbox: false,
- webSecurity: true
- }
- })
+ webSecurity: true,
+ },
+ });
- mainWindow.on('ready-to-show', () => {
- mainWindow?.show()
- })
+ mainWindow.on("ready-to-show", () => {
+ mainWindow?.show();
+ });
mainWindow.webContents.setWindowOpenHandler((details) => {
- shell.openExternal(details.url)
- return { action: 'deny' }
- })
+ shell.openExternal(details.url);
+ return { action: "deny" };
+ });
- if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
- mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+ if (!app.isPackaged && process.env["ELECTRON_RENDERER_URL"]) {
+ mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
} else {
- mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+ mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
}
-}
+};
app.whenReady().then(() => {
// file:// 프로토콜로 로컬 이미지 접근 허용
- protocol.handle('local-file', (request) => {
- const filePath = decodeURIComponent(request.url.replace('local-file://', ''))
- return net.fetch(`file://${filePath}`)
- })
+ protocol.handle("local-file", (request) => {
+ const filePath = decodeURIComponent(request.url.replace("local-file://", ""));
+ return net.fetch(`file://${filePath}`);
+ });
+
+ // 앱 아이콘 경로
+ const iconPath = join(__dirname, "../../resources/icon.png");
+
+ // macOS dock 아이콘 설정 (dev 모드에서도 적용)
+ if (process.platform === "darwin") {
+ app.dock?.setIcon(nativeImage.createFromPath(iconPath));
+ }
+
+ // macOS About 패널 설정
+ app.setAboutPanelOptions({
+ applicationName: "Shapic",
+ applicationVersion: app.getVersion(),
+ copyright: "Copyright © 2026 lasbe",
+ credits: "devlasbe@gmail.com\nhttps://lasbe.kr",
+ website: "https://lasbe.kr",
+ });
+
+ // macOS 앱 메뉴 구성
+ if (process.platform === "darwin") {
+ const template: Electron.MenuItemConstructorOptions[] = [
+ {
+ label: app.name,
+ submenu: [
+ { role: "about" },
+ { type: "separator" },
+ { role: "services" },
+ { type: "separator" },
+ { role: "hide" },
+ { role: "hideOthers" },
+ { role: "unhide" },
+ { type: "separator" },
+ { role: "quit" },
+ ],
+ },
+ {
+ label: "Edit",
+ submenu: [
+ { role: "undo" },
+ { role: "redo" },
+ { type: "separator" },
+ { role: "cut" },
+ { role: "copy" },
+ { role: "paste" },
+ { role: "selectAll" },
+ ],
+ },
+ {
+ label: "View",
+ submenu: [
+ { role: "reload" },
+ { role: "forceReload" },
+ { role: "toggleDevTools" },
+ { type: "separator" },
+ { role: "resetZoom" },
+ { role: "zoomIn" },
+ { role: "zoomOut" },
+ { type: "separator" },
+ { role: "togglefullscreen" },
+ ],
+ },
+ {
+ label: "Window",
+ submenu: [{ role: "minimize" }, { role: "zoom" }, { type: "separator" }, { role: "front" }],
+ },
+ ];
+ Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+ }
- registerAllIpcHandlers()
- createWindow()
+ registerAllIpcHandlers();
+ createWindow();
- app.on('activate', () => {
+ app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
- createWindow()
+ createWindow();
}
- })
-})
+ });
+});
-app.on('window-all-closed', () => {
- if (process.platform !== 'darwin') {
- app.quit()
+app.on("window-all-closed", () => {
+ if (process.platform !== "darwin") {
+ app.quit();
}
-})
+});
diff --git a/src/main/ipc/dialog.ts b/src/main/ipc/dialog.ts
index 0b1d2af..00cc562 100644
--- a/src/main/ipc/dialog.ts
+++ b/src/main/ipc/dialog.ts
@@ -1,6 +1,5 @@
import { ipcMain, dialog, BrowserWindow } from 'electron'
-
-const SUPPORTED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp', 'heif', 'heic', 'tiff', 'tif']
+import { SUPPORTED_EXTENSIONS } from '../../shared/constants.js'
export const registerDialogHandlers = () => {
ipcMain.handle('dialog:openFile', async (event) => {
diff --git a/src/main/ipc/image.ts b/src/main/ipc/image.ts
index 338eb4d..ce63388 100644
--- a/src/main/ipc/image.ts
+++ b/src/main/ipc/image.ts
@@ -1,56 +1,14 @@
import { ipcMain, BrowserWindow } from 'electron'
import { loadImageMetadata, processBatch, generatePreview } from '../services/image-processor.js'
import { getCustomPresets } from '../services/preset-store.js'
-
-type PresetLookupType = {
- id: string
- width: number
- height: number | null
- format: 'jpeg' | 'webp'
- quality: number
-}
-
-// 내장 프리셋을 main process에서도 참조 (renderer의 defaults.ts와 동일)
-const BUILT_IN_PRESET_MAP: Record
+
diff --git a/src/renderer/src/components/preset-selector.tsx b/src/renderer/src/components/preset-selector.tsx
index 30a33a5..1549651 100644
--- a/src/renderer/src/components/preset-selector.tsx
+++ b/src/renderer/src/components/preset-selector.tsx
@@ -14,7 +14,7 @@ const PresetSelector = () => {
const grouped = useMemo(() => getGroupedPresets(customPresets), [customPresets])
return (
-
-
-
@@ -114,6 +129,9 @@ const PresetModal = ({ onClose }: PresetModalPropsType) => {
max={100}
className="w-full mt-1.5 px-2.5 py-1.5 text-sm bg-card border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
/>
+ {!isValidQuality(quality) && (
+
-
-
-
- ImageForge
+
+
- )
-}
+ );
+};
-export default LeftPanel
+export default LeftPanel;
diff --git a/src/renderer/src/components/layout/right-panel.tsx b/src/renderer/src/components/layout/right-panel.tsx
index 11bc25b..1ea4c32 100644
--- a/src/renderer/src/components/layout/right-panel.tsx
+++ b/src/renderer/src/components/layout/right-panel.tsx
@@ -1,16 +1,11 @@
-import Settings from '../settings'
+import Settings from "../settings";
const RightPanel = () => {
return (
-
+
+ 
+ Shapic
-
('jpeg')
- const [quality, setQuality] = useState(85)
+ const [quality, setQuality] = useState(100)
+
+ const isValid =
+ name.trim().length > 0 && isValidDimension(width) && isValidDimension(height) && isValidQuality(quality)
const handleSave = async () => {
- if (!name.trim()) return
+ if (!isValid) return
const saved = await window.api.preset.save({
name: name.trim(),
@@ -64,8 +72,7 @@ const PresetModal = ({ onClose }: PresetModalPropsType) => {
-
-
+
@@ -77,8 +84,12 @@ const PresetModal = ({ onClose }: PresetModalPropsType) => {
value={width}
onChange={(e) => setWidth(Number(e.target.value))}
min={1}
+ max={MAX_DIMENSION}
className="w-full mt-1.5 px-2.5 py-1.5 text-sm bg-card border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
/>
+ {!isValidDimension(width) && (
+
-
- 설정
-
-
+ 1~{MAX_DIMENSION} 사이 값을 입력해 주세요
+ )}
@@ -87,8 +98,12 @@ const PresetModal = ({ onClose }: PresetModalPropsType) => {
value={height}
onChange={(e) => setHeight(Number(e.target.value))}
min={1}
+ max={MAX_DIMENSION}
className="w-full mt-1.5 px-2.5 py-1.5 text-sm bg-card border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
/>
+ {!isValidDimension(height) && (
+
1~{MAX_DIMENSION} 사이 값을 입력해 주세요
+ )}1~100 사이 값을 입력해 주세요
+ )}
+
)}
- 
+ {imageError ? (
+ setImageError('이미지를 불러올 수 없습니다')}
+ />
+ )}
{/* 정보 바 */}
diff --git a/src/renderer/src/components/settings.tsx b/src/renderer/src/components/settings.tsx
index 68bdc2e..c96c051 100644
--- a/src/renderer/src/components/settings.tsx
+++ b/src/renderer/src/components/settings.tsx
@@ -1,12 +1,13 @@
import { useCallback } from 'react'
import { useAppStore } from '../stores/app-store'
-import { selectSelectedImage, selectHasImages } from '../stores/selectors'
+import { selectSelectedImage, selectHasImages, selectIsAllDone } from '../stores/selectors'
import { useProcessing } from '../hooks/use-processing'
import PresetSelector from './preset-selector'
import PillButton from './ui/pill-button'
import Slider from './ui/slider'
import Button from './ui/button'
-import type { OutputFormatType, FrameStyleType, ResizeFitType } from '../types'
+import Switch from './ui/switch'
+import type { OutputFormatType, ResizeFitType } from '../types'
const Settings = () => {
const options = useAppStore((s) => s.options)
@@ -14,8 +15,9 @@ const Settings = () => {
const setResizeMode = useAppStore((s) => s.setResizeMode)
const progress = useAppStore((s) => s.progress)
const hasImages = useAppStore(selectHasImages)
+ const isAllDone = useAppStore(selectIsAllDone)
const selectedImage = useAppStore(selectSelectedImage)
- const { startProcessing } = useProcessing()
+ const { startSingleProcessing, startBatchProcessing, processingModeRef } = useProcessing()
const handleSelectFolder = useCallback(async () => {
const folder = await window.api.dialog.openFolder()
@@ -24,132 +26,160 @@ const Settings = () => {
const hasExif = selectedImage?.exifData != null
- const canStart = hasImages && options.presetId && options.outputFolder && !progress.isProcessing
+ const commonDisabled = !options.presetId || !options.outputFolder || progress.isProcessing
+ const canSingle = !!selectedImage && !commonDisabled
+ const canBatch = hasImages && !isAllDone && !commonDisabled
return (
+
+ ) : (
+
+
+
+
+
+
+ + 이미지를 표시할 수 없습니다 +
++ {selectedImage.name} +
+
-
- {/* 프리셋 선택 */}
-
+ {/* 카드 1: 크기 설정 */}
+
+ {/* 프리셋 선택 */}
+
-
-
- setResizeMode({ kind: 'preset-fit', fit: 'cover' })}
- >
- 프리셋 맞춤
-
- setResizeMode({ kind: 'aspect-ratio' })}
- >
- 비율 유지
-
-
- {options.resizeMode.kind === 'preset-fit' && (
-
+
+
+ {/* 리사이즈 모드 */}
+
- {/* 포맷 선택 */}
-
+
+
setResizeMode({ kind: 'preset-fit', fit: 'cover' })}
>
- Cover
+ 프리셋 맞춤
setResizeMode({ kind: 'preset-fit', fit: 'contain' })}
+ active={options.resizeMode.kind === 'aspect-ratio'}
+ onClick={() => setResizeMode({ kind: 'aspect-ratio' })}
>
- Contain
+ 비율 유지
- )}
+ {options.resizeMode.kind === 'preset-fit' && (
+
+ setResizeMode({ kind: 'preset-fit', fit: 'cover' })}
+ >
+ Cover
+
+ setResizeMode({ kind: 'preset-fit', fit: 'contain' })}
+ >
+ Contain
+
+
+ )}
+
-
-
- setOption('outputFormat', 'jpeg')}
- >
- JPEG
-
- setOption('outputFormat', 'webp')}
- >
- WebP
-
+ {/* 카드 2: 출력 품질 */}
+ setOption('quality', v)}
- />
+
- {/* EXIF 프레임 */}
-
+ {/* 포맷 선택 */}
+
- {/* 품질 슬라이더 */}
-
+
+
-
+ setOption('outputFormat', 'jpeg')}
+ >
+ JPEG
+
+ setOption('outputFormat', 'webp')}
+ >
+ WebP
+
+
-
- {!hasExif && selectedImage && (
- setOption('quality', v)}
+ />
- {/* 출력 폴더 */}
- 이 이미지에 EXIF 데이터가 없습니다
- )} - + {/* 품질 슬라이더 */} +
-
-
- {options.outputFolder && (
-
- {/* 변환 시작 버튼 */}
- {options.outputFolder}
- )} + {/* 카드 3: 부가 설정 */} +
+ {/* EXIF 프레임 */}
+
+
+
+
+
+ {/* 출력 폴더 */}
+
+
+ setOption('frameStyle', on ? 'minimal-white' : 'none')}
+ disabled={!options.presetId || (selectedImage != null && !hasExif)}
+ />
+
+ {!hasExif && selectedImage && (
+ 이 이미지에 EXIF 데이터가 없습니다
+ )} +
+
+
+ {options.outputFolder && (
+
{options.outputFolder}
+ )} +
+ {/* 변환 버튼 */}
+
+ process: (options: BatchProcessOptionsType) => Promise
+ preview: (request: PreviewRequestType) => Promise
+ onProgress: (callback: (progress: ProcessingProgressType) => void) => () => void
+ onComplete: (callback: (result: BatchResultType) => void) => () => void
+ }
+ preset: {
+ list: () => Promise
+ save: (preset: CustomPresetInputType) => Promise
+ delete: (id: string) => Promise
+ }
+ dialog: {
+ openFile: () => Promise
+ openFolder: () => Promise
+ }
+}
+
+declare global {
+ interface Window {
+ api: ShapicApiType
+ }
+}
diff --git a/src/renderer/src/hooks/use-processing.ts b/src/renderer/src/hooks/use-processing.ts
index db56e6b..fe721e9 100644
--- a/src/renderer/src/hooks/use-processing.ts
+++ b/src/renderer/src/hooks/use-processing.ts
@@ -1,15 +1,24 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect, useCallback, useRef } from 'react'
import { useAppStore } from '../stores/app-store.js'
import type { ProcessingProgressType, BatchResultType } from '../types/index.js'
+export type ProcessingModeType = 'single' | 'batch' | null
+
export const useProcessing = () => {
const images = useAppStore((s) => s.images)
+ const selectedImageId = useAppStore((s) => s.selectedImageId)
const options = useAppStore((s) => s.options)
const setProgress = useAppStore((s) => s.setProgress)
- const resetProgress = useAppStore((s) => s.resetProgress)
const updateImageStatus = useAppStore((s) => s.updateImageStatus)
const updateImageResult = useAppStore((s) => s.updateImageResult)
const updateImageError = useAppStore((s) => s.updateImageError)
+ const processingModeRef = useRef(null)
+ const imagesRef = useRef(images)
+
+ // images가 변경될 때 ref만 업데이트 (리스너 재등록 없음)
+ useEffect(() => {
+ imagesRef.current = images
+ }, [images])
useEffect(() => {
const unsubProgress = window.api.image.onProgress((raw) => {
@@ -36,7 +45,7 @@ export const useProcessing = () => {
const result = raw as BatchResultType
result.results.forEach((r) => {
- const img = images.find((i) => i.path === r.inputPath)
+ const img = imagesRef.current.find((i) => i.path === r.inputPath)
if (img) {
updateImageResult(img.id, {
outputSize: r.processedSize,
@@ -46,44 +55,67 @@ export const useProcessing = () => {
})
result.errors.forEach((e) => {
- const img = images.find((i) => i.path === e.inputPath)
+ const img = imagesRef.current.find((i) => i.path === e.inputPath)
if (img) {
updateImageError(img.id, e.error)
}
})
setProgress({ isProcessing: false, overallPercent: 100 })
+ processingModeRef.current = null
})
return () => {
unsubProgress()
unsubComplete()
}
- }, [images, setProgress, resetProgress, updateImageStatus, updateImageResult, updateImageError])
+ }, [setProgress, updateImageStatus, updateImageResult, updateImageError])
- const startProcessing = useCallback(async () => {
- const imagesToProcess = images.filter((img) => img.status !== 'done')
- if (imagesToProcess.length === 0 || !options.outputFolder) return
-
- setProgress({
- isProcessing: true,
- currentIndex: 0,
- totalCount: imagesToProcess.length,
- overallPercent: 0,
- currentFileName: imagesToProcess[0].name
- })
+ const processImages = useCallback(
+ async (imagesToProcess: typeof images) => {
+ if (imagesToProcess.length === 0 || !options.outputFolder) return
- imagesToProcess.forEach((img) => updateImageStatus(img.id, 'processing'))
+ setProgress({
+ isProcessing: true,
+ currentIndex: 0,
+ totalCount: imagesToProcess.length,
+ overallPercent: 0,
+ currentFileName: imagesToProcess[0].name
+ })
- await window.api.image.process({
- images: imagesToProcess.map((img) => ({ id: img.id, path: img.path, name: img.name })),
- outputDir: options.outputFolder,
- presetId: options.presetId,
- resizeMode: options.resizeMode,
- output: { format: options.outputFormat, quality: options.quality },
- frame: options.frameStyle
- })
- }, [images, options, setProgress, updateImageStatus])
+ imagesToProcess.forEach((img) => updateImageStatus(img.id, 'processing'))
+
+ await window.api.image.process({
+ images: imagesToProcess.map((img) => ({ id: img.id, path: img.path, name: img.name })),
+ outputDir: options.outputFolder,
+ presetId: options.presetId,
+ resizeMode: options.resizeMode,
+ output: { format: options.outputFormat, quality: options.quality },
+ frame: options.frameStyle
+ })
+ },
+ [options, setProgress, updateImageStatus]
+ )
+
+ const startSingleProcessing = useCallback(async () => {
+ const image = images.find((img) => img.id === selectedImageId)
+ if (!image) return
+
+ if (image.status === 'done') {
+ updateImageStatus(image.id, 'idle')
+ }
+
+ processingModeRef.current = 'single'
+ await processImages([image])
+ }, [images, selectedImageId, processImages, updateImageStatus])
+
+ const startBatchProcessing = useCallback(async () => {
+ const imagesToProcess = images.filter((img) => img.status !== 'done')
+ if (imagesToProcess.length === 0) return
+
+ processingModeRef.current = 'batch'
+ await processImages(imagesToProcess)
+ }, [images, processImages])
- return { startProcessing }
+ return { startSingleProcessing, startBatchProcessing, processingModeRef }
}
diff --git a/src/renderer/src/presets/defaults.ts b/src/renderer/src/presets/defaults.ts
index 397ad5b..f89bab3 100644
--- a/src/renderer/src/presets/defaults.ts
+++ b/src/renderer/src/presets/defaults.ts
@@ -1,391 +1 @@
-import type { PresetType, PresetCategoryType } from '../types/index.js'
-
-export const PRESET_CATEGORIES: Record = {
- instagram: 'Instagram',
- facebook: 'Facebook',
- twitter: 'Twitter / X',
- youtube: 'YouTube',
- tiktok: 'TikTok',
- linkedin: 'LinkedIn',
- web: 'Web',
- print: 'Print'
-}
-
-export const BUILT_IN_PRESETS: PresetType[] = [
- // --- Instagram (6) ---
- {
- id: 'ig-feed-square',
- name: 'Feed Square',
- category: 'instagram',
- width: 1080,
- height: 1080,
- format: 'jpeg',
- quality: 85,
- description: '1080x1080 · 1:1',
- isCustom: false
- },
- {
- id: 'ig-feed-portrait',
- name: 'Feed Portrait',
- category: 'instagram',
- width: 1080,
- height: 1350,
- format: 'jpeg',
- quality: 85,
- description: '1080x1350 · 4:5',
- isCustom: false
- },
- {
- id: 'ig-feed-landscape',
- name: 'Feed Landscape',
- category: 'instagram',
- width: 1080,
- height: 566,
- format: 'jpeg',
- quality: 85,
- description: '1080x566 · 1.91:1',
- isCustom: false
- },
- {
- id: 'ig-story',
- name: 'Story / Reel',
- category: 'instagram',
- width: 1080,
- height: 1920,
- format: 'jpeg',
- quality: 85,
- description: '1080x1920 · 9:16',
- isCustom: false
- },
- {
- id: 'ig-profile',
- name: 'Profile',
- category: 'instagram',
- width: 320,
- height: 320,
- format: 'jpeg',
- quality: 90,
- description: '320x320 · 1:1',
- isCustom: false
- },
- {
- id: 'ig-carousel',
- name: 'Carousel',
- category: 'instagram',
- width: 1080,
- height: 1350,
- format: 'jpeg',
- quality: 85,
- description: '1080x1350 · 4:5',
- isCustom: false
- },
-
- // --- Facebook (6) ---
- {
- id: 'fb-post-link',
- name: 'Post (Link)',
- category: 'facebook',
- width: 1200,
- height: 630,
- format: 'jpeg',
- quality: 80,
- description: '1200x630 · 1.91:1',
- isCustom: false
- },
- {
- id: 'fb-post-photo',
- name: 'Post (Photo)',
- category: 'facebook',
- width: 1200,
- height: 1200,
- format: 'jpeg',
- quality: 80,
- description: '1200x1200 · 1:1',
- isCustom: false
- },
- {
- id: 'fb-post-portrait',
- name: 'Post (Portrait)',
- category: 'facebook',
- width: 1080,
- height: 1350,
- format: 'jpeg',
- quality: 80,
- description: '1080x1350 · 4:5',
- isCustom: false
- },
- {
- id: 'fb-cover',
- name: 'Cover Photo',
- category: 'facebook',
- width: 851,
- height: 315,
- format: 'jpeg',
- quality: 85,
- description: '851x315 · 2.7:1',
- isCustom: false
- },
- {
- id: 'fb-event',
- name: 'Event Cover',
- category: 'facebook',
- width: 1920,
- height: 1005,
- format: 'jpeg',
- quality: 85,
- description: '1920x1005 · 1.91:1',
- isCustom: false
- },
- {
- id: 'fb-profile',
- name: 'Profile',
- category: 'facebook',
- width: 400,
- height: 400,
- format: 'jpeg',
- quality: 90,
- description: '400x400 · 1:1',
- isCustom: false
- },
-
- // --- Twitter / X (4) ---
- {
- id: 'tw-post',
- name: 'Post',
- category: 'twitter',
- width: 1600,
- height: 900,
- format: 'jpeg',
- quality: 85,
- description: '1600x900 · 16:9',
- isCustom: false
- },
- {
- id: 'tw-post-alt',
- name: 'Post (Alt)',
- category: 'twitter',
- width: 1200,
- height: 675,
- format: 'jpeg',
- quality: 85,
- description: '1200x675 · 16:9',
- isCustom: false
- },
- {
- id: 'tw-header',
- name: 'Header',
- category: 'twitter',
- width: 1500,
- height: 500,
- format: 'jpeg',
- quality: 85,
- description: '1500x500 · 3:1',
- isCustom: false
- },
- {
- id: 'tw-profile',
- name: 'Profile',
- category: 'twitter',
- width: 800,
- height: 800,
- format: 'jpeg',
- quality: 90,
- description: '800x800 · 1:1',
- isCustom: false
- },
-
- // --- YouTube (5) ---
- {
- id: 'yt-thumbnail',
- name: 'Thumbnail',
- category: 'youtube',
- width: 1280,
- height: 720,
- format: 'jpeg',
- quality: 90,
- description: '1280x720 · 16:9',
- isCustom: false
- },
- {
- id: 'yt-thumbnail-hd',
- name: 'Thumbnail (HD)',
- category: 'youtube',
- width: 1920,
- height: 1080,
- format: 'jpeg',
- quality: 90,
- description: '1920x1080 · 16:9',
- isCustom: false
- },
- {
- id: 'yt-banner',
- name: 'Channel Banner',
- category: 'youtube',
- width: 2560,
- height: 1440,
- format: 'jpeg',
- quality: 85,
- description: '2560x1440 · 16:9',
- isCustom: false
- },
- {
- id: 'yt-shorts',
- name: 'Shorts Cover',
- category: 'youtube',
- width: 1080,
- height: 1920,
- format: 'jpeg',
- quality: 85,
- description: '1080x1920 · 9:16',
- isCustom: false
- },
- {
- id: 'yt-profile',
- name: 'Profile',
- category: 'youtube',
- width: 800,
- height: 800,
- format: 'jpeg',
- quality: 90,
- description: '800x800 · 1:1',
- isCustom: false
- },
-
- // --- TikTok (2) ---
- {
- id: 'tt-cover',
- name: 'Cover / Thumbnail',
- category: 'tiktok',
- width: 1080,
- height: 1920,
- format: 'jpeg',
- quality: 85,
- description: '1080x1920 · 9:16',
- isCustom: false
- },
- {
- id: 'tt-profile',
- name: 'Profile',
- category: 'tiktok',
- width: 200,
- height: 200,
- format: 'jpeg',
- quality: 90,
- description: '200x200 · 1:1',
- isCustom: false
- },
-
- // --- LinkedIn (5) ---
- {
- id: 'li-post-landscape',
- name: 'Post (Landscape)',
- category: 'linkedin',
- width: 1200,
- height: 627,
- format: 'jpeg',
- quality: 80,
- description: '1200x627 · 1.91:1',
- isCustom: false
- },
- {
- id: 'li-post-square',
- name: 'Post (Square)',
- category: 'linkedin',
- width: 1080,
- height: 1080,
- format: 'jpeg',
- quality: 80,
- description: '1080x1080 · 1:1',
- isCustom: false
- },
- {
- id: 'li-profile-banner',
- name: 'Profile Banner',
- category: 'linkedin',
- width: 1584,
- height: 396,
- format: 'jpeg',
- quality: 85,
- description: '1584x396 · 4:1',
- isCustom: false
- },
- {
- id: 'li-company-banner',
- name: 'Company Banner',
- category: 'linkedin',
- width: 1128,
- height: 191,
- format: 'jpeg',
- quality: 85,
- description: '1128x191 · ~6:1',
- isCustom: false
- },
- {
- id: 'li-profile',
- name: 'Profile',
- category: 'linkedin',
- width: 400,
- height: 400,
- format: 'jpeg',
- quality: 90,
- description: '400x400 · 1:1',
- isCustom: false
- },
-
- // --- Web (2) ---
- {
- id: 'web-standard',
- name: 'Web Standard',
- category: 'web',
- width: 1920,
- height: null,
- format: 'webp',
- quality: 80,
- description: 'max 1920px · 원본 비율',
- isCustom: false
- },
- {
- id: 'web-retina',
- name: 'Web Retina 2x',
- category: 'web',
- width: 3840,
- height: null,
- format: 'webp',
- quality: 75,
- description: 'max 3840px · 원본 비율',
- isCustom: false
- },
-
- // --- Print (2) ---
- {
- id: 'print-a4',
- name: 'A4 (300dpi)',
- category: 'print',
- width: 3508,
- height: 2480,
- format: 'jpeg',
- quality: 95,
- description: '3508x2480 · 210x297mm',
- isCustom: false
- },
- {
- id: 'print-card',
- name: '명함 (300dpi)',
- category: 'print',
- width: 1050,
- height: 600,
- format: 'jpeg',
- quality: 95,
- description: '1050x600 · 90x50mm',
- isCustom: false
- }
-]
-
-export const getGroupedPresets = (customPresets: PresetType[] = []) => {
- const allPresets = [...BUILT_IN_PRESETS, ...customPresets]
- return (Object.keys(PRESET_CATEGORIES) as PresetCategoryType[]).map((category) => ({
- category,
- label: PRESET_CATEGORIES[category],
- presets: allPresets.filter((p) => p.category === category)
- }))
-}
+export { BUILT_IN_PRESETS, PRESET_CATEGORIES, getGroupedPresets } from '../../../shared/presets.js'
diff --git a/src/renderer/src/stores/app-store.ts b/src/renderer/src/stores/app-store.ts
index b9442a8..d033334 100644
--- a/src/renderer/src/stores/app-store.ts
+++ b/src/renderer/src/stores/app-store.ts
@@ -40,7 +40,7 @@ const initialOptions: ProcessingOptionsType = {
presetId: null,
resizeMode: { kind: 'preset-fit', fit: 'cover' },
outputFormat: 'jpeg',
- quality: 85,
+ quality: 100,
frameStyle: 'none',
outputFolder: ''
}
diff --git a/src/renderer/src/types/index.ts b/src/renderer/src/types/index.ts
index 126e121..e00d3aa 100644
--- a/src/renderer/src/types/index.ts
+++ b/src/renderer/src/types/index.ts
@@ -1,44 +1,28 @@
-// --- 상태 & 옵션 유니언 타입 ---
+// --- 공유 타입 re-export ---
+
+export type {
+ OutputFormatType,
+ FrameStyleType,
+ ResizeFitType,
+ PresetCategoryType,
+ ResizeModeType,
+ ExifDataType,
+ PresetType,
+ PresetLookupType
+} from '../../../shared/types.js'
+
+import type {
+ ExifDataType,
+ ResizeModeType,
+ OutputFormatType,
+ FrameStyleType,
+ PresetType
+} from '../../../shared/types.js'
+
+// --- 상태 타입 (renderer 전용) ---
export type ImageStatusType = 'idle' | 'processing' | 'done' | 'error'
-export type OutputFormatType = 'jpeg' | 'webp'
-
-export type FrameStyleType = 'none' | 'simple-bar' | 'card' | 'minimal-white'
-
-export type PresetCategoryType =
- | 'instagram'
- | 'facebook'
- | 'twitter'
- | 'youtube'
- | 'tiktok'
- | 'linkedin'
- | 'web'
- | 'print'
-
-export type ResizeFitType = 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
-
-export type ResizeModeType =
- | { kind: 'preset-fit'; fit: ResizeFitType }
- | { kind: 'aspect-ratio' }
- | { kind: 'long-side'; pixels: number }
- | { kind: 'short-side'; pixels: number }
- | { kind: 'width'; pixels: number }
- | { kind: 'height'; pixels: number }
-
-// --- EXIF 데이터 ---
-
-export type ExifDataType = {
- cameraBrand: string | null
- cameraModel: string | null
- lens: string | null
- aperture: string | null
- shutterSpeed: string | null
- iso: number | null
- focalLength: string | null
- dateTime: string | null
-}
-
// --- 이미지 파일 ---
export type ImageFileType = {
@@ -69,18 +53,6 @@ export type LoadedImageType = {
// --- 프리셋 ---
-export type PresetType = {
- id: string
- name: string
- category: PresetCategoryType
- width: number
- height: number | null
- format: OutputFormatType
- quality: number
- description: string
- isCustom: boolean
-}
-
export type CustomPresetInputType = Omit
// --- 처리 옵션 ---
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
new file mode 100644
index 0000000..9312d99
--- /dev/null
+++ b/src/shared/constants.ts
@@ -0,0 +1 @@
+export const SUPPORTED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp', 'heif', 'heic', 'tiff', 'tif']
diff --git a/src/shared/presets.ts b/src/shared/presets.ts
new file mode 100644
index 0000000..3c4996f
--- /dev/null
+++ b/src/shared/presets.ts
@@ -0,0 +1,352 @@
+import type { PresetType, PresetCategoryType, PresetLookupType } from './types.js'
+
+export const PRESET_CATEGORIES: Record = {
+ instagram: 'Instagram',
+ facebook: 'Facebook',
+ twitter: 'Twitter / X',
+ youtube: 'YouTube',
+ tiktok: 'TikTok',
+ linkedin: 'LinkedIn',
+ general: '일반'
+}
+
+export const BUILT_IN_PRESETS: PresetType[] = [
+ // --- Instagram (5) ---
+ {
+ id: 'ig-feed-square',
+ name: 'Feed Square',
+ category: 'instagram',
+ width: 1080,
+ height: 1080,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x1080 · 1:1',
+ isCustom: false
+ },
+ {
+ id: 'ig-feed-portrait',
+ name: 'Feed Portrait',
+ category: 'instagram',
+ width: 1080,
+ height: 1350,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x1350 · 4:5',
+ isCustom: false
+ },
+ {
+ id: 'ig-feed-landscape',
+ name: 'Feed Landscape',
+ category: 'instagram',
+ width: 1080,
+ height: 566,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x566 · 1.91:1',
+ isCustom: false
+ },
+ {
+ id: 'ig-story',
+ name: 'Story / Reel',
+ category: 'instagram',
+ width: 1080,
+ height: 1920,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x1920 · 9:16',
+ isCustom: false
+ },
+ {
+ id: 'ig-carousel',
+ name: 'Carousel',
+ category: 'instagram',
+ width: 1080,
+ height: 1350,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x1350 · 4:5',
+ isCustom: false
+ },
+
+ // --- Facebook (6) ---
+ {
+ id: 'fb-post-link',
+ name: 'Post (Link)',
+ category: 'facebook',
+ width: 1200,
+ height: 630,
+ format: 'jpeg',
+ quality: 80,
+ description: '1200x630 · 1.91:1',
+ isCustom: false
+ },
+ {
+ id: 'fb-post-photo',
+ name: 'Post (Photo)',
+ category: 'facebook',
+ width: 1200,
+ height: 1200,
+ format: 'jpeg',
+ quality: 80,
+ description: '1200x1200 · 1:1',
+ isCustom: false
+ },
+ {
+ id: 'fb-post-portrait',
+ name: 'Post (Portrait)',
+ category: 'facebook',
+ width: 1080,
+ height: 1350,
+ format: 'jpeg',
+ quality: 80,
+ description: '1080x1350 · 4:5',
+ isCustom: false
+ },
+ {
+ id: 'fb-cover',
+ name: 'Cover Photo',
+ category: 'facebook',
+ width: 851,
+ height: 315,
+ format: 'jpeg',
+ quality: 85,
+ description: '851x315 · 2.7:1',
+ isCustom: false
+ },
+ {
+ id: 'fb-event',
+ name: 'Event Cover',
+ category: 'facebook',
+ width: 1920,
+ height: 1005,
+ format: 'jpeg',
+ quality: 85,
+ description: '1920x1005 · 1.91:1',
+ isCustom: false
+ },
+ {
+ id: 'fb-profile',
+ name: 'Profile',
+ category: 'facebook',
+ width: 400,
+ height: 400,
+ format: 'jpeg',
+ quality: 90,
+ description: '400x400 · 1:1',
+ isCustom: false
+ },
+
+ // --- Twitter / X (4) ---
+ {
+ id: 'tw-post',
+ name: 'Post',
+ category: 'twitter',
+ width: 1600,
+ height: 900,
+ format: 'jpeg',
+ quality: 85,
+ description: '1600x900 · 16:9',
+ isCustom: false
+ },
+ {
+ id: 'tw-post-alt',
+ name: 'Post (Alt)',
+ category: 'twitter',
+ width: 1200,
+ height: 675,
+ format: 'jpeg',
+ quality: 85,
+ description: '1200x675 · 16:9',
+ isCustom: false
+ },
+ {
+ id: 'tw-header',
+ name: 'Header',
+ category: 'twitter',
+ width: 1500,
+ height: 500,
+ format: 'jpeg',
+ quality: 85,
+ description: '1500x500 · 3:1',
+ isCustom: false
+ },
+ {
+ id: 'tw-profile',
+ name: 'Profile',
+ category: 'twitter',
+ width: 800,
+ height: 800,
+ format: 'jpeg',
+ quality: 90,
+ description: '800x800 · 1:1',
+ isCustom: false
+ },
+
+ // --- YouTube (5) ---
+ {
+ id: 'yt-thumbnail',
+ name: 'Thumbnail',
+ category: 'youtube',
+ width: 1280,
+ height: 720,
+ format: 'jpeg',
+ quality: 90,
+ description: '1280x720 · 16:9',
+ isCustom: false
+ },
+ {
+ id: 'yt-thumbnail-hd',
+ name: 'Thumbnail (HD)',
+ category: 'youtube',
+ width: 1920,
+ height: 1080,
+ format: 'jpeg',
+ quality: 90,
+ description: '1920x1080 · 16:9',
+ isCustom: false
+ },
+ {
+ id: 'yt-banner',
+ name: 'Channel Banner',
+ category: 'youtube',
+ width: 2560,
+ height: 1440,
+ format: 'jpeg',
+ quality: 85,
+ description: '2560x1440 · 16:9',
+ isCustom: false
+ },
+ {
+ id: 'yt-shorts',
+ name: 'Shorts Cover',
+ category: 'youtube',
+ width: 1080,
+ height: 1920,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x1920 · 9:16',
+ isCustom: false
+ },
+ {
+ id: 'yt-profile',
+ name: 'Profile',
+ category: 'youtube',
+ width: 800,
+ height: 800,
+ format: 'jpeg',
+ quality: 90,
+ description: '800x800 · 1:1',
+ isCustom: false
+ },
+
+ // --- TikTok (2) ---
+ {
+ id: 'tt-cover',
+ name: 'Cover / Thumbnail',
+ category: 'tiktok',
+ width: 1080,
+ height: 1920,
+ format: 'jpeg',
+ quality: 85,
+ description: '1080x1920 · 9:16',
+ isCustom: false
+ },
+ {
+ id: 'tt-profile',
+ name: 'Profile',
+ category: 'tiktok',
+ width: 200,
+ height: 200,
+ format: 'jpeg',
+ quality: 90,
+ description: '200x200 · 1:1',
+ isCustom: false
+ },
+
+ // --- LinkedIn (5) ---
+ {
+ id: 'li-post-landscape',
+ name: 'Post (Landscape)',
+ category: 'linkedin',
+ width: 1200,
+ height: 627,
+ format: 'jpeg',
+ quality: 80,
+ description: '1200x627 · 1.91:1',
+ isCustom: false
+ },
+ {
+ id: 'li-post-square',
+ name: 'Post (Square)',
+ category: 'linkedin',
+ width: 1080,
+ height: 1080,
+ format: 'jpeg',
+ quality: 80,
+ description: '1080x1080 · 1:1',
+ isCustom: false
+ },
+ {
+ id: 'li-profile-banner',
+ name: 'Profile Banner',
+ category: 'linkedin',
+ width: 1584,
+ height: 396,
+ format: 'jpeg',
+ quality: 85,
+ description: '1584x396 · 4:1',
+ isCustom: false
+ },
+ {
+ id: 'li-company-banner',
+ name: 'Company Banner',
+ category: 'linkedin',
+ width: 1128,
+ height: 191,
+ format: 'jpeg',
+ quality: 85,
+ description: '1128x191 · ~6:1',
+ isCustom: false
+ },
+ {
+ id: 'li-profile',
+ name: 'Profile',
+ category: 'linkedin',
+ width: 400,
+ height: 400,
+ format: 'jpeg',
+ quality: 90,
+ description: '400x400 · 1:1',
+ isCustom: false
+ },
+
+ // --- 일반 (1) ---
+ {
+ id: 'general-original',
+ name: '원본 비율',
+ category: 'general',
+ width: null,
+ height: null,
+ format: 'jpeg',
+ quality: 90,
+ description: '원본 크기 · 비율 유지',
+ isCustom: false
+ }
+]
+
+// main process에서 프리셋 조회용 맵 (자동 생성)
+export const BUILT_IN_PRESET_MAP: Record = Object.fromEntries(
+ BUILT_IN_PRESETS.map((p) => [
+ p.id,
+ { id: p.id, width: p.width, height: p.height, format: p.format, quality: p.quality }
+ ])
+)
+
+export const getGroupedPresets = (customPresets: PresetType[] = []) => {
+ const allPresets = [...BUILT_IN_PRESETS, ...customPresets]
+ return (Object.keys(PRESET_CATEGORIES) as PresetCategoryType[]).map((category) => ({
+ category,
+ label: PRESET_CATEGORIES[category],
+ presets: allPresets.filter((p) => p.category === category)
+ }))
+}
diff --git a/src/shared/types.ts b/src/shared/types.ts
new file mode 100644
index 0000000..5e0194f
--- /dev/null
+++ b/src/shared/types.ts
@@ -0,0 +1,55 @@
+// --- main/renderer 공유 타입 ---
+
+export type OutputFormatType = 'jpeg' | 'webp'
+
+export type FrameStyleType = 'none' | 'minimal-white'
+
+export type ResizeFitType = 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
+
+export type PresetCategoryType =
+ | 'instagram'
+ | 'facebook'
+ | 'twitter'
+ | 'youtube'
+ | 'tiktok'
+ | 'linkedin'
+ | 'general'
+
+export type ResizeModeType =
+ | { kind: 'preset-fit'; fit: ResizeFitType }
+ | { kind: 'aspect-ratio' }
+ | { kind: 'long-side'; pixels: number }
+ | { kind: 'short-side'; pixels: number }
+ | { kind: 'width'; pixels: number }
+ | { kind: 'height'; pixels: number }
+
+export type ExifDataType = {
+ cameraBrand: string | null
+ cameraModel: string | null
+ lens: string | null
+ aperture: string | null
+ shutterSpeed: string | null
+ iso: number | null
+ focalLength: string | null
+ dateTime: string | null
+}
+
+export type PresetType = {
+ id: string
+ name: string
+ category: PresetCategoryType
+ width: number | null
+ height: number | null
+ format: OutputFormatType
+ quality: number
+ description: string
+ isCustom: boolean
+}
+
+export type PresetLookupType = {
+ id: string
+ width: number | null
+ height: number | null
+ format: OutputFormatType
+ quality: number
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 0ad9799..95b3e08 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,7 +6,7 @@
"target": "ESNext",
"lib": ["ESNext"],
"outDir": "./out",
- "rootDir": "./src",
+ "rootDir": ".",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
@@ -18,6 +18,7 @@
"include": [
"src/main/**/*",
"src/preload/**/*",
+ "src/shared/**/*",
"electron.vite.config.ts"
]
}
diff --git a/tsconfig.web.json b/tsconfig.web.json
index dba144b..29c161f 100644
--- a/tsconfig.web.json
+++ b/tsconfig.web.json
@@ -6,7 +6,7 @@
"target": "ESNext",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"outDir": "./out",
- "rootDir": "./src/renderer/src",
+ "rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
@@ -16,5 +16,5 @@
"jsx": "react-jsx",
"types": ["node"]
},
- "include": ["src/renderer/src/**/*"]
+ "include": ["src/renderer/src/**/*", "src/shared/**/*"]
}
+
diff --git a/src/renderer/src/components/ui/pill-button.tsx b/src/renderer/src/components/ui/pill-button.tsx
index 7265c71..58122de 100644
--- a/src/renderer/src/components/ui/pill-button.tsx
+++ b/src/renderer/src/components/ui/pill-button.tsx
@@ -1,25 +1,25 @@
-import { cn } from '../../utils/cn'
+import { cn } from "../../utils/cn";
type PillButtonPropsType = {
- active: boolean
- onClick: () => void
- children: React.ReactNode
-}
+ active: boolean;
+ onClick: () => void;
+ children: React.ReactNode;
+};
const PillButton = ({ active, onClick, children }: PillButtonPropsType) => {
return (
- )
-}
+ );
+};
-export default PillButton
+export default PillButton;
diff --git a/src/renderer/src/components/ui/switch.tsx b/src/renderer/src/components/ui/switch.tsx
new file mode 100644
index 0000000..744d67c
--- /dev/null
+++ b/src/renderer/src/components/ui/switch.tsx
@@ -0,0 +1,38 @@
+import { cn } from '../../utils/cn'
+
+type SwitchPropsType = {
+ checked: boolean
+ onChange: (checked: boolean) => void
+ disabled?: boolean
+ label?: string
+}
+
+const Switch = ({ checked, onChange, disabled, label }: SwitchPropsType) => {
+ return (
+
+ )
+}
+
+export default Switch
diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts
new file mode 100644
index 0000000..8be9851
--- /dev/null
+++ b/src/renderer/src/env.d.ts
@@ -0,0 +1,37 @@
+///