diff --git a/frontend/src/apis/trash.ts b/frontend/src/apis/trash.ts
index ebcbf8cee..926e08e17 100644
--- a/frontend/src/apis/trash.ts
+++ b/frontend/src/apis/trash.ts
@@ -1,9 +1,10 @@
 import { trashURL } from 'constants/apis/url';
 import { http } from './fetch';
+import { GetDeletedWritingsResponse } from 'types/apis/trash';
 
 // 글 휴지통으로 이동: POST
 export const moveToTrash = (writingIds: number[]) =>
-  http.post(`${trashURL}`, {
+  http.post(trashURL, {
     json: {
       writingIds,
       isPermanentDelete: false,
@@ -12,9 +13,16 @@ export const moveToTrash = (writingIds: number[]) =>
 
 // 글 영구 삭제: POST
 export const deletePermanentWritings = (writingIds: number[]) =>
-  http.post(`${trashURL}`, {
+  http.post(trashURL, {
     json: {
       writingIds,
       isPermanentDelete: true,
     },
   });
+
+// 휴지통에 있는 글 목록 조회: GET
+export const getDeletedWritings = (): Promise<GetDeletedWritingsResponse> => http.get(trashURL);
+
+// 휴지통에서 글 복구: POST
+export const restoreDeletedWritings = (writingIds: number[]) =>
+  http.post(`${trashURL}/restore`, { json: { writingIds } });
diff --git a/frontend/src/components/@common/Accordion/AccordionPanel.tsx b/frontend/src/components/@common/Accordion/AccordionPanel.tsx
index e38d9c27c..57e56d115 100644
--- a/frontend/src/components/@common/Accordion/AccordionPanel.tsx
+++ b/frontend/src/components/@common/Accordion/AccordionPanel.tsx
@@ -18,6 +18,5 @@ const S = {
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding-left: 2rem;
   `,
 };
diff --git a/frontend/src/components/@common/Accordion/AccordionTitle.tsx b/frontend/src/components/@common/Accordion/AccordionTitle.tsx
index 1932d867f..d3d5807a4 100644
--- a/frontend/src/components/@common/Accordion/AccordionTitle.tsx
+++ b/frontend/src/components/@common/Accordion/AccordionTitle.tsx
@@ -40,9 +40,15 @@ export default AccordionTitle;
 const S = {
   Container: styled.div`
     display: flex;
+    gap: 0.8rem;
     align-items: center;
     width: 100%;
+    padding: 0 0.4rem;
     border-radius: 4px;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray4};
+    }
   `,
 
   IconButton: styled.button<Record<'$isOpen', boolean>>`
diff --git a/frontend/src/components/Category/Category/Category.tsx b/frontend/src/components/Category/Category/Category.tsx
index 00dde531e..a7242e1c6 100644
--- a/frontend/src/components/Category/Category/Category.tsx
+++ b/frontend/src/components/Category/Category/Category.tsx
@@ -1,4 +1,4 @@
-import { TrashCanIcon, PencilIcon } from 'assets/icons';
+import { PencilIcon } from 'assets/icons';
 import { usePageNavigate } from 'hooks/usePageNavigate';
 import { KeyboardEventHandler } from 'react';
 import { styled } from 'styled-components';
@@ -95,15 +95,14 @@ const S = {
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    height: 3.2rem;
-    padding: 0.8rem;
-    border-radius: 8px;
+    height: 3.6rem;
+    border-radius: 4px;
     font-size: 1.4rem;
 
     &:hover {
       div {
         display: inline-flex;
-        gap: 0.8rem;
+        gap: 0.4rem;
       }
     }
   `,
@@ -111,6 +110,7 @@ const S = {
   CategoryButton: styled.button`
     flex: 1;
     min-width: 0;
+    height: 100%;
     text-align: left;
   `,
 
@@ -136,6 +136,7 @@ const S = {
 
   IconContainer: styled.div`
     display: none;
+    margin-right: 0.4rem;
   `,
 
   Button: styled.button`
@@ -144,7 +145,8 @@ const S = {
     align-items: center;
     width: 2rem;
     height: 2.4rem;
-    border-radius: 8px;
+    padding: 0.4rem;
+    border-radius: 4px;
 
     &:hover {
       background-color: ${({ theme }) => theme.color.gray5};
diff --git a/frontend/src/components/Category/Header/Header.tsx b/frontend/src/components/Category/Header/Header.tsx
index 774f4875e..c8073aed5 100644
--- a/frontend/src/components/Category/Header/Header.tsx
+++ b/frontend/src/components/Category/Header/Header.tsx
@@ -4,7 +4,7 @@ import useCategoryInput from '../useCategoryInput';
 import { useCategoryMutation } from '../useCategoryMutation';
 import { isValidCategoryName } from '../isValidCategoryName';
 import Input from 'components/@common/Input/Input';
-import { PlusCircleIcon } from 'assets/icons';
+import { PlusIcon } from 'assets/icons';
 
 const Header = () => {
   const {
@@ -50,7 +50,7 @@ const Header = () => {
         />
       ) : (
         <S.Button onClick={openInput} aria-label='카테고리 추가 입력 창 열기'>
-          <PlusCircleIcon width={12} height={12} />
+          <PlusIcon width={12} height={12} />
         </S.Button>
       )}
     </S.Header>
@@ -64,10 +64,10 @@ const S = {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 2.8rem;
+    height: 3.6rem;
+    padding: 0.8rem;
     font-size: 1.2rem;
     font-weight: 400;
-    padding-right: 0.8rem;
   `,
 
   Title: styled.h1`
@@ -80,8 +80,8 @@ const S = {
     justify-content: center;
     align-items: center;
     width: 2rem;
-    height: 2.4rem;
-    border-radius: 8px;
+    height: 2rem;
+    border-radius: 4px;
 
     &:hover {
       background-color: ${({ theme }) => theme.color.gray5};
diff --git a/frontend/src/components/Category/WritingList/WritingList.tsx b/frontend/src/components/Category/WritingList/WritingList.tsx
index 56190820b..238fc5dd4 100644
--- a/frontend/src/components/Category/WritingList/WritingList.tsx
+++ b/frontend/src/components/Category/WritingList/WritingList.tsx
@@ -22,9 +22,8 @@ const WritingList = ({ categoryId, isOpen }: Props) => {
   return (
     <ul>
       {writings.map((writing) => (
-        <S.Item key={writing.id}>
+        <S.Item key={writing.id} $isClicked={writingId === writing.id}>
           <S.Button
-            $isClicked={writingId === writing.id}
             aria-label={`${writing.title}글 메인화면에 열기`}
             onClick={() => goWritingPage({ categoryId, writingId: writing.id })}
           >
@@ -45,33 +44,33 @@ const WritingList = ({ categoryId, isOpen }: Props) => {
 export default WritingList;
 
 const S = {
-  Item: styled.li`
+  Item: styled.li<{ $isClicked: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    border-radius: 8px;
+    height: 3.6rem;
+    border-radius: 4px;
+    background-color: ${({ theme, $isClicked }) => $isClicked && theme.color.gray4};
 
     &:hover {
-      background-color: ${({ theme }) => theme.color.gray5};
+      background-color: ${({ theme }) => theme.color.gray4};
 
       div {
-        display: inline-flex;
+        display: flex;
         flex-shrink: 0;
-        gap: 0.8rem;
       }
     }
   `,
 
-  Button: styled.button<{ $isClicked: boolean }>`
+  Button: styled.button`
     display: flex;
     align-items: center;
-    gap: 0.8rem;
+    gap: 0.4rem;
     min-width: 0;
-    height: 3.6rem;
-    padding: 0.8rem;
-    border-radius: 8px;
-    background-color: ${({ theme, $isClicked }) => $isClicked && theme.color.gray5};
+    height: 100%;
+    padding: 0.4rem 0 0.4rem 3.2rem;
+    border-radius: 4px;
   `,
 
   IconWrapper: styled.div`
@@ -88,7 +87,7 @@ const S = {
   `,
 
   NoWritingsText: styled.p`
-    padding: 0.8rem;
+    padding: 0.4rem 0 0.4rem 3.2rem;
     color: ${({ theme }) => theme.color.gray6};
     font-size: 1.4rem;
     font-weight: 500;
diff --git a/frontend/src/components/DeleteButton/DeleteButton.tsx b/frontend/src/components/DeleteButton/DeleteButton.tsx
index 75fd57f94..d98d59ac9 100644
--- a/frontend/src/components/DeleteButton/DeleteButton.tsx
+++ b/frontend/src/components/DeleteButton/DeleteButton.tsx
@@ -19,10 +19,10 @@ const S = {
     align-items: center;
     width: 2rem;
     height: 2.4rem;
-    border-radius: 8px;
+    border-radius: 4px;
 
     &:hover {
-      background-color: ${({ theme }) => theme.color.gray6};
+      background-color: ${({ theme }) => theme.color.gray5};
     }
   `,
 };
diff --git a/frontend/src/components/TrashCan/DeletedWritingList.tsx b/frontend/src/components/TrashCan/DeletedWritingList.tsx
new file mode 100644
index 000000000..dca80249f
--- /dev/null
+++ b/frontend/src/components/TrashCan/DeletedWritingList.tsx
@@ -0,0 +1,100 @@
+import { WritingIcon } from 'assets/icons';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { useParams } from 'react-router-dom';
+import { styled } from 'styled-components';
+import DeleteButton from 'components/DeleteButton/DeleteButton';
+import { useDeletedWritings } from 'hooks/useDeletedWritings';
+import { useDeletePermanentWritings } from 'components/TrashCanTable/useDeletePermanentWritings';
+
+const DeletedWritingList = () => {
+  const { deletedWritings } = useDeletedWritings();
+  const { goWritingPage } = usePageNavigate();
+  const writingId = Number(useParams()['writingId']);
+  const deletePermanentWritings = useDeletePermanentWritings();
+
+  if (!deletedWritings || deletedWritings?.length === 0)
+    return <S.NoWritingsText>빈 휴지통</S.NoWritingsText>;
+
+  return (
+    <ul>
+      {deletedWritings.map((deletedWriting) => (
+        <S.Item key={deletedWriting.id} $isClicked={writingId === deletedWriting.id}>
+          <S.Button
+            aria-label={`${deletedWriting.title}글 메인화면에 열기`}
+            onClick={() =>
+              goWritingPage({ categoryId: deletedWriting.categoryId, writingId: deletedWriting.id })
+            }
+          >
+            <S.IconWrapper>
+              <WritingIcon width={14} height={14} />
+            </S.IconWrapper>
+            <S.Text>{deletedWriting.title}</S.Text>
+          </S.Button>
+          <S.DeleteButtonWrapper>
+            <DeleteButton onClick={() => deletePermanentWritings([writingId])} />
+          </S.DeleteButtonWrapper>
+        </S.Item>
+      ))}
+    </ul>
+  );
+};
+
+export default DeletedWritingList;
+
+const S = {
+  Item: styled.li<{ $isClicked: boolean }>`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 3.6rem;
+    border-radius: 4px;
+    background-color: ${({ theme, $isClicked }) => $isClicked && theme.color.gray4};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray4};
+
+      div {
+        display: inline-flex;
+        flex-shrink: 0;
+        gap: 0.8rem;
+      }
+    }
+  `,
+
+  Button: styled.button`
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-width: 0;
+    height: 100%;
+    padding: 0.4rem 0 0.4rem 3.2rem;
+    border-radius: 4px;
+  `,
+
+  IconWrapper: styled.div`
+    flex-shrink: 0;
+  `,
+
+  Text: styled.p`
+    color: ${({ theme }) => theme.color.gray9};
+    font-size: 1.4rem;
+    font-weight: 400;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+
+  NoWritingsText: styled.p`
+    padding: 0.4rem 0 0.4rem 3.2rem;
+    color: ${({ theme }) => theme.color.gray6};
+    font-size: 1.4rem;
+    font-weight: 500;
+    cursor: default;
+  `,
+
+  DeleteButtonWrapper: styled.div`
+    display: none;
+    margin-right: 0.8rem;
+  `,
+};
diff --git a/frontend/src/components/TrashCan/TrashCan.tsx b/frontend/src/components/TrashCan/TrashCan.tsx
new file mode 100644
index 000000000..9db783528
--- /dev/null
+++ b/frontend/src/components/TrashCan/TrashCan.tsx
@@ -0,0 +1,60 @@
+import Accordion from 'components/@common/Accordion/Accordion';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { styled } from 'styled-components';
+import DeletedWritingList from './DeletedWritingList';
+
+const TrashCan = () => {
+  const { goTrashCanPage } = usePageNavigate();
+
+  return (
+    <Accordion>
+      <Accordion.Item>
+        <Accordion.Title>
+          <S.Button aria-label='휴지통으로 이동하기' onClick={goTrashCanPage}>
+            <S.Text>휴지통</S.Text>
+          </S.Button>
+        </Accordion.Title>
+        <Accordion.Panel>
+          <DeletedWritingList />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default TrashCan;
+
+const S = {
+  Button: styled.button`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 3.6rem;
+    border-radius: 8px;
+    font-size: 1.4rem;
+
+    &:hover {
+      div {
+        display: inline-flex;
+        gap: 0.8rem;
+      }
+    }
+  `,
+
+  Text: styled.p`
+    color: ${({ theme }) => theme.color.gray10};
+    font-weight: 600;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+
+  NoWritingsText: styled.p`
+    padding: 0.8rem;
+    color: ${({ theme }) => theme.color.gray6};
+    font-size: 1.4rem;
+    font-weight: 500;
+    cursor: default;
+  `,
+};
diff --git a/frontend/src/components/TrashCanTable/TrashCanTable.tsx b/frontend/src/components/TrashCanTable/TrashCanTable.tsx
new file mode 100644
index 000000000..3111f083b
--- /dev/null
+++ b/frontend/src/components/TrashCanTable/TrashCanTable.tsx
@@ -0,0 +1,119 @@
+import Button from 'components/@common/Button/Button';
+import Input from 'components/@common/Input/Input';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { styled } from 'styled-components';
+import { DeletedWriting } from 'types/apis/trash';
+import { useTrashCanTable } from './useTrashCanTable';
+
+type Props = {
+  writings: DeletedWriting[];
+};
+
+const TrashCanTable = ({ writings }: Props) => {
+  const { goWritingPage } = usePageNavigate();
+  const {
+    rowRef,
+    deletePermanentWritings,
+    restoreDeletedWritings,
+    toggleAllCheckbox,
+    toggleCheckbox,
+    getIsChecked,
+  } = useTrashCanTable(writings);
+
+  return (
+    <S.Container>
+      <S.ButtonContainer>
+        <Button variant='secondary' size='small' onClick={deletePermanentWritings}>
+          영구 삭제
+        </Button>
+        <Button variant='secondary' size='small' onClick={restoreDeletedWritings}>
+          글 복구
+        </Button>
+      </S.ButtonContainer>
+      <S.Table summary='휴지통 내부 글 목록을 나타낸다'>
+        <colgroup>
+          <col width='10%' />
+          <col width='90%' />
+        </colgroup>
+        <thead>
+          <tr ref={rowRef} tabIndex={0}>
+            <th>
+              <Input variant='unstyled' type='checkbox' onClick={toggleAllCheckbox} />
+            </th>
+            <th>글 제목</th>
+          </tr>
+        </thead>
+        <tbody>
+          {writings.map(({ id, title, categoryId }) => (
+            <tr key={id} tabIndex={0}>
+              <td>
+                <Input
+                  variant='unstyled'
+                  type='checkbox'
+                  checked={getIsChecked(id)}
+                  onChange={() => toggleCheckbox(id)}
+                />
+              </td>
+              <td onClick={() => goWritingPage({ categoryId, writingId: id })}>{title}</td>
+            </tr>
+          ))}
+        </tbody>
+      </S.Table>
+    </S.Container>
+  );
+};
+
+export default TrashCanTable;
+
+const S = {
+  Container: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 2rem;
+  `,
+
+  ButtonContainer: styled.div`
+    display: flex;
+    gap: 0.8rem;
+  `,
+
+  Table: styled.table`
+    width: 100%;
+    text-align: left;
+    font-size: 1.4rem;
+
+    th {
+      color: ${({ theme }) => theme.color.gray8};
+    }
+
+    td {
+      .publishedTo {
+        display: flex;
+        gap: 0.8rem;
+      }
+    }
+
+    th,
+    td {
+      padding: 1.1rem;
+      border: 1px solid ${({ theme }) => theme.color.gray5};
+    }
+
+    th:first-child,
+    td:first-child {
+      border-left: none;
+    }
+
+    th:last-child,
+    td:last-child {
+      border-right: none;
+    }
+
+    tbody tr:hover td:not(:first-child) {
+      cursor: pointer;
+      transform: scale(1.01);
+      transition: all 300ms;
+    }
+  `,
+};
diff --git a/frontend/src/components/TrashCanTable/useDeletePermanentWritings.ts b/frontend/src/components/TrashCanTable/useDeletePermanentWritings.ts
new file mode 100644
index 000000000..e031a5099
--- /dev/null
+++ b/frontend/src/components/TrashCanTable/useDeletePermanentWritings.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deletePermanentWritings as deletePermanentWritingsAPI } from 'apis/trash';
+
+export const useDeletePermanentWritings = () => {
+  const queryClient = useQueryClient();
+  const { mutate } = useMutation(deletePermanentWritingsAPI, {
+    onSuccess: () => {
+      alert('글이 삭제되었습니다.');
+      queryClient.invalidateQueries(['deletedWritings']);
+    },
+    onError: () => alert('글 삭제가 실패했습니다.'),
+  });
+
+  const deletePermanentWritings = (writingIds: number[]) => {
+    if (writingIds.length === 0) {
+      alert('삭제할 글을 선택해주세요.');
+      return;
+    }
+
+    if (confirm('글을 영구 삭제하시겠습니까?')) mutate(writingIds);
+  };
+
+  return deletePermanentWritings;
+};
diff --git a/frontend/src/components/TrashCanTable/useRestoreDeletedWritings.ts b/frontend/src/components/TrashCanTable/useRestoreDeletedWritings.ts
new file mode 100644
index 000000000..8ed9c2c6b
--- /dev/null
+++ b/frontend/src/components/TrashCanTable/useRestoreDeletedWritings.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { restoreDeletedWritings as restoreDeletedWritingsAPI } from 'apis/trash';
+
+export const useRestoreDeleteWritings = () => {
+  const queryClient = useQueryClient();
+  const { mutate } = useMutation(restoreDeletedWritingsAPI, {
+    onSuccess: () => {
+      alert('글이 복구되었습니다.');
+      queryClient.invalidateQueries(['deletedWritings']);
+    },
+    onError: () => alert('글 복구가 실패했습니다.'),
+  });
+
+  const restoreDeletedWritings = (writingIds: number[]) => {
+    if (writingIds.length === 0) {
+      alert('복구할 글을 선택해주세요.');
+      return;
+    }
+
+    if (confirm('글을 복구 하시겠습니까?')) mutate(writingIds);
+  };
+
+  return restoreDeletedWritings;
+};
diff --git a/frontend/src/components/TrashCanTable/useTrashCanTable.ts b/frontend/src/components/TrashCanTable/useTrashCanTable.ts
new file mode 100644
index 000000000..b550d1391
--- /dev/null
+++ b/frontend/src/components/TrashCanTable/useTrashCanTable.ts
@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { DeletedWriting } from 'types/apis/trash';
+import { useDeletePermanentWritings } from './useDeletePermanentWritings';
+import { useRestoreDeleteWritings } from './useRestoreDeletedWritings';
+
+export const useTrashCanTable = (writings: DeletedWriting[]) => {
+  const [writingIds, setWritingIds] = useState<number[]>([]);
+  const [isClickedAllCheckbox, setIsClickedAllCheckbox] = useState(false);
+  const rowRef = useRef<HTMLTableRowElement>(null);
+  const deletePermanentWritingsMutation = useDeletePermanentWritings();
+  const restoreDeletedWritingsMutation = useRestoreDeleteWritings();
+
+  useEffect(() => {
+    rowRef.current?.focus();
+  }, [writings]);
+
+  const toggleAllCheckbox = () => {
+    if (isClickedAllCheckbox) {
+      // checked 상태 -> 모두 unChecked
+      setWritingIds([]);
+    } else {
+      // unChecked 상태 -> 모두 check
+      const allWritingIds = writings.map((writing) => writing.id);
+      setWritingIds(allWritingIds);
+    }
+
+    setIsClickedAllCheckbox((prev) => !prev);
+  };
+
+  const toggleCheckbox = (id: number) => {
+    if (writingIds.includes(id)) {
+      // checked 상태 -> unCheck
+      setWritingIds(writingIds.filter((writingId) => writingId !== id));
+    } else {
+      // unChecked 상태 -> check
+      setWritingIds([...writingIds, id]);
+    }
+  };
+
+  const getIsChecked = (id: number) => writingIds.includes(id);
+
+  const deletePermanentWritings = () => deletePermanentWritingsMutation(writingIds);
+
+  const restoreDeletedWritings = () => restoreDeletedWritingsMutation(writingIds);
+
+  return {
+    rowRef,
+    deletePermanentWritings,
+    restoreDeletedWritings,
+    toggleAllCheckbox,
+    toggleCheckbox,
+    getIsChecked,
+  };
+};
diff --git a/frontend/src/constants/path.ts b/frontend/src/constants/path.ts
index 272f652bd..5717dedb0 100644
--- a/frontend/src/constants/path.ts
+++ b/frontend/src/constants/path.ts
@@ -6,6 +6,7 @@ export const PATH = {
   space: 'space',
   writingPage: 'writings/:categoryId/:writingId',
   writingTablePage: 'writings/:categoryId',
+  trashCanPage: 'trash-can',
 } as const;
 
 export const NAVIGATE_PATH = {
@@ -13,4 +14,5 @@ export const NAVIGATE_PATH = {
   getWritingTablePage: (categoryId: number) => `/${PATH.space}/writings/${categoryId}`,
   getWritingPage: (categoryId: number, writingId: number) =>
     `/${PATH.space}/writings/${categoryId}/${writingId}`,
+  trashCanPage: `/${PATH.space}/${PATH.trashCanPage}`,
 } as const;
diff --git a/frontend/src/hooks/useDeletedWritings.ts b/frontend/src/hooks/useDeletedWritings.ts
new file mode 100644
index 000000000..1e8525db8
--- /dev/null
+++ b/frontend/src/hooks/useDeletedWritings.ts
@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { getDeletedWritings } from 'apis/trash';
+import { GetDeletedWritingsResponse } from 'types/apis/trash';
+
+export const useDeletedWritings = () => {
+  const { data, isLoading } = useQuery<GetDeletedWritingsResponse>(
+    ['deletedWritings'],
+    getDeletedWritings,
+    {
+      onError: () => alert('휴지통의 글을 불러올 수 없습니다'),
+    },
+  );
+
+  return { deletedWritings: data ? data.writings : null, isLoading };
+};
diff --git a/frontend/src/hooks/usePageNavigate.ts b/frontend/src/hooks/usePageNavigate.ts
index f1debd0f3..72dc9f9a5 100644
--- a/frontend/src/hooks/usePageNavigate.ts
+++ b/frontend/src/hooks/usePageNavigate.ts
@@ -12,5 +12,7 @@ export const usePageNavigate = () => {
   const goWritingPage = ({ categoryId, writingId }: { categoryId: number; writingId: number }) =>
     navigate(NAVIGATE_PATH.getWritingPage(categoryId, writingId));
 
-  return { goHomePage, goWritingTablePage, goWritingPage };
+  const goTrashCanPage = () => navigate(NAVIGATE_PATH.trashCanPage);
+
+  return { goHomePage, goWritingTablePage, goWritingPage, goTrashCanPage };
 };
diff --git a/frontend/src/mocks/categoryContentsMock.ts b/frontend/src/mocks/categoryContentsMock.ts
index 75628deec..4da332129 100644
--- a/frontend/src/mocks/categoryContentsMock.ts
+++ b/frontend/src/mocks/categoryContentsMock.ts
@@ -24,7 +24,7 @@ export const writingsInCategory = {
   categoryName: '우아한테크코스',
   writings: [
     {
-      id: 1,
+      id: 200,
       title: '우테코 레벨 1: 우테코 생활기',
     },
     {
diff --git a/frontend/src/mocks/handlers/trash.ts b/frontend/src/mocks/handlers/trash.ts
index b827355e7..cc774be62 100644
--- a/frontend/src/mocks/handlers/trash.ts
+++ b/frontend/src/mocks/handlers/trash.ts
@@ -1,4 +1,5 @@
 import { trashURL } from 'constants/apis/url';
+import { deletedWritings } from 'mocks/trashCanContentsMock';
 import { rest } from 'msw';
 
 export const trashHandlers = [
@@ -6,4 +7,14 @@ export const trashHandlers = [
   rest.post(trashURL, (_, res, ctx) => {
     return res(ctx.status(200));
   }),
+
+  // 휴지통에서 글 목록 조회
+  rest.get(trashURL, (_, res, ctx) => {
+    return res(ctx.json(deletedWritings), ctx.status(200));
+  }),
+
+  // 휴지통에서 글 복구
+  rest.post(`${trashURL}/restore`, (_, res, ctx) => {
+    return res(ctx.status(200));
+  }),
 ];
diff --git a/frontend/src/mocks/trashCanContentsMock.ts b/frontend/src/mocks/trashCanContentsMock.ts
new file mode 100644
index 000000000..1eaf8731c
--- /dev/null
+++ b/frontend/src/mocks/trashCanContentsMock.ts
@@ -0,0 +1,14 @@
+export const deletedWritings = {
+  writings: [
+    {
+      id: 200,
+      title: '우테코 레벨 1: 우테코 생활기',
+      categoryId: 1,
+    },
+    {
+      id: 2,
+      title: '우테코 레벨 2: 레벨 인터뷰',
+      categoryId: 1,
+    },
+  ],
+};
diff --git a/frontend/src/pages/Layout/Layout.tsx b/frontend/src/pages/Layout/Layout.tsx
index 7e8728c9a..cb22a6309 100644
--- a/frontend/src/pages/Layout/Layout.tsx
+++ b/frontend/src/pages/Layout/Layout.tsx
@@ -9,6 +9,8 @@ import WritingSideBar from 'components/WritingSideBar/WritingSideBar';
 import CategorySection from 'components/Category/Section/Section';
 import { useModal } from 'hooks/@common/useModal';
 import FileUploadModal from 'components/FileUploadModal/FileUploadModal';
+import Divider from 'components/@common/Divider/Divider';
+import TrashCan from 'components/TrashCan/TrashCan';
 
 export type PageContext = {
   isLeftSidebarOpen?: boolean;
@@ -51,7 +53,10 @@ const Layout = () => {
             글 가져오기
           </Button>
           <FileUploadModal isOpen={isOpen} closeModal={closeModal} />
+          <Divider />
           <CategorySection />
+          <Divider />
+          <TrashCan />
         </S.LeftSidebarSection>
         <S.Main>
           <Outlet
diff --git a/frontend/src/pages/TrashCanPage/TrashCanPage.tsx b/frontend/src/pages/TrashCanPage/TrashCanPage.tsx
new file mode 100644
index 000000000..ba3b1315d
--- /dev/null
+++ b/frontend/src/pages/TrashCanPage/TrashCanPage.tsx
@@ -0,0 +1,32 @@
+import TrashCanTable from 'components/TrashCanTable/TrashCanTable';
+import { useDeletedWritings } from 'hooks/useDeletedWritings';
+import { styled } from 'styled-components';
+
+const TrashCanPage = () => {
+  const { deletedWritings, isLoading } = useDeletedWritings();
+
+  if (isLoading) return <>로딩 중...</>;
+
+  return (
+    <S.Article>
+      <S.CategoryNameTitle>휴지통</S.CategoryNameTitle>
+      {deletedWritings ? <TrashCanTable writings={deletedWritings} /> : <>휴지통이 비었습니다</>}
+    </S.Article>
+  );
+};
+
+export default TrashCanPage;
+
+const S = {
+  Article: styled.article`
+    width: 100%;
+    padding: 8rem;
+
+    background-color: ${({ theme }) => theme.color.gray1};
+  `,
+
+  CategoryNameTitle: styled.h1`
+    font-size: 4rem;
+    margin-bottom: 5rem;
+  `,
+};
diff --git a/frontend/src/routes/Router.tsx b/frontend/src/routes/Router.tsx
index 4b647df1a..70ca57dcd 100644
--- a/frontend/src/routes/Router.tsx
+++ b/frontend/src/routes/Router.tsx
@@ -6,6 +6,7 @@ import OauthPage from 'pages/OauthPage/OauthPage';
 import IntroducePage from 'pages/IntroducePage/IntroducePage';
 import Layout from 'pages/Layout/Layout';
 import { PATH } from 'constants/path';
+import TrashCanPage from 'pages/TrashCanPage/TrashCanPage';
 
 export const Router = () => {
   const browserRouter = createBrowserRouter([
@@ -38,6 +39,10 @@ export const Router = () => {
               path: PATH.writingTablePage,
               element: <WritingTablePage />,
             },
+            {
+              path: PATH.trashCanPage,
+              element: <TrashCanPage />,
+            },
           ],
         },
       ],
diff --git a/frontend/src/types/apis/trash.ts b/frontend/src/types/apis/trash.ts
new file mode 100644
index 000000000..2c2069d24
--- /dev/null
+++ b/frontend/src/types/apis/trash.ts
@@ -0,0 +1,7 @@
+export type DeletedWriting = {
+  id: number;
+  title: string;
+  categoryId: number;
+};
+
+export type GetDeletedWritingsResponse = { writings: DeletedWriting[] };