{"id":23160677,"url":"https://github.com/knu-lg/frontend","last_synced_at":"2026-05-04T00:33:09.757Z","repository":{"id":260434366,"uuid":"863849586","full_name":"KNU-LG/frontend","owner":"KNU-LG","description":"lifestyle standby frontend","archived":false,"fork":false,"pushed_at":"2025-01-05T10:48:16.000Z","size":12829,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-10T04:28:47.791Z","etag":null,"topics":["emotion","react","react-hook-form","react-use-gesture","tanstack-query"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KNU-LG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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}},"created_at":"2024-09-27T03:08:55.000Z","updated_at":"2025-01-05T10:48:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"ea6652a0-f63f-4c1e-a86a-3e4753a25a94","html_url":"https://github.com/KNU-LG/frontend","commit_stats":null,"previous_names":["knu-lg/frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KNU-LG%2Ffrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KNU-LG%2Ffrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KNU-LG%2Ffrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KNU-LG%2Ffrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KNU-LG","download_url":"https://codeload.github.com/KNU-LG/frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247235778,"owners_count":20906021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["emotion","react","react-hook-form","react-use-gesture","tanstack-query"],"created_at":"2024-12-17T23:11:49.449Z","updated_at":"2025-10-28T08:42:37.153Z","avatar_url":"https://github.com/KNU-LG.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KNU Capstone Design Project 1 Frontend Repository\n\n## 📋 Table of Contents\n- [Tech Stack](#tech-stack)\n- [Implemented Features and Technologies](#implemented-features-and-technologies)\n  - [Home Screen](#home-screen)\n  - [Settings Screen](#settings-screen)\n  - [Widget Configuration Screen](#widget-configuration-screen)\n  - [Widget Addition Screen](#widget-addition-screen)\n  - [Login and Signup](#login-and-signup)\n  - [Widget Mode and Image Slide Mode](#widget-mode-and-image-slide-mode)\n  - [Calendar Widget](#calendar-widget)\n  - [Dimming Feature](#dimming-feature)\n  - [Dark / Light Mode](#dark--light-mode)\n- [How to Run](#how-to-run)\n  - [Emulator](#emulator)\n  - [Raspberry Pi](#raspberry-pi)\n- [License](#license)\n\n## Tech Stack\n\n\u003cdiv\u003e\n\u003cimg src=\"https://img.shields.io/badge/React-61DAFB?style=for-the-badge\u0026logo=React\u0026logoColor=black\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Typescript-3178C6?style=for-the-badge\u0026logo=Typescript\u0026logoColor=white\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Emotion-black?style=for-the-badge\u0026labelColor=white\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/-TanStack%20Query-FF4154?style=for-the-badge\u0026logo=react%20query\u0026logoColor=white\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/React%20Hook%20Form-%23EC5990.svg?style=for-the-badge\u0026logo=reacthookform\u0026logoColor=white\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/✋ react use gesture-%23CC342D.svg?style=for-the-badge\u0026logo=\u0026logoColor=white\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/webOS-a50034.svg?style=for-the-badge\u0026logo=lg\u0026logoColor=white\"\u003e\n\u003cdiv/\u003e\n\n## Implemented Features and Technologies\n\n### Home Screen\n\nThis is the initial screen that appears when the application starts. The configured widgets are displayed here.\n\n![Home Sreen](/src/assets/docsImage/image-1.png)\n\nYou can also add a wallpaper through the widget setting mode.\n\n![Add Image](/src/assets/docsImage/image-11.png)\n\n### Settings Screen\n\nThis screen allows users to access various features.\n\n![Settings Screen](/src/assets/docsImage/image-9.png)\n### Login and Signup\n\n`react-hook-form` is used for validation, and `useForm` is utilized to manage login and signup states.\u003cbr/\u003e\n\n**On login or signup** -\u003e The input values are sent to the server, and a token is received in response.\n\n![Login Screen](/src/assets/docsImage/image-3.png)\n![SignUP Screen](/src/assets/docsImage/image-4.png)\n\n### Widget Mode and Image Slide Mode\n\n- **Widget Mode** displays the widgets. Additionally, you must log in first to add widgets \u003cbr/\u003e\n![Widget Mode Screen](/src/assets/docsImage/image-12.png)\n![Widget Mode Screen](/src/assets/docsImage/image-13.png)\n\n- **Image Slide Mode** displays an image slideshow.\n![Image Slide Screen](/src/assets/docsImage/image-5.png)\n\n### Widget Configuration Screen\n\nUsers can modify or delete widget positions on this screen. At this point, `react-use-gesture` is used to update the widget's position. After pressing the edit button, users can rearrange widget positions. Once editing is complete, pressing the save button updates the widget position array in local storage and also sends the changes to the server via an API.\u003cbr/\u003e\n\n![Widget Configuration Screen](/src/assets/docsImage/image-6.png)\n\n### Widget Addition Screen\n\nUsers can add their desired widgets on this screen. Widgets are categorized by type and size (L, M, S). Upon selecting a widget to add, users are directed to the widget editing page. During this process, the widget position and type arrays are updated in the user's local device and Server.\u003cbr/\u003e\n\n\n### Calendar Widget\n\nClicking on a widget opens a modal where users can add schedules in the calendar widget.\u003cbr/\u003e\n\n**When adding a calendar** -\u003e The calendar widget data is sent via an API, and users are directed to the widget editing page.\u003cbr/\u003e\n\n**When deleting a calendar** -\u003e The calendar widget is deleted via an API. Simultaneously, the local storage data is updated, and the UI is reloaded to reflect the changes.\u003cbr/\u003e\n\n**When adding a schedule** -\u003e The schedule title and content are received using `react-hook-form`. Clicking the \"Add Schedule\" button sends the data to the server. `TanStack Query` caches the data and updates it using a cache key.\u003cbr/\u003e\n\n**When deleting a schedule** -\u003e The schedule is deleted via an API, and the cached data is also updated.\u003cbr/\u003e\n\n![Calendar Image](/src/assets/docsImage/image-7.png)\n\n### Dimming Feature\n\nThis is managed through a dimming provider. Using `window.addEventListener`, it detects `mousemove`, `keydown`, `touchstart`, and `click` events. If no such events are detected for 10 seconds, an additional layer is applied to darken the screen.\n\n![alt text](/src/assets/docsImage/image-8.png)\n\n### Dark / Light Mode\n\nThe `Context API` is used to globally manage and toggle between dark and light modes. Each mode's CSS values are globally managed to affect the UI.\n\n- Light Mode\n![alt text](/src/assets/docsImage/image-9.png)\n\n- Dark Mode\n![alt text](/src/assets/docsImage/image-10.png)\n\n## How to package frontend app\n\n### Emulator\n\n\u003e npm install -g @webos-tools/cli\n\nInstall the CLI tool using the above command.\n\n\u003e npm install\n\nInstall the project dependencies using the above command.\n\n\u003e REACT_APP_BASE_URL = http://your-server-address\n\nCreate a `.env` file in the root directory of the project, and add the above line to the file.\nReplace `http://your-server-address` with the actual server URL.\n\n\u003e npm run build\n\nBuild the React app using the above command.\n\n\u003e ares-package -n build\n\nPackage the built app into an IPK file using the webOS CLI tool.\n\n\u003e ares-install your-app-name.ipk\n\nInstall the app onto the webOS emulator using the above command. After installation, run the app through the emulator.\n\n### Raspberry Pi\n\n* ensure that you already has some ipk file from repository build command.\n\n\u003e ares-setup-devices\n\nbefore command it, Check your device connected at same network. (I recommand just you can use mobile hospot)\n\n\u003cimg width=\"642\" alt=\"image\" src=\"https://github.com/user-attachments/assets/812a4d48-75fb-431e-8b04-61f8c77c43b7\"\u003e\n\nmanually add your device information.\n\n\u003e ares-install app.ipk -d TARGET_DEVICE\n\nTARGET_DEVICE is input value of Device Name at previous command.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknu-lg%2Ffrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknu-lg%2Ffrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknu-lg%2Ffrontend/lists"}