diff --git a/.gitignore b/.gitignore
index 8f322f0d8..79fff97a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,12 +24,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+.next/
diff --git a/components/AllItemsSection.tsx b/components/AllItemsSection.tsx
index 8ed589f3a..32e3962ce 100644
--- a/components/AllItemsSection.tsx
+++ b/components/AllItemsSection.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { getProducts } from '../lib/api';
-import ItemCard from './ItemCard';
+import ItemCard from '@components/ItemCard';
 import '../style/Items.css';
-import SearchIcon from '../public/svgs/ic_search.svg';
+import SearchIcon from '@public/svgs/ic_search.svg';
 import {
   Product,
   ProductListResponse,
diff --git a/components/BestItemsSection.tsx b/components/BestItemsSection.tsx
index c704b409b..6eb1b9331 100644
--- a/components/BestItemsSection.tsx
+++ b/components/BestItemsSection.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { getProducts } from '../lib/api';
-import ItemCard from './ItemCard';
+import { getProducts } from '@lib/api';
+import ItemCard from '@components/ItemCard';
 import '../style/Items.css';
 import {
   Product,
diff --git a/components/DropdownMenu.tsx b/components/DropdownMenu.tsx
index 449e76552..9069f244e 100644
--- a/components/DropdownMenu.tsx
+++ b/components/DropdownMenu.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import SortIcon from '../public/svgs/ic_sort.svg';
-import styles from '../styles/DropdownMenu.module.css';
-import { ArticleOrderBy } from './types/articleTypes';
+import SortIcon from '@public/svgs/ic_sort.svg';
+import styles from '@styles/DropdownMenu.module.css';
+import { ArticleOrderBy } from '@components/types/articleTypes';
 
 interface DropdownMenuProps {
   onSelection: (Option: ArticleOrderBy) => void;
diff --git a/components/FileInput.tsx b/components/FileInput.tsx
index af23b5217..2823e1142 100644
--- a/components/FileInput.tsx
+++ b/components/FileInput.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import styles from '../styles/FileInput.module.css';
-import PlusIcon from '../public/svgs/ic_plus.svg';
-import DeleteIcon from '../public/svgs/ic_X.svg';
+import styles from '@styles/FileInput.module.css';
+import PlusIcon from '@public/svgs/ic_plus.svg';
+import DeleteIcon from '@public/svgs/ic_X.svg';
 
 interface FileInputProps {
   name: string;
@@ -56,6 +56,7 @@ function FileInput({ name, value, initialPreview, onChange }: FileInputProps) {
           onChange={handleChange}
           ref={inputRef}
           disabled={isImageValid}
+          style={{ display: 'none' }}
         />
         <label htmlFor="file" className={styles['filelabel']}>
           <PlusIcon />
@@ -64,7 +65,7 @@ function FileInput({ name, value, initialPreview, onChange }: FileInputProps) {
         {value && (
           <div className={styles['preview-container']}>
             <img
-              className="image-preview"
+              className={styles['image-preview']}
               src={preview || ''}
               alt="이미지 미리보기"
             />
diff --git a/components/ItemCard.tsx b/components/ItemCard.tsx
index 64a64b9c2..052876086 100644
--- a/components/ItemCard.tsx
+++ b/components/ItemCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import '../style/Items.css';
-import Heart from '../images/ic_heart.svg';
-import { Product } from './types/productTypes';
+import Heart from '@pubilc/svgs/ic_heart.svg';
+import { Product } from '@components/types/productTypes';
 import Link from 'next/link';
 
 interface ItemCardProps {
diff --git a/components/ItemComment.tsx b/components/ItemComment.tsx
index 404042b21..173c8afe0 100644
--- a/components/ItemComment.tsx
+++ b/components/ItemComment.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import axiosInstance from '../lib/axiosInstance';
-import Profile from '../public/svgs/ic_profile.svg';
-import EmptyComment from '../pubilc/svgs/Img_inquiry_empty.svg';
+import axiosInstance from '@lib/axiosInstance';
+import Profile from '@public/svgs/ic_profile.svg';
+import EmptyComment from '@pubilc/svgs/Img_inquiry_empty.svg';
 import '../style/ItemComment.css';
-import DropdownMenu from './DropdownMenu';
-import { Product } from './types/productTypes';
+import DropdownMenu from '@components/DropdownMenu';
+import { Product } from '@components/types/productTypes';
 
 interface Comment {
   id: number;
diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
index 8f3b7e760..8c366e187 100644
--- a/components/Layout/Header.tsx
+++ b/components/Layout/Header.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import styles from '../../styles/Header.module.css';
+import styles from '@styles/Header.module.css';
 import Image from 'next/image';
 
 const Header = () => {
@@ -19,7 +19,7 @@ const Header = () => {
             />
           </Link>
           <div className={styles['nav-link']}>
-            <Link className={styles['nav-list']} href="/boards">
+            <Link className={styles['nav-list']} href="/board">
               자유게시판
             </Link>
             <Link
@@ -34,7 +34,7 @@ const Header = () => {
             </Link>
           </div>
         </div>
-        <Link className={styles['login']} href="/signin">
+        <Link className={styles['login']} href="/login">
           로그인
         </Link>
       </nav>
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 924576dea..2395b244a 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import Header from './Header';
+import Header from '@components/Layout/Header';
 import { useRouter } from 'next/router';
 
 interface LayoutProps {
diff --git a/components/ProductCreateForm.tsx b/components/ProductCreateForm.tsx
index 01c8a1a22..ec1a30715 100644
--- a/components/ProductCreateForm.tsx
+++ b/components/ProductCreateForm.tsx
@@ -1,7 +1,7 @@
 import '../style/FileInput.css';
-import FileInput from './FileInput';
+import FileInput from '@components/FileInput';
 import { useState, useEffect, ChangeEvent } from 'react';
-import TagInput from './TagInput';
+import TagInput from '@components/TagInput';
 
 interface ProductCreateFormProps {
   initialValues?: {
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index d459453c7..836d19d2c 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -1,7 +1,7 @@
-import SearchIcon from '../public/svgs/ic_search.svg';
+import SearchIcon from '@public/svgs/ic_search.svg';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import styles from '../styles/SearchBar.module.css';
+import styles from '@styles/SearchBar.module.css';
 
 interface SearchBarProps {
   onSearch: (keyword: string) => void;
diff --git a/components/TagInput.tsx b/components/TagInput.tsx
index 1fece2d07..e773f5a63 100644
--- a/components/TagInput.tsx
+++ b/components/TagInput.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import '../style/ProductCreateForm.css';
-import DeleteIcon from '../public/svgs/ic_X.svg';
+import DeleteIcon from '@public/svgs/ic_X.svg';
 import '../style/TagInput.css';
 
 interface TagInputProps {
@@ -27,10 +27,6 @@ function TagInput({ value, onChange }: TagInputProps) {
     onChange(newTags); // 태그 삭제 시 부모 컴포넌트에 알림
   };
 
-  useEffect(() => {
-    console.log('Tags updated:', tags);
-  }, [tags]);
-
   return (
     <div className="ProductTag section-title">
       태그
diff --git a/components/boards/AllArticlesSection.tsx b/components/boards/AllArticlesSection.tsx
index 5406e0630..cea2a0745 100644
--- a/components/boards/AllArticlesSection.tsx
+++ b/components/boards/AllArticlesSection.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
-import styles from '../../styles/AllArticlesSection.module.css';
-import { getAllArticles } from '../../pages/api/boardApi';
+import styles from '@styles/AllArticlesSection.module.css';
+import { getAllArticles } from '@pages/api/boardApi';
 import Link from 'next/link';
 import Image from 'next/image';
-import Heart from '../../public/svgs/ic_heart.svg';
-import SearchBar from '../SearchBar';
+import Heart from '@public/svgs/ic_heart.svg';
+import SearchBar from '@components/SearchBar';
 import router, { useRouter } from 'next/router';
-import DropdownMenu from '../DropdownMenu';
-import { ArticleList, ArticleOrderBy } from '../types/articleTypes';
+import DropdownMenu from '@components/DropdownMenu';
+import { ArticleList, ArticleOrderBy } from '@components/types/articleTypes';
 import React from 'react';
 
 interface AllArticlesSectionProps {
@@ -148,13 +148,17 @@ export default function AllArticlesSection({
       {articles.length > 0 ? (
         <div className={styles['allarticle-list']}>
           {articles.map((article) => (
-            <div key={article.id} className={styles['allarticle-item']}>
+            <Link
+              href={`/board/${article.id}`}
+              key={article.id}
+              className={styles['allarticle-item']}
+            >
               <div className={styles['allarticle-body']}>
                 <h2 className={styles['allarticle-title']}>{article.title}</h2>
                 <Image
                   width={46}
                   height={46}
-                  src={article.image || '/images/Img_home_02.png'}
+                  src={article.image || '/pngs/Img_home_02.png'}
                   alt="게시글 이미지"
                   className={styles['allarticle-image']}
                 />
@@ -173,7 +177,7 @@ export default function AllArticlesSection({
                   {article.likeCount}
                 </span>
               </div>
-            </div>
+            </Link>
           ))}
         </div>
       ) : (
diff --git a/components/boards/ArticleContentSection.tsx b/components/boards/ArticleContentSection.tsx
new file mode 100644
index 000000000..6e6840c25
--- /dev/null
+++ b/components/boards/ArticleContentSection.tsx
@@ -0,0 +1,46 @@
+import styles from '@styles/ArticleContentSection.module.css';
+import { ArticleList } from '@/components/types/articleTypes';
+import Heart from '@public/svgs/ic_heart.svg';
+import Profile from '@public/svgs/ic_profile.svg';
+
+interface ArticlesSectionProps {
+  article: ArticleList;
+}
+
+export default function ArticleContentSection({
+  article,
+}: ArticlesSectionProps) {
+  const formatDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    return date
+      .toLocaleDateString('ko-KR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      })
+      .replace(/\. /g, '. ')
+      .slice(0, -1); // 공백 제거
+  };
+
+  return (
+    <div className={styles['article-section']}>
+      <div className={styles['article-title']}>{article.title}</div>
+      <div className={styles['article-info']}>
+        <div className={styles['article-userinfo']}>
+          <Profile />
+          <div className={styles['article-nickname']}>
+            {article.writer.nickname}
+          </div>
+          <div className={styles['article-createdAt']}>
+            {formatDate(article.createdAt)}
+          </div>
+        </div>
+        <div className={styles['article-likecount']}>
+          <Heart />
+          {article.likeCount}
+        </div>
+      </div>
+      <div className={styles['article-content']}>{article.content}</div>
+    </div>
+  );
+}
diff --git a/components/boards/BestArticlesSection.tsx b/components/boards/BestArticlesSection.tsx
index 5a2cf803f..cc55ec6cd 100644
--- a/components/boards/BestArticlesSection.tsx
+++ b/components/boards/BestArticlesSection.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { getBestArticles } from '../../pages/api/boardApi';
-import useDimensions from '../../hooks/useDimensions';
-import styles from '../../styles/BestArticlesSection.module.css';
+import { getBestArticles } from '@pages/api/boardApi';
+import useDimensions from '@/hooks/useDimensions';
+import styles from '@styles/BestArticlesSection.module.css';
 import Image from 'next/image';
-import Heart from '../../public/svgs/ic_heart.svg';
-import Medal from '../../public/svgs/ic_medal.svg';
+import Heart from '@public/svgs/ic_heart.svg';
+import Medal from '@public/svgs/ic_medal.svg';
 
 interface ArticleList {
   id: number;
diff --git a/contexts/AuthProvider.tsx b/contexts/AuthProvider.tsx
new file mode 100644
index 000000000..def43654b
--- /dev/null
+++ b/contexts/AuthProvider.tsx
@@ -0,0 +1,49 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+import axiosInstance from '@lib/axiosInstance';
+
+interface AuthContextType {
+  login: (credentials: { email: string; password: string }) => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  login: async () => {},
+});
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  async function login(credentials: { email: string; password: string }) {
+    try {
+      const response = await axiosInstance.post('/auth/signIn', credentials);
+      const { accessToken } = response.data;
+
+      localStorage.setItem('accessToken', accessToken);
+      console.log('로그인 성공');
+    } catch (error) {
+      console.error('로그인 실패:', error);
+      throw new Error('로그인에 실패했습니다.');
+    }
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        login,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error('반드시 AuthProvider 안에서 사용해야 합니다.');
+  }
+
+  return context;
+}
diff --git a/lib/axiosInstance.js b/lib/axiosInstance.js
index d90867abd..892afca17 100644
--- a/lib/axiosInstance.js
+++ b/lib/axiosInstance.js
@@ -2,7 +2,6 @@ import axios from 'axios';
 
 const axiosInstance = axios.create({
   baseURL: 'https://panda-market-api.vercel.app',
-  timeout: 2000,
 });
 
 export default axiosInstance;
diff --git a/next.config.mjs b/next.config.mjs
index e83a06364..45b5af209 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -17,6 +17,7 @@ const nextConfig = {
       'via.placeholder.com',
       'example.com',
       'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+      'ibb.co',
     ],
   },
   reactStrictMode: true,
diff --git a/pages/AddItems.tsx b/pages/AddItems.tsx
index 8b8be3490..bf60b74b4 100644
--- a/pages/AddItems.tsx
+++ b/pages/AddItems.tsx
@@ -1,4 +1,4 @@
-import ProductCreateForm from '../components/ProductCreateForm';
+import ProductCreateForm from '@components/ProductCreateForm';
 
 function AddItems() {
   return (
diff --git a/pages/ItemDetail.tsx b/pages/ItemDetail.tsx
index f9e7a06a6..4c947dbd1 100644
--- a/pages/ItemDetail.tsx
+++ b/pages/ItemDetail.tsx
@@ -1,11 +1,11 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import '../style/ItemDetail.css';
-import { ReactComponent as BackIcon } from '../images/ic_back.svg';
-import { ReactComponent as Heart } from '../images/ic_heart.svg';
-import { ReactComponent as Profile } from '../images/ic_profile.svg';
+import BackIcon from '@public/svgs/ic_back.svg';
+import Heart from '@public/svgs/ic_heart.svg';
+import Profile from '@public/svgs/ic_profile.svg';
 import { useState, useEffect, ChangeEvent } from 'react';
-import ItemComment from '../components/ItemComment';
-import axiosInstance from '../lib/axiosInstance';
+import ItemComment from '@components/ItemComment';
+import axiosInstance from '@lib/axiosInstance';
 
 const INITIAL_VALUES = {
   tags: [],
@@ -33,7 +33,6 @@ function ItemDetail({ initialValues = INITIAL_VALUES }) {
           limit: 10, // 요청에 'limit' 값을 쿼리 파라미터로 추가
         },
       });
-      console.log(response.data);
       setItemDetail(response.data); // 서버에서 받은 데이터를 상태에 저장
     } catch (error) {
       console.error('Error fetching comments:', error);
diff --git a/pages/Items.tsx b/pages/Items.tsx
index 5e0f1f620..fcf7ada2f 100644
--- a/pages/Items.tsx
+++ b/pages/Items.tsx
@@ -1,5 +1,5 @@
-import AllItemsSection from '../components/AllItemsSection';
-import BestItemSection from '../components/BestItemsSection';
+import AllItemsSection from '@components/AllItemsSection';
+import BestItemSection from '@components/BestItemsSection';
 
 function Items() {
   return (
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7f6fe41ea..d560e9caf 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,13 +1,14 @@
 import { AppProps } from 'next/app';
-import Layout from '../components/Layout/Layout';
+import Layout from '@components/Layout/Layout';
 import React from 'react';
+import { AuthProvider } from '@/contexts/AuthProvider';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <AuthProvider>
       <Layout>
         <Component {...pageProps} />
       </Layout>
-    </>
+    </AuthProvider>
   );
 }
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
index c479a3c1d..e148b0414 100644
--- a/pages/addboard.tsx
+++ b/pages/addboard.tsx
@@ -1,3 +1,135 @@
-export default function AddBoardPage() {
-  return <div>글쓰기 페이지입니다.</div>;
+import { ChangeEvent, useEffect, useState } from 'react';
+import styles from '@styles/AddBoard.module.css';
+import FileInput from '@components/FileInput';
+import axiosInstance from '@/lib/axiosInstance';
+
+interface BoardCreateFormProps {
+  initialValues?: {
+    title: string;
+    content: string;
+    imgFile: File | null;
+  };
+  initialPreview: string | null;
+}
+
+const INITIAL_VALUES = {
+  title: '',
+  content: '',
+  imgFile: null,
+};
+
+export default function AddBoardPage({
+  initialValues = INITIAL_VALUES,
+  initialPreview,
+}: BoardCreateFormProps) {
+  const [values, setValues] = useState(initialValues);
+  const [isFormValid, setIsFormValid] = useState(false);
+
+  const handleChange = (
+    name: string,
+    value: string | string[] | File | null,
+  ) => {
+    setValues((prevValues) => ({ ...prevValues, [name]: value }));
+  };
+
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => handleChange(e.target.name, e.target.value);
+
+  useEffect(() => {
+    const { title, content } = values;
+    if (title && content) {
+      setIsFormValid(true);
+    } else {
+      setIsFormValid(false);
+    }
+  }, [values]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const { title, content } = values;
+    const accessToken = localStorage.getItem('accessToken');
+
+    if (!accessToken) {
+      alert('로그인이 필요합니다.');
+      return;
+    }
+
+    const data = {
+      title,
+      content,
+      image:
+        'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Sprint_Mission/user/3/1721991853452/5389615.png',
+    };
+
+    try {
+      const response = await axiosInstance.post('articles', data, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          'Content-Type': 'application/json',
+        },
+      });
+      console.log('게시글 등록 성공:', response.data);
+      alert('게시글이 등록되었습니다.');
+    } catch (error) {
+      console.error('게시글 등록 실패:', error);
+      alert('게시글 등록에 실패했습니다.');
+    }
+  };
+
+  return (
+    <div className={styles['container']}>
+      <form onSubmit={handleSubmit}>
+        <div className={styles['container-title']}>
+          게시글 쓰기
+          <button
+            className={`${styles.Registerbtn} ${
+              isFormValid ? styles.active : ''
+            }`}
+            type="submit"
+            disabled={!isFormValid}
+          >
+            등록
+          </button>
+        </div>
+        <div className={styles['container-body']}>
+          <label
+            className={`${styles['section-title']} ${styles['ArticleTitle']}`}
+          >
+            *제목
+            <input
+              name="title"
+              type="text"
+              value={values.title}
+              placeholder="제목을 입력해주세요."
+              onChange={handleInputChange}
+            />
+          </label>
+          <label
+            className={`${styles['section-title']} ${styles['ArticleContent']}`}
+          >
+            *내용
+            <textarea
+              name="content"
+              value={values.content}
+              placeholder="내용을 입력해주세요."
+              onChange={handleInputChange}
+            />
+          </label>
+          <label
+            className={`${styles['section-title']} ${styles['ArticleImage']}`}
+          >
+            이미지
+            <FileInput
+              name="imgFile"
+              value={values.imgFile}
+              initialPreview={initialPreview}
+              onChange={handleChange}
+            />
+          </label>
+        </div>
+      </form>
+    </div>
+  );
 }
diff --git a/pages/api/boardApi.js b/pages/api/boardApi.js
index 683ff6819..38d3fc65e 100644
--- a/pages/api/boardApi.js
+++ b/pages/api/boardApi.js
@@ -1,4 +1,4 @@
-import axiosInstance from '../../lib/axiosInstance';
+import axiosInstance from '@lib/axiosInstance';
 
 async function apiRequest({
   method = 'GET',
@@ -33,3 +33,11 @@ export async function getAllArticles(page, orderBy, keyword) {
     errorMessage: '게시글을 불러오는데 실패했습니다.',
   });
 }
+
+export async function getArticles(id) {
+  return apiRequest({
+    method: 'GET',
+    endpoint: `/articles/${id}`,
+    errorMessage: '게시글을 불러오는데 실패했습니다.',
+  });
+}
diff --git a/pages/board/[id].tsx b/pages/board/[id].tsx
new file mode 100644
index 000000000..94986d56f
--- /dev/null
+++ b/pages/board/[id].tsx
@@ -0,0 +1,217 @@
+import axiosInstance from '@/lib/axiosInstance';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import Profile from '@public/svgs/ic_profile.svg';
+import SortIcon from '@public/svgs/ic_kebab.svg';
+import styles from '@styles/BoardDetailPage.module.css';
+import { getArticles } from '@pages/api/boardApi';
+import { ArticleList } from '@/components/types/articleTypes';
+import ArticleContentSection from '@/components/boards/ArticleContentSection';
+import Link from 'next/link';
+import BackIcon from '@public/svgs/ic_back.svg';
+
+interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  writer: {
+    id: number;
+    nickname: string;
+    image?: string;
+  };
+}
+
+interface ArticlesSectionProps {
+  initialArticle: ArticleList;
+}
+
+const INITIAL_ARTICLE = {
+  id: 0,
+  title: '',
+  content: '',
+  image: '',
+  writer: { id: 0, nickname: '' },
+  createdAt: '',
+  updatedAt: '',
+  likeCount: 0,
+};
+
+export default function BoardsThreadPage({
+  initialArticle = INITIAL_ARTICLE,
+}: ArticlesSectionProps) {
+  const router = useRouter();
+  const { id } = router.query;
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [article, setArticle] = useState<ArticleList>(initialArticle);
+  const [newComment, setNewComment] = useState('');
+  const [isFormValid, setIsFormValid] = useState(false);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    const fetchComments = async () => {
+      try {
+        const response = await axiosInstance.get(`/articles/${id}/comments`, {
+          params: {
+            limit: 10,
+          },
+        });
+        setComments(response.data.list);
+      } catch (error) {
+        console.error('Error fetching comments:', error);
+      }
+    };
+
+    const fetchArticle = async () => {
+      try {
+        const data = await getArticles(id);
+        if (!data) {
+          throw new Error('해당 게시글의 데이터를 찾을 수 없습니다.');
+        }
+        setArticle(data);
+      } catch (error) {
+        console.error('데이터를 불러오는데 실패 했습니다.', error);
+      }
+    };
+
+    fetchComments();
+    fetchArticle();
+  }, [router.isReady]);
+
+  useEffect(() => {
+    newComment ? setIsFormValid(true) : setIsFormValid(false);
+  }, [newComment]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const accessToken = localStorage.getItem('accessToken');
+
+    if (!accessToken) {
+      alert('로그인이 필요합니다.');
+      return;
+    }
+
+    const data = {
+      content: newComment, // newComment를 직접 사용
+    };
+
+    try {
+      const response = await axiosInstance.post(
+        `/articles/${id}/comments`,
+        data,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+      console.log('댓글 등록 성공:', response.data);
+      alert('댓글이 등록되었습니다.');
+      setNewComment(''); // 댓글 입력 필드 초기화
+    } catch (error) {
+      console.error('댓글 등록 실패:', error);
+      alert('댓글 등록에 실패했습니다.');
+    }
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setNewComment(e.target.value);
+  };
+
+  const formatDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    return date
+      .toLocaleDateString('ko-KR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      })
+      .replace(/\. /g, '. ')
+      .slice(0, -1); // 공백 제거
+  };
+
+  return (
+    <div className={styles['container']}>
+      <ArticleContentSection article={article} />
+      <form className={styles['newcomment-section']} onSubmit={handleSubmit}>
+        <label className={styles['newcomment-title']}>
+          댓글 달기
+          <textarea
+            name="content"
+            value={newComment}
+            placeholder="댓글을 입력해주세요."
+            onChange={handleInputChange}
+            className={styles['newcomment-content']}
+            rows={5}
+          />
+        </label>
+        <button
+          className={`${styles.Registerbtn} ${
+            isFormValid ? styles.active : ''
+          }`}
+          disabled={!isFormValid}
+          type="submit"
+        >
+          등록
+        </button>
+      </form>
+      {comments.length > 0 ? (
+        <div>
+          {comments.map((comment, index) => (
+            <div className={styles['comment-container']} key={index}>
+              <div className={styles['comment-header']}>
+                <div className={styles['comment-content']}>
+                  {comment.content}
+                </div>
+                <SortIcon />
+              </div>
+              <div className={styles['comment-info']}>
+                <div className={styles['comment-info-content']}>
+                  {comment.writer.image ? (
+                    <img
+                      className={styles['profile-icon']}
+                      src={comment.writer.image}
+                    />
+                  ) : (
+                    <Profile className={styles['profile-icon']} />
+                  )}
+                  <div className={styles['comment-user-info']}>
+                    <div className={styles['comment-nickname']}>
+                      {comment.writer.nickname}
+                    </div>
+                    <div className={styles['comment-updatedAt']}>
+                      {formatDate(comment.updatedAt)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={styles['comment-empty']}>
+          <Image
+            width={140}
+            height={140}
+            src="/pngs/Img_reply_empty.png"
+            alt="댓글 이미지"
+          />
+          <div className={styles['comment-empty-content']}>
+            아직 댓글이 없어요,
+          </div>
+          <div className={styles['comment-empty-content']}>
+            지금 댓글을 달아보세요!
+          </div>
+        </div>
+      )}
+      <Link href="/board" className={styles['goback']}>
+        목록으로 돌아가기
+        <BackIcon />
+      </Link>
+    </div>
+  );
+}
diff --git a/pages/boards.tsx b/pages/board/index.tsx
similarity index 73%
rename from pages/boards.tsx
rename to pages/board/index.tsx
index df9043d3a..205ffb9c1 100644
--- a/pages/boards.tsx
+++ b/pages/board/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import BestArticlesSection from '../components/boards/BestArticlesSection';
-import AllArticlesSection from '../components/boards/AllArticlesSection';
-import styles from '../styles/BoardsPage.module.css';
+import BestArticlesSection from '@components/boards/BestArticlesSection';
+import AllArticlesSection from '@components/boards/AllArticlesSection';
+import styles from '@styles/BoardPage.module.css';
 import { GetServerSideProps } from 'next';
-import { ArticleList } from '../components/types/articleTypes';
-import { getAllArticles } from './api/boardApi';
+import { ArticleList } from '@components/types/articleTypes';
+import { getAllArticles } from '@pages/api/boardApi';
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { q = '', orderBy = 'recent', page = 1 } = context.query;
diff --git a/pages/login.tsx b/pages/login.tsx
new file mode 100644
index 000000000..708bbe5f8
--- /dev/null
+++ b/pages/login.tsx
@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '@/contexts/AuthProvider';
+import { useRouter } from 'next/router';
+import styles from '@styles/Login.module.css';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const validateEmail = (email: string) =>
+  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isEmailValid, setIsEmailValid] = useState(true);
+  const [isPasswordValid, setIsPasswordValid] = useState(true);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const { login } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    const emailValid = validateEmail(email);
+    const passwordValid = password.length >= 8;
+    setIsEmailValid(emailValid || email === '');
+    setIsPasswordValid(passwordValid || password === '');
+    setIsFormValid(emailValid && passwordValid);
+  }, [email, password]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isFormValid) {
+      try {
+        await login({ email, password });
+        router.push('/');
+      } catch (error) {
+        if (error instanceof Error) {
+          alert(error.message);
+        } else {
+          alert('알 수 없는 에러가 발생했습니다.');
+        }
+      }
+    }
+  };
+
+  return (
+    <div className={styles['login-page']}>
+      <Link href="/">
+        <Image
+          src="/pngs/ic_Pandalogo.png"
+          alt="판다마켓 로고"
+          width={396}
+          height={132}
+        />
+      </Link>
+      <div className={styles['sign']}>
+        <form className={styles['sign-form']} onSubmit={handleSubmit}>
+          <div className={styles['sign-input']}>
+            <label className={styles['sign-label']}>이메일</label>
+            <input
+              className={`${styles['input-area']} ${
+                !isEmailValid ? styles['error'] : ''
+              }`}
+              type="email"
+              placeholder="이메일을 입력해주세요"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          {!isEmailValid && email && (
+            <div className={styles['failure-message']}>
+              잘못된 이메일 형식입니다.
+            </div>
+          )}
+          <div className={styles['sign-input']}>
+            <label className={styles['sign-label']}>비밀번호</label>
+            <div className={styles['input-wrapper']}>
+              <input
+                className={`${styles['input-area']} ${
+                  !isPasswordValid ? styles['error'] : ''
+                }`}
+                type={showPassword ? 'text' : 'password'}
+                placeholder="비밀번호를 입력해주세요"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type="button"
+                className={styles['toggle-password-btn']}
+                onClick={() => setShowPassword((prev) => !prev)}
+              >
+                <Image
+                  className={styles['toggle-password']}
+                  src={`/pngs/${
+                    showPassword
+                      ? 'btn_visibility_off.png'
+                      : 'btn_visibility_on.png'
+                  }`}
+                  alt="비밀번호 보기"
+                  width={24}
+                  height={24}
+                />
+              </button>
+            </div>
+          </div>
+          {!isPasswordValid && password && (
+            <div className={styles['pw-failure-message']}>
+              비밀번호를 8자 이상 입력해주세요.
+            </div>
+          )}
+          <div className={styles['submit']}>
+            <button
+              className={`${styles['sign-button']} ${
+                isFormValid ? styles['active'] : ''
+              }`}
+              type="submit"
+              disabled={!isFormValid}
+            >
+              로그인
+            </button>
+          </div>
+        </form>
+        <div className={styles['outer']}>
+          간편 로그인하기
+          <div className={styles['social']}>
+            <Link href="https://www.google.com/">
+              <Image
+                src="/pngs/ic_google.png"
+                alt="구글"
+                width={42}
+                height={42}
+              />
+            </Link>
+            <Link href="https://www.kakaocorp.com/page/">
+              <Image
+                src="/pngs/ic_kakao.png"
+                alt="카카오"
+                width={42}
+                height={42}
+              />
+            </Link>
+          </div>
+        </div>
+        <div className={styles['login-footer']}>
+          판다마켓이 처음이신가요?{' '}
+          <Link className={styles['link-signup']} href="./signup">
+            회원가입
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 718d6fea4..000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/pngs/Img_reply_empty.png b/public/pngs/Img_reply_empty.png
new file mode 100644
index 000000000..ac38f73b5
Binary files /dev/null and b/public/pngs/Img_reply_empty.png differ
diff --git a/public/pngs/btn_visibility_off.png b/public/pngs/btn_visibility_off.png
new file mode 100644
index 000000000..a4ad23f00
Binary files /dev/null and b/public/pngs/btn_visibility_off.png differ
diff --git a/public/pngs/btn_visibility_on.png b/public/pngs/btn_visibility_on.png
new file mode 100644
index 000000000..0637b1f3c
Binary files /dev/null and b/public/pngs/btn_visibility_on.png differ
diff --git a/public/pngs/ic_Pandalogo.png b/public/pngs/ic_Pandalogo.png
new file mode 100644
index 000000000..7692653b4
Binary files /dev/null and b/public/pngs/ic_Pandalogo.png differ
diff --git a/public/pngs/ic_google.png b/public/pngs/ic_google.png
new file mode 100644
index 000000000..64db8acb0
Binary files /dev/null and b/public/pngs/ic_google.png differ
diff --git a/public/pngs/ic_kakao.png b/public/pngs/ic_kakao.png
new file mode 100644
index 000000000..d38e36cc0
Binary files /dev/null and b/public/pngs/ic_kakao.png differ
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f842227..000000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/styles/AddBoard.module.css b/styles/AddBoard.module.css
new file mode 100644
index 000000000..53cd449a8
--- /dev/null
+++ b/styles/AddBoard.module.css
@@ -0,0 +1,118 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 40px;
+}
+
+.container-title {
+  display: flex;
+  justify-content: space-between;
+  font-family: Pretendard;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: left;
+  color: #1f2937;
+}
+
+.container-body {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.Registerbtn {
+  padding: 12px 23px;
+  gap: 10px;
+  border-radius: 8px;
+  border: 0;
+  background-color: #9ca3af;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  text-align: left;
+  color: #f3f4f6;
+}
+
+.Registerbtn.active {
+  background-color: #3692ff;
+  cursor: pointer;
+}
+
+.ArticleImage {
+  display: flex;
+  flex-direction: column;
+}
+
+.ArticleTitle {
+  display: flex;
+  flex-direction: column;
+}
+
+.ArticleContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.ArticleTitle > input {
+  padding: 16px 24px 16px 24px;
+  gap: 10px;
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  border: 0;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: left;
+  outline-color: #3692ff;
+}
+
+.section-title-input::placeholder {
+  color: #9ca3af;
+}
+
+.ArticleContent > textarea {
+  padding: 16px 24px 16px 24px;
+  gap: 10px;
+  border-radius: 12px;
+  border: 0;
+  background-color: #f3f4f6;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: left;
+  outline-color: #3692ff;
+  resize: none;
+}
+
+.ArticleContent > textarea::placeholder {
+  color: #9ca3af;
+}
+
+.section-title {
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  text-align: left;
+  color: #1f2937;
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: 16px 24px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1200px;
+    padding: 24px 0;
+    margin: 0 auto;
+  }
+}
diff --git a/styles/AllArticlesSection.module.css b/styles/AllArticlesSection.module.css
index e76ffa4d8..06cda4557 100644
--- a/styles/AllArticlesSection.module.css
+++ b/styles/AllArticlesSection.module.css
@@ -33,11 +33,13 @@
 }
 
 .allarticle-item {
+  text-decoration: none;
   display: flex;
   gap: 16px;
   flex-direction: column;
   padding: 0 0 24px;
   border-bottom: 1px solid #e5e7eb;
+  color: #1f2937;
 }
 
 .allarticle-body {
diff --git a/styles/ArticleContentSection.module.css b/styles/ArticleContentSection.module.css
new file mode 100644
index 000000000..44886c5bb
--- /dev/null
+++ b/styles/ArticleContentSection.module.css
@@ -0,0 +1,67 @@
+.article-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.article-title {
+  font-family: Pretendard;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 32px;
+  text-align: left;
+  color: #1f2937;
+}
+
+.article-info {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.article-userinfo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-family: Pretendard;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: left;
+}
+
+.article-nickname {
+  font-weight: 500;
+  color: #4b5563;
+}
+
+.article-createdAt {
+  font-weight: 400;
+  color: #9ca3af;
+}
+
+.article-likecount {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 10px;
+  border-radius: 35px;
+  border: 1px solid #e5e7eb;
+  background-color: #ffffff;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  text-align: left;
+  color: #6b7280;
+}
+
+.article-content {
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: left;
+  color: #1f2937;
+}
diff --git a/styles/BoardDetailPage.module.css b/styles/BoardDetailPage.module.css
new file mode 100644
index 000000000..644b7e315
--- /dev/null
+++ b/styles/BoardDetailPage.module.css
@@ -0,0 +1,197 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 40px;
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: 16px 24px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1200px;
+    padding: 24px 0;
+    margin: 0 auto;
+  }
+}
+
+.newcomment-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.newcomment-title {
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  text-align: left;
+  color: #111827;
+}
+
+.newcomment-content {
+  width: 100%;
+  height: 100%;
+  padding: 16px 24px;
+  gap: 10px;
+  border-radius: 12px;
+  border: 0;
+  background-color: #f3f4f6;
+  resize: none;
+  font-family: inherit;
+  margin-top: 8px;
+  box-sizing: border-box;
+}
+
+.newcomment-content::placeholder {
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: left;
+  color: #9ca3af;
+}
+
+.newcomment-content:focus {
+  outline-color: #3692ff;
+}
+
+.Registerbtn {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 23px;
+  gap: 10px;
+  border-radius: 8px;
+  border: 0;
+  background-color: #9ca3af;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  text-align: left;
+  color: #f3f4f6;
+  margin-left: auto;
+}
+
+.Registerbtn.active {
+  background-color: #3692ff;
+  cursor: pointer;
+}
+
+.comment-container {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0px;
+  gap: 4px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #fcfcfc;
+}
+
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment-content {
+  font-family: Pretendard;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: #1f2937;
+}
+
+.comment-edit-content {
+  padding: 16px 24px;
+  gap: 10px;
+  border-radius: 12px;
+  width: 100%;
+  background-color: #f3f4f6;
+  color: #1f2937;
+  border: 0;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  outline-color: #3692ff;
+  resize: none;
+}
+
+.comment-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comment-info-content {
+  display: flex;
+  gap: 8px;
+}
+
+.comment-user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+}
+.comment-nickname {
+  color: #4b5563;
+}
+
+.comment-updateAt {
+  color: #9ca3af;
+}
+
+.comment-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.comment-empty-icon {
+  width: 196px;
+  height: 196px;
+}
+
+.comment-empty-content {
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: center;
+  color: #9ca3af;
+}
+
+.goback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #3692ff;
+  padding: 12px 64px;
+  gap: 8px;
+  border-radius: 40px;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  text-align: center;
+  text-decoration: none;
+  color: #f3f4f6;
+  margin: auto;
+}
+
+.goback:hover {
+  background-color: #1251aa;
+}
diff --git a/styles/BoardsPage.module.css b/styles/BoardPage.module.css
similarity index 100%
rename from styles/BoardsPage.module.css
rename to styles/BoardPage.module.css
diff --git a/styles/FileInput.module.css b/styles/FileInput.module.css
index 486ffa2bd..428dd3185 100644
--- a/styles/FileInput.module.css
+++ b/styles/FileInput.module.css
@@ -1,7 +1,3 @@
-#file {
-  display: none;
-}
-
 .filelabel {
   width: 282px;
   height: 282px;
diff --git a/styles/Login.module.css b/styles/Login.module.css
new file mode 100644
index 000000000..507596413
--- /dev/null
+++ b/styles/Login.module.css
@@ -0,0 +1,163 @@
+.login-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  width: 640px;
+  height: 100%;
+  margin: auto;
+}
+
+.sign {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.sign-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.sign-input {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-area {
+  position: relative;
+  background-color: #f3f4f6;
+  padding: 16px 24px;
+  gap: 10px;
+  border-radius: 12px;
+  border: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.input-area.error {
+  border: 1px solid #f74747;
+}
+
+.input-area.password {
+  width: 100%;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.toggle-password-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-area:focus {
+  outline-color: #3692ff;
+}
+
+.sign-label {
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  text-align: left;
+  color: #1f2937;
+}
+
+.sign-button {
+  background-color: #9ca3af;
+  padding: 16px 124px;
+  gap: 10px;
+  border-radius: 40px;
+  border: 0;
+  width: 100%;
+  font-family: Pretendard;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 32px;
+  text-align: center;
+  color: #f3f4f6;
+  cursor: pointer;
+}
+
+.active {
+  background-color: #3692ff;
+}
+
+.login-footer {
+  display: flex;
+  gap: 4px;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  justify-content: center;
+}
+
+.link-signup {
+  color: #3692ff;
+}
+
+.outer {
+  background-color: #e6f2ff;
+  padding: 16px 23px;
+  gap: 10px;
+  border-radius: 8px;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hide {
+  display: none;
+}
+
+.social {
+  display: flex;
+  gap: 16px;
+}
+
+.failure-message,
+.failure-message2,
+.pw-failure-message,
+.pw-failure-message2,
+.pw-failure-message3 {
+  font-family: Pretendard;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  text-align: left;
+  color: #f74747;
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .login-page {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 16px;
+  }
+}
diff --git a/styles/ProductCreateForm.css b/styles/ProductCreateForm.css
index 84a197066..7df5599e8 100644
--- a/styles/ProductCreateForm.css
+++ b/styles/ProductCreateForm.css
@@ -1,9 +1,22 @@
-.ProductContainer {
+.container {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  width: 1200px;
-  margin: 24px auto;
+  padding: 16px;
+  gap: 40px;
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: 16px 24px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1200px;
+    padding: 24px 0;
+    margin: 0 auto;
+  }
 }
 
 .container-title {
diff --git a/tsconfig.json b/tsconfig.json
index 670224f3e..1ece44f2f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,14 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@components/*": ["./components/*"],
+      "@styles/*": ["./styles/*"],
+      "@public/*": ["./public/*"],
+      "@lib/*": ["./lib/*"],
+      "@pages/*": ["./pages/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],