• Motion Web
• TypeScript와 Redux-Toolkit을 사용, 드래그 앤 드롭 기능을 구현한 Motion 프로젝트

🤍 Skills : 개발 환경 및 기술스택

• React
• TypeScript
• Redux-Toolkit
• TailwindCSS
• eslint

🤍 Directory Structure : 디렉토리 구조

└─ src
  ├─ components : 컴포넌트 파일 
  ├─ hooks : 커스텀 훅 파일
  ├─ pages : 각 페이지 
  ├─ constants : 상수 모음 파일
  ├─ styles : CSS 파일 
  ├─ utils : 정규표현식, 공통함수
  ├─ store : redux 관리 파일
  └─types : 타입 지정 파일

🤍 Key Features : 주요 기능 소개

게시글 등록

Image 등록	Video 등록	Note 등록	Todo 등록

• VIDEO 게시글 등록 시 모달 창에서 입력한 유튜브 영상 미리보기 가능
• TASK 게시글의 완료한 TODO는 취소선과 체크박스로 변경되어 구분할 수 있음
• 이미지 첨부 시 이미지 파일만 첨부할 수 있음
• 유튜브 링크 첨부 시 올바른 링크가 아닌 경우 경고 문구를 표시하고, 업로드 불가능 하도록 등록 버튼이 사라짐

게시글 삭제

• 각 게시글의 오른쪽 상단 x 버튼을 클릭해 삭제할 수 있음
  클릭 시 삭제 확인 모달 창에서 ‘확인’ 버튼을 누르면 삭제됨
• 모달 창 바깥을 누르거나, ‘취소’ 버튼을 눌러서 모달 창을 닫을 수 있음

게시글 순서 이동

• 게시글의 순서를 드래그 앤 드롭으로 변경할 수 있음

URL 유효성 검사

• 이미지 첨부 시 이미지 파일만 첨부할 수 있음
• 유튜브 링크 첨부 시 올바른 링크가 아닌 경우 경고 문구를 표시하고, 업로드 불가능 하도록 등록 버튼이 사라짐

VIDEO 미리보기

• VIDEO 게시글 등록 시 모달 창에서 입력한 유튜브 영상 미리보기 가능