{"id":23569355,"url":"https://github.com/1gyou1/slot-machine-react","last_synced_at":"2026-04-24T16:04:02.515Z","repository":{"id":218501767,"uuid":"743325975","full_name":"1GYOU1/slot-machine-react","owner":"1GYOU1","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-27T14:47:23.000Z","size":1109,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T08:44:00.531Z","etag":null,"topics":["html2canvas","react-router-dom","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://1gyou1.github.io/slot-machine-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/1GYOU1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-01-15T01:22:17.000Z","updated_at":"2024-05-10T15:26:32.000Z","dependencies_parsed_at":"2024-03-25T16:02:14.830Z","dependency_job_id":"6bad178c-7c92-40ae-a6a9-5c231d465778","html_url":"https://github.com/1GYOU1/slot-machine-react","commit_stats":null,"previous_names":["1gyou1/slot-machine-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/1GYOU1/slot-machine-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1GYOU1%2Fslot-machine-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1GYOU1%2Fslot-machine-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1GYOU1%2Fslot-machine-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1GYOU1%2Fslot-machine-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1GYOU1","download_url":"https://codeload.github.com/1GYOU1/slot-machine-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1GYOU1%2Fslot-machine-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32230421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html2canvas","react-router-dom","reactjs","typescript"],"created_at":"2024-12-26T19:14:03.504Z","updated_at":"2026-04-24T16:04:02.501Z","avatar_url":"https://github.com/1GYOU1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# slot-machine-react\r\n\r\n- Typescript 기반 React.js 라이브러리 사용하여 프로필 만들기 슬롯 머신 게임 구현                      \r\n    - 다양한 캐릭터를 만들어주는 슬롯 머신 형식의 게임으로, 배경색, 머리, 눈, 코, 입 등 5가지 요소를 빠른 속도의 슬롯 머신을 멈추면 화살표가 가리키는 이미지가 단계별로 조합하여 캐릭터를 완성합니다.`\r\n    게임이 종료된 후에는 결과 페이지에서 만든 캐릭터를 캡처하여 이미지로 저장할 수 있도록 구현하였습니다. 이를 통해 사용자들이 자신이 만든 캐릭터를 손쉽게 저장하고 공유할 수 있도록 했습니다.\r\n                    \r\n\u003cbr\u003e\r\n\r\n### 👀 MainPage View\r\n\r\n![slot-machine-ts-1-ezgif com-speed](https://github.com/1GYOU1/slot-machine-react/assets/90018379/bcf0064b-224c-4cdd-aaf8-9f36aa90f91b)\r\n\r\n\u003cbr\u003e\r\n\r\n### 📌 주요 기술 스택\r\n\u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=flat-square\u0026logo=HTML5\u0026logoColor=white\"/\u003e\r\n\u003cimg src=\"https://img.shields.io/badge/CSS3-F68212?style=flat-square\u0026logo=CSS3\u0026logoColor=white\"/\u003e\r\n\u003cimg src=\"https://img.shields.io/badge/TypeScript-2d79c7?style=flat-square\u0026logo=TypeScript\u0026logoColor=white\"/\u003e\r\n\u003cimg src=\"https://img.shields.io/badge/React-61DAFB?style=flat-square\u0026logo=React\u0026logoColor=white\"/\u003e\r\n\r\n\u003cimg src=\"https://img.shields.io/badge/Visual Studio Code-007ACC?style=flat-square\u0026logo=Visual Studio Code\u0026logoColor=white\"/\u003e\r\n\r\n\u003cimg src=\"https://img.shields.io/badge/Adobe Photoshop-31A8FF?style=flat-square\u0026logo=Adobe Photoshop\u0026logoColor=white\"/\u003e\r\n\u003cimg src=\"https://img.shields.io/badge/Adobe Illustrator-FF9A00?style=flat-square\u0026logo=Adobe Illustrator\u0026logoColor=white\"/\u003e\r\n\r\n\u003cbr\u003e\r\n\r\n### 📌 주요 기능\r\n- 게임 방법\r\n- 슬롯머신 애니메이션\r\n- 결과 미리보기\r\n- 결과 화면 부분 캡처, 저장\r\n- 게임 다시하기\r\n- 처음화면으로 돌아가기\r\n\r\n\u003cbr\u003e\r\n\r\n### Github Pages\r\nhttps://1gyou1.github.io/slot-machine-react/\r\n\r\n\r\n\u003cbr\u003e\r\n\r\n### slot-machine-react App을 사용하기 전 행동 수칙\r\n\r\n\u003e$ npm install react-router-dom\r\n\r\n\u003e$ npm install html2canvas\r\n\r\n\u003e$ npm start \r\n\r\n\u003cbr\u003e\r\n\r\n### work flow\r\n\r\n1. 시작 화면 \r\n    - start 버튼 클릭 시 게임 화면 진입 (✔)\r\n    - 게임 방법 \r\n        \u003cbr\u003eㄴ 게임 방법 버튼 클릭 시 게임 방법 팝업 노출 (✔)\r\n        \u003cbr\u003eㄴ 팝업 배경 클릭 시 팝업 닫기 (✔)\r\n        \u003cbr\u003eㄴ 팝업 닫기 버튼 클릭 시 팝업 닫기 (✔)\r\n\r\n2. 게임 화면\r\n    - 화살표 좌우로 움직이는 기능 (✔)\r\n\r\n    - stop 버튼 클릭 이벤트\r\n        \u003cbr\u003eㄴ 화살표 멈추기 (✔)\r\n        \u003cbr\u003eㄴ class=\"round_1\" roundCount++ 반영 (✔)\r\n\r\n    - 멈춘 위치에 따른 선택 결과 값(percent 기준) 저장 (✔)\r\n\r\n    - preview 영역에 저장한 선택 값 노출 (✔)\r\n\r\n3. 결과 화면\r\n\r\n    - 커튼 애니메이션 추가 (✔)\r\n\r\n    - 결과 노출 (✔)\r\n\r\n    - 결과 저장 하기\r\n        \u003cbr\u003eㄴ 원하는 부분만 캡처 후 저장 (✔)\r\n\r\n    - 처음부터 다시 하기\r\n        \u003cbr\u003eㄴ 버튼 클릭 이벤트 생성 (✔)\r\n        \u003cbr\u003eㄴ 값 reset (✔)\r\n\r\n    - 처음 화면으로 돌아가기\r\n        \u003cbr\u003eㄴ 버튼 클릭 이벤트 생성 (✔)\r\n        \u003cbr\u003eㄴ 값 reset (✔)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1gyou1%2Fslot-machine-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1gyou1%2Fslot-machine-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1gyou1%2Fslot-machine-react/lists"}