Initial commit after re-install

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"> 태그를 가지고 있습니다. 이 부분을 긁어오면 말씀하신 "앞부분 소개"를 가장 정확하게 가져올 수 있습니다.