docs: README 및 프롬프트 문서 추가

- 실행 방법/구조/환경변수/DB 스키마/페이지네이션 API 정리

Co-authored-by: Cursor <cursoragent@cursor.com>

PROMPT.txt

@@ -0,0 +1,40 @@
+뉴스 링크를 깔끔하게 관리하고 요약까지 보여주는 웹 서비스라니, '나중에 읽어야지' 하고 쌓아두기만 하는 우리 모두의 습관을 아주 우아하게 해결하려는 멋진 프로젝트입니다.
+
+단순히 URL만 저장된 DB에서 정보를 가져와 화면에 뿌려주려면, URL에서 제목과 요약(메타데이터)을 추출하는 '크롤링/파싱' 로직이 핵심입니다. 
+
+DB 연결: ./env 파일에 저장된 환경 변수를 참조해서 연결해줘. (DB_HOST, DB_USER, DB_PASS 등 포함)
+
+DB 테이블: news_link 테이블에는 id, url, created_at 컬럼이 있어.
+
+핵심 기능: 사용자가 URL을 입력하면 해당 페이지의 메타데이터(Title, Description, Image)를 추출해서 보여줘야 해.
+
+먼저 프로젝트 기본 구조와 ./env 파일을 읽어 DB에 연결하는 설정 코드를 작성해줘."
+
+2. 백엔드: 데이터 추출 및 API 로직 프롬프트
+URL만 있는 상태에서 글의 앞부분(소개)을 가져오려면 Open Graph 데이터를 활용하는 것이 가장 효율적입니다.
+
+프롬프트: "백엔드에서 다음 API 엔드포인트를 만들어줘.
+
+GET /links: DB에서 모든 URL을 가져온 뒤, 각 URL의 웹사이트를 방문해 메타데이터(제목, 요약 설명, 대표 이미지)를 추출해서 JSON 형태로 반환해줘. (힌트: cheerio나 metascraper 같은 라이브러리 활용)
+
+POST /links: 사용자가 입력한 새로운 URL을 news_link 테이블에 저장해줘.
+
+특히 URL 크롤링 시 에러가 발생하면 기본 이미지와 '설명 없음' 메시지를 반환하도록 예외 처리를 꼼꼼하게 해줘."
+
+3. 프론트엔드: UI 및 인터페이스 프롬프트
+사용자가 보기 편한 카드 레이아웃과 추가 버튼을 만드는 단계입니다.
+
+프롬프트: "사용자에게 보여줄 프론트엔드 화면을 디자인해줘.
+
+전체 레이아웃: 깔끔한 카드 스타일의 리스트 뷰. 각 카드에는 뉴스 제목, 간략한 소개글(요약), 해당 사이트로 이동하는 링크가 포함돼야 해.
+
+추가 기능: 화면 오른쪽 하단에 '플로팅 버튼(+)'을 만들고, 클릭하면 URL을 입력할 수 있는 모달(Modal) 창이 뜨게 해줘.
+
+상태 관리: URL을 추가하면 페이지 새로고침 없이 리스트에 바로 반영되도록 해줘.
+
+현대적이고 심플한 UI를 위해 **[Tailwind CSS 혹은 Bootstrap]**을 사용해서 코드를 짜줘."
+
+💡 구현 시 참고할 팁
+성능 최적화: 매번 링크를 불러올 때마다 실시간으로 크롤링하면 속도가 매우 느려집니다. 처음 URL을 추가할 때 DB에 제목과 요약 내용을 함께 저장(save)하는 방식이 훨씬 쾌적합니다.
+
+Open Graph: 대부분의 뉴스나 블로그는 <meta property="og:description"> 태그를 가지고 있습니다. 이 부분을 긁어오면 말씀하신 "앞부분 소개"를 가장 정확하게 가져올 수 있습니다.

README.md

@@ -0,0 +1,91 @@
+# News Link
+
+뉴스/아티클 URL을 저장하고, 제목/요약/대표 이미지를 추출해 카드 형태로 보여주는 Flask 웹앱입니다.
+
+## 구성
+
+- `app.py`: Flask 서버, DB 연결, 메타데이터 추출, API
+- `templates/index.html`: 초기 화면(SSR) + 모달 UI
+- `static/app.js`: 무한 스크롤(30개 단위), URL 붙여넣기 파싱, 추가/갱신
+- `static/styles.css`: 스타일
+- `static/placeholder.svg`: 이미지 없을 때 표시용
+
+## 요구사항
+
+- Python 3.x
+- PostgreSQL
+- (권장) 미니콘다 환경: `ncue`
+
+## 설치
+
+```bash
+pip install -r requirements.txt
+```
+
+## 환경변수(.env)
+
+프로젝트 루트에 `.env` 파일을 만들고 아래 값을 설정하세요. (`.env`는 git에 커밋되지 않습니다)
+
+```dotenv
+DB_HOST=...
+DB_PORT=5432
+DB_NAME=...
+DB_USER=...
+DB_PASSWORD=...
+TABLE=news_link
+```
+
+옵션(선택):
+
+```dotenv
+PORT=8021
+DEFAULT_PAGE_SIZE=30
+MAX_PAGE_SIZE=60
+CACHE_TTL_SECONDS=3600
+FAILED_TTL_SECONDS=300
+```
+
+## DB 스키마
+
+`TABLE`(기본 `news_link`) 테이블에 아래 컬럼이 필요합니다.
+
+- `id`
+- `url`
+- `created_at`
+
+예시(참고):
+
+```sql
+CREATE TABLE IF NOT EXISTS news_link (
+  id SERIAL PRIMARY KEY,
+  url TEXT NOT NULL,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+```
+
+## 실행
+
+```bash
+python app.py
+```
+
+기본 접속 주소:
+
+- `http://localhost:8021`
+
+## API
+
+- `GET /links?limit=30&offset=0`
+  - 30개 단위로 링크를 가져옵니다(프론트 무한 스크롤).
+  - 응답:
+    - `items`: 링크 배열
+    - `next_offset`: 다음 요청 offset
+    - `has_more`: 다음 페이지 존재 여부
+- `POST /links`
+  - body: `{ "url": "https://..." }`
+  - URL을 DB에 저장하고 메타데이터를 추출해 반환합니다.
+
+## 동작 메모
+
+- 초기 화면은 DB에서 **첫 페이지(기본 30개)** 만 가져와 SSR로 즉시 렌더링합니다.
+- 메타데이터 추출은 캐시를 사용합니다(성공/실패 TTL 각각 적용).