사례

링크트리

프로젝트 시작7월 31일 오전 03:49바로 개발 시작

개발 내용

인스타 프로필에 거는 Linktree 스타일 한 페이지를 만들어줘.

- 프로필 + 링크 버튼들 + 클릭 통계가 있는 가장 작은 단위의 "내 서비스"야.
- 방문자(/ 또는 /:handle): 프로필(사진·이름·소개·SNS 아이콘), 링크 버튼 목록(제목·썸네일 옵션),
  하이라이트 블록(유튜브 임베드·공지 텍스트).
- 소유자(/admin): 링크 추가/수정/순서 드래그/활성 토글,
  테마 선택(배경색·버튼 스타일 프리셋 3~4종), 클릭 통계(링크별 클릭 수·최근 7일 방문 수).
- 데이터: profile(name, bio, photo, sns_links, theme),
  links(title, url, thumbnail, sort_order, active, click_count), visits(date, count).
- 관리자 수정 → 공개 페이지 즉시 반영.
- 멀티 유저·커스텀 도메인 UI·상세 유입 분석·결제 링크는 제외.
- 관리자 데모 계정(예: admin / demo1234)을 시드하고, 로그인 화면에 데모 계정 안내를 표시해.
- 프로필·링크 6~8개·클릭 통계 예시를 더미로 채워 공개 페이지와 통계가 바로 시연되게.
- 크리에이터 감성의 프리셋 테마(감각적인 배경·버튼 스타일), 모바일 우선.

실행과정32개 작업

파일 읽기

파일 목록

파일 읽기

이해했습니다. Linktree 스타일의 프로필 페이지를 만들겠습니다. 대규모 작업이므로 계획을 세우고 단계별로 진행하겠습니다.

계획

## 1단계: DB 스키마 구축

Go API에 테이블 생성 코드를 추가하겠습니다.

계획

파일 생성

API 작성 완료. 서버를 재시작하여 반영하겠습니다.

앱 재시작

로그 확인

API 서버 정상, 시드 완료. 이제 React 프론트엔드를 구축하겠습니다.

계획

명령 실행

이제 프론트엔드 파일들을 생성하겠습니다. 먼저 테마 정의와 API 헬퍼부터 시작합니다.

파일 생성

이제 공개 프로필 페이지를 만듭니다.

파일 생성

이제 로그인 페이지와 관리자 페이지를 만듭니다.

파일 생성

이제 관리자 대시보드를 만듭니다.

파일 생성

이제 App.jsx에 라우팅을 연결합니다.

파일 수정

로그 확인

HMR이 정상 작동합니다. API가 잘 동작하는지 확인해볼게요.

명령 실행

API 모두 정상입니다. 이제 관리자 페이지도 확인하고, 5단계를 마무리하겠습니다.

계획

명령 실행

인증 보호도 정상 작동합니다. 최종 로그 확인하겠습니다.

로그 확인

오류 없이 깔끔하게 실행 중입니다. 작업을 마무리하겠습니다.

계획

에이전트 메모도 갱신해두겠습니다.

파일 생성

⏸ 설정한 실행 예산(2,000원)에 도달해 중단했습니다.

2,102.8원 사용

직전 작업이 실행 상한으로 중단되었습니다. 하던 작업을 이어서 계속 진행해 주세요.

7월 31일 오전 03:55

실행과정21개 작업

작업 상태를 확인해볼게요. 로그와 주요 파일들을 점검하겠습니다.

로그 확인

파일 읽기

서버가 정상 작동 중입니다. 이제 생성된 프론트엔드 파일들이 모두 제대로 있는지 확인하겠습니다.

파일 목록

파일 읽기

모든 파일이 존재합니다. 이제 핵심 파일들의 내용을 하나씩 확인하겠습니다.

파일 읽기

로그인과 공개 프로필 페이지는 잘 작성되어 있습니다. 이제 관리자 페이지와 API 서버를 확인하겠습니다.

파일 읽기

API 파일의 나머지 부분도 확인하겠습니다.

파일 읽기

API와 프론트엔드가 모두 완성되어 있습니다. 서버가 정상 동작하는지 최종 확인하겠습니다.

로그 확인

명령 실행

API가 정상적으로 데이터를 반환합니다. 다른 엔드포인트도 확인하겠습니다.

명령 실행

모든 API가 완벽하게 작동합니다. 메인 진입점 파일들도 확인하겠습니다.

파일 읽기

`index.html`의 타이틀을 서비스에 맞게 수정하겠습니다.

파일 수정

최종 로그를 확인하고 에이전트 메모도 갱신합니다.

로그 확인

파일 수정

실행결과 · 59초 소요

모든 작업이 완료되었습니다. 서버는 정상 작동 중이며 오류 없이 실행되고 있습니다.

---

## 완료 요약

### 구축된 Linktree 스타일 서비스

**공개 페이지** (`/` 또는 `/demo`)
- 프로필 카드 (사진·이름·소개·SNS 아이콘 5종)
- 8개의 링크 버튼 (클릭 시 추적 후 새 탭 열기)
- 하이라이트 (YouTube 임베드 + 공지 텍스트)
- 크리에이터 감성 테마 4종 적용 (소프트 핑크/미드나잇/네이처/미니멀)

**관리자 페이지** (`/admin`)
- 로그인 (`admin` / `demo1234`, 화면에 데모 계정 안내)
- 링크 관리: 추가·수정·삭제·활성 토글·드래그 앤 드롭 순서 변경
- 하이라이트 관리: 추가·수정·삭제·활성 토글
- 프로필 편집: 이름·소개·사진·SNS 링크
- 테마 선택: 4종 프리셋 미리보기 + 즉시 적용
- 통계: 링크별 클릭 수 + 최근 7일 방문 차트

**데이터** — 8개 링크(클릭 수 15~142), 2개 하이라이트, 7일 방문 데이터가 시드되어 바로 시연 가능합니다.

실행과정1개 작업

프론트엔드 파일만 수정했으므로 Vite HMR로 자동 반영되었습니다. 로그 확인하겠습니다.

로그 확인

실행결과 · 1분 9초 소요

이상 없습니다. Vite dev server가 정상 작동 중이며, `index.html` 수정은 페이지 리로드(12:56:00)로 정상 반영되었습니다. Go API도 오류 없이 리스닝 중입니다.

- `index.html`: 타이틀을 "Links | 내 링크트리"로 변경, spin 키프레임과 box-sizing 리셋 추가

✅ 파일 2개 수정 · 명령 2개 실행

1,190.1원 사용

최상단의 "데모 크리에이터"의 이미지가 엑박으로 뜨는데 수정해줘

7월 31일 오전 03:57

실행과정19개 작업

프로필 사진 URL을 확인해보겠습니다.

코드 검색

파일 읽기

명령 실행

pravatar.cc URL은 서버에서 정상 응답하지만, 브라우저에서 간헐적으로 실패할 수 있습니다. 더 안정적인 DiceBear 아바타로 교체하겠습니다.

파일 수정

시드 로직을 확인해보겠습니다. 서버 재시작 시 기존 데이터를 덮어쓰는지 확인이 필요합니다.

코드 검색

파일 읽기

DB에 이미 데이터가 있어 시드가 다시 실행되지 않습니다. 직접 DB를 업데이트하겠습니다.

명령 실행

코드 검색

명령 실행

로그인은 성공. SQL 오류가 있습니다. API의 UPDATE 문을 확인하겠습니다.

파일 읽기

코드 검색

MySQL에서 `UPDATE ... JOIN ... ORDER BY LIMIT`가 지원되지 않는 문제입니다. 서브쿼리로 수정하겠습니다.

파일 수정

앱 재시작

명령 실행

DB 업데이트 성공. 실제로 적용되었는지 확인합니다.

명령 실행

프로필 사진이 DiceBear 아바타로 변경 완료되었습니다. 로그도 확인하겠습니다.

로그 확인

실행결과 · 1분 56초 소요

완료! 프로필 사진을 `pravatar.cc` → `DiceBear` 아바타로 변경했습니다.

- **변경 전**: `https://i.pravatar.cc/300?img=5` (간헐적 엑박)
- **변경 후**: `https://api.dicebear.com/7.x/avataaars/svg?seed=democreator` (안정적인 SVG 아바타, 크리에이터 감성에 잘 맞음)

`/api/admin/profile` UPDATE 쿼리의 MySQL 호환성 버그(`ORDER BY LIMIT` in multi-table UPDATE)도 함께 수정했습니다.

✅ 파일 2개 수정 · 명령 6개 실행 · 앱 재시작

774.8원 사용

이미지 이제 잘 뜨긴한데 이미지 종류가 마음에 들지 않는다. 귀여운 동물 사진으로 바꿔줘

7월 31일 오전 04:00

실행과정12개 작업

좋습니다! 실제 귀여운 동물 사진으로 바꿔드릴게요. Unsplash의 안정적인 동물 이미지를 사용하겠습니다.

명령 실행

DB 컬럼명이 다르네요. API 코드를 확인하겠습니다.

코드 검색

파일 읽기

필드명이 `photo_url`이 아니라 `photo`네요. 다시 올바르게 요청하겠습니다.

명령 실행

이미지가 잘 바뀌었는지 실제 접근도 확인합니다.

명령 실행

이미지도 정상 로딩됩니다. 시드 데이터도 동일하게 수정해서 나중에 DB가 초기화되어도 귀여운 고양이 사진이 유지되도록 할게요.

파일 읽기

파일 수정

앱 재시작

실행결과 · 1분 26초 소요

완료! 프로필 사진을 귀여운 동물 사진으로 변경했습니다.

- **변경 전**: DiceBear 아바타 (단순 일러스트)
- **변경 후**: 귀여운 치즈 태비 고양이 실사진 🐱 (`images.unsplash.com`)

Unsplash의 CDN이라 빠르고 안정적으로 로딩됩니다. 시드 데이터도 함께 수정해서 나중에 DB가 초기화되어도 같은 사진이 유지됩니다.

✅ 파일 1개 수정 · 명령 6개 실행 · 앱 재시작

430원 사용

이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다

project-64ad2c.glidev.ai

↗