Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[YooN] 3/5(수)까지 작업할 PR #2

Merged
merged 11 commits into from
Mar 6, 2025

Conversation

SangYoonLee1231
Copy link

@SangYoonLee1231 SangYoonLee1231 commented Mar 4, 2025

  • 요구 사항 작성 중 (추가 선택 기능 외 작성 완료)

작업 목록

메인 UI 구현

  • 메인 UI 구현 - 헤더 UI
  • 메인 UI 구현 - 카드 구현
  • 메인 UI 구현 - 칼럼 영역 UI (카드 표시)

메뉴(히스토리) 구현

  • 메뉴(히스토리) 구현 - 레이어 UI 및 닫기 버튼 구현
  • 메뉴(히스토리) 구현 - 슬라이드 애니메이션
  • 메뉴(히스토리) 구현 - 액션 UI 구현 (Mock 데이터 사용)
  • 메뉴(히스토리) 구현 - 스크롤 구현
  • 메뉴(히스토리) 구현 - 삭제 버튼 구현 (+알럿창)

새로운 카드 등록 기능 구현

  • 새로운 카드 등록 기능 구현 - 새로운 카드 UI
  • 새로운 카드 등록 기능 구현 - [+버튼] 기능 구현
  • 새로운 카드 등록 기능 구현 - 등록 및 취소 기능 구현

카드 이동

  • 카드 이동 - 드래그 처리
  • 카드 이동 - 잔상 처리
  • 카드 이동 - 드롭 처리

카드 삭제

  • 카드 삭제 - X버튼 시 등장하는 알럿창 구현
  • 카드 삭제 - 삭제 시 리스트에서 정보 삭제

카드 수정

  • 카드 수정 - 수정 카드 UI 구현
  • 카드 수정 - 수정 내용 반영하기

카드 정렬

  • 카드 정렬 - 정렬 구현
  • 카드 정렬 - 애니메이션 구현



@crongro
Copy link
Contributor

crongro commented Mar 5, 2025

@SangYoonLee1231 PR을 main 브랜치로 보내셨어요~

Copy link
Contributor

@crongro crongro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기본 설정들이 잘 잡힌것 같으니 이 구조에서 개발해보세요.

index.html Outdated
</div>
<!-- Task Card -->
<div class="task-card">
<div class="task-card__title">Task 1</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

heading 태그 사용도 고려~

index.html Outdated
<img
class="column__header-right-icon"
src="./icons/plus.png"
alt="add task"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt를 쓸거면 조금더 친절한 설명으로.

index.html Outdated
<!-- Header -->
<header class="header">
<div class="header__logo">
<span class="header__logo-name">TASKIFY</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 heading태그 사용해도 될듯

@SangYoonLee1231 SangYoonLee1231 changed the base branch from main to SangYoonLee1231 March 5, 2025 03:34
@SangYoonLee1231
Copy link
Author

@SangYoonLee1231 PR을 main 브랜치로 보내셨어요~

앗 감사합니다! 제 브랜치로 수정했습니다 :)

@SangYoonLee1231 SangYoonLee1231 marked this pull request as ready for review March 5, 2025 16:54
Copy link
Contributor

@crongro crongro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

정적인 화면 구성이 어느정도 됐군요. 수고했어요.

Comment on lines +23 to +44
<!-- Task Card -->
<!-- <div class="task-card">
<div class="task-card__left">
<div class="task-card__title">Task 1</div>
<div class="task-card__description">Description 1</div>
<div class="task-card__author">author by YooN</div>
</div>
<div class="task-card__right">
<img
class="task-card__right-delete-icon"
src="./icons/delete.png"
width="14px"
alt="edit task"
/>
<img
class="task-card__right-modify-icon"
src="./icons/pen.png"
width="14px"
alt="delete task"
/>
</div>
</div> -->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용하지 않는 코드는 지워버리세요.

display: flex;
justify-content: space-between;
align-items: center;
padding: 14.5px 16px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

디자인에 소수점이 있었나봐요?
가급적 소수점은 피하는것이 좋아요.

Comment on lines +132 to +133
display: flex;
flex-direction: column;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

레이아웃 관련된 비슷한 스타일이 자주 등장하면
레이아웃 클래스를 만들어서 사용하는 것도 좋죠.(유틸리티 클래스 )

justify-content: space-between;
align-items: center;
padding: 14.5px 16px;
font-size: 16px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

em 과 rem도 공부해보세요.

Comment on lines +100 to +101
<h2 class="task-card__description">Description 1</h2>
<h3 class="task-card__author">author by YooN</h3>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

h1은 페이지에 보통 한개 있는것이 좋고요.
h2,h3는 제목이라는 뜻인데 지금 내용이 제목 맞나요?

@crongro crongro merged commit 3114c11 into codesquad-members-2025:SangYoonLee1231 Mar 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants