cosmetics check single page app
1.0.0
본 프로젝트는 화장품의 성분 중 임산부가 사용하기에 유해한 성분이 포함되어 있는지 검색할 수 있는 웹사이트를 구축하기 위해 기획되었습니다. 모든 제품 정보는 Python으로 작성된 웹 스파이더인 sephoraCrawler 프로젝트에 의해 수집됩니다. 데이터베이스에는 www.sephora.com의 모든 여성 제품 정보(7000+)가 포함되어 있습니다.
클라이언트를 실행하려면,
npm install 입력하세요.npm start 에서 클라이언트를 실행합니다. 그리고 http://localhost:3000/을 엽니다. 본 프로젝트는 스킨케어 제품이 임신 중에 사용해도 안전한지 확인하는 데 주로 사용되는 데이터베이스 백엔드 단일 페이지 애플리케이션을 구현하도록 설계되었습니다. 이 앱을 사용하면 이름이나 브랜드로 검색하여 특정 화장품을 찾을 수 있으며, 관련 정보는 임산부에게 안전한지, 유해한 성분이 포함되어 있는지를 나타내는 표시와 함께 눈에 띄게 표시됩니다.
프런트 엔드는 클라이언트 측의 모든 라우팅 및 데이터 흐름을 관리하는 SPA(단일 페이지 응용 프로그램)로 설계되었습니다. 이 프로젝트에서는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리 인 React와 JavaScript 앱의 예측 가능한 상태 컨테이너 인 Redux, React-Router를 결합하여 앱을 구현합니다.
이 앱에는 주로 2가지 기능이 포함되어 있습니다. 하나는 제품 검색이고, 또 하나는 성분 확인이다.
앱의 홈 페이지는 검색 페이지입니다. 사이트에 들어가면 텍스트 필드에 자동으로 초점이 맞춰집니다. 사용자는 자체 디자인한 로고를 보고 이 앱이 무엇을 할 수 있는지 쉽게 알 수 있습니다.
제품의 브랜드나 이름(예: Clinique)을 입력하고 Enter 키를 누르면 사용자가 디스플레이 페이지로 이동합니다. 상품은 각 행에 4개 항목, 각 페이지에 60개 항목으로 배열됩니다. 검색창 아래 상단에는 총 검색결과 수가 표시됩니다. 오른쪽 하단에는 편리하게 위로 스크롤하는 데 사용되는 분홍색 화살표가 있습니다. 그리고 왼쪽에는 녹색 아바타가 알려지지 않은 성분이 발견되었다는 의미, 빨간색 아바타가 유해성분이 발견되었다는 표시가 떠있습니다. 제품 카드에 아바타가 표시되지 않으면 임신부에게도 안전한 제품입니다.
표시 페이지 하단에는 페이지 매김 표시줄이 있습니다. 현재 페이지는 분홍색 배경색으로 강조됩니다. 각 페이지에는 최대 60개의 항목이 표시될 수 있습니다.
제품 카드를 클릭하면 해당 제품에 대한 자세한 정보를 제공하는 창이 나타납니다. 제품이 안전하지 않은 경우 해당 제품에 유해한 성분이 있음을 나타내는 눈에 띄는 빨간색 표시가 있습니다. 사진을 클릭하시면 해당 상품의 상세정보와 전성분을 확인하실 수 있으며, 세포라 매장 홈페이지로 이동하실 수 있습니다.
프런트엔드의 또 다른 기능은 성분 확인으로, 사용자가 문자열에서 유해한 성분을 찾아낼 수 있습니다.
유해 성분이 발견되지 않으면 파란색 경고가 나타납니다. 유해한 성분이 발견되면 특정 단어가 노란색으로 강조 표시된 빨간색 경고가 나타납니다.
