diff --git a/assets/icons/ic_delete.svg b/assets/icons/ic_delete.svg
new file mode 100644
index 00000000..a9547403
--- /dev/null
+++ b/assets/icons/ic_delete.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.08044 1L9.08044 9" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M8.99994 1L0.99994 9" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/assets/icons/ic_kebab.svg b/assets/icons/ic_kebab.svg
new file mode 100644
index 00000000..dd7ed7f5
--- /dev/null
+++ b/assets/icons/ic_kebab.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="6.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="11.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="16.5" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/assets/icons/ic_plus.png b/assets/icons/ic_plus.png
new file mode 100644
index 00000000..0fae225f
Binary files /dev/null and b/assets/icons/ic_plus.png differ
diff --git a/assets/icons/slash.svg b/assets/icons/slash.svg
new file mode 100644
index 00000000..109b9312
--- /dev/null
+++ b/assets/icons/slash.svg
@@ -0,0 +1,3 @@
+<svg width="2" height="34" viewBox="0 0 2 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0V34" stroke="#E5E7EB"/>
+</svg>
diff --git a/components/Header/MenuTab/index.tsx b/components/Header/MenuTab/index.tsx
index 20a81f05..82d54683 100644
--- a/components/Header/MenuTab/index.tsx
+++ b/components/Header/MenuTab/index.tsx
@@ -9,9 +9,9 @@ export default function MenuTab() {
   return (
     <>
       <Link
-        href="/community"
+        href="/boards"
         className={
-          pathname === "/community"
+          pathname === "/boards"
             ? styles["menu-tab-active"]
             : styles["menu-tab"]
         }
diff --git a/components/Header/MenuTab/styles.module.scss b/components/Header/MenuTab/styles.module.scss
index 7181bd08..83bb0cba 100644
--- a/components/Header/MenuTab/styles.module.scss
+++ b/components/Header/MenuTab/styles.module.scss
@@ -3,7 +3,6 @@
 .menu-tab {
   text-decoration: none;
   color: $cool-gray;
-  font-family: Pretendard;
   font-size: 18px;
   font-weight: 700;
   text-align: center;
@@ -12,7 +11,6 @@
 .menu-tab-active {
   text-decoration: none;
   color: $brand-blue;
-  font-family: Pretendard;
   font-size: 18px;
   font-weight: 700;
   text-align: center;
diff --git a/package-lock.json b/package-lock.json
index ad6a197a..68fcdef8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,8 +12,7 @@
         "axios": "^1.7.2",
         "lodash-es": "^4.17.21",
         "next": "14.2.5",
-        "react": "^18",
-        "react-dom": "^18",
+        "react": "^18.3.1",
         "sass": "^1.77.8"
       },
       "devDependencies": {
diff --git a/package.json b/package.json
index 000733f7..98456a0e 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "axios": "^1.7.2",
     "lodash-es": "^4.17.21",
     "next": "14.2.5",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sass": "^1.77.8"
   },
   "devDependencies": {
diff --git a/pages/addboard/index.tsx b/pages/addboard/index.tsx
new file mode 100644
index 00000000..9a68a419
--- /dev/null
+++ b/pages/addboard/index.tsx
@@ -0,0 +1,137 @@
+import styles from "./styles.module.scss";
+import plusIcon from "@/assets/icons/ic_plus.png";
+import { ST } from "next/dist/shared/lib/utils";
+import Image from "next/image";
+import { useState, useRef, useEffect } from "react";
+import deleteIcon from "@/assets/icons/ic_delete.svg";
+
+export default function AddBoard() {
+  const [preview, setPreview] = useState();
+  const [value, setValue] = useState();
+  const fileInputRef = useRef(null);
+  const [formState, setFormState] = useState({
+    title: "",
+    contents: "",
+  });
+
+  const handleInput = (e) => {
+    setFormState({
+      ...formState,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleChange = (e) => {
+    const nextValue = e.target.files[0];
+    setValue(nextValue);
+  };
+
+  const handleImageClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleCancelClick = () => {
+    setPreview(null);
+    setValue(null);
+    fileInputRef.current.value = "";
+  };
+
+  useEffect(() => {
+    if (!value) return;
+
+    const nextPreview = URL.createObjectURL(value);
+    setPreview(nextPreview);
+    return () => URL.revokeObjectURL(nextPreview);
+  }, [value]);
+
+  const isFormValid = formState.title && formState.contents;
+
+  return (
+    <div className={styles["page-container"]}>
+      <div className={styles["title-and-button"]}>
+        <p className={styles["form-title"]}>게시글 쓰기</p>
+        <button
+          className={`${styles["register-button"]} ${
+            isFormValid ? styles["register-button-active"] : ""
+          }`}
+          disabled={!isFormValid}
+          type="submit"
+        >
+          등록
+        </button>
+      </div>
+      <form>
+        <div className={styles["form-box"]}>
+          <div className={styles["title"]}>
+            <label className={styles["label"]}>*제목</label>
+            <input
+              className={styles["title-input-box"]}
+              type="text"
+              name="title"
+              onChange={handleInput}
+              placeholder="제목을 입력해주세요"
+              required
+            />
+          </div>
+          <div className={styles["contents"]}>
+            <label className={styles["label"]}>*내용</label>
+            <textarea
+              className={styles["contents-input-box"]}
+              placeholder="내용을 입력해주세요"
+              name="contents"
+              onChange={handleInput}
+              required
+            />
+          </div>
+          <div className={styles["image"]}>
+            <label className={styles["label"]}>이미지</label>
+            <div className={styles["img-register-container"]}>
+              <div
+                className={styles["img-register-box"]}
+                onClick={handleImageClick}
+              >
+                <input
+                  ref={fileInputRef}
+                  className={styles["img-register"]}
+                  type="file"
+                  name="image"
+                  onChange={handleChange}
+                />
+                <div className={styles["img-register-button"]}>
+                  <Image
+                    className={styles["plus-icon"]}
+                    src={plusIcon}
+                    alt="파일추가버튼"
+                  />
+                  <p className={styles["register-button-text"]}>이미지 등록</p>
+                </div>
+              </div>
+              {preview && (
+                <div className={styles["preview-image-box"]}>
+                  <Image
+                    className={styles["preview-image"]}
+                    src={preview}
+                    alt="이미지 미리보기"
+                    width="282"
+                    height="282"
+                  />
+                  <button
+                    className={styles["delete-preview-image"]}
+                    onClick={handleCancelClick}
+                  >
+                    <Image
+                      src={deleteIcon}
+                      alt="미리보기 삭제"
+                      width="8"
+                      height="8"
+                    />
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/pages/addboard/styles.module.scss b/pages/addboard/styles.module.scss
new file mode 100644
index 00000000..e071febb
--- /dev/null
+++ b/pages/addboard/styles.module.scss
@@ -0,0 +1,164 @@
+@import "@/styles/import.scss";
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.title-and-button {
+  margin: 24px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 23.87px;
+  text-align: left;
+  color: $cool-gray-800;
+}
+
+.register-button {
+  width: 74px;
+  height: 42px;
+  border-radius: 8px;
+  padding: 12px 23px;
+  background-color: $cool-gray-400;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: left;
+  color: #fff;
+  :disabled {
+    cursor: not-allowed;
+  }
+  &.register-button-active {
+    background-color: $brand-blue;
+    cursor: pointer;
+  }
+}
+
+.form-box {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.label {
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+  color: $cool-gray-800;
+  margin-bottom: 12px;
+}
+
+.title-input-box {
+  cursor: text;
+  max-width: 1200px;
+  height: 56px;
+  border-radius: 12px;
+  padding: 16px 24px;
+  background-color: $cool-gray-100;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: $cool-gray-800;
+}
+.title-input-box::placeholder {
+  text-align: left;
+  color: $cool-gray-400;
+}
+
+.title,
+.contents,
+.image {
+  display: flex;
+  flex-direction: column;
+}
+
+.contents-input-box {
+  resize: none;
+  max-width: 1200px;
+  height: 282px;
+  border-radius: 12px;
+  padding: 16px 24px;
+  background-color: $cool-gray-100;
+  border: none;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: $cool-gray-800;
+}
+.contents-input-box::placeholder {
+  color: $cool-gray-400;
+}
+
+.img-register-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.img-register-box {
+  cursor: pointer;
+  position: relative;
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  background-color: $cool-gray-100;
+}
+
+.img-register {
+  display: none;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.img-register-button {
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  top: 99px;
+  left: 104px;
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+}
+
+.plus-icon {
+  width: 48px;
+}
+
+.register-button-text {
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
+  color: $cool-gray-400;
+}
+
+.preview-image-box {
+  position: relative;
+}
+
+.preview-image {
+  width: 282px;
+  height: 282px;
+  object-fit: cover;
+  margin-left: 24px;
+  border-radius: 12px;
+}
+
+.delete-preview-image {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: #3962ff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/pages/boards/[id]/components/Comment/index.tsx b/pages/boards/[id]/components/Comment/index.tsx
new file mode 100644
index 00000000..1bf02000
--- /dev/null
+++ b/pages/boards/[id]/components/Comment/index.tsx
@@ -0,0 +1,24 @@
+import styles from "./styles.module.scss";
+import profileImg from "@/assets/icons/profileImg.svg";
+import Image from "next/image";
+import kebabIcon from "@/assets/icons/ic_kebab.svg";
+
+export default function Comment() {
+  return (
+    <div className={styles["comment-card"]}>
+      <div className={styles["card-top-line"]}>
+        <p className={styles["comment-text"]}>
+          혹시 사용기간이 어떻게 되실까요?
+        </p>
+        <Image src={kebabIcon} alt="케밥아이콘" />
+      </div>
+      <div className={styles["comment-information-container"]}>
+        <Image src={profileImg} alt="프로필이미지" />
+        <div className={styles["nickname-and-time"]}>
+          <p className={styles["nickname"]}>nickname</p>
+          <p className={styles["time"]}>1시간전</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/boards/[id]/components/Comment/styles.module.scss b/pages/boards/[id]/components/Comment/styles.module.scss
new file mode 100644
index 00000000..c39acaa0
--- /dev/null
+++ b/pages/boards/[id]/components/Comment/styles.module.scss
@@ -0,0 +1,44 @@
+@import "@/styles/import.scss";
+
+.comment-card {
+  background-color: $cool-gray-50;
+  padding-bottom: 12px;
+  border-bottom: 1px solid $cool-gray-200;
+}
+
+.card-top-line {
+  display: flex;
+  justify-content: space-between;
+  align-items:start;
+}
+
+.comment-text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-bottom: 24px;
+  text-align: left;
+  color: $cool-gray-900;
+}
+
+.comment-information-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.nickname {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  color: $cool-gray-600;
+}
+
+.time {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  color: $cool-gray-400;
+}
diff --git a/pages/boards/[id]/components/NoComment/index.tsx b/pages/boards/[id]/components/NoComment/index.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/boards/[id]/components/NoComment/style.module.scss b/pages/boards/[id]/components/NoComment/style.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/boards/[id]/index.tsx b/pages/boards/[id]/index.tsx
new file mode 100644
index 00000000..bdfbaba7
--- /dev/null
+++ b/pages/boards/[id]/index.tsx
@@ -0,0 +1,79 @@
+import Comment from "./components/Comment";
+import React from "react";
+import profileImg from "@/assets/icons/profileImg.svg";
+import Image from "next/image";
+import styles from "./styles.module.scss";
+import kebabIcon from "@/assets/icons/ic_kebab.svg";
+import slashIcon from "@/assets/icons/slash.svg";
+import heartIcon from "@/assets/icons/ic_like.svg";
+import { useState } from "react";
+
+export default function PostDetails() {
+  const [formState, setFormState] = useState({
+    comment: "",
+  });
+  const isFormValid = formState.comment;
+  const handleInput = (e) => {
+    setFormState({
+      ...formState,
+      [e.target.name]: e.target.value,
+    });
+  };
+  return (
+    <div className={styles["frame"]}>
+      <div className={styles["title-line"]}>
+        <p className={styles["title"]}>
+          맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요?(title)
+        </p>
+        <Image src={kebabIcon} alt="케밥아이콘" width="24" />
+      </div>
+      <div className={styles["post-information-line"]}>
+        <div className={styles["post-information"]}>
+          <div className={styles["nickname-and-date"]}>
+            <Image
+              className={styles["profile-img"]}
+              src={profileImg}
+              alt="프로필이미지"
+            />
+            <p className={styles["nickname"]}>작성자 이름(writer.nickname)</p>
+            <p className={styles["date"]}>작성한 날짜(createdAt)</p>
+          </div>
+          <Image src={slashIcon} alt="슬래시" />
+          <div className={styles["like-count-box"]}>
+            <Image src={heartIcon} alt="하트아이콘" width="32" />
+            <p className={styles["like-count"]}>2000(likeCount)</p>
+          </div>
+        </div>
+      </div>
+      <div className={styles["content"]}>
+        맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요? (content)
+      </div>
+      <div className={styles["comment-area"]}>
+        <label className={styles["comment-label"]}>댓글달기</label>
+        <textarea
+          className={styles["comment-input-box"]}
+          placeholder="댓글을 입력해주세요."
+          onChange={handleInput}
+          name="comment"
+          required
+        />
+        <div className={styles["register-button-line"]}>
+          <button
+            className={`${styles["register-button"]} ${
+              isFormValid ? styles["register-button-active"] : ""
+            }`}
+            disabled={!isFormValid}
+            type="submit"
+          >
+            등록
+          </button>
+        </div>
+      </div>
+      <div className={styles["comments-wrapper"]}>
+        <Comment />
+        <Comment />
+        <Comment />
+      </div>
+    </div>
+  );
+}
diff --git a/pages/boards/[id]/styles.module.scss b/pages/boards/[id]/styles.module.scss
new file mode 100644
index 00000000..9a8ad123
--- /dev/null
+++ b/pages/boards/[id]/styles.module.scss
@@ -0,0 +1,136 @@
+@import "@/styles/import.scss";
+
+.frame {
+  max-width: 1200px;
+  margin: 32px auto;
+}
+.title-line {
+  display: flex;
+  justify-content: space-between;
+}
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: left;
+  color: $cool-gray-800;
+}
+
+.post-information-line {
+  padding: 16px 0;
+  display: flex;
+  border-bottom: 1px solid $cool-gray-200;
+}
+.post-information {
+  display: flex;
+  gap: 8px;
+}
+.nickname-and-date {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.profile-img {
+  margin-right: 8px;
+}
+.nickname {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  color: $cool-gray-600;
+}
+.date {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: $cool-gray-400;
+}
+.like-count-box {
+  width: 87px;
+  border-radius: 35px;
+  border: 1px solid #e5e7eb;
+  padding: 4px 12px;
+  gap: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.like-count {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  text-align: left;
+  color: $cool-gray-500;
+}
+
+.content {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: left;
+  padding: 24px 0 32px 0;
+}
+
+.comment-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.comment-label {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  text-align: left;
+  color: $cool-gray-900;
+  margin-bottom: 9px;
+}
+.comment-input-box {
+  resize: none;
+  background-color: $cool-gray-100;
+  height: 104px;
+  padding: 16px 24px;
+  gap: 10px;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: left;
+  color: $cool-gray-900;
+  border: none;
+}
+.comment-input-box::placeholder {
+  color: $cool-gray-400;
+}
+
+.register-button-line {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  margin-bottom: 40px;
+}
+.register-button {
+  width: 74px;
+  height: 42px;
+  border-radius: 8px;
+  padding: 12px 23px;
+  background-color: $cool-gray-400;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: left;
+  color: #fff;
+  :disabled {
+    cursor: not-allowed;
+  }
+  &.register-button-active {
+    background-color: $brand-blue;
+    cursor: pointer;
+  }
+}
+
+.comments-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+}
diff --git a/pages/boards/components/BestPosts/BestPostElement/index.tsx b/pages/boards/components/BestPosts/BestPostElement/index.tsx
index 3165dc16..a1301875 100644
--- a/pages/boards/components/BestPosts/BestPostElement/index.tsx
+++ b/pages/boards/components/BestPosts/BestPostElement/index.tsx
@@ -50,7 +50,7 @@ export default function BestPostElement({ post }: BestPostElementProps) {
             </div>
           </div>
           <p className={styles["date"]}>
-            {new Date(post.updatedAt).toLocaleDateString()}
+            {new Date(post.updatedAt).toLocaleDateString("ko-KR")}
           </p>
         </div>
       </div>
diff --git a/pages/boards/components/BestPosts/BestPostElement/styles.module.scss b/pages/boards/components/BestPosts/BestPostElement/styles.module.scss
index 18f936d2..de2f59c1 100644
--- a/pages/boards/components/BestPosts/BestPostElement/styles.module.scss
+++ b/pages/boards/components/BestPosts/BestPostElement/styles.module.scss
@@ -20,7 +20,6 @@
 }
 .post-title {
   max-width: 256px;
-  font-family: Pretendard;
   font-size: 20px;
   font-weight: 600;
   text-align: left;
@@ -52,7 +51,6 @@
 .nickname-and-like {
   display: flex;
   gap: 8px;
-  font-family: Pretendard;
   font-size: 14px;
   font-weight: 400;
   text-align: left;
@@ -67,7 +65,6 @@
 }
 
 .date {
-  font-family: Pretendard;
   font-size: 14px;
   font-weight: 400;
   text-align: left;
diff --git a/pages/boards/components/BestPosts/index.tsx b/pages/boards/components/BestPosts/index.tsx
index f0d78972..c66ac915 100644
--- a/pages/boards/components/BestPosts/index.tsx
+++ b/pages/boards/components/BestPosts/index.tsx
@@ -16,7 +16,10 @@ export default function BestPosts() {
   const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
   const [pageSize, setPageSize] = useState(3);
-
+  const BREAKPOINTS = {
+    DESKTOP: 1200,
+    TABLET: 768
+  }
   useEffect(() => {
     const fetchBestPost = async () => {
       try {
@@ -36,11 +39,11 @@ export default function BestPosts() {
   }, [pageSize]);
   useEffect(() => {
     const handleResize = debounce(() => {
-      if (window.innerWidth >= 1200) {
+      if (window.innerWidth >= BREAKPOINTS.DESKTOP) {
         setPageSize(3);
-      } else if (window.innerWidth >= 768 && window.innerWidth <= 1199) {
+      } else if (window.innerWidth >= BREAKPOINTS.TABLET && window.innerWidth < BREAKPOINTS.DESKTOP) {
         setPageSize(2);
-      } else if (window.innerWidth <= 767) {
+      } else if (window.innerWidth < BREAKPOINTS.TABLET) {
         setPageSize(1);
       }
     }, 100);
diff --git a/pages/boards/components/BestPosts/styles.module.scss b/pages/boards/components/BestPosts/styles.module.scss
index d423701b..9eeb68d7 100644
--- a/pages/boards/components/BestPosts/styles.module.scss
+++ b/pages/boards/components/BestPosts/styles.module.scss
@@ -6,7 +6,6 @@
 }
 .title {
   margin: 24px auto;
-  font-family: Pretendard;
   font-size: 20px;
   font-weight: 700;
   text-align: left;
diff --git a/pages/boards/components/Posts/Button/styles.module.scss b/pages/boards/components/Posts/Button/styles.module.scss
index fd6bd755..07d01931 100644
--- a/pages/boards/components/Posts/Button/styles.module.scss
+++ b/pages/boards/components/Posts/Button/styles.module.scss
@@ -6,7 +6,6 @@
   border-radius: 8px;
   padding: 12px 23px;
   background-color: $brand-blue;
-  font-family: Pretendard;
   font-size: 16px;
   font-weight: 600;
   line-height: 19.09px;
diff --git a/pages/boards/components/Posts/DropDownMobile/index.tsx b/pages/boards/components/Posts/DropDownMobile/index.tsx
index 1fa64631..8b897d68 100644
--- a/pages/boards/components/Posts/DropDownMobile/index.tsx
+++ b/pages/boards/components/Posts/DropDownMobile/index.tsx
@@ -1,5 +1,3 @@
-// DropDownMobile.tsx
-
 import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import styles from "./styles.module.scss";
diff --git a/pages/boards/components/Posts/Input/styles.module.scss b/pages/boards/components/Posts/Input/styles.module.scss
index 7c37443d..4bebdefc 100644
--- a/pages/boards/components/Posts/Input/styles.module.scss
+++ b/pages/boards/components/Posts/Input/styles.module.scss
@@ -12,7 +12,6 @@
   left: 16px;
 }
 .input {
-  font-family: Pretendard;
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
diff --git a/pages/boards/components/Posts/PostElement/index.tsx b/pages/boards/components/Posts/PostElement/index.tsx
index c83880f3..6e9bb124 100644
--- a/pages/boards/components/Posts/PostElement/index.tsx
+++ b/pages/boards/components/Posts/PostElement/index.tsx
@@ -51,12 +51,12 @@ export default function PostElement({ post }: PostElementProps) {
               />
               <p className={styles["nickname"]}>{post.writer.nickname}</p>
               <p className={styles["date"]}>
-                {new Date(post.updatedAt).toLocaleDateString()}
+                {new Date(post.updatedAt).toLocaleDateString("ko-KR")}
               </p>
             </div>
             <div className={styles["like"]}>
               <Image src={likeIcon} alt="좋아요하트" />
-              <p className={styles['like-count']}>{post.likeCount}</p>
+              <p className={styles["like-count"]}>{post.likeCount}</p>
             </div>
           </div>
         </div>
diff --git a/pages/boards/components/Posts/PostElement/styles.module.scss b/pages/boards/components/Posts/PostElement/styles.module.scss
index aa331df1..78b36644 100644
--- a/pages/boards/components/Posts/PostElement/styles.module.scss
+++ b/pages/boards/components/Posts/PostElement/styles.module.scss
@@ -15,7 +15,6 @@
   margin-bottom: 16px;
 }
 .contents-title {
-  font-family: Pretendard;
   font-size: 20px;
   font-weight: 600;
   text-align: left;
@@ -49,7 +48,6 @@
   width: 24px;
 }
 .nickname {
-  font-family: Pretendard;
   font-size: 14px;
   font-weight: 400;
   line-height: 16.71px;
@@ -57,7 +55,6 @@
   color: $cool-gray-600;
 }
 .date {
-  font-family: Pretendard;
   font-size: 14px;
   font-weight: 400;
   line-height: 16.71px;
@@ -71,7 +68,6 @@
 }
 
 .like-count {
-  font-family: Pretendard;
   font-size: 16px;
   font-weight: 400;
   text-align: left;
diff --git a/pages/boards/components/Posts/index.tsx b/pages/boards/components/Posts/index.tsx
index 1bc72fd9..9e16a0c6 100644
--- a/pages/boards/components/Posts/index.tsx
+++ b/pages/boards/components/Posts/index.tsx
@@ -29,7 +29,7 @@ export default function Posts() {
       try {
         const { list } = await getPosts({
           page: 1,
-          pageSize: 40,
+          pageSize: 20,
           orderBy: orderBy,
         });
         setPosts(list);
diff --git a/pages/boards/components/Posts/styles.module.scss b/pages/boards/components/Posts/styles.module.scss
index d29b7e0c..8d1a504d 100644
--- a/pages/boards/components/Posts/styles.module.scss
+++ b/pages/boards/components/Posts/styles.module.scss
@@ -13,7 +13,6 @@
 
 .title {
   margin: 24px 0;
-  font-family: Pretendard;
   font-size: 20px;
   font-weight: 700;
   text-align: left;
diff --git a/styles/color.scss b/styles/color.scss
index 41281d5d..695caaf3 100644
--- a/styles/color.scss
+++ b/styles/color.scss
@@ -3,6 +3,7 @@ $cool-gray: #4b5563;
 $cool-gray-100: #f3f4f6;
 $cool-gray-200: #e5e7eb;
 $cool-gray-400: #9ca3af;
+$cool-gray-500: #6b7280;
 $cool-gray-600: #4b5563;
 $cool-gray-800: #1f2937;
 $cool-gray-900: #111827;
diff --git a/styles/globals.scss b/styles/globals.scss
index e909afc4..f3a68778 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -45,6 +45,10 @@ select {
 }
 html {
   box-sizing: border-box;
+  font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
 }
 *,
 :after,
@@ -66,4 +70,4 @@ table {
 td,
 th {
   padding: 0;
-}
\ No newline at end of file
+}
diff --git a/styles/import.scss b/styles/import.scss
index 0e963684..fde55958 100644
--- a/styles/import.scss
+++ b/styles/import.scss
@@ -1,4 +1,3 @@
 @import "./color.scss";
 @import "./font.scss";
 @import "./common.scss";
- 
\ No newline at end of file