GDSC SKHU Web - 이찬균 #2
Conversation
| return ( | ||
| <> | ||
| <Hdiv> | ||
| <Image src="/gyuns.png" alt="some" width={225} height={60} /> |
There was a problem hiding this comment.
넵! 좀 그럴싸해보이지 않나요?? 😎
There was a problem hiding this comment.
아아 직접 그린건 아니고, 텍스트를 이미지화하는 사이트에서 만들어서 가져온겁니다!😂
| <StyledLike onClick={() => setCount(count + 1)}> | ||
| {count} Like | ||
| </StyledLike> |
There was a problem hiding this comment.
좋아요는 생각도 못 했는데 잘 활용하신 것 같아요!
There was a problem hiding this comment.
count도 배웠는데, 복습할 겸 써봤어용!
| padding: 10px 12px; | ||
| text-align: center; | ||
| transition: all 200ms; | ||
| vertical-align: baseline; |
There was a problem hiding this comment.
vertical-align은 안 써봐서 거의 모르는 태그였는데 덕분에 알아갑니다😊
There was a problem hiding this comment.
저도 이번에 참조하면서 vertical-align에 대해서 공부했습니다! 상당히 깊은 내용이 있더군요
There was a problem hiding this comment.
댓글창 css 구현 시 댓글의 border-bottom에만 solid 1px을 적용하고 싶었는데, 0번째 댓글(..? 초기값..?)의 border-bottom 때문에 좀 더 미관상 좋지가 못한데, &:nth-child()로 해결 가능할 줄 알았으나 적용이 쉽지 않아 해결 방안이 궁금합니다!
말씀하시는 게 제가 이해한 게 맞다면<StyledLine />때문에 그런 게 아닐까 싶어요 ~! 이걸 말씀하신 게 아니라면 다시 말씀해주세요 😄
좋아요 클릭 시 좋아요 수 카운트 기능 구현
정말 수고하셨어요 👍🏻👍🏻👍🏻
| <StyledLike onClick={() => setCount(count + 1)}> | ||
| {count} Like |
|
|
||
| const [comment, setComment] = useState<Icomment[]>([{ id: 0, content: "" }]); |
There was a problem hiding this comment.
comments, setComments 라는 명칭이 더 어울릴 것 같아요 ~~
There was a problem hiding this comment.
넵!! 좀 더 변수명을 명확히 하겠습니다!!
| <StyledInput | ||
| type="text" |
There was a problem hiding this comment.
input의 type은 기본이 text라 생략해도 된다는 점 아시면 좋을 것 같아요!
|
|
||
| const StyledSection = styled.section``; | ||
| const StyledH1 = styled.h1` | ||
| color: #2c1e11; | ||
| font-weight: bold; | ||
| `; | ||
|
|
There was a problem hiding this comment.
이건 안쓰이고 있는 것 같은데 지워도 될 것 같아요 ~
There was a problem hiding this comment.
그러네요.. 쓰려다가 안 쓰게 되었는데, 이것저것 너무 많아서 지우는 것 잊었네요..
There was a problem hiding this comment.
👍 👍 👍 👍
말씀하신 속성은 아래 링크를 보시면 좋을 거 같아요 ~
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
| return ( | ||
| <> | ||
| <Hdiv> | ||
| <Image src="/gyuns.png" alt="some" width={225} height={60} /> |
| </StyledStatusCard> | ||
| <StyledComment> | ||
| <span>comment...</span> | ||
| <StyledLike onClick={() => setCount(count + 1)}> |
There was a problem hiding this comment.
| <StyledLike onClick={() => setCount(count + 1)}> | |
| <StyledLike onClick={() => setCount(prev => prev + 1)}> |
이렇게 비동기로 업데이트되는 걸 보장해 주면 좋을 거 같아요 ~
Description
Important content
Question
Reference
https://getcssscan.com/css-buttons-examples
https://getcssscan.com/css-box-shadow-examples
https://www.youtube.com/watch?v=f9fqiNM30ik&t=845s&ab_channel=ModernWeb