정재형 [sprint9] #293
정재형 [sprint9] #293
Conversation
|
커밋 메시지 너무 깔끔하네요.. 👍 |
There was a problem hiding this comment.
대문자로 시작하는 파일은 컴포넌트에만 써주시는 게 좋아요! css 파일은 소문자로 시작하는 걸 추천드려요!
bestPost.module.css
그리고 폴더 이름이 BestPost 인만큼 index.module.css 여도 괜찮을 거 같아요!
There was a problem hiding this comment.
� BestPost 폴더 > bestPost.tsx (소문자시작)
> index.module.css 이렇게 수정하라는 말씀이실까요 ?
만약 그러면 그 외에 Dropdown폴더의 경우에도
Dropdown.module.css , Dropdown.tsx 에서 -> index.module.css, Dropdown.tsx(컴포넌트)가 적절한가요 ?
| .BestPostTitle { | ||
| width: 109px; | ||
| height: 24px; | ||
| font-family: Pretendard; |
There was a problem hiding this comment.
요거 아마 기본일거라 안적어도 될 거에요! (기본 아니면 global.css 에서 선언하면 될 거 같아요)
| import Image from "next/image"; | ||
|
|
||
| export default function BestPost() { | ||
| const [articles, setArticles] = useState<any[]>([]); |
There was a problem hiding this comment.
Article 타입 선언해서 쓰면 좋을 거 같아요!
| <div className={styles.BestPost}> | ||
| <div className={styles.BestPostTitle}>베스트 게시글</div> | ||
| <div className={styles.BestPostTopic}> | ||
| {articles.map((article) => ( |
There was a problem hiding this comment.
| {articles.map((article) => ( | |
| {articles.map(({content, likeCount ... }) => ( |
요런 식으로 구조분해할당하면 좋을 거 같아요!
| <div className={styles.BestPostTitle}>베스트 게시글</div> | ||
| <div className={styles.BestPostTopic}> | ||
| {articles.map((article) => ( | ||
| <div className={styles.BestPostTopicMap}> |
There was a problem hiding this comment.
여기 key props 추가해주세요!
| <div className={styles.BestPostTopicMap}> | |
| <div className={styles.BestPostTopicMap} key={index}> |
|
|
||
| const Dropdown: React.FC<DropdownProps> = ({ onChange }) => { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [selectedOption, setSelectedOption] = useState("최신순"); // 선택된 항목 저장 |
There was a problem hiding this comment.
요것도 string 으로 추정될 거라서 타입 정의해주면 좋을 거 같아요!
type Option = "최신순" | "인기순"
| } | ||
|
|
||
| .HeaderLogoText { | ||
| font-family: "ROKAFSans", sans-serif !important; |
There was a problem hiding this comment.
!important 는 정말 최소한으로만 사용하는 게 좋아서 안쓸 수 있는 방법이 있는 지 고민해주세요!
| const [articles, setArticles] = useState([]); | ||
| const [orderBy, setOrderBy] = useState("recent"); | ||
| const [searchQuery, setSearchQuery] = useState(""); // 검색어 상태 추가 | ||
| const [filteredArticles, setFilteredArticles] = useState([]); |
There was a problem hiding this comment.
멘토링때 말씀드렸던 것처럼 useMemo 사용하는 방식도 고민해주셔요!
| </div> | ||
| <div className={styles.PostCommentSection}> | ||
| {filteredArticles.map((article) => ( | ||
| <div className={styles.PostCommentMap}> |
2 participants
요구사항
기본
심화
심화
주요 변경사항
스크린샷
멘토에게