Wavy - Client
인공지능 기반의 맞춤형 K-POP 댄스 학습 서비스
Wavy의 Client는 위 개발 스택을 사용하여 개발되었습니다.
Wavy는 현재 위 URL에서 서비스되고 있습니다.
Main - Video card |
![main-video-card](https://user-images.githubusercontent.com/26461307/140163003-00b4cc90-82e9-45e7-849e-24929dfab220.gif) |
Main - Tag |
![main-tag](https://user-images.githubusercontent.com/26461307/140163545-80ff0f4d-ad06-44c2-a483-eebf1dad528b.gif) |
Main - Tag scroll |
![main-tag-scroll](https://user-images.githubusercontent.com/26461307/140165458-586631a1-4fdc-417a-b659-854294f94be9.gif) |
Practice |
![practice](https://user-images.githubusercontent.com/26461307/140170137-82781c9f-a504-46ff-be9d-cd9441cd22bf.gif) |
Challenge - start |
![challenge-start](https://user-images.githubusercontent.com/26461307/140171096-c2b7442c-262b-4f74-9350-2e733fee3de9.gif) |
Challenge - end |
![challenge-end](https://user-images.githubusercontent.com/26461307/140171317-597d9b01-03ba-4c4d-90b1-7a45f9b37669.gif) |
Analysis |
![analysis](https://user-images.githubusercontent.com/26461307/140172018-1a760c56-bef8-442d-bc47-47b2e2c408c2.gif) |
Player - Marker and Loop |
![player-marker-and-loop](https://user-images.githubusercontent.com/26461307/140172663-1307ca38-d239-4886-a026-1b834738af60.gif) |
Review - Statistics |
![review-statistics](https://user-images.githubusercontent.com/26461307/140385202-77be3dbb-df9e-481b-9ac2-1b6fc710c544.gif) |
Reviw - Search |
![review-search](https://user-images.githubusercontent.com/26461307/140385210-bb9ec854-6f8f-4164-9f13-aa417574a767.gif) |
Search |
![search](https://user-images.githubusercontent.com/26461307/140166336-60db2217-dc90-4cbd-84c1-e2f885a21492.gif) |
Sign in |
![sign-in](https://user-images.githubusercontent.com/26461307/140167024-66f3692d-2b5d-4483-b2f6-7cf12b72f5ae.gif) |
Storage - Empty |
![storage-empty](https://user-images.githubusercontent.com/26461307/140167345-e10ca4c8-e3b8-4c06-a248-080a9da5a008.gif) |
Store |
![store](https://user-images.githubusercontent.com/26461307/140167564-d73ee23e-cb53-424c-8fa1-4eafe6ff7cbf.gif) |
src
├── assets
│ └── images
│ └── videos
├── components
│ └── App.tsx
│ └── Common
│ └── [PageName]
├── constants
├── hooks
│ └── api
│ └── Common
│ └── [PageName]
├── pages
│ └── [PageName]
├── router
├── store
│ └── Common
│ └── [PageName]
├── styles
│ └── global
│ └── theme
├── types
├── utils
└── index.tsx
기본적으로 파일 유형 이후 라우트에 의한 분리를 적용하였습니다.
상태 관리 라이브러리는 Recoil을 사용하였습니다.
// ConcreteDecorator
import { atom } from "recoil";
export const isPlayingState = atom<boolean>({
key: "isPlayingState",
default: false,
});
// Decorator
import { useRecoilState } from "recoil";
import { isPlayingState } from "store";
const useControllerPlaying = () => {
const [isPlaying, setIsPlaying] = useRecoilState(isPlayingState);
const toggleIsPlaying = () => setIsPlaying((prev) => !prev);
return { isPlaying, setIsPlaying, toggleIsPlaying };
};
export default useControllerPlaying;
// Component
import useControllerPlaying from "hooks/useControllerPlaying";
const someComponent = () => {
const { isPlaying, toggleIsPlaying } = useControllerPlaying();
return (
<button onClick={toggleIsPlaying}>{isPlaying ? "중지" : "재생"}</button>
);
};
전역 상태의 경우 store의 atom을 ConcreteDecorator
로써, hook을 Decorator
로써, Component를 Component
역할로써 Decorator 패턴을 각색하여 개발 및 사용하였습니다.
해당 프로젝트는 소프트웨어 마에스트로 사업의 지원을 받아 개발되었습니다.
Wavy는 MIT License를 적용하고 있습니다.