[팀 프로젝트1] 다른 지역 아이들도 보고 싶어!, 트러블슈팅 : 이름이 안 바뀌어.

 

이렇게 총 5마리를 추천해주는데, 다른 아이도 보고 싶다면?

예를 들어 선호 지역은 아니더라도, 나랑 더 맞는 아이가 있다면? (A님이 처음에 원하는 아이만 있다면, 지역은 별로 중요하지 않다! 라는 의견을 내주셨는데 그 부분을 이제야 반영했다.) 

 

근데 그렇게 일시적으로 지역을 해제하고 모든 아이를 매칭해버리면, 처음에 15마리를 거르고 그 안에서 AI 매칭해주는 시스템 구조상 맞지 않는다. 그리고 100마리가 넘는 아이들을 모두 AI에게 돌리는 것도 토큰상, 시간상 무리다.

 

그래서 안티그래비티랑 얘기를 해봤는데, 2차 다른 지역의 아이들도 보기에서는 지역 제한을 전체로 풀고! 15마리를 거르는 작업은 똑같이 진행 후, 그 걸러진 아이들을 대상으로 AI 매칭을 진행하는 것. 아하, 간단한 문제였군.

 

근데! 서울 지역 선호로 설정했을 때 나왔던 아이가 또 나왔다. 게다가 "선호지역은 경상남도 쪽이 우선이지만," 이라고 나왔다... 로직이 내가 생각한거랑 완전 다른가본데. 

 

preferred_cities: ["전체"] 
라고 넘어갔지만, 추천 대상 동물의 주소지인 '경상남도'를 보고 "아, 이 사용자의 선호 지역이 경상남도구나"라고 헷갈려서 억지 이유를 작명해 낸 것이었습니다.
-> 프롬프트 주입 텍스트 보정: '전체' 또는 빈 값으로 지역 완화 요청이 들어오면 AI에게 넘어가는 선호지역 텍스트를 명확하게 "(지역 제한 없음)" 으로 치환해서 전달합니다.지시사항(Instruction) 정밀 타격 분기: 지역 제한이 없을 때는 AI에게 "사용자가 지정한 선호 지역 조건이 없으므로(지역 무관), 전국 보호소에 있는 아이들 중에서 오직 성향과 라이프스타일 궁합이 최고인 아이들을 최우선적으로 골라주세요. 추천 평에 사용자가 특정 지역을 선호한다는 등의 억지 설명은 절대 적지 마세요."라는 단호한 지침을 템플릿에 분기로 심었습니다.

 

 

이렇게 해서 해결!

 

---

AI가 아이들 설명을 보고 추천 이름 목록을 골라주고, 

이름 투표해서 5표가 되면 json을 바꿔버리는..ㅎ 조금 폭력적(?)인 방식의 로직을 갖고 있다. 크롤링을 다시 하면 어차피 이름 짓고 있음이 되겠지만... 잠깐이라도 어울리는 이름을 보여주고, 투표 과정도 보여주고 조금 더 아기들에게 관심을 갖기 바라는 마음에서... 그냥 MVP 단계 기능 중 하나다. 

근데 이게 상세페이지에서는 보이는데

목록에선 그대로 보인다!

 

이유는?

 

원인: 5표 득표 시 백엔드가 원본 데이터인 backend/data/animals.json을 수정해 저장하는 로직은 제대로 작동하고 있었다.
문제점: 하지만 프론트엔드는 백엔드 API를 매번 부르지 않고, 속도 향상을 위해 빌드 타임에 로드된 자바스크립트 파일인 frontend/app/data/animals.js 모듈을 직접 로드해서 정적으로 화면을 그리고 있었다.
즉, 백엔드가 로컬 JSON 데이터를 고쳐봤자, 프론트엔드가 참조하는 자바스크립트 정적 데이터 파일이 갱신되지 않아 화면에는 계속 예전 이름("이름 짓는 중!")이 렌더링되었던 것!

 

결국 백엔드는 제 할 일은 다 했는데, 프론트엔드단에서 문제가 있었던 것.

 

문제해결방법

이름 확정으로 인해 save_animals가 호출될 때, animals.json 뿐만 아니라 프론트엔드가 직접 임포트해 쓰고 있는 frontend/app/data/animals.js 파일도 실시간으로 동시 덮어쓰기하도록 보정합니다.Next.js 개발 서버(npm run dev)는 로컬 자바스크립트 파일(animals.js)이 변경되면 즉시 변화를 감지하고 핫 리로드(Hot-reload)를 해주므로, 투표 확정 시 새로고침 없이도 화면이 "까망별"로 리렌더링되는 아주 자연스러운 효과가 발생하게 됩니다.

 

# 프론트엔드 정적 animals.js 모듈 파일 동시 동기화
frontend_js_path = config.BASE_DIR.parent / "frontend" / "app" / "data" / "animals.js"
try:
    with open(frontend_js_path, "w", encoding="utf-8") as js_f:
        js_f.write("export const animals = ")
        json.dump(animals_list, js_f, ensure_ascii=False, indent=2)
        js_f.write(";\n")
except Exception as fe_e:
    print(f"[rag] frontend animals.js 동기화 실패: {fe_e}")

 

동기화 구문을 넣어주면 된다! 

 

하지만, 계속 목록뷰에서는 적용이 안됐다. local서버에서는 바로바로 가능하지만 railway를 통해서는 또 다른 작업이 필요하다. 

프론트에서 useEffect로 다시 /api/animals를 호출하면 끝! 

목록 뷰 라이브 데이터 가드 적용:컴포넌트가 로드되는 시점(useEffect)에, 백엔드에 이미 잘 준비되어 있는 유기동물 전체 조회 API인 **GET /api/animals**를 호출합니다. (이 API는 백엔드 디스크에 쓰여진 최신 "흑진주" 데이터를 완벽히 반환합니다.)성공적으로 라이브 데이터를 가져오면 정적 변수 대신 라이브 데이터 상태로 치환해 렌더링하고, 만약 서버가 꺼져 있는 등 조회가 실패하면 안전하게 기존의 정적 폴백 animals 배열을 읽어 그리도록 예외 처리를 합니다.매칭 결과 뷰 라이브 데이터 가드 적용:매칭 결과 목록 페이지(frontend/app/match/results/page.js)도 백엔드에서 매칭 결과를 수령한 뒤 세부 동물 정보(이름 등)를 정적 animals.js에서 매핑하던 구조를, /api/animals에서 페치해온 라이브 동물 목록에서 매핑하도록 함께 개선합니다.