[Feat/#60] 게시물 삭제 모달 구현 #64
Conversation
| iconSize: { | ||
| "24": { | ||
| width: "2.4rem", | ||
| height: "2.4rem", | ||
| }, | ||
| "20": { | ||
| width: "2.0rem", | ||
| height: "2.0rem", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
p2) 이렇게 하면 iconSize가 2가지의 경우로밖에 분리가 안되고, 매번 다른 사이즈의 아이콘이 필요하다면
그때마다 스타일링 variant를 작성해주어야한다는 불편함이 있어요.
export const iconSizeVar = createVar();
export const container = style({
margin: "20rem",
position: "relative",
width: iconSizeVar, // 동적 크기 설정
height: iconSizeVar, // 동적 크기 설정
});
이런 형식으로 만들어두고, 실제로 사용할 떄는
<div
className={styles.container}
style={{
[styles.iconSizeVar]: `${size}rem`, // CSS 변수에 동적 값 설정
}}
>
Icon
</div>
과 같은 방식으로 개선해보는건 어떨까요?
There was a problem hiding this comment.
피드백 감사합니다!
해당 방법은 다양한 사이즈가 사용 될 때 유용한 것 같아요!
해당 아이콘은 두가지 사이즈(20,24) 만 쓰이고 있기도 하고,
20을 받으면 2 로 변환하는 것
24를 받으면 2.4 로 변환하는 것
해당 두가지 이슈가 있어서
props로 2 or 2.4를 받는 게 맞을까 생각해봤을 때,, 불편할 것 같다는 생각이 들었어요.
또한 해당 코드 기반으로 방금 변경 사항 적용을 해보았는데, CSS 변수(createVar)와 React 스타일 속성 사용의 혼용으로 스타일이 안 먹는 것 같습니다...
어떻게 하면 좋을지 얘기해보면 좋을 것 같아요
There was a problem hiding this comment.
assginInLineVars 함수를 사용해서 할당을 해야해요!
구두로 설명드리겠습니다 ~
| variants: { | ||
| iconSize: { | ||
| "24": { | ||
| width: "2.4rem", | ||
| height: "2.4rem", | ||
| }, | ||
| "20": { | ||
| width: "2.0rem", | ||
| height: "2.0rem", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
p2) 이것도! 위에서 언급했으니 자세한 설명은 생략할게요~
|
|
||
| export const container = recipe({ | ||
| base: { | ||
| margin: "20rem", |
There was a problem hiding this comment.
p4) 혹시 이 마진은 왜 존재하는건가요? 20rem 이면 꽤 큰 거 같은데,
MoreModal 을 사용하려면 항상 상,하,좌,우 모달 주변에 마진이 필요했던 이유가 있나요?
There was a problem hiding this comment.
마진은 없는 게 맞습니다.
테스트 하려다 모달이 안 보여서 움직여둔 겁니다!
삭제 후 푸시 했습니다
🔥 Related Issues
✅ 작업 리스트
🔧 작업 내용
게시물 삭제 모달 구현했습니다.
해당 모달은 게시물을 삭제하거나, 댓글을 삭제하는 용도로 쓰일 예정입니다.
interaction 정의된 게 없어서, 디자이너께 button 클릭 시 디자인을 요청 드렸습니다.
만들어주신 해당 디자인에 대해 :active css 주었습니다.
... 버튼의 위치가 변경되어도 그 것에 맞게 따라다니도록 구현하였습니다! (영상 확인)
📣 리뷰어에게 어떠신가요?
[ 해당 컴포넌트가 쓰이는 곳, 수정해야하는 곳 ]
에 해당 컴포넌트로 변경 필요할 수 있을 것 같습니다.
그리고 유저가 쓴 게시물인 경우에만 해당 버튼이 보여야 하기 때문에,
헤더에서도 props 수정이 불가피해보입니다.
댓글 컴포넌트도 마찬가지로 불가피해보입니다.
-> 추후 디테일 페이지 구현하면서 해당 내용 추가로 수정해두겠습니다!
[ 컴포넌트 @params ]
다음과 같이 아이콘 사이즈 변경 가능합니다.
현재는 2.4rem, 2.0rem 두 가지 설정해두었습니다.
[ 해당 컴포넌트 사용 방법 ]
이렇게 useMoreModal 훅을 만들었습니다.
위치는 @shared/hook/useMoreModal 입니다.
위치나 다양한 피드백 환영합니다.
[수정하기 기능 ]
추후 스프린트를 위해 수정하기 기능을 추가 했습니다.
onEdit 함수가 들어가면, 수정하기가 있다고 인식하도록 구현했습니다.
근데 코드를 작성하면 작성할 수록 이게 맞나 싶은 생각이 들었어요..
다들 한번씩 봐주시고 말씀 주시면 감사할 것 같습니다.
📸 스크린샷 / GIF / Link
2025-01-16.06.44.27.mov