Merge branch 'develop'

Author: seongbin9786

.github/workflows/deploy-to-aws-s3-cloudfront.yaml

@@ -0,0 +1,48 @@
+name: Deploy to AWS S3 and CloudFront
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install and build
+        run: |
+          npm ci
+          npm run build
+        env:
+          VITE_DEPLOY_ENV: prod
+          VITE_SERVER_URL: ${{ vars.VITE_SERVER_URL }}
+          VITE_KAKAO_KEY: ${{ vars.VITE_KAKAO_KEY }}
+          VITE_SENTRY_DSN: ${{ secrets.VITE_SENTRY_DSN }}
+          VITE_HOTJAR_SITE_ID: ${{ vars.VITE_HOTJAR_SITE_ID }}
+
+      - name: Configure AWS
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: Deploy to S3 and invalidate CloudFront
+        run: |
+          BUILD_HASH=$(git rev-parse --short HEAD)-$(date +%Y%m%d-%H%M%S)
+
+          # NOTE: index.html은 no-cache를 두어 매번 서버에 확인 요청 보내게
+          aws s3 sync dist/ "s3://${{ secrets.S3_BUCKET_NAME }}/frontend/${BUILD_HASH}/" --cache-control "public, max-age=31536000" --exclude "*.html"
+          aws s3 sync dist/ "s3://${{ secrets.S3_BUCKET_NAME }}/frontend/${BUILD_HASH}/" --cache-control "no-cache" --include "*.html"
+          aws s3 sync "s3://${{ secrets.S3_BUCKET_NAME }}/frontend/${BUILD_HASH}/" "s3://${{ secrets.S3_BUCKET_NAME }}/frontend/current/" --delete
+
+          # NOTE: asterisk를 사용해도 경로 패턴 당 계산하므로 전체 invalidation 수행
+          aws cloudfront create-invalidation --distribution-id "${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}" --paths "/*"

.vscode/settings.json

@@ -13,5 +13,8 @@
     "source.fixAll.eslint": "explicit",
     "source.fixAll.stylelint": "explicit"
   },
-  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "[yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

CLAUDE.md

@@ -0,0 +1,68 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint and Stylelint
+- `npm run lint:fix` - Auto-fix linting issues
+- `npm run typecheck` - Run TypeScript type checking
+- `npm run storybook` - Start Storybook development server
+
+## Architecture Overview
+
+This is a React + TypeScript application built with Vite for a collaborative letter-writing platform called "Ittory".
+
+### State Management
+- **Redux Toolkit** with persistence for letter writing data and order management
+- **React Query (TanStack Query)** for server state management and API calls
+- **Redux Persist** for maintaining write/order data across sessions
+
+### Key Application Flow
+The app follows a collaborative letter-writing workflow:
+1. **Create** - User creates a letter and invites participants
+2. **Invite/Join** - Other users join the letter creation process
+3. **Write** - Participants write in a predetermined order
+4. **Share/Receive** - Final letter is shared and received
+
+### WebSocket Integration
+- Custom type-safe WebSocket wrapper (`SharedTypeSafeWebSocket`) built on STOMP
+- Real-time collaboration features for letter writing
+- Automatic reconnection and subscription management
+- Queue-based message handling for connection reliability
+
+### API Layer Structure
+- **Services** - Business logic layer (AuthService, LetterService, etc.)
+- **Models** - TypeScript interfaces for API data
+- **Queries** - React Query hooks organized by domain
+- **Config** - API configuration, interceptors, and token management
+
+### Mobile-First Design
+- Built as a web app designed for mobile webview integration
+- iOS SafeArea handling
+- React Native WebView console logging integration
+- Responsive design with viewport height calculations
+
+### Development Tools
+- **MSW (Mock Service Worker)** for API mocking during development
+- **Storybook** for component development and documentation
+- **Sentry** for error tracking
+- **Hotjar** for user analytics (production only)
+- **Lefthook** for git hooks with commitlint
+
+### Environment Configuration
+Required environment variables:
+- `VITE_DEPLOY_ENV` - Deployment environment
+- `VITE_KAKAO_KEY` - Kakao OAuth key
+- `VITE_SERVER_URL` - Backend API URL
+- `VITE_SENTRY_DSN` - Sentry DSN (optional)
+- `VITE_HOTJAR_SITE_ID` - Hotjar site ID (optional)
+
+### Key Directories
+- `src/pages/` - Top-level route components
+- `src/components/` - Reusable UI components organized by page
+- `src/api/` - API layer (services, models, queries, websockets)
+- `src/utils/SessionLogger/` - Custom logging system for debugging
+- `src/layout/` - App layout components with mobile-specific features