> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 로그인 추가

> Velocity의 각 고객이 자신의 예약과 저장된 차량만 볼 수 있도록 로그인을 추가합니다.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

이 작업이 끝나면 각 Velocity 고객이 로그인해서 자신의 예약과 저장된 차량만 볼 수 있게 됩니다.

<Frame>
  <img src="https://mintcdn.com/replit/TBbCBDsd8nVQwxq3/images/velocity/add-login/home-signed-in.png?fit=max&auto=format&n=TBbCBDsd8nVQwxq3&q=85&s=39b4fc199ad8decfb31b44063c1689b0" alt="로그인 후 Velocity 홈 화면 — 오른쪽 상단 헤더에 고객 이름, 하나의 예정된 예약이 있는 My bookings 섹션, 그 아래의 저장된 차량 행이 표시됨" width="100%" data-path="images/velocity/add-login/home-signed-in.png" />
</Frame>

[Replit에 오신 것을 환영합니다](/build/welcome)에서 Velocity를 보셨을 겁니다 — 프리미엄 슈퍼카 렌탈 앱입니다. 지금은 공개 URL을 방문하는 누구나 모든 예약을 볼 수 있습니다. 아무도 익명으로 람보르기니를 예약하지는 않습니다. 로그인을 추가하면 각 고객이 자신만의 예약과 저장된 차량을 갖게 됩니다.

## Agent에게 로그인 추가 요청

Velocity에는 Clerk을 사용합니다. Replit의 Clerk 통합은 앱에 브랜드가 적용된 로그인 화면, Velocity 내부에 존재하는 고객 계정(Replit 계정이 아님), 그리고 외관에 대한 완전한 제어권을 제공합니다 — 프리미엄 렌탈 브랜드에 적합합니다. Agent가 모든 것을 자동으로 프로비저닝하므로 Clerk 대시보드에 가입하거나 키를 붙여넣을 필요가 없습니다.

<AiPrompt>
  각 고객이 자신의 예약과 저장된 차량을 볼 수 있도록 Velocity에 로그인을 추가하세요.<br />
  Clerk Auth를 사용하세요.<br />
  방문자가 계정 없이도 차량을 탐색할 수 있도록 차량 탐색 페이지는 공개로 유지하세요.<br />
  차량 예약이나 즐겨찾기 저장 전에 로그인을 요구하세요.<br />
  로그인 후 헤더에 고객 이름과 해당 고객의 예약만 표시하는 "My bookings" 섹션을 보여주세요.<br />
  로그아웃 버튼을 추가하세요.<br />
  두 명의 다른 고객으로 테스트 체크리스트를 제공해 주세요.
</AiPrompt>

Agent가 Velocity용 Clerk 테넌트를 프로비저닝하고, 로그인 컴포넌트를 추가하고, 예약 플로우에 인증을 적용하고, 각 예약을 로그인한 고객에 연결하고, 로그아웃 기능을 추가합니다. Agent 채팅에서 빌드 과정을 확인하세요.

<Frame>
  <img src="https://mintcdn.com/replit/TBbCBDsd8nVQwxq3/images/velocity/add-login/auth-modal.png?fit=max&auto=format&n=TBbCBDsd8nVQwxq3&q=85&s=b5e0a93796910a63c0b7e4cc6ebcc64a" width="100%" data-path="images/velocity/add-login/auth-modal.png" />
</Frame>

## 두 명의 고객으로 테스트

계정 하나로는 충분하지 않습니다 — 예약이 분리되어 있음을 증명하려면 두 개가 필요합니다.

1. Preview에서 Velocity를 열고 로그인 없이 차량을 탐색합니다. 차량 목록이 여전히 보여야 합니다.
2. 차량에서 Reserve를 클릭합니다. Clerk 로그인 화면으로 이동해야 합니다.
3. 자신의 이메일로 가입하고 예약을 완료합니다 (예: 911의 주말 예약).
4. 로그아웃합니다. "My bookings" 섹션이 사라지고 예약 플로우에서 다시 로그인을 요청해야 합니다.
5. 시크릿 창에서 Preview를 열고 다른 이메일로 가입합니다. 다른 차량을 예약합니다.
6. 첫 번째 창으로 돌아가 로그인하고, 두 번째 고객의 예약이 아닌 자신의 예약만 보이는지 확인합니다.

두 고객이 서로의 예약을 볼 수 있다면, 예약이 아직 로그인한 사람에게 연결되지 않은 것입니다. Agent에게 정확한 증상을 알려주세요.

<AiPrompt>
  Velocity에서 두 고객이 서로의 예약을 볼 수 있습니다.<br />
  각 예약과 저장된 차량을 로그인한 고객에게 연결해서 각 사람이 자신의 것만 볼 수 있게 하세요.<br />
  두 개의 테스트 계정으로 확인하는 방법을 알려주세요.
</AiPrompt>

## 배포하고 공개 URL에서 로그인

Agent 채팅이나 Publishing 타일에서 Velocity를 다시 배포한 다음, 새 탭에서 공개 URL을 열고 로그인합니다. Clerk은 별도의 개발 및 프로덕션 환경으로 프로비저닝됩니다 — Agent가 프로덕션 자격 증명을 배포된 앱에 자동으로 연결하므로, 공개 URL에서 로그인이 기본적으로 작동합니다.

이제 Velocity에는 실제 고객이 있습니다. 각 고객은 자신만의 예약 차고에 로그인합니다 — 다른 사람은 볼 수 없습니다.

## 다음 개선 사항

<CardGroup cols={2}>
  <Card title="데이터베이스 추가" icon="database" href="/build/add-database">
    차량, 가용성, 예약이 세션 간에 유지되도록 합니다.
  </Card>

  <Card title="결제 추가" icon="credit-card" href="/build/add-payments">
    고객이 차량을 예약할 때 환불 가능한 보증금을 받습니다.
  </Card>
</CardGroup>

## 추가 도움이 필요하신가요?

* **앱 전체가 숨겨짐:** Agent에게 차량 탐색은 공개로 유지하고 예약 및 계정 페이지만 보호하도록 요청하세요.
* **고객이 서로의 예약을 볼 수 있음:** Agent에게 각 예약과 저장된 차량을 로그인한 고객에게 연결하도록 요청하세요.
* **Preview에서는 로그인이 작동하지만 배포 후에는 안 됨:** 새 탭에서 공개 URL을 열고 Agent에게 정확한 오류를 알려주세요. Agent가 프로덕션 Clerk 환경을 프로비저닝했는지 확인하세요.
* **프로토타입용으로 설정 없이 빠른 로그인을 원함:** Replit Auth는 Clerk 테넌트 없이 고객의 Replit 계정을 사용합니다 — [Replit Auth](/references/auth-and-identity/authentication)를 참조하세요.

## 관련 문서

* [Clerk Auth](/references/auth-and-identity/clerk-auth)
* [Replit Auth](/references/auth-and-identity/authentication)