Supabase 로그인 세션 문제 해결과 Cursor 개발 규칙 설정

Supabase 로그인 구현 중 세션 유지 문제가 발생했고, 이를 해결하는 과정에서 Cursor 규칙 설정의 필요성을 체감했습니다. 문제 해결 과정과 함께 Cursor rule 설정 과정을 기록했습니다.

🔍 문제점

로그인 후 페이지를 새로고침하면 로그아웃되는 문제가 발생했습니다.

🔍 원인 분석

여러 AI 도구에 문의한 결과, cursor ai가 개발 속도를 높이기 위해 Supabase의 자동 클라이언트 사용한 것이 원인이었습니다. 세션 유지를 위한 코드가 있었지만, 자동 인스턴스가 생성되면서 세션 유지 설정이 무효화되었습니다.

💡 Supabase 클라이언트란?

Supabase 서비스(DB, 인증, 스토리지 등)에 안전하게 접근하기 위한 연결 객체입니다.

💡 자동 vs 수동 클라이언트

  • 자동 클라이언트: Supabase가 미리 파일 생성, 환경설정, import 경로를 구성해주어 초기 구축이 빠름

  • 수동 클라이언트: 개발자가 직접 설정 파일과 클라이언트를 구성

🔍 해결 방법

Supabase 사용 시 자동 클라이언트 대신 수동 클라이언트를 사용하는 cursor rule 을 설정했습니다.

해결 과정1 ) Supabase 수동 클라이언트 개발 규칙 작성

# Supabase Configuration Rules

## Always Use Manual Client
- Use `createClient` from `@supabase/supabase-js`
- Never use `createBrowserClient` or `createServerClient` from `@supabase/ssr`
- Always include explicit auth configuration

## Required Auth Config
```javascript
{
  auth: {
    persistSession: true,
    autoRefreshToken: true,
    detectSessionInUrl: true,
  }
}

해결 과정2 ) .cursor/rules 디렉토리에 supabase.mdc 파일을 생성해서 해당 코드를 넣고 저장

해결 과정3 ) 그리고 다음 명령을 주었습니다.

@supabase.mdc 명시된 기준을 따라서 수동 인스턴스로 교체해줘

🔍 결과와 배운 점

수동 인스턴스로 교체되니 세션 유지하는 코드가 살아 있습니다. 로그인 후 새로고침을 해도 세션 만료되지 않고 상태 유지 되었습니다.

cursor 로 개발할 때 cursor rule을 명시하는 것이 개발 효율성과 코드 품질에 중요한 영향이 있음을 느꼈습니다.

cursor rule 명시하고 taskmaster mcp, supabase mcp, playwright mcp 도입한 뒤로 개발이 훨씬 수월해졌습니다.


✅ feat1 . 개발 규칙 TDD 설정

코드 품질과 생산성 향상을 위해 TDD 규칙을 추가했습니다. 클로드에 요청해서 TDD 방식 개발 규칙을 만들었습니다.

file: .cursor/rules/tdd.mdc

description: 현실적이고 실용적인 TDD 규칙 (부작용 방지 전략 포함)
globs: src/**/*.ts, src/**/*.tsx
alwaysApply: true
---

# 🎯 테스트 전략 가이드 - 현실성과 속도의 균형

## 테스트 우선순위

- 🔴 **Level 1 (반드시 테스트)**  
  - 인증, 결제, DB 저장 등 핵심 로직  
  - 외부 API 연동  
  - 사용자 데이터 변형/검증/삭제 등  
  → 테스트 누락 시 심각한 장애 발생 가능성

- 🟡 **Level 2 (테스트 권장)**  
  - 조건문 3개 이상  
  - 날짜/시간 처리, 배열/객체 조작  
  - 상태 관리 로직, 사용자 입력 처리  
  → 테스트 생략 시 디버깅 난이도 높음

- 🟢 **Level 3 (테스트 선택)**  
  - 단순 UI 컴포넌트 (버튼, 타이틀 등)  
  - 스타일 수정, 마크업만 변경  
  → 테스트 부담 없이 커밋 가능

---

## ✅ 판단 기준 체크리스트

- [ ] 돈/포인트/결제 관련인가?
- [ ] 사용자 데이터 저장/수정/삭제 관련인가?
- [ ] 외부 API 호출이 포함되어 있는가?
- [ ] 조건문 3개 이상이 있는가?
- [ ] 테스트 없이 커밋 시 추적이 어려운가?

---

## ✅ 코드 예시

```ts
// Level 1
export const saveEntry = async (entry: Entry) => {
  // DB 저장 + 권한 체크
};

// Level 2
export const formatDate = (date: Date) => {
  // 날짜 포맷 처리
};

// Level 3
export const Title = () => <h1>환영합니다</h1>;
````

---

## ✅ 개발 속도 최적화 전략

```ts
// 초안 테스트 예시
describe('analyzeJournal', () => {
  test.skip('복잡한 케이스', () => {
    // TODO: 나중에 구현
  });

  test('기본 에러 케이스', async () => {
    const result = await analyzeJournal('');
    expect(result.error).toBeDefined();
  });
});
```

```ts
// Mock 예시
jest.mock('../services/openai', () => ({
  analyzeJournalEntry: jest.fn().mockResolvedValue({
    emotions: ['행복'],
    summary: 'test summary'
  })
}));
```

---

## ✅ 점진적 도입 플랜

* 1단계: 새로 만든 파일은 테스트 필수
* 2단계: 기존 코드 수정 시, 수정된 함수만 테스트
* 3단계: 전체 적용 (6개월 이내 목표)

---

## ✅ 커버리지 목표

| 단계    | 목표     | 비고         |
| ----- | ------ | ---------- |
| MVP   | 40% 이상 | 핵심 로직 위주   |
| 베타    | 60% 이상 | 주요 사용자 플로우 |
| 정식 출시 | 80% 이상 | 전체 안정성 확보  |

```ts
const healthMetrics = {
  testSkipRatio: "< 30%",
  coreLogicCoverage: "> 80%",
  prTestRatio: "> 70%",
  bugReduction: "월 10% 감소"
};
```

---

## ✅ PR 체크리스트

* [ ] Level 1 코드는 반드시 테스트 작성
* [ ] test.skip 사용 시 `TODO` 주석 포함
* [ ] 기존 테스트가 모두 통과됨
* [ ] `--no-verify` 사용 시 사유 명시

---

**이 규칙은 개발 속도를 유지하면서도 품질을 점진적으로 높이는 데 목적이 있습니다.**


✅ feat2 . 개발 규칙 준수를 위한 차이점

  • 커서는 규칙 준수를 위해 다음 문서 등을 참고합니다.

    .cursor/rules | mcp.json | .mdc | .md

    mcp.json docs vs .cursor/rules 차이

    구분

    mcp.jsondocs

    .cursor/rules

    용도

    AI 문맥 참조용

    코드 작성 시 규칙 자동 적용

    활용

    필요 시 AI가 수동으로 참조

    실시간 자동 적용 (강제력 있음)

    우선순위

    낮음

    높음

    적용 시점

    질문·명령 시

    파일 생성·수정 시점

    .mdc vs .md 파일 포맷 차이

    구분

    .md

    .mdc

    용도

    일반 문서

    Cursor 규칙 전용 문서

    특징

    표준 마크다운

    자동 적용됨

    추천

    프로젝트 가이드, 참조 문서

    코딩 규칙, 강제 컨벤션 문서

    우선순위별 개발 규칙 적용

    1 순위 : .cursor/rules/*.mdc (최고 우선순위)

    • "항상 이렇게 코딩해줘"라는 행동 지침

    • 코딩 스타일, 패턴, 제약사항 등

    2순위 : .cursor/mcp.json docs .md (중간 우선순위)

    • "이 프로젝트는 이런 구조야"라는 가이드

    • 프로젝트 아키텍처, 설정 가이드 등

    💡 한 줄 요약

    • .cursor/mcp.json

      Cursor에게 "이런 문서 읽고 참고해"

    • .cursor/rules/*.mdc

      Cursor에게 "코딩할 때 이 규칙은 무조건 지켜"

👉 이 게시글도 읽어보세요