mutsatopia / guten-tag Goto Github PK

Description

메인 페이지 보드를 위해 태그 버튼 렌더

To Do

randerTag.js 생성 및 함수제작 및 css 적용

ETC

기타 참고사항을 입력해주세요.

Description

테마 버튼 터치 시 나오는 스타일 작업

To Do

테마 색상 버튼
팔레트

ETC

Description

• 버튼 클릭시 attr 삭제 기능

To Do

attrAdd.js 함수 추가 예정

ETC

기타 참고사항을 입력해주세요.

Description

• ready 상태의 태그를 보드 위에 그리는 과정에서 주변 요소의 크기나 위치가 비정상적으로 변경되는 버그
• body의 최대 크기가 뷰포트보다 커지지 않는 버그

How to fix

• 크기, 위치 변경 및 복구 조건을 더 세분화해서 분기해야 함
• body에 한해서 뷰포트를 벗어날 수 있도록 변경해야 함

Description

태그의 이름, 카테고리, 필수 attribute 정보를 가진 객체

Example

const tagData = [
  {
    tagName: "div",
    keyword: ["블럭"],
    attr: []
  },
  {
    tagName: "a",
    keyword: ["시맨틱"],
    attr: ["href"]
  },
  {
    tagName: "header",
    keyword: ["블럭", "시맨틱"],
    attr: []
  },
];

Description

보드 내부의 있는 태그 삭제시 태그 선택창으로 이동 하도록 수정

To Do

board.js delete 메소드 수정

ETC

기타 참고사항을 입력해주세요.

Description

board 페이지 클래스명 변경으로 style 수정 필요

To Do

boardStyle css 선택자명 변경

ETC

Description

로컬에 데이터 파일 생성 놓고 다양한 작업공간에서 사용 할수 있게 한다

To Do

DATA.js 로컬에 생성

ETC

기타 참고사항을 입력해주세요.

Description

화면에 차도록 높이 조절

To Do

calc사용

ETC

기타 참고사항을 입력해주세요.

Description

고정 영역 및 스크롤 이슈 비롯한 UI 개선 예정입니다.

To Do

• 보드 헤더 고정
• 전체 스크롤 문제 해결
• 태그 선택 바 태그 검색 섹션 고정
• 검색 인풋에 placeholder 추가

ETC

• 스크롤 이슈는 추후 더 상의 필요

Description

메인 보드에서 사용할 수 있는 태그들은 js로 렌더

To Do

TagRender.js 생성 및 함수 작성

ETC

기타 참고사항을 입력해주세요.

Description

보드 페이지로 넘어가기 전 인덱스 화면을 구현할 예정입니다.

To Do

• 화면 구상
• 마크업 작성

ETC

인덱스 화면 구상 과정에서 필요할 경우 로고를 수정할 계획입니다.

Description

전체 시멘틱 인라인 블럭 버튼 누를때 눌렸음을 표시해주는 기능

To Do

클래스로 받아온 다음 foreach로 작업

ETC

js파일을 새로 만들지, 기존 파일중에 적당한 파일에서 작업할지 논의 필요

Description

1. 태그 선택 바에서 태그를 선택해서 잔상이 남아 있는 상태에서 없는 상태로 취소하는 기능
2. 보드 위에서의 마우스 커서 모양 변경

To Do

1. 동일한 태그 선택 버튼을 누르면 ready 상태가 취소될 수 있도록 구현할 예정
   (이미 Esc키, 마우스 우클릭으로 ready 상태를 취소할 수 있음)
2. 기존의 마우스 커서가 보이지 않게 한 뒤, 별도의 마우스 커서 이미지가 커서를 따라다니는 방식으로 변경할 예정

Description

격자 메뉴 열기

To Do

격자 css 작업

ETC

Description

전체에서 태그 버튼을 좀 더 넉넉히 보이도록 수정

To Do

height, padding 으로 임시 조절

ETC

전체 태그가 추가 될 시 다시 논의가 필요할 수 있음

Description

attribute 창 UI 디테일 작업

To Do

• 위치 조정
• 추가/삭제 버튼 수정
• hover 시 효과
• 어트리뷰트 추가 input css 수정

ETC

Description

보트 태그를 선택시 attr 버튼을 보여주고 그외는 display none 으로 설정한다

To Do

board.js 코드 추가 및 css 변경

ETC

기타 참고사항을 입력해주세요.

Description

1 board tag 클릭시 attr창으로 이동 및
2 attr 수정기능 추가

To Do

board.js 함수 추가
attrCustom 함수 추가 및 기능 변경

ETC

기타 참고사항을 입력해주세요.

Description

사이드 바와 보드 각각 스크롤바가 노출되게 할 예정입니다.

To Do

• 스크롤바 스타일링
• 사이드바 스크롤 영역 수정

ETC

Description

배치된 태그 선택 시 속성 작성할 수 있는 ui

To Do

어트리뷰트 작성 UI가 태그 선택 UI 위치에 생성됨

ETC

Description

태그 선택시 border solid 표시가 나오는 동시에 다른 태그는 선택 안됨

To Do

selectTag.js 생성 및 boardStyle class 추가

ETC

기타 참고사항을 입력해주세요.

Description

보드에 그려지는 태그들을 Tag 객체로 관리하기 위해서 Tag 클래스를 구현할 예정입니다.

To Do

• 프로퍼티
  • 태그 정보
  • 태그 상태
  • 부모 태그 참조
  • 자식 태그 참조 배열
• 메서드
  • 태그에 해당되는 HTMLElement 생성
  • 태그 위치 지정
  • 태그 크기 지정
  • 태그 상태 지정

ETC

기본적인 것만 구현하고 추후에 계속 업데이트할 예정입니다.

Description

격자 크기 조절 구현

To Do

1. 격자 메뉴에서 격자 사이즈를 조정했을 때 변경
2. 창 크기가 변경되었을 때 격자 사이즈 변경

Description

잘못된 동작 및 개선사항 탐색

To Do

사용 중 의도에 맞는 동작인지 탐색
사용성이 높아지거나, 디자인적인 개선 등등

ETC

Description

태그 버튼에 색깔 테마가 적용되는 기능

To Do

data.js에서 작업 필요예상

ETC

Description

구텐탁 서비스를 소개하는 인덱스 화면 완성

To Do

• 구텐탁 서비스 소개글
• 기능 요약 설명
• 푸터에 자-멘 팀 구성 추가

ETC

• 소개글 및 요약 설명 첨삭 받겠습니다 :)

Description

리드미 작성

To Do

1. 목표와 기능
2. 배포
3. 팀 소개 및 역할 분담
4. 프로젝트 구조와 개발 일정
5. 로고 / UI
6. 메인 기능
7. 개발하며 느낀 점

ETC

2022년 1월 2일 15시 이후에 개발하며 느낀 점 각자 쓰면 좋을 것 같습니다!

Description

보드 UI 개선

To Do

1. 자식 요소가 있는 태그는 태그 글자를 좌측 상단에 배치
2. selected 상태의 태그에 자식 요소를 삽입하면 자식 요소의 배치가 뒤로 가는 버그 수정

Description

닫는 태그가 없는 태그들 추출 시 예외 처리 필요

To Do

br hr img meta link input 예외처리

ETC

Description

태그들이 그려질 보드의 기본적인 틀만 구현할 예정입니다.
board라는 객체가 보드 관련 정보를 프로퍼티로, 이벤트 핸들러와 관련 함수들을 메서드로 갖습니다.

To Do

• 프로퍼티
  • 태그들이 그려질 보드 HTMLElement 객체
  • body를 나타내는 Tag 객체
  • 태그 선책 바에서 클릭하여 보드에 그려질 준비되어 있는지 여부
  • 격자 크기
• 메서드
  • click 이벤트 핸들러
  • mouseover 이벤트 핸들러
  • mousemove 이벤트 핸들러
  • mouseout 이벤트 핸들러
  • 특정 태그 검색
  • 특정 태그의 위치를 격자 크기 단위에 맞게 조절

ETC

기본적인 것만 구현하고 추후에 계속 업데이트할 예정입니다.

Description

테마와 격자 안의 버튼 요소들을 숨김처리(tab터치 시 버튼을 누르지 않아도 포커싱되어 ui가 기획의도와 달라짐)

To Do

조건에 따라 테마와 격자가 눌렸을 때만 노출되도록 수정

ETC

Description

태그 검색하는 부분이 고정됩니다.

To Do

ul부분만 스크롤 속성 부여 or 검색창 fixed

ETC

Description

해당 체크 박스를 클릭시 보드에 있는 격자 제거
css 스타일링 변경

To Do

grid.js 기능 추가 및 boardStyle.css 변경

ETC

기타 참고사항을 입력해주세요.

Description

located 상태의 Tag 객체를 클릭하여 selected 상태로 변경

To Do

• selected 상태임을 알리는 UI
• 좌측 태그 선택 바가 어트리뷰트 편집 바로 변경됨
• selected 상태가 해제되면 어트리뷰트 편집 바가 태그 선택 바로 돌아옴
• 어트리뷰트 변경 내용 Tag 객체에 반영
• 태그 이동, 태그 크기 조절, 태그 삭제 기능

Description

ready 상태의 Tag 객체가 화면에 표시되는 것과 관련한 기능을 완성할 예정입니다.

To Do

• 잔상이 화면 밖으로 빠져나가서 스크롤바가 생기는 현상 수정하기
• body 태그 안쪽에서만 블록 태그의 width가 늘어나도록 하기
• 현재 마우스가 위치한 곳의 태그를 인식하도록 함
  1. 부모(가 될) 태그보다 자식 태그(현재 ready 상태의 태그)가 커질 수 없도록 함
  2. 인라인 태그 안에 블록 태그를 넣으려고 하면 경고를 표시하도록 함(나중에 구현할 예정)
• ready 상태의 태그를 취소할 수 있도록 하기
• body 태그 가운데 정렬 시키기

Description

ready 상태의 태그를 클릭하여 보드에 그려진 located 상태의 태그 구현

To Do

ready 상태의 태그를 클릭하면

• 태그의 opacity를 1로 변경
• 현재 위치한 태그와 부모 - 자식 관계로 연결

ready 상태의 태그가 마우스가 위치한 located 태그보다 height가 더 클 때

• located 태그의 크기 변경 및 located 태그의 크기 변경으로 인해 변경된 다른 태그들의 위치 변경
• ready 상태의 태그가 현재 위치한 located 태그 밖으로 벗어났을 때 변경된 located 태그의 크기 복원

Description

보드에 시각적으로 태그 표시하기

To Do

• 태그 선택 창에서 선택한 태그를 보드에 그릴 수 있게 마우스의 위치에 따라 잔상 나타내기
• 잔상을 클릭하여 보드에 태그 표시하기

ETC

#14 에서 발견된 오류도 같이 수정할 예정입니다.

Description

인덱스 페이지 마크업을 바탕으로 css를 작성하려고 합니다.

To Do

• indexStyle.css 생성
• 반응형 작업

ETC

우선 헤더만 작성할 계획입니다.

Description

로고 클릭 시 index 페이지로 이동하기

To Do

a 태그 수정

ETC

Description

추출 버튼 눌렀을 때 모달창을 만들 예정입니다.

To Do

• 모달창 구성

ETC

Description

• 버튼 누르면 어트리뷰트 생성창이 나오고 추가시 밑에 스택이 쌓임

To Do

attrAdd.js 생성및 기타css 추가

ETC

기타 참고사항을 입력해주세요.

Description

태그가 선택 된 상태에서 필터버튼이나 색상테마 변경 시 버그가 발생할 수 있음
ex. 태그 선택 후 필터 버튼->버튼 동적 생성->태그 선택은 취소되나, 마우스에는 정보가 남아있다.

To Do

버튼 동작에 board.clearReady 추가

ETC

Description

사용자가 색상을 직접 선택

To Do

색상 팔레트 노출 및 선택

ETC

Description

검색시 태그 이름과 매칭해서 해당 태그 이외 다른 태그는 필터링함

To Do

searchFilter.js 생성

ETC

기타 참고사항을 입력해주세요.

Description

새로운 어트리뷰트의 추가/삭제 기능

To Do

• 어트리뷰트 추가 버튼 하단에서 상단으로 위치 변경
• 어트리뷰트 추가 취소 시 인풋 사라지게 하기
• 어트리뷰트 추가 시 해당 내용 반영되고 인풋 사라지게 하기

ETC

Description

태그 데이터 추가, 수정, 삭제 등

To Do

• 누락된 태그 추가
• 태그마다 기본 크기값 추가
• 순서 정렬

ETC

기본 크기 태그에 반영되도록 해야함

Description

placeholder 스타일 수정
어트리뷰트 하단화살표 삭제

To Do

font 조정
padding 조정

ETC

Description

board 페이지 클래스 명 변경으로 Style 수정 필요

To Do

boardStyle css 선택자 수정

ETC