feat: 프로필 내 카드 구현 #1272
feat: 프로필 내 카드 구현 #1272
Conversation
|
🚀 프리뷰 배포 확인하기 🚀 |
| const Thumbnail = styled.img` | ||
| border-radius: 14px; | ||
| width: 84px; | ||
| height: 84px; | ||
| object-fit: cover; | ||
| `; |
There was a problem hiding this comment.
p2; <img> 대신 <ResizedImage> 를 사용해서 용량 최적화를 하면 좋을 것 같아요!
| `; | ||
|
|
||
| const Title = styled.h1` | ||
| max-width: 227px; |
There was a problem hiding this comment.
피그마에서 확인해보았을 때, 20자 초과되는 지점이 227px이더라구요..! 그래서 227px로 max-width를 주고 초과되면 ellipsis가 되도록 했습니다!
There was a problem hiding this comment.
가로 사이즈에 상관 없이 20자만 노출되는게 현재 스펙인건가용?
There was a problem hiding this comment.
네!! 디스크립션은 20자, 타이틀은 14자 초과 시 ellipsis되는것으로 명기되어있더라구요..!!
There was a problem hiding this comment.
명확히 20자 제한이면 픽셀을 주는 것 보다 js로 처리하는게 안전하지 않을까요..? (컴퓨터 폰트 상황에 따라 달라질 수 있음)
추가로 너비가 아니라 글자수로 스펙이 정해진 이유를 물어보면 좋을 것 같아요! 글자수로 제한한 특별한 이유가 없다면, 너비 기반으로 ellipsis 하는게 좀 더 자연스러우면서 유연한 것 같아서요
There was a problem hiding this comment.
저도 너비 기반으로 하는 게 좀 더 자연스러울 것 같다고 생각합니다!! 디자인이랑 한 번 소통해볼게요~!!
There was a problem hiding this comment.
슬랙으로 소통한 결과, 반응형 너비에 따라 ellipsis 처리하는 것으로 스펙 변경되었습니다!
max-width: calc(100% - 132px);로, 카드 내에서 텍스트부분의 max-width를 구해주었고, 이를 넘어가면 ellipsis처리되도록 했습니다!!
package.json
Outdated
| @@ -8,7 +8,7 @@ | |||
| "scripts": { | |||
| "analyze": "cross-env ANALYZE=true next build", | |||
| "build": "next build", | |||
| "build-storybook": "storybook build", | |||
| "build-storybook": "NODE_OPTIONS='--max-old-space-size=4096' storybook build", | |||
There was a problem hiding this comment.
스토리북관련해서
OOM command not allowed when used memory > 'maxmemory'. script: 6c25fa0b8bf82ab072e19d624f145540fe35ec57, on @user_script:172.
→ Failed to publish build
Error: non-zero exit code
이 에러가 나서, 메모리 옵션을 조정해주었는데, 괜찮을까요!
There was a problem hiding this comment.
찾아보니 스토리북 관련 버그고, 명확한 해결책이 나오지 않았네요.. ㅠ
일단 이렇게 가야 할 것 같아용
There was a problem hiding this comment.
다만 윈도우에서 문제가 발생할 수 있으니 위의 analyze 스크립트처럼 cross-env 를 사용하면 좋을 것 같아요
There was a problem hiding this comment.
오호 G선생님과 cross-env 학습하고 왔습니당 신기하네요오
There was a problem hiding this comment.
다만 윈도우에서 문제가 발생할 수 있으니 위의 analyze 스크립트처럼 cross-env 를 사용하면 좋을 것 같아요
@Tekiter 윈도우에서 어떤 문제가 발생하나요?! "윈도우" 를 가지고 분기도 할 수 있군요..!
🤫 쉿, 나한테만 말해줘요. 이슈넘버
🧐 어떤 것을 변경했어요~?
🤔 그렇다면, 어떻게 구현했어요~?
❤️🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.
📸 스크린샷, 없으면 이것 참,, 섭섭한데요?