From 41f70e73a0bf414d5d96cc06eb82acf049b8e257 Mon Sep 17 00:00:00 2001 From: Joodongkim Date: Sat, 26 Oct 2024 20:54:38 +0900 Subject: [PATCH] REFACTOR: styled-components --- .../boards/AllArticlesSection.styles.ts | 18 ++++++ components/boards/AllArticlesSection.tsx | 17 +----- components/boards/BestArticlesSection.tsx | 2 - components/items/itemPage/CommentThread.tsx | 1 - .../items/itemPage/ItemCommentSection.tsx | 1 - .../items/itemPage/ItemProfileSection.tsx | 2 - components/layout/Header.styles.ts | 50 +++++++++++++++++ components/layout/Header.tsx | 56 +++---------------- 8 files changed, 78 insertions(+), 69 deletions(-) create mode 100644 components/boards/AllArticlesSection.styles.ts create mode 100644 components/layout/Header.styles.ts diff --git a/components/boards/AllArticlesSection.styles.ts b/components/boards/AllArticlesSection.styles.ts new file mode 100644 index 00000000..5b64f447 --- /dev/null +++ b/components/boards/AllArticlesSection.styles.ts @@ -0,0 +1,18 @@ +import styled from "styled-components"; +import Link from "next/link"; +import { + FlexRowCentered, + StyledLink, +} from "@/styles/CommonStyles"; + +const ItemContainer = styled(Link)``; + +const ArticleInfoDiv = styled(FlexRowCentered)` + gap: 8px; + color: var(--gray-600); + font-size: 14px; +`; + +const AddArticleLink = styled(StyledLink)``; + +export { ItemContainer, ArticleInfoDiv, AddArticleLink }; diff --git a/components/boards/AllArticlesSection.tsx b/components/boards/AllArticlesSection.tsx index 9b3b5cbc..1a0f0990 100644 --- a/components/boards/AllArticlesSection.tsx +++ b/components/boards/AllArticlesSection.tsx @@ -6,7 +6,6 @@ import { StyledLink, } from "@/styles/CommonStyles"; import { Article, ArticleSortOption } from "@/types/articleTypes"; -import styled from "styled-components"; import { ArticleInfo, ArticleThumbnail, @@ -17,8 +16,6 @@ import { } from "@/styles/BoardsStyles"; import Image from "next/image"; import { format } from "date-fns"; -import Link from "next/link"; -import ProfilePlaceholder from "@/public/images/ui/ic_profile.svg"; import SearchBar from "@/components/ui/SearchBar"; import DropdownMenu from "@/components/ui/DropdownMenu"; import { useEffect, useState } from "react"; @@ -26,13 +23,7 @@ import LikeCountDisplay from "@/components/ui/LikeCountDisplay"; import EmptyState from "@/components/ui/EmptyState"; import { useRouter } from "next/router"; -const ItemContainer = styled(Link)``; - -const ArticleInfoDiv = styled(FlexRowCentered)` - gap: 8px; - color: var(--gray-600); - font-size: 14px; -`; +import { ItemContainer, ArticleInfoDiv, AddArticleLink } from "./AllArticlesSection.styles"; interface ArticleItemProps { article: Article; @@ -48,8 +39,6 @@ const ArticleItem: React.FC = ({ article }) => { {article.title} {article.image && ( - {/* Next Image의 width, height을 설정해줄 것이 아니라면 부모 div 내에서 fill, objectFit 설정으로 비율 유지하면서 유연하게 크기 조정 */} - {/* 프로젝트 내에 있는 이미지 파일을 사용하는 게 아니라면 next.config.mjs에 이미지 주소 설정 필요 */} = ({ article }) => { - {/* ProfilePlaceholder 아이콘의 SVG 파일에서 고정된 width, height을 삭제했어요 */} - {/* */} {article.writer.nickname} {dateString} @@ -78,8 +65,6 @@ const ArticleItem: React.FC = ({ article }) => { ); }; -const AddArticleLink = styled(StyledLink)``; - interface AllArticlesSectionProps { initialArticles: Article[]; } diff --git a/components/boards/BestArticlesSection.tsx b/components/boards/BestArticlesSection.tsx index 05a02fba..5eef8568 100644 --- a/components/boards/BestArticlesSection.tsx +++ b/components/boards/BestArticlesSection.tsx @@ -58,8 +58,6 @@ const BestArticleCard = ({ article }: { article: Article }) => { {article.title} {article.image && ( - {/* Next Image의 width, height을 설정해줄 것이 아니라면 부모 div 내에서 fill, objectFit 설정으로 비율 유지하면서 유연하게 크기 조정 */} - {/* 프로젝트 내에 있는 이미지 파일을 사용하는 게 아니라면 next.config.mjs에 이미지 주소 설정 필요 */} = ({ item }) => { return ( <> - {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */} diff --git a/components/items/itemPage/ItemCommentSection.tsx b/components/items/itemPage/ItemCommentSection.tsx index fa961d89..ee61a9f8 100644 --- a/components/items/itemPage/ItemCommentSection.tsx +++ b/components/items/itemPage/ItemCommentSection.tsx @@ -76,7 +76,6 @@ const ItemCommentSection: React.FC = ({ onChange={handleInputChange} /> - {/* 참고: 요구사항에 따라 추후 댓글 등록 API 추가 예정 */} = ({ product }) => { return ( - {/* 참고: 호출된 상품 데이터의 images는 여러 개의 이미지 URL 문자열로 구성된 배열의 형태이지만, 디자인 요구사항에 슬라이더 등 여러 장의 사진을 보여주는 UI가 없기 때문에 가장 첫 번째 이미지만 선택해서 보여줄게요 */} = ({ product }) => { - {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */} diff --git a/components/layout/Header.styles.ts b/components/layout/Header.styles.ts new file mode 100644 index 00000000..4ed3d8c0 --- /dev/null +++ b/components/layout/Header.styles.ts @@ -0,0 +1,50 @@ +import styled from "styled-components"; +import Link from "next/link"; +import { StyledLink } from "@/styles/CommonStyles"; + +const LoginLink = styled(StyledLink)``; + +const GlobalHeader = styled.header` + display: flex; + justify-content: space-between; + align-items: center; +`; + +const HeaderLeft = styled.div` + display: flex; + align-items: center; +`; + +const HeaderLogo = styled(Link)` + margin-right: 16px; + + @media (min-width: 768px) { + margin-right: 35px; + } + + @media (min-width: 1280px) { + margin-right: 47px; + } +`; + +const NavList = styled.ul` + display: flex; + list-style: none; + gap: 8px; + font-weight: bold; + font-size: 16px; + color: var(--gray-600); + + @media (min-width: 768px) { + gap: 36px; + font-size: 18px; + } +`; + +const NavItem = styled.li` + a:hover { + color: var(--blue); + } +`; + +export { LoginLink, GlobalHeader, HeaderLeft, HeaderLogo, NavList, NavItem }; \ No newline at end of file diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 48f22f81..77dd3218 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -1,53 +1,15 @@ import Logo from "@/public/images/logo/logo.svg"; -import Link from "next/link"; import { useRouter } from "next/router"; -import styled from "styled-components"; -import { StyledLink } from "@/styles/CommonStyles"; - -const GlobalHeader = styled.header` - display: flex; - justify-content: space-between; - align-items: center; -`; - -const HeaderLeft = styled.div` - display: flex; - align-items: center; -`; - -const HeaderLogo = styled(Link)` - margin-right: 16px; - - @media (min-width: 768px) { - margin-right: 35px; - } - - @media (min-width: 1280px) { - margin-right: 47px; - } -`; - -const NavList = styled.ul` - display: flex; - list-style: none; - gap: 8px; - font-weight: bold; - font-size: 16px; - color: var(--gray-600); - - @media (min-width: 768px) { - gap: 36px; - font-size: 18px; - } -`; - -const NavItem = styled.li` - a:hover { - color: var(--blue); - } -`; +import Link from "next/link"; -const LoginLink = styled(StyledLink)``; +import { + GlobalHeader, + HeaderLeft, + HeaderLogo, + LoginLink, + NavItem, + NavList, +} from "./Header.styles"; function getLinkStyle(isActive: boolean) { return { color: isActive ? "var(--blue)" : undefined };