fix: confict 해결

src/app/preview.css

@@ -0,0 +1,3 @@
+.wmde-markdown{
+    --color-canvas-default: #eb1616 !important;
+}

src/app/write/page.tsx

@@ -0,0 +1,21 @@
+import UserWrite from "@/components/Write/UserWrite";
+import { headers } from "next/headers";
+
+export default function WritePage() {
+  const headerLists = headers();
+  const isLoggedIn = headerLists.get("X-Token");
+  let tokenValue;
+  if (isLoggedIn) {
+    tokenValue = isLoggedIn;
+  }
+
+  return (
+    <>
+      {isLoggedIn ? (
+        <UserWrite tokenValue={tokenValue} />
+      ) : (
+        <div>페이지 접근 권한 X!</div>
+      )}
+    </>
+  );
+}

src/components/Articles/Pagination/PageButton.tsx

@@ -0,0 +1,27 @@
+import { page_button, active } from "@/styles/pagination.css";
+import { myStyle } from "@/styles/container.css";
+
+type PageButtonType = {
+  page: number;
+  currentPage: number;
+  currentPageHandler: (e: React.MouseEvent) => void;
+};
+
+export default function PageButton({
+  page,
+  currentPage,
+  currentPageHandler,
+}: PageButtonType) {
+  return (
+    <>
+      <button
+        onClick={currentPageHandler}
+        className={`${page_button} ${myStyle} ${
+          currentPage === page ? active : ""
+        }`}
+      >
+        {page}
+      </button>
+    </>
+  );
+}

src/components/Articles/SlugArticle/SlugArticle.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import SlugArticleCard from "@/components/composables/Card/SlugArticleCard";
+import Link from "next/link";
+import {
+  slug_article_header_container,
+  slug_article_title,
+  slug_article_user_date_container,
+  slug_article_user_link,
+  slug_seperator,
+  slug_article_user_date_wrapper,
+  hastag_container,
+  hastag,
+  preview_container,
+  slug_article_user_profile_container,
+  user_profile,
+  user_image,
+  name_and_description,
+  name,
+  description,
+  line,
+  user_contact,
+  wrapper_container,
+} from "@/styles/slug_article.css";
+import { myStyle } from "@/styles/container.css";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import Image from "next/image";
+
+type SlugArticleType = {
+  title: string;
+  body: string;
+  tagList: string[];
+  updatedAt: string;
+  username: string;
+  image: string;
+  following: boolean;
+  createdAt: string;
+};
+
+export default function SlugArticle({
+  title,
+  createdAt,
+  body,
+  tagList,
+  updatedAt,
+  username,
+  image,
+  following,
+}: SlugArticleType) {
+  return (
+    <>
+      <div className={slug_article_header_container}>
+        <h1 className={`${myStyle} ${slug_article_title}`}>{title}</h1>
+        <div className={`${slug_article_user_date_container} ${myStyle}`}>
+          <div className={slug_article_user_date_wrapper}>
+            <Link
+              className={`${slug_article_user_link} ${myStyle}`}
+              href={`/@${username}`}
+            >
+              {username}
+            </Link>
+            <span className={slug_seperator}>·</span>
+            <span>{createdAt}</span>
+          </div>
+        </div>
+      </div>
+      <div className={hastag_container}>
+        {tagList.map((tag, key) => {
+          return (
+            <div className={`${hastag} ${myStyle}`} key={key}>
+              {tag}
+            </div>
+          );
+        })}
+      </div>
+      <MarkdownPreview source={body} className={preview_container} />
+
+      <div className={slug_article_user_profile_container}>
+        <div className={wrapper_container}>
+          <div className={user_profile}>
+            <Link href={`/@${username}`}>
+              <Image
+                className={user_image}
+                src={image}
+                width={300}
+                height={300}
+                alt="user_image"
+              />
+            </Link>
+            <div className={name_and_description}>
+              <div className={name}>
+                <Link href={`/@${username}`}>{username}</Link>
+              </div>
+              <div className={description}>한 줄 소개</div>
+            </div>
+          </div>
+          <div className={`${line} ${myStyle}`}></div>
+          <div className={user_contact}>{/* 소셜 아이콘들 */}</div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Articles/UserArticle/UserArticleCategory.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { myStyle } from "@/styles/container.css";
+import {
+  categoryStyle,
+  selected,
+  category_container,
+} from "@/styles/category.css";
+import ArticleCategoryCard from "@/components/composables/Card/ArticleCategoryCard";
+
+type ArticleCategoryType = {
+  selectedCategory: string;
+  selectCategoryHandler: (e: React.MouseEvent<HTMLDivElement>) => void;
+  categories: string[];
+};
+
+export default function UserArticleCategory({
+  selectedCategory,
+  selectCategoryHandler,
+  categories,
+}: ArticleCategoryType) {
+  return (
+    <ArticleCategoryCard>
+      <div className={category_container}>
+        {categories.map((category) => (
+          <div
+            key={category}
+            onClick={selectCategoryHandler}
+            className={`${
+              selectedCategory === category ? selected : ""
+            } ${categoryStyle} ${myStyle}`}
+          >
+            {category}
+          </div>
+        ))}
+      </div>
+    </ArticleCategoryCard>
+  );
+}

src/components/Articles/UserArticle/UserArticleItem.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { myStyle } from "@/styles/container.css";
+import {
+  user_article_container,
+  tag_container,
+  sub_info_container,
+  hashtag,
+  article_likes,
+  article_title,
+  notFirst,
+  heart_icon,
+} from "@/styles/user_article.css";
+import Link from "next/link";
+import { slug_seperator } from "@/styles/slug_article.css";
+import { parsingDate } from "@/utils/parsingDate";
+import HeartIcon from "../../../assets/images/heart.svg";
+import Image from "next/image";
+
+type UserArticleItemType = {
+  title: string;
+  tagList: string[];
+  createdAt: string;
+  description: string;
+  username: string;
+  userimage: string;
+  favoritesCount: number;
+  favorited: boolean;
+  slug: string;
+  isFirst: boolean;
+};
+
+export default function UserArticleItem({
+  title,
+  tagList,
+  createdAt,
+  description,
+  username,
+  userimage,
+  favoritesCount,
+  favorited,
+  slug,
+  isFirst,
+}: UserArticleItemType) {
+  const parsedDate = parsingDate(createdAt);
+
+  return (
+    <>
+      <div
+        className={`${
+          isFirst ? "" : notFirst
+        } ${user_article_container} ${myStyle}`}
+      >
+        {/* <div className={user_article_image_container}>
+
+        </div> */}
+
+        <Link href={`/article/${slug}`}>
+          <h2 className={article_title}>{title}</h2>
+        </Link>
+        <p>{description}</p>
+        <div className={`${tag_container}`}>
+          {tagList.length > 0 &&
+            tagList.map((tag, key) => {
+              return (
+                <div className={`${hashtag} ${myStyle}`} key={key}>
+                  {tag}
+                </div>
+              );
+            })}
+        </div>
+        <div className={`${sub_info_container} ${myStyle}`}>
+          <span>{parsedDate}</span>
+          <div className={slug_seperator}>·</div>
+          {/* 아이콘과 좋아요 갯수 수평이 안맞고, 아이콘 색상이 파랑색으로 되어있는데, svg 파일 만들어서 넣을 예정입니다. */}
+          <span className={article_likes}>
+            <Image
+              className={heart_icon}
+              src={HeartIcon}
+              width={20}
+              height={20}
+              alt="icon"
+            />
+            {favoritesCount}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Articles/UserArticle/UserArticleList.tsx

@@ -0,0 +1,52 @@
+import UserArticleCard from "@/components/composables/Card/UserArticleCard";
+import UserArticleItem from "./UserArticleItem";
+
+type Author = {
+  username: string;
+  bio: string | null;
+  image: string;
+  following: boolean;
+};
+
+type Article = {
+  slug: string;
+  title: string;
+  description: string;
+  body: string;
+  tagList: string[];
+  createdAt: string;
+  updatedAt: string;
+  favorited: boolean;
+  favoritesCount: number;
+  author: Author;
+};
+
+type UserAritcleType = {
+  articles: Article[];
+};
+
+export default function UserArticle({ articles }: UserAritcleType) {
+  return (
+    <>
+      <UserArticleCard>
+        {articles.map((article, key) => {
+          return (
+            <UserArticleItem
+              key={key}
+              isFirst={key === 0}
+              title={article.title}
+              tagList={article.tagList}
+              createdAt={article.createdAt}
+              description={article.description}
+              username={article.author.username}
+              userimage={article.author.image}
+              favoritesCount={article.favoritesCount}
+              favorited={article.favorited}
+              slug={article.slug}
+            />
+          );
+        })}
+      </UserArticleCard>
+    </>
+  );
+}

src/components/Articles/UserArticle/UserArticlePagination.tsx

@@ -0,0 +1,33 @@
+import PageButton from "../Pagination/PageButton";
+import { page_container } from "@/styles/pagination.css";
+
+type UserArticlePaginationType = {
+  pageCount: number;
+  currentPage: number;
+  currentPageHandler: (e: React.MouseEvent) => void;
+};
+
+export default function UserArticlePaginiation({
+  currentPage,
+  pageCount,
+  currentPageHandler,
+}: UserArticlePaginationType) {
+  const pages = Array.from({ length: pageCount }, (_, index) => index + 1);
+
+  return (
+    <>
+      <div className={page_container}>
+        {pages.map((page, key) => {
+          return (
+            <PageButton
+              key={key}
+              page={page}
+              currentPage={currentPage}
+              currentPageHandler={currentPageHandler}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+}