This is the initial screen that appears when the application starts. The configured widgets are displayed here.
You can also add a wallpaper through the widget setting mode.
This screen allows users to access various features.
react-hook-form is used for validation, and useForm is utilized to manage login and signup states.
On login or signup -> The input values are sent to the server, and a token is received in response.
-
Widget Mode displays the widgets. Additionally, you must log in first to add widgets
-
Image Slide Mode displays an image slideshow.
Users 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.
Users 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.
Clicking on a widget opens a modal where users can add schedules in the calendar widget.
When adding a calendar -> The calendar widget data is sent via an API, and users are directed to the widget editing page.
When deleting a calendar -> The calendar widget is deleted via an API. Simultaneously, the local storage data is updated, and the UI is reloaded to reflect the changes.
When adding a schedule -> 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.
When deleting a schedule -> The schedule is deleted via an API, and the cached data is also updated.
This 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.
The 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.
-
Light Mode
-
Dark Mode
npm install -g @webos-tools/cli
Install the CLI tool using the above command.
npm build
Build the React app using the above command.
ares-package -n build
Package the built app into an IPK file using the webOS CLI tool.
ares-install your-app-name.ipk
Install the app onto the webOS emulator using the above command. After installation, run the app through the emulator.
- ensure that you already has some ipk file from repository build command.
ares-setup-devices
before command it, Check your device connected at same network. (I recommand just you can use mobile hospot)
manually add your device information.
ares-install app.ipk -d TARGET_DEVICE
TARGET_DEVICE is input value of Device Name at previous command.
This project is licensed under the MIT License.