연구실에서 공개 데이터셋을 다운로드할 수 있도록 하면서 동시에 다운로드한 사람 수 등의 정보를 기록해야 하는 요구사항이 있어 이 프로젝트를 시작하게 되었습니다.

CITE Lab MoCap and Humanoid Group Download Center

처음에는 제가 더 익숙한 FastAPI + SQLite로 구현하려고 했고, 아래 프롬프트를 AI(Claude 3.7 Sonnet)에 그대로 입력했더니 꽤 쓸 만한 결과가 나왔습니다. 주로 두 가지 버그가 발생했는데, 하나는 SMTP 메일 전송에 암호화가 적용되지 않은 점이고, 다른 하나는 NJU Box의 버전이 너무 오래되어 결국 해당 Seafile API를 수동으로 찾아야 했습니다.

请帮我使用fastapi, JavaScript等技术栈构建一个实验室下载中心的网页。网页应该包含以下功能：
1. 后端使用seafile API获取存储库中有哪些文件，前端第一行使用下拉框显示各个文件，供用户选中对应的文件。
2. 前端第二行需要用户填写邮箱，要求必须为教育邮箱或学术邮箱，输入框右侧有一个发送验证码的按钮。用户点击后，后端使用smtp服务器发送验证码到用户邮箱。前后端都要判断邮箱格式是否正确，并且发送邮件每个IP地址每分钟只能发送一次。
3. 前端第三行需要用户填写验证码。
4. 第四行要求填写学校/单位。
5. 第五行要求填写姓名。
6. 所有输入框都不能为空，前后端都进行判断，防止用户恶意提交。
7. 最后一行有一个提交按钮，点击后，后端判断验证码正确的话，使用seafile API将给对应的文件生成一个共享链接，并将链接发送到用户邮箱，同时前端自动调整至该链接。
8. 同时后端向sqlite数据库中插入一条记录，记录包括文件名称、邮箱、学校/单位、姓名、共享链接、提交时间。
9. 界面使用英文。
10. 页面尽可能美观。
11. 最后写一个dockerfile将整个项目打包成一个镜像。

하지만 이렇게 하니 인터페이스가 평범하고 많은 기능을 확장하기도 불편해서, 더 발전된 Next.js 등으로 이 프로젝트를 리팩토링하려고 했습니다. 그러나 AI에게 기존 코드를 참고하여 리팩토링하도록 하거나 처음부터 프롬프트를 입력하는 방식 모두 결과가 좋지 않았고, 런타임 버그가 아니라 컴파일 오류까지 발생했습니다. 최신 AI IDE 몇 가지도 시도해 보았지만 만족스럽지 않았습니다.

결국 사람이 직접 해야 했습니다. 하루 동안 먼저 프레임워크를 구축한 다음, 이전에 FastAPI로 구현한 프로젝트의 파일을 하나씩 AI에 입력하면서 현재 Next.js 프로젝트의 해당 기능을 참고하여 완성하도록 했습니다. 그런 다음 점진적으로 작은 기능 개선을 시키고, 수동으로 버그를 수정하면서 마침내 위 두 이미지와 같은 결과를 얻었습니다.

현재 기능:

• 기술 스택: Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redis
• 프론트엔드는 다운로드 화면을 제공하며, 사용자가 파일을 선택하여 다운로드할 수 있습니다(다중 선택 지원).
• 교육/학술 이메일로만 다운로드할 수 있으며, 이메일 인증을 완료해야 다운로드가 가능합니다.
• 다운로드 약관을 제공하며, 반드시 읽은 후에 진행할 수 있습니다.
• 백엔드는 사용자 이름, 파일명, 다운로드 시간 등의 다운로드 기록을 저장하고, 이를 조회할 수 있는 관리자 페이지를 제공합니다.
• 파일은 Seafile(NJU Box)에 저장되며, 이 프로젝트는 사용자에게 임시 링크만 생성하여 제공함으로써 파일 링크가 직접 노출되는 것을 방지하고 서버 트래픽을 절약합니다.
• Seafile에 있는 readme.md 파일을 파싱하여 다운로드 화면에 파일 설명으로 표시합니다.
• 서브 경로 설정을 지원하여 기존 웹사이트에 배포하기 쉽습니다.
• 다크 모드를 지원합니다.
• 이메일을 기반으로 AI를 사용하여 조직 이름을 분석합니다.

@阙: "나쁜 AI는 없다, 단지 고집이 부족한 인간만 있을 뿐."