Merge branch 'Next-김주동' of https://github.com/joodongkim/10-Sprint-Mi…

…ssion into Next-김주동
codeit-bootcamp-frontend · Oct 28, 2024 · e4208c1 · e4208c1
1 parent 41f70e7
commit e4208c1
Show file tree

Hide file tree

Showing 38 changed files with 680 additions and 544 deletions.
diff --git a/components/boards/AllArticlesSection.tsx b/components/boards/AllArticlesSection.tsx
@@ -25,11 +25,11 @@ import { useRouter } from "next/router";
 
 import { ItemContainer, ArticleInfoDiv, AddArticleLink } from "./AllArticlesSection.styles";
 
-interface ArticleItemProps {
+type ArticleItemProps = {
   article: Article;
 }
 
-const ArticleItem: React.FC<ArticleItemProps> = ({ article }) => {
+const ArticleItem = ({ article }: ArticleItemProps) => {
   const dateString = format(article.createdAt, "yyyy. MM. dd");
 
   return (
@@ -65,13 +65,11 @@ const ArticleItem: React.FC<ArticleItemProps> = ({ article }) => {
   );
 };
 
-interface AllArticlesSectionProps {
+type AllArticlesSectionProps = {
   initialArticles: Article[];
 }
 
-const AllArticlesSection: React.FC<AllArticlesSectionProps> = ({
-  initialArticles,
-}) => {
+const AllArticlesSection = ({initialArticles}: AllArticlesSectionProps) => {
   const [orderBy, setOrderBy] = useState<ArticleSortOption>("recent");
   const [articles, setArticles] = useState(initialArticles);
 

diff --git a/components/boards/BestArticlesSection.styles.ts b/components/boards/BestArticlesSection.styles.ts
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import Link from "next/link";
+import {
+  FlexRowCentered,
+} from "@/styles/CommonStyles";
+
+const CardContainer = styled(Link)`
+  background-color: var(--gray-50);
+  border-radius: 8px;
+`;
+
+const ContentWrapper = styled.div`
+  padding: 16px 24px;
+`;
+
+const BestSticker = styled(FlexRowCentered)`
+  background-color: var(--blue);
+  border-radius: 0 0 32px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  gap: 4px;
+  padding: 6px 24px 8px 24px;
+  margin-left: 24px;
+  display: inline-flex;
+`;
+
+
+const BestArticlesCardSection = styled.div`
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+
+  @media ${({ theme }) => theme.mediaQuery.desktop} {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
+`;
+
+export { CardContainer, ContentWrapper, BestSticker, BestArticlesCardSection };
diff --git a/components/boards/BestArticlesSection.tsx b/components/boards/BestArticlesSection.tsx
@@ -1,10 +1,8 @@
 import { useEffect, useState } from "react";
-import styled from "styled-components";
 import Image from "next/image";
-import Link from "next/link";
 import { format } from "date-fns";
+
 import {
-  FlexRowCentered,
   SectionHeader,
   SectionTitle,
 } from "@/styles/CommonStyles";
@@ -22,26 +20,7 @@ import MedalIcon from "@/public/images/icons/ic_medal.svg";
 import useViewport from "@/hooks/useViewport";
 import LikeCountDisplay from "@/components/ui/LikeCountDisplay";
 
-const CardContainer = styled(Link)`
-  background-color: var(--gray-50);
-  border-radius: 8px;
-`;
-
-const ContentWrapper = styled.div`
-  padding: 16px 24px;
-`;
-
-const BestSticker = styled(FlexRowCentered)`
-  background-color: var(--blue);
-  border-radius: 0 0 32px 32px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #fff;
-  gap: 4px;
-  padding: 6px 24px 8px 24px;
-  margin-left: 24px;
-  display: inline-flex;
-`;
+import { CardContainer, ContentWrapper, BestSticker, BestArticlesCardSection } from "./BestArticlesSection.styles";
 
 const BestArticleCard = ({ article }: { article: Article }) => {
   const dateString = format(article.createdAt, "yyyy. MM. dd");
@@ -82,21 +61,6 @@ const BestArticleCard = ({ article }: { article: Article }) => {
   );
 };
 
-const BestArticlesCardSection = styled.div`
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-
-  @media ${({ theme }) => theme.mediaQuery.tablet} {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-  }
-
-  @media ${({ theme }) => theme.mediaQuery.desktop} {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-  }
-`;
-
 /**
  * Determines the appropriate page size for the best articles section based on the viewport width.
  *

diff --git a/components/items/itemPage/CommentThread.styles.ts b/components/items/itemPage/CommentThread.styles.ts
@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+
+const CommentContainer = styled.div`
+  padding: 24px 0;
+  position: relative;
+`;
+
+const SeeMoreButton = styled.button`
+  position: absolute;
+  right: 0;
+`;
+
+const CommentContent = styled.p`
+  font-size: 16px;
+  line-height: 140%;
+  margin-bottom: 24px;
+`;
+
+const AuthorProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const UserProfileImage = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+
+const Username = styled.p`
+  color: var(--gray-600);
+  font-size: 14px;
+  margin-bottom: 4px;
+`;
+
+const Timestamp = styled.p`
+  color: ${({ theme }) => theme.colors.gray[400]};
+  font-size: 12px;
+`;
+
+const ThreadContainer = styled.div`
+  margin-bottom: 40px;
+`;
+
+export {
+  CommentContainer,
+  SeeMoreButton,
+  CommentContent,
+  AuthorProfile,
+  UserProfileImage,
+  Username,
+  Timestamp,
+  ThreadContainer,
+};
diff --git a/components/items/itemPage/CommentThread.tsx b/components/items/itemPage/CommentThread.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { getProductComments } from "@/api/itemApi";
-import styled from "styled-components";
 import SeeMoreIcon from "@/public/images/icons/ic_kebab.svg";
 import DefaultProfileImage from "@/public/images/ui/ic_profile.svg";
 import { LineDivider } from "@/styles/CommonStyles";
@@ -11,51 +10,22 @@ import {
 } from "@/types/commentTypes";
 import EmptyState from "@/components/ui/EmptyState";
 
-const CommentContainer = styled.div`
-  padding: 24px 0;
-  position: relative;
-`;
-
-const SeeMoreButton = styled.button`
-  position: absolute;
-  right: 0;
-`;
-
-const CommentContent = styled.p`
-  font-size: 16px;
-  line-height: 140%;
-  margin-bottom: 24px;
-`;
-
-const AuthorProfile = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const UserProfileImage = styled.img`
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-`;
-
-const Username = styled.p`
-  color: var(--gray-600);
-  font-size: 14px;
-  margin-bottom: 4px;
-`;
-
-const Timestamp = styled.p`
-  color: ${({ theme }) => theme.colors.gray[400]};
-  font-size: 12px;
-`;
-
-interface CommentItemProps {
+import {
+  CommentContainer,
+  SeeMoreButton,
+  CommentContent,
+  AuthorProfile,
+  UserProfileImage,
+  Username,
+  Timestamp,
+  ThreadContainer,
+} from "./CommentThread.styles";
+
+type CommentItemProps = {
   item: ProductComment;
 }
 
-const CommentItem: React.FC<CommentItemProps> = ({ item }) => {
+const CommentItem = ({ item }: CommentItemProps) => {
   const authorInfo = item.writer;
   const formattedTimestamp = formatUpdatedAt(item.updatedAt);
 
@@ -86,15 +56,11 @@ const CommentItem: React.FC<CommentItemProps> = ({ item }) => {
   );
 };
 
-const ThreadContainer = styled.div`
-  margin-bottom: 40px;
-`;
-
-interface CommentThreadProps {
+type CommentThreadProps = {
   productId: number;
 }
 
-const CommentThread: React.FC<CommentThreadProps> = ({ productId }) => {
+const CommentThread = ({ productId }: CommentThreadProps) => {
   const [comments, setComments] = useState<ProductComment[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);

diff --git a/components/items/itemPage/ItemCommentSection.styles.ts b/components/items/itemPage/ItemCommentSection.styles.ts
@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import { Button } from "@/styles/CommonStyles";
+
+const CommentInputSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const SectionTitle = styled.h1`
+  font-size: 16px;
+  font-weight: 600;
+`;
+
+const TextArea = styled.textarea`
+  background-color: ${({ theme }) => theme.colors.gray[100]};
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  height: 104px;
+  resize: none;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.gray[400]};
+    font-size: 14px;
+    line-height: 24px;
+
+    @media ${({ theme }) => theme.mediaQuery.tablet} {
+      font-size: 16px;
+    }
+  }
+
+  &:focus {
+    outline-color: ${({ theme }) => theme.colors.blue.primary};
+  }
+`;
+
+const PostCommentButton = styled(Button)`
+  align-self: flex-end;
+  font-weight: 600;
+  font-size: 14px;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 16px;
+  }
+`;
+
+export {
+  CommentInputSection,
+  SectionTitle,
+  TextArea,
+  PostCommentButton,
+};