feat: 메인 페이지에 숭대시보 기사 추가 #311
Conversation
There was a problem hiding this comment.
수고하셨습니다! 코드 깔끔해욤 👍👍👍
저 궁금한 거 질문 하나만 하고!! 어푸룹 갈기겠습니당
PhotoArticleList에서 기사 사진이 없는 경우도 있나 궁금해져서 찾아봤는데
pm님은 이미지 없을 때 이미지 커버가 있었으면 좋겠다고 하셨는데
사진에 대한 분기 처리는 백엔드에서 이미 해준 상태라고 하는데...
뭐가 맞는 건지 궁금합니다!!
만약에 이미지 없는 경우도 있다면 thumbnail이 없는 케이스도 추가해야 되지 않을까~,,, 싶어서요!!!
src/home/pages/Home/Home.tsx
Outdated
| </StyledComponentInnerContainer> | ||
| </StyledComponentContainer> | ||
| <Spacing direction={'vertical'} size={62} /> |
There was a problem hiding this comment.
헐 이런 것도 있었네요 여백용 컴포넌트가 있었다니...
There was a problem hiding this comment.
Spacing 컴포넌트 대신 StyledComponentContainer의 padding으로 관리하면 어떨까요?
지금은 괜찮지만 Spacing 컴포넌트가 많아지면 JSX 구조가 복잡해질 것 같네요
이거 오전에 물어봤는데요! (관련 스레드) |
src/home/pages/Home/Home.tsx
Outdated
| </StyledComponentInnerContainer> | ||
| </StyledComponentContainer> | ||
| <Spacing direction={'vertical'} size={62} /> |
There was a problem hiding this comment.
Spacing 컴포넌트 대신 StyledComponentContainer의 padding으로 관리하면 어떨까요?
지금은 괜찮지만 Spacing 컴포넌트가 많아지면 JSX 구조가 복잡해질 것 같네요
- 서버에서 형식 통일해서 전달해주기로 - replaceAll을 위해 수정했던 버전 회귀
| {imgNews.map(({ thumbnail, title, date, pageUrl }) => ( | ||
| <StyledArticleItem key={title} href={pageUrl} target="_blank" rel="noopener noreferrer"> | ||
| <StyledImg src={thumbnail} alt={'ssu_news_img'} /> | ||
| <div> |
There was a problem hiding this comment.
여기 div로 감싸신 이유가 하나의 박스로 묶기 위함인건가요?
다른 코멘트에서 언급드렸던 StyledArticleTitle을 말줄임표 하기 위해서는 이 div 태그의 width를 지정해줘야할 것 같아요!
StyledArticleTtileBox로 이름 지정해서 다음과 같이 작성하는 건 어떨까요?
export const StyledArticleTtileBox = styled.div`
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 11.4rem;
`;There was a problem hiding this comment.
두 코멘트 답변 모두 여기에 드립니다!
제안하신 말줄임 관련 코드는 긴 텍스트를 한 줄로 표현하는 방식이라 채택하지 않았고,
텍스트를 최대 n줄로 표현하되 그 이상은 말줄임표를 사용하도록 수정했습니다
이미 ResultListItem에서 사용하던 방식이라 보시면 알 거 같아요!
(이 방식은 StyledArticleTitle에 바로 적용이 가능해서 기존 div를 새로운 스타일 요소로 변경하지 않았습니다)
좌측 기사의 말줄임표는 생각하지 못했던 부분인데 감사감사합니다 ദ്ദി˶ˆ꒳ˆ˵)
| 짧은 제목 | 긴 제목 |
|---|---|
 |
 |
There was a problem hiding this comment.
오호ㅎㅎㅎㅎㅎ 이해 완료입니다!!! 굳잡잡👍🏻👍🏻👍🏻👍🏻
| <StyledImg src={thumbnail} alt={'ssu_news_img'} /> | ||
| <div> | ||
| <StyledArticleTitle>{title}</StyledArticleTitle> | ||
| <StyledDateSpan>입력 | {date.replaceAll('-', '.')}</StyledDateSpan> |
There was a problem hiding this comment.
글고 진짜 이것도 단순 궁금한건데 입력이라는게 무슨뜻인가요..?
There was a problem hiding this comment.
기사가 입력된 날짜를 의미합니다~! (관련 스레드)
1️⃣ 어떤 작업을 했나요? (Summary)
기존 코드에 영향을 미치지 않는 변경사항
메인 페이지에
숭대시보로 알아보는 교내 소식패널이 추가되었습니다전체보기를 누르면 새 탭으로 숭대시보 메인이 열립니다버그 픽스
2️⃣ 알아두시면 좋아요!
기사 제목 (
title)을 key prop 사용 + 응답에 중복 데이터가 존재해서 (관련 스레드)콘솔 에러가 뜨는데 무시해도 돼용
3️⃣ 추후 작업
4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?