비개발자가 CURSOR로 웹앱 만들기💪

간단한 의약품식별 서비스를 만들려고해. HTML, CSS, JS로 만들예정, 백엔드없이 프론트엔드만으로 구현하려고해서 브라우저의 로컬스토리지를 사용하면 좋을 것 같아. 

기본데이터는 일단 아래로 해줘
품목일련번호	품목명	성상	큰제품이미지	표시앞	표시뒤	의약품제형	색상앞
200808876	가스디알정50밀리그램(디메크로틴산마그네슘)	녹색의 원형 필름코팅정	https://nedrug.mfds.go.kr/pbp/cmn/itemImageDownload/147426403087300104	IDG		원형	연두
200808877	페라트라정2.5밀리그램(레트로졸)	어두운 황색의 원형 필름코팅정	https://nedrug.mfds.go.kr/pbp/cmn/itemImageDownload/147426403087300107	YH	LT	원형	노랑
200808948	졸뎀속붕정(졸피뎀타르타르산염)	흰색의 원형 구강붕해정제	https://nedrug.mfds.go.kr/pbp/cmn/itemImageDownload/147426403087300128			원형	하양

기본적인 식별페이지는 이미지의 모습이야. 요구사항에 맞게 PRD를 작성해줘.

이미지를 바탕으로 한 의약품 식별 서비스의 기본 페이지에 대한 PRD(제품 요구사항 문서)를 작성하겠습니다. 이 서비스는 의약품의 모양, 색상, 무늬 등을 선택하여 사용자가 의약품을 식별할 수 있도록 도와주는 웹 페이지입니다.

1. 개요
제품명: 간단한 의약품 식별 서비스
목표: 사용자가 의약품의 외형적 특징을 통해 해당 의약품을 식별할 수 있게 하는 웹 기반 서비스 제공
대상 사용자: 일반 대중, 약사, 의료 전문가
2. 기능 요구사항
2.1 기본 구성 요소
식별 입력항목
모양: 사용자가 의약품의 모양을 선택할 수 있는 버튼들(원형, 타원형, 장방형 등)
색상: 의약품의 색상을 선택할 수 있는 버튼들
무늬: 의약품 표면의 무늬(예: 줄무늬, 점무늬)를 선택할 수 있는 옵션
분할선: 의약품에 분할선이 있는지 선택할 수 있는 옵션
검색 및 결과
검색 버튼: 입력된 조건에 따라 의약품을 검색하는 버튼
결과 표시 영역: 검색 결과를 표시하는 영역
2.2 로컬 스토리지 활용
검색 기록 저장: 사용자의 검색 기록을 브라우저의 로컬 스토리지에 저장하여, 페이지를 재방문 했을 때 이전 검색 내용을 빠르게 확인할 수 있도록 함
3. 사용자 인터페이스
레이아웃: 첨부된 이미지를 참조하여 UI 구성
스타일: 사용자에게 친숙하고 접근하기 쉬운 디자인
응답성: 다양한 디바이스(데스크탑, 태블릿, 모바일)에 대응하는 반응형 웹 디자인
4. 기술 스택
프론트엔드: HTML, CSS, JavaScript
데이터 저장: HTML5의 로컬 스토리지 사용
라이브러리/프레임워크: 필요에 따라 jQuery 또는 Vanilla JavaScript 사용
5. 보안 고려사항
데이터 보호: 로컬 스토리지에 저장되는 데이터는 익명성을 유지하며, 개인 식별 정보는 저장하지 않음
6. 배포 및 유지보수
배포: GitHub Pages 또는 유사한 정적 호스팅 서비스를 통해 배포
유지보수: 정기적으로 사용자 피드백을 받아 기능 개선 및 버그 수정 진행
이 PRD는 프로젝트의 출발점으로 사용될 수 있으며, 프로젝트의 진행 상황에 따라 추가적인 요구사항이 포함될 수 있습니다.

const medicines = [
    { 
        serialNumber: '200808876',
        name: '가스디알정50밀리그램(디메크로틴산마그네슘)',
        appearance: '녹색의 원형 필름코팅정',
        imageUrl: 'https://nedrug.mfds.go.kr/pbp/cmn/itemImageDownload/147426403087300104',
        markingsFront: 'IDG',
        markingsBack: '',
        form: '원형',
        colorFront: '연두'
    },
    {
        serialNumber: '200808877',
        name: '페라트라정2.5밀리그램(레트로졸)',
        appearance: '어두운 황색의 원형 필름코팅정',
        imageUrl: 'https://nedrug.mfds.go.kr/pbp/cmn/itemImageDownload/147426403087300107',
        markingsFront: 'YH',
        markingsBack: 'LT',
        form: '원형',
        colorFront: '노랑'
    },
    {
        serialNumber: '200808948',
        name: '졸뎀속붕정(졸피뎀타르타르산염)',
        appearance: '흰색의 원형 구강붕해정제',
        imageUrl: 'https://nedrug.mfds.go.kr/pbp/cmn/itemImageDownload/147426403087300128',
        markingsFront: '',
        markingsBack: '',
        form: '원형',
        colorFront: '하양'
    },
    // 추가 의약품 데이터
];