웹

프론트엔드

1. 태스크 기능 개발

• 윈도우 태스크의 세부 기능을 개발
  • 태스크의 구성(헤더, 버튼 등등)
  • 태스크 드래그
• 현재 켜진 태스크의 리스트를 atomWithStorage를 사용하여 재시작해도 종료 직전 태스크를 복원

2. 가상 커서 개발

설이 가상 커서 구현

3. 스택 구조 페이지 태스크 구현

Stack에 페이지를 넣어 top을 렌더링 하는 태스크 구현

import { useAtomValue } from 'jotai';
import {useStack} from '@/hooks/dataStructure.tsx'
import { taskSearchAtom } from "@/atoms/taskTransformer.ts";

const taskSearch= useAtomValue(taskSearchAtom);
const [stack, push, pop, top] = useStack();

push(taskSearch?.('찾을 task name', stack, push, pop, top));

return (
<>
{top()?.component}
</>

4. 태스크 관리를 편리하게 하기 위한 Hook 구현

• taskSearch
  • 실행할 수 있는 태스크를 이름으로 검색 후 태스크 객체 반환
• taskTransfrom
  • 인자로 2개의 문자열을 받고, 첫 번째 문자열의 이름을 가진 태스크는 kill, 두 번째 문자열의 이름을 가진 태스크는 생성한다

import { useAtomValue } from 'jotai';
import { taskSearchAtom } from '@/atoms/taskTransformer.ts';

const taskSearch= useAtomValue(taskSearchAtom);
taskSearch?.('찾을 task name');
taskSearch?.('찾을 task name', stack, push, pop, top); // stack을 넘겨줘야 하는 task일 때 사용

import { useAtomValue } from 'jotai';
import { taskTransformerAtom } from '@/atoms/taskTransformer.ts';

const taskTransform = useAtomValue(taskTransformerAtom);
taskTransform?.('제거할 task name', '생성할 task name');

5. 앱 구현

• 내 컴퓨터
  • 유저의 프로필, 최근 방문한 추모관
  • 로그인, 로그아웃 버튼
• 추모관 검색
  • 이름, 애니메이션, 사인으로 필터링 하여 추모관 검색
  • 오프셋 기반 페이지네이션으로 페이징
• 경고