https://github.com/knu-lg/frontend
lifestyle standby frontend
https://github.com/knu-lg/frontend
emotion react react-hook-form react-use-gesture tanstack-query
Last synced: 2 months ago
JSON representation
lifestyle standby frontend
- Host: GitHub
- URL: https://github.com/knu-lg/frontend
- Owner: KNU-LG
- License: mit
- Created: 2024-09-27T03:08:55.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-05T10:48:16.000Z (over 1 year ago)
- Last Synced: 2025-02-10T04:28:47.791Z (over 1 year ago)
- Topics: emotion, react, react-hook-form, react-use-gesture, tanstack-query
- Language: TypeScript
- Homepage:
- Size: 12.2 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# KNU Capstone Design Project 1 Frontend Repository
## 📋 Table of Contents
- [Tech Stack](#tech-stack)
- [Implemented Features and Technologies](#implemented-features-and-technologies)
- [Home Screen](#home-screen)
- [Settings Screen](#settings-screen)
- [Widget Configuration Screen](#widget-configuration-screen)
- [Widget Addition Screen](#widget-addition-screen)
- [Login and Signup](#login-and-signup)
- [Widget Mode and Image Slide Mode](#widget-mode-and-image-slide-mode)
- [Calendar Widget](#calendar-widget)
- [Dimming Feature](#dimming-feature)
- [Dark / Light Mode](#dark--light-mode)
- [How to Run](#how-to-run)
- [Emulator](#emulator)
- [Raspberry Pi](#raspberry-pi)
- [License](#license)
## Tech Stack
## Implemented Features and Technologies
### Home Screen
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.
### Settings Screen
This screen allows users to access various features.
### Login and Signup
`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 and Image Slide Mode
- **Widget Mode** displays the widgets. Additionally, you must log in first to add widgets
- **Image Slide Mode** displays an image slideshow.
### Widget Configuration Screen
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.
### Widget Addition Screen
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.
### Calendar Widget
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.
### Dimming Feature
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.
### Dark / Light Mode
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
## How to package frontend app
### Emulator
> npm install -g @webos-tools/cli
Install the CLI tool using the above command.
> npm install
Install the project dependencies using the above command.
> REACT_APP_BASE_URL = http://your-server-address
Create a `.env` file in the root directory of the project, and add the above line to the file.
Replace `http://your-server-address` with the actual server URL.
> npm run 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.
### Raspberry Pi
* 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.
## License
This project is licensed under the MIT License.