hyesungoh / wavyfrontend

Web Client of Wavy

Wavy - Client

인공지능 기반의 맞춤형 K-POP 댄스 학습 서비스

Introduction • Getting Started • Features • Developer

Introduction

Wavy의 Client는 위 개발 스택을 사용하여 개발되었습니다.

Getting Started

www.wavy.dance

Wavy는 현재 위 URL에서 서비스되고 있습니다.

Features

Main - Video card

Main - Tag

Main - Tag scroll

Practice

Challenge - start

Challenge - end

Analysis

Player - Marker and Loop

Review - Statistics

Reviw - Search

Search

Sign in

Storage - Empty

Store

Directory Structure

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

기본적으로 파일 유형 이후 라우트에 의한 분리를 적용하였습니다.

Data Structure

상태 관리 라이브러리는 Recoil을 사용하였습니다.

store

// ConcreteDecorator
import { atom } from "recoil";

export const isPlayingState = atom<boolean>({
    key: "isPlayingState",
    default: false,
});

hook

// 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

// 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 패턴을 각색하여 개발 및 사용하였습니다.

Developer

해당 프로젝트는 소프트웨어 마에스트로 사업의 지원을 받아 개발되었습니다.

FE: hyesungoh	AI: haeseoklee	BE: Yeonwu

License

Wavy는 MIT License를 적용하고 있습니다.