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

[정지성] Week11 #353

Conversation

Byukchong
Copy link
Collaborator

요구사항

기본

  • 폴더 페이지에 필요한 “폴더 이름 변경”, “폴더 추가”, “폴더 공유”, “폴더 삭제”, “링크 삭제”, “폴더에 추가” 모달을 만들어 주세요.
  • “폴더 공유” 모달의 기능은 클릭시 ‘{호스트 주소}/shared/{currrentFolderId}’ 로 접속 가능한 주소를 공유 또는 클립보드에 복사 가능하게 해주세요.
  • 팀내 2 ~ 3명이 짝을 지어 페어프로그래밍으로 여러 모달을 만들 때 사용할 모달 컴포넌트를 만들어 주세요.
  • 카드에 있는 케밥 버튼을 클릭할 경우 보여야 할 팝오버를 만들어 주세요.

심화

주요 변경사항

  • 모달 컴포넌트 생성
  • 클릭했을때 props 값을 받아 모달에 출력되는 로직 구현

스크린샷

image
image
image
image
image

멘토에게

  • 모달을 각 종류별로 만들다보니 중복되는 경우가 많은 것 같습니다.
  • 이런 시안에 따라 모달 컴포넌트를 효율적으로 만들려면 어떤 방식으로 진행하는게 좋을지 의견 궁금합니다.
  • 그 이외는 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Byukchong Byukchong requested a review from devToram April 27, 2024 07:28
@Byukchong Byukchong added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 27, 2024
Copy link
Collaborator

@devToram devToram left a comment

Choose a reason for hiding this comment

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

프로젝트 끝나고 까지...!
수고많으셨습니다 :)
모달 관련된 내용은 커멘트로 남겼는데 혹시 이해 어려우시면 멘토링때 질문주셔요!

setTargetName(event.target.value);
}
function handleCloseModal(isOpen) {
setIsModalOpen(isOpen); // 모달을 닫습니다.
Copy link
Collaborator

Choose a reason for hiding this comment

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

모달을 닫는 동작의 경우 굳이 isOpen 인자를 안넘겨주고 false를 넣어주면 될 거 같아요~

Comment on lines +68 to +88
{link.image_source ? (
<img
src={moreoptionicon}
alt="링크 게시물 옵션 버튼 아이콘 "
src={link.image_source}
className={`${styles.card_img} ${
isHovering ? styles.zoomIn : ''
}`}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
alt={link.title}
/>
</button>
) : (
<img
src={thumbnail}
className={`${styles.card_img} ${
isHovering ? styles.zoomIn : ''
}`}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
alt="thumbnail_img"
/>
)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

이미지의 source, alt 내용만 다른 거 같은데 src에 image_source ?? thumbnail 로 하면 굳이 분기 처리 안해도 될 거 같아요

))
) : (
<div className={styles.noLinkText}>
<p>저장된 링크가 없습니다</p>
</div>
)}
{isModalOpen && (
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기서 open이 되어있는지 확인하고 내부에서도 또 모달이 open 상태인지 확인하고 있어서, 한 군데서만 확인해주면 좋을 거 같습니다!

Comment on lines +16 to +17
<div className={styles.modal}>
<div className={styles.modal__content}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

어느 정도 모달마다 뒤에는 dimmed 되고, 모달 닫는 창이 있고 등의 공통점이 있어요!

해당 부분을 공통 모달로 해서 Modal 컴포넌트를 만들고, 각기 다른 모달들은 Modal 컴포넌트에 children 으로 내용을 넘기는 구조를 추천드립니다!

@devToram devToram merged commit 8802add into codeit-bootcamp-frontend:part2-정지성 Apr 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants