[Deploy] WTH-365: v.0.2.0 릴리즈

.claude/rules/data-fetching.md

@@ -54,3 +54,55 @@ export const postApi = {
 ['posts', id]                      // single item
 ['attendance', { generationNumber }] // with filter
 ```
+
+### React Query — Suspense Pattern (preferred)
+
+When the same query's loading/error handling is duplicated across 2+ components, use `useSuspenseQuery` + Next.js `loading.tsx` / `error.tsx` instead of manual `isLoading` / `isError` checks.
+
+```ts
+// hooks/queries/mypage/useMyMemberQuery.ts
+import { useSuspenseQuery, skipToken } from '@tanstack/react-query';
+
+export function useMyMemberQuery() {
+  const clubId = useClubId();
+  return useSuspenseQuery({
+    queryKey: ['mypage', 'me', clubId],
+    queryFn: clubId
+      ? () => mypageApi.getMe(clubId).then((res) => res.data.data)
+      : skipToken,
+  });
+}
+```
+
+- `useSuspenseQuery`: `data` is always defined (no `isLoading` / `isError` / `!data` guards needed)
+- `skipToken`: replaces `enabled` option (not supported by `useSuspenseQuery`)
+- `loading.tsx`: placed in the route segment, handles Suspense fallback
+- `error.tsx`: placed in the route segment, handles ErrorBoundary with `reset` prop
+
+```tsx
+// app/(private)/(main)/mypage/loading.tsx
+export default function Loading() {
+  return <p>로딩 중...</p>;
+}
+
+// app/(private)/(main)/mypage/error.tsx
+'use client';
+export default function Error({ reset }: { error: Error; reset: () => void }) {
+  return <Button onClick={reset}>다시 시도</Button>;
+}
+```
+
+**When to use:** Client components that fetch user-scoped data shown on page load (e.g., my profile, my clubs).
+**When NOT to use:** Queries triggered by user interaction (e.g., search, infinite scroll) — use regular `useQuery` for those.
+
+### Import Rule — Barrel Export Caveat
+
+Client-side hooks must **NOT** import from `@/lib/apis` (barrel). The barrel re-exports `apiServer` which imports `next/headers`, causing build errors in client components. Always use direct imports:
+
+```ts
+// Good
+import { mypageApi } from '@/lib/apis/mypage';
+
+// Bad — pulls in apiServer → next/headers
+import { mypageApi } from '@/lib/apis';
+```

.claude/rules/design-tokens.md

@@ -36,8 +36,9 @@ Composite classes defined with `@utility`. Includes font-size + line-height + fo
 | `typo-h1` | Heading 1 | 40px / bold |
 | `typo-h2` | Heading 2 | 32px / bold |
 | `typo-h3` | Heading 3 | 24px / semibold |
-| `typo-sub1` | Subheading 1 | 18px / semibold |
-| `typo-sub2` | Subheading 2 | 16px / semibold |
+| `typo-sub1` | Subheading 1 | 16px / black |
+| `typo-sub2` | Subheading 2 | 18px / semibold |
+| `typo-sub3` | Subheading 3 | 16px / semibold |
 | `typo-body1` | Body text 1 | 16px / 470 |
 | `typo-body2` | Body text 2 | 14px / 450 |
 | `typo-caption1` | Caption 1 | 12px / semibold |

.claude/settings.local.json

@@ -2,21 +2,13 @@
   "permissions": {
     "allow": [
       "Bash(gh pr:*)",
+      "Bash(gh run:*)",
       "Bash(git push:*)",
+      "Bash(git fetch:*)",
       "mcp__figma__get_design_context",
-      "Bash(grep -E \"\\\\.tsx$\")",
-      "Bash(find \"D:\\\\project\\\\weeth-client\\\\src\\\\app\\\\\\(private\\)\" -name \"layout.tsx\" -type f)",
-      "Bash(find \"D:\\\\project\\\\weeth-client\\\\src\\\\app\\\\\\(private\\)\\\\\\(main\\)\" -name \"page.tsx\" -type f)",
-      "Bash(grep -r PageNavigation D:projectweeth-clientsrc --include=*.tsx --include=*.ts)",
-      "Bash(ls -la \"D:\\\\project\\\\weeth-client\\\\src\\\\app\\\\\\(private\\)\\\\\\(intro\\)\\\\home\")",
-      "Bash(find \"D:\\\\project\\\\weeth-client\\\\src\\\\app\\\\\\(private\\)\" -type f -name \"layout.tsx\")",
       "mcp__figma__get_screenshot",
-      "Bash(find D:projectweeth-clientsrccomponentsmypage -type f -name *.tsx -o -name *.ts)",
-      "Bash(ls -la \"D:\\\\project\\\\weeth-client\\\\src\\\\app\\\\\\(private\\)\\\\\\(main\\)\\\\mypage\")",
-      "Bash(ls -la \"D:\\\\project\\\\weeth-client\\\\src\\\\app\\\\\\(private\\)\\\\\\(main\\)\\\\mypage\\\\edit\")",
-      "Bash(find D:projectweeth-clientsrccomponentsui -type f \\\\\\(-name *.tsx -o -name *.ts \\\\\\))",
-      "Bash(find D:/project/weeth-client/src/constants -name *.ts)",
-      "Bash(grep -r \"POSTHOG\\\\|PostHog\" D:projectweeth-client/.env*)"
+      "Bash(gh pr *)",
+      "Read(//c/Users/wlslw/.claude/projects/**)"
     ]
   }
 }

.claude/skills/pr-writer/SKILL.md

@@ -3,6 +3,21 @@ name: pr-writer
 description: Analyzes code changes and generates a PR body following .github/pull_request_template.md format. Use for PR creation or PR update requests.
 ---
 
+## Step 0. Pre-flight Checks (Required — run BEFORE PR creation)
+
+Run these four checks and verify each passes. If a check fails on newly changed files, fix and re-run; if it fails on pre-existing issues unrelated to this branch, note it in the PR body.
+
+```bash
+pnpm typecheck   # TypeScript
+pnpm lint        # ESLint (0 errors; warnings ok)
+pnpm format:check  # Prettier
+pnpm build       # Next.js build
+```
+
+If `pnpm typecheck` / `pnpm build` fail with missing-module errors, run `pnpm install` first and retry. If `pnpm format:check` fails on files touched in this branch, run `pnpm prettier --write <paths>` on only those files before proceeding.
+
+Do not proceed to Step 1 until all four checks are green (or failures are confirmed pre-existing and unrelated).
+
 ## Step 1. Analyze Changes
 ```bash
 BASE_BRANCH=$(git remote show origin | sed -n '/HEAD branch/s/.*: //p')

CLAUDE.md

@@ -37,7 +37,7 @@ No hardcoded values. Always use token classes first. Ask user before adding new
 | Text       | `text-text-strong` `text-text-normal` `text-text-alternative` `text-text-disabled` `text-text-inverse` |
 | Background | `bg-container-neutral` `bg-container-neutral-interaction`                                              |
 | Button     | `bg-button-primary` `bg-button-neutral`                                                                |
-| Typography | `typo-h1~h3` `typo-sub1~2` `typo-body1~2` `typo-caption1~2` `typo-button1~2`                           |
+| Typography | `typo-h1~h3` `typo-sub1~3` `typo-body1~2` `typo-caption1~2` `typo-button1~2`                           |
 | Spacing    | `p-100~500` `gap-100~400`                                                                              |
 
 → Full token list: `.claude/rules/design-tokens.md`

amplify.yml

@@ -8,6 +8,11 @@ frontend:
         - pnpm install --frozen-lockfile
     build:
       commands:
+        - |
+          set -e
+          matched=$(env | grep -E '^(PREVIEW_ACCESS_TOKEN|CLUB_ID)=') || grep_status=$?
+          if [ "${grep_status:-0}" -gt 1 ]; then exit "$grep_status"; fi
+          if [ -n "$matched" ]; then printf '%s\n' "$matched" >> .env.production; fi
         - pnpm build
   artifacts:
     baseDirectory: .next

next.config.ts

@@ -2,6 +2,14 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   reactCompiler: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'weeth-s3-dev.s3.ap-northeast-2.amazonaws.com',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

package.json

@@ -17,6 +17,9 @@
     "generate:tests": "tsx scripts/generate-tests.ts"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^5.2.2",
     "@next/third-parties": "^16.2.3",
@@ -54,14 +57,17 @@
     "axios": "1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.1",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.35.2",
     "gsap": "^3.14.2",
+    "hast-util-to-html": "^9.0.5",
     "lottie-react": "^2.4.1",
     "lowlight": "^3.3.0",
     "lucide-react": "^0.468.0",
     "next": "16.1.6",
     "posthog-js": "^1.364.4",
+    "qr-code-styling": "^1.9.2",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",