[Refactor] card component 리팩토링 및 채널 반응형 수정 #135
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| return <div></div>; | ||
| }; | ||
|
|
||
| export default ChallangeCard; |
There was a problem hiding this comment.
와웅 또 틀렸네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋ무의식의 힘이란,,,, 감사합니다 고치겠습니다..🥲😢
nyoung113
changed the title
|
저도 회원가입 시 닉네임 글자 수 제한이 필요할 거 같다고 생각했습니다! 한 6글자..? 정도로 생각했는데 5글자부터 넘어가면 4글자로 제한해야 할까요?? 아니면 Card에서 font 크기를 조금 줄이는 방법도 있을 거 같습니다. 채널페이지의 Chip은 처음에는 줄이 넘어가지 않고 가로 스크롤??이 가능하게 하면 어떨까 생각했는데 하는 방법이 바로 떠오르지가 않아서 구현을 못했었습니다. 만약 가능하다면 가로스크롤로 1줄인 게 더 보기 좋지 않나 생각하는데 다른 분들 의견이 궁금하네요! |
아 가로 스크롤도 좋은 방법이네요! 줄바꿈만 생각했는데 가로 스크롤도 좋은 방법인 것 같습니다! font 크기를 조금 조절해서 5글자까지 할 수 있도록 만드는게 더 좋을 것 같아요! 4글자는 너무 적은 것 같긴 합니다ㅎㅎ |
📌 기능 설명
기능을 대략적으로 설명해주세요.
Card 컴포넌트 글씨 넘어갔을 때 깨지지 않도록 구현
user name 추가
channel에서 Chips을 wrap해서 줄바꿈
👩💻 요구 사항과 구현 내용
요구 사항과 실제 구현 내용을 작성해 주세요.
Card 컴포넌트 글씨 넘어갔을 때 깨지지 않도록 구현
글씨가 깨지지 않도록 구현했는데, 이 과정에서 CSS 넓이 등 type에 따라 생성된 Social 컴포넌트에서 width 등이
되지 않는 현상이 일어나서 야매로..? 구현했습니다.. 혹시 이와 관련해서 아시는 분은 알려주시면 고치겠습니다.
위와 같은 현상과 함께 컴포넌트 데이터에 따라서
컴포넌트가 복잡해지는 것 같아 추후 Challange 컴포넌트와 User 컴포넌트를 분리할 예정입니다.
user name 추가
Challange 컴포넌트에서 username을 추가했습니다. 이때 글자가 한글 기준 5자 이상이면 줄바꿈 되어서
회원 가입 시 validation으로 사용자 이름 자 수를 제한하거나
...(text-overflow:ellipsis) 을 통해서 처리해줘야 할 것 같습니다.
또한 profile 페이지에서 챌린지 리스트가 나오는데, 이때 author에 id 값밖에 없어서
challange 컴포넌트에 필요한 user image, username이 없는데 profile 페이지에서는 아예 빼는 것이 나을 것 같아서
또 다른 카드를 만들던가 option prop을 넣어줘야 할 것 같습니다.
channel에서 Chips을 wrap해서 줄바꿈
기존에 channel에서 chips의 글자 기본 넓이 때문에 줄어들지 못하는 현상이 발생했는데,
wrap으로 줄바꿈했습니다.
구현 결과
이미지를 첨부해주세요.
설명이 많아 위에 첨부했습니다.