Feature/modal #10
Feature/modal #10
Conversation
package.json
Outdated
| @@ -18,6 +18,7 @@ | |||
| "react": "^19.0.0", | |||
| "react-dom": "^19.0.0", | |||
| "sonner": "^1.7.4", | |||
| "react-icons": "^5.4.0", | |||
There was a problem hiding this comment.
아이콘은 나중에 @haedawn 님이 만들어주신거를 한번에 적용하기로 하고,
그전까지는 이전에 설치된 lucide-react 를 사용하는것도 좋을 것 같습니다!
| </div> | ||
| <div className="flex items-center justify-end"> | ||
| <Button className="h-[40px] w-[148px] bg-gray-scale-700 p-0"> | ||
| <p className="text-h1-m text-gray-100">완료</p> |
There was a problem hiding this comment.
gray 대신 gray-scale 로 사용해주시면 좋을 것 같습니다!
| <> | ||
| <div className="mt-[28px] flex flex-col gap-[40px]"> | ||
| <Button className="w-[148px] bg-gray-scale-700 px-[24px] py-[10px] text-primary-300"> | ||
| <div className="flex items-center gap-[20px] text-h3-sb" onClick={() => onCreate()}> |
There was a problem hiding this comment.
| return ( | ||
| <> | ||
| <div className="mt-[28px] flex flex-col gap-[40px]"> | ||
| <Button className="w-[148px] bg-gray-scale-700 px-[24px] py-[10px] text-primary-300"> |
There was a problem hiding this comment.
py-[8px] or py-[12px]로 바꿔주시면 좋을 것 같아요!
| </div> | ||
| </Button> | ||
| <div> | ||
| <div className="border-b-[1px] border-gray-scale-700 px-[8px] py-[8px]">기본</div> |
There was a problem hiding this comment.
px-[8px] py-[8px] -> p-[8px]
| const [isCreateMode, setIsCreateMode] = useState(false) | ||
|
|
||
| return ( | ||
| <div className="flex min-h-[600px] w-[720px] flex-col gap-[32px] rounded-lg bg-gray-scale-800 stroke-primary-300 stroke-[1px] px-[24px] py-[36px]"> |
There was a problem hiding this comment.
-
rounded도pixel을 명시해주기로 했으니rounded-lg대신에 Figma 값으로 설정 부탁드립니다! 🙇♂️ -
div에는stroke속성이 아닌,border속성을 사용해야 하는걸로 알고있는데, 확인 부탁드려도 될까요?
stroke는 HTML 요소에 적용이 안되는걸로 알고있는데 확인 한번 부탁드립니다!
There was a problem hiding this comment.
아 figma 그대로 디자인넣다보니 stroke를 넣었군요 어쩐지 안되더라고요... 나중에 고칠려고 했는데 알려주셔서 감사합니다
| <IoMdClose /> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-1 gap-6"> |
| </div> | ||
| </div> | ||
| <div className="flex flex-1 gap-6"> | ||
| <div className="w-64 flex-1 rounded-xl bg-black"></div> |
|
|
||
| export default function ConfirmModal({ children, onCancel, onConfirm }: Props) { | ||
| return ( | ||
| <div className="flex flex-col gap-[56px] rounded-lg bg-gray-scale-800 stroke-primary-300 stroke-[1px] px-[38px] py-[44px] text-center"> |
There was a problem hiding this comment.
CollectionModal 에 달아놓은 댓글과 동일한 내용 확인 부탁드립니다!
src/app/(routes)/test/modal/page.tsx
Outdated
There was a problem hiding this comment.
There was a problem hiding this comment.
임의 사용이라 무시해도 될 것 같아요 어차피 쓸 일이 없는 버튼이라
#️⃣ 관련 이슈
#9
📝 이슈 내용
모달 구현하기
🛠️ PR 유형
어떤 변경 사항이 있나요?
📸스크린샷 (선택)
💬 To Reviewer
구조가 괜찮은지 봐주셨으면 좋겠습니다
✅ PR Checklist
PR이 다음 요구 사항을 충족하는지 확인하세요.