REFACTOR: styled-components

codeit-bootcamp-frontend · Oct 26, 2024 · 41f70e7 · 41f70e7
1 parent a9f37e5
commit 41f70e7
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 69 deletions.
diff --git a/components/boards/AllArticlesSection.styles.ts 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
@@ -6,7 +6,6 @@ import {
   StyledLink,
 } from "@/styles/CommonStyles";
 import { Article, ArticleSortOption } from "@/types/articleTypes";
-import styled from "styled-components";
 import {
   ArticleInfo,
   ArticleThumbnail,
@@ -17,22 +16,14 @@ 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";
 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<ArticleItemProps> = ({ article }) => {
           <ArticleTitle>{article.title}</ArticleTitle>
           {article.image && (
             <ArticleThumbnail>
-              {/* Next Image의 width, height을 설정해줄 것이 아니라면 부모 div 내에서 fill, objectFit 설정으로 비율 유지하면서 유연하게 크기 조정 */}
-              {/* 프로젝트 내에 있는 이미지 파일을 사용하는 게 아니라면 next.config.mjs에 이미지 주소 설정 필요 */}
               <ImageWrapper>
                 <Image
                   fill
@@ -64,8 +53,6 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ article }) => {
 
         <ArticleInfo>
           <ArticleInfoDiv>
-            {/* ProfilePlaceholder 아이콘의 SVG 파일에서 고정된 width, height을 삭제했어요 */}
-            {/* <ProfilePlaceholder width={24} height={24} /> */}
             {article.writer.nickname} <Timestamp>{dateString}</Timestamp>
           </ArticleInfoDiv>
 
@@ -78,8 +65,6 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ article }) => {
   );
 };
 
-const AddArticleLink = styled(StyledLink)``;
-
 interface AllArticlesSectionProps {
   initialArticles: Article[];
 }

diff --git a/components/boards/BestArticlesSection.tsx b/components/boards/BestArticlesSection.tsx
@@ -58,8 +58,6 @@ const BestArticleCard = ({ article }: { article: Article }) => {
           <ArticleTitle>{article.title}</ArticleTitle>
           {article.image && (
             <ArticleThumbnail>
-              {/* Next Image의 width, height을 설정해줄 것이 아니라면 부모 div 내에서 fill, objectFit 설정으로 비율 유지하면서 유연하게 크기 조정 */}
-              {/* 프로젝트 내에 있는 이미지 파일을 사용하는 게 아니라면 next.config.mjs에 이미지 주소 설정 필요 */}
               <ImageWrapper>
                 <Image
                   fill

diff --git a/components/items/itemPage/CommentThread.tsx b/components/items/itemPage/CommentThread.tsx
@@ -62,7 +62,6 @@ const CommentItem: React.FC<CommentItemProps> = ({ item }) => {
   return (
     <>
       <CommentContainer>
-        {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
         <SeeMoreButton>
           <SeeMoreIcon />
         </SeeMoreButton>

diff --git a/components/items/itemPage/ItemCommentSection.tsx b/components/items/itemPage/ItemCommentSection.tsx
@@ -76,7 +76,6 @@ const ItemCommentSection: React.FC<ItemCommentSectionProps> = ({
           onChange={handleInputChange}
         />
 
-        {/* 참고: 요구사항에 따라 추후 댓글 등록 API 추가 예정 */}
         <PostCommentButton
           onClick={handlePostComment}
           disabled={!comment.trim()}

diff --git a/components/items/itemPage/ItemProfileSection.tsx b/components/items/itemPage/ItemProfileSection.tsx
@@ -110,7 +110,6 @@ interface ItemProfileSectionProps {
 const ItemProfileSection: React.FC<ItemProfileSectionProps> = ({ product }) => {
   return (
     <SectionContainer>
-      {/* 참고: 호출된 상품 데이터의 images는 여러 개의 이미지 URL 문자열로 구성된 배열의 형태이지만, 디자인 요구사항에 슬라이더 등 여러 장의 사진을 보여주는 UI가 없기 때문에 가장 첫 번째 이미지만 선택해서 보여줄게요 */}
       <ItemImageContainer>
         <ImageWrapper>
           <Image
@@ -124,7 +123,6 @@ const ItemProfileSection: React.FC<ItemProfileSectionProps> = ({ product }) => {
 
       <ItemDetailsContainer>
         <MainDetails>
-          {/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
           <SeeMoreButton>
             <SeeMoreIcon />
           </SeeMoreButton>

diff --git a/components/layout/Header.styles.ts 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 };
diff --git 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 };