diff --git a/.yarn/cache/@next-swc-darwin-arm64-npm-14.2.4-86d534c3ee-8.zip b/.yarn/cache/@next-swc-darwin-arm64-npm-14.2.4-86d534c3ee-8.zip
new file mode 100644
index 00000000..36e475bf
Binary files /dev/null and b/.yarn/cache/@next-swc-darwin-arm64-npm-14.2.4-86d534c3ee-8.zip differ
diff --git a/src/app/(sidebar)/write/[id]/api/useDeleteMemo.ts b/src/app/(sidebar)/write/[id]/api/useDeleteMemo.ts
new file mode 100644
index 00000000..2b4a2868
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/api/useDeleteMemo.ts
@@ -0,0 +1,13 @@
+import { http } from '@/apis/http';
+import { useMutation } from '@tanstack/react-query';
+
+export const deleteMemo = (cardId: string, memoId: number) =>
+  http.delete({
+    url: `/cards/${cardId}/card-memo/${memoId}`,
+  });
+
+export const useDeleteMemo = (cardId: string) =>
+  useMutation({
+    mutationKey: ['delete-memo', cardId],
+    mutationFn: (memoId: number) => deleteMemo(cardId, memoId),
+  });
diff --git a/src/app/(sidebar)/write/[id]/api/useGetMemos.ts b/src/app/(sidebar)/write/[id]/api/useGetMemos.ts
new file mode 100644
index 00000000..a53263e2
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/api/useGetMemos.ts
@@ -0,0 +1,20 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export type GetMemosResponse = Array<{
+  id: number;
+  content: string;
+  updatedAt: string;
+}>;
+
+const getMemos = (cardId: string) =>
+  http.get<GetMemosResponse>({
+    url: `/cards/${cardId}/card-memo`,
+  });
+
+export const useGetMemos = (cardId: string) =>
+  useSuspenseQuery({
+    queryKey: ['get-memos', cardId],
+    queryFn: () => getMemos(cardId),
+    select: ({ result }) => result,
+  });
diff --git a/src/app/(sidebar)/write/[id]/api/usePostMemo.ts b/src/app/(sidebar)/write/[id]/api/usePostMemo.ts
new file mode 100644
index 00000000..d3bc4214
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/api/usePostMemo.ts
@@ -0,0 +1,14 @@
+import { http } from '@/apis/http';
+import { useMutation } from '@tanstack/react-query';
+
+export const postMemo = (cardId: string, content: string) =>
+  http.post({
+    url: `/cards/${cardId}/card-memo`,
+    data: { content },
+  });
+
+export const usePostMemo = (cardId: string) =>
+  useMutation({
+    mutationKey: ['post-memo', cardId],
+    mutationFn: (content: string) => postMemo(cardId, content),
+  });
diff --git a/src/app/(sidebar)/write/[id]/api/usesPutMemo.ts b/src/app/(sidebar)/write/[id]/api/usesPutMemo.ts
new file mode 100644
index 00000000..500eddda
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/api/usesPutMemo.ts
@@ -0,0 +1,14 @@
+import { http } from '@/apis/http';
+import { useMutation } from '@tanstack/react-query';
+
+export const putMemo = (cardId: string, memoId: number, content: string) =>
+  http.put({
+    url: `/cards/${cardId}/card-memo/${memoId}/content`,
+    data: { content },
+  });
+
+export const usePutMemo = (cardId: string) =>
+  useMutation({
+    mutationKey: ['put-memo', cardId],
+    mutationFn: ({ memoId, content }: { memoId: number; content: string }) => putMemo(cardId, memoId, content),
+  });
diff --git a/src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/Memo.tsx b/src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/Memo.tsx
new file mode 100644
index 00000000..d29209b4
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/Memo.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Textarea } from '@/system/components/Textarea/Textarea';
+import { RemoveMemo } from '@/system/components/Icon/SVG/RemoveMemo';
+import { AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
+import { GetMemosResponse } from '../../../api/useGetMemos';
+import { useMemosContext } from '../../../fetcher/MemosFetcher';
+import { useDeleteMemo } from '../../../api/useDeleteMemo';
+import { usePutMemo } from '@/app/(sidebar)/write/[id]/api/usesPutMemo';
+
+export default function Memo({ id: memoId, content, updatedAt }: GetMemosResponse[number]) {
+  const { cardId } = useMemosContext();
+  const prevMemo = useRef<string>(content);
+  const [memo, setMemo] = useState(content || '');
+  const [showCloseButton, setShowCloseButton] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { mutate } = useDeleteMemo(cardId);
+  const { mutate: putMemo } = usePutMemo(cardId);
+
+  const adjustTextareaHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, []);
+
+  useEffect(() => {
+    adjustTextareaHeight();
+
+    if (prevMemo.current !== memo) {
+      putMemo({ memoId, content: memo });
+    }
+  }, [memo]);
+
+  return (
+    <div
+      // using pure css in memo.css
+      className="memo-wrap"
+      onMouseEnter={() => setShowCloseButton(true)}
+      onMouseLeave={() => setShowCloseButton(false)}>
+      <div className="absolute bottom-27 w-360 z-[100] h-2 bg-white" />
+
+      <div className="w-360 h-auto bg-white rounded-tl-8 rounded-tr-8 px-16 pt-16 pb-8">
+        <Textarea
+          ref={textareaRef}
+          rows={1}
+          className="w-full min-h-0 border-none p-0 memo-14 resize-none focus:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-0"
+          value={memo}
+          onChange={(e) => setMemo(e.target.value)}
+          autoFocus
+        />
+      </div>
+
+      <AnimatePresence mode="wait">
+        {showCloseButton && (
+          <motion.button
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2 }}
+            exit={{ opacity: 0 }}
+            className="absolute top-16 right-32"
+            onClick={() => mutate(memoId)}>
+            <RemoveMemo size={24} color="#37383C" />
+          </motion.button>
+        )}
+      </AnimatePresence>
+
+      <div className="memo pl-16 memo-10 pb-16 memo-neutral-35">{updatedAt.split(' ')[0].replaceAll('-', '.')}</div>
+    </div>
+  );
+}
diff --git a/src/app/(sidebar)/write/[id]/components/MemoContainer/MemoContainer.tsx b/src/app/(sidebar)/write/[id]/components/MemoContainer/MemoContainer.tsx
new file mode 100644
index 00000000..f4ae5e4c
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/components/MemoContainer/MemoContainer.tsx
@@ -0,0 +1,57 @@
+import { Button, Icon } from '@/system/components';
+import { Textarea } from '@/system/components/Textarea/Textarea';
+import { useState } from 'react';
+import Memo from './Memo/Memo';
+import { cn } from '@/utils';
+import { useMemosContext } from '../../fetcher/MemosFetcher';
+import { usePostMemo } from '@/app/(sidebar)/write/[id]/api/usePostMemo';
+
+const TEXT_DEFAULT_HEIGHT = 22;
+const TEXT_FOCUS_HEIGHT = 80;
+
+export default function MemoContainer() {
+  const { memos, cardId } = useMemosContext();
+  const [memo, setMemo] = useState<string>('');
+  const [textareaHeight, setTextareaHeight] = useState(TEXT_DEFAULT_HEIGHT);
+  const { mutate } = usePostMemo(cardId);
+
+  return (
+    <section className="min-w-400 h-screen border-1 bg-neutral-1">
+      <div className="flex items-end p-16 w-full h-109 gap-8">
+        <Icon name="filledMemo" size={24} />
+        <p className="text-18 font-semibold">메모</p>
+      </div>
+
+      <div className="w-full h-[calc(100vh-294px)] px-16 flex flex-col gap-16 overflow-y-scroll">
+        {memos.map((memo) => (
+          <Memo key={memo.id} {...memo} />
+        ))}
+      </div>
+
+      <div className="max-w-400 relative px-16 pt-16 pb-24 h-185 flex flex-col justify-end">
+        <div className="pt-13 px-16 pb-8 rounded-8 border-1 border-neutral-20 bg-white flex flex-col gap-4">
+          <Textarea
+            value={memo}
+            onChange={(e) => setMemo(e.target.value)}
+            onFocus={() => setTextareaHeight(TEXT_FOCUS_HEIGHT)}
+            onBlur={() => setTextareaHeight(TEXT_DEFAULT_HEIGHT)}
+            rows={1}
+            className={cn(
+              'resize-none min-h-0 bg-white border-none focus:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+              textareaHeight === TEXT_DEFAULT_HEIGHT && 'overflow-hidden',
+            )}
+            style={{ height: `${textareaHeight}px`, transition: 'height 0.2s ease-in-out' }}
+            maxLength={130}
+          />
+
+          <div className="flex justify-between items-center w-full h-32">
+            <p className="text-10 text-neutral-60">{memo.length} / 130</p>
+            <Button onClick={() => mutate(memo)}>
+              <Icon name="submitArrow" size={32} color="#1B1C1E" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx b/src/app/(sidebar)/write/[id]/components/TagSelector/TagSelector.tsx
similarity index 100%
rename from src/app/(sidebar)/write/components/TagSelector/TagSelector.tsx
rename to src/app/(sidebar)/write/[id]/components/TagSelector/TagSelector.tsx
diff --git a/src/app/(sidebar)/write/components/TagSelector/constants.ts b/src/app/(sidebar)/write/[id]/components/TagSelector/constants.ts
similarity index 100%
rename from src/app/(sidebar)/write/components/TagSelector/constants.ts
rename to src/app/(sidebar)/write/[id]/components/TagSelector/constants.ts
diff --git a/src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts b/src/app/(sidebar)/write/[id]/components/TagSelector/useTagSelector.ts
similarity index 100%
rename from src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts
rename to src/app/(sidebar)/write/[id]/components/TagSelector/useTagSelector.ts
diff --git a/src/app/(sidebar)/write/[id]/fetcher/MemosFetcher.tsx b/src/app/(sidebar)/write/[id]/fetcher/MemosFetcher.tsx
new file mode 100644
index 00000000..5704fcb1
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/fetcher/MemosFetcher.tsx
@@ -0,0 +1,19 @@
+import { generateContext } from '@/lib';
+import { GetMemosResponse, useGetMemos } from '../api/useGetMemos';
+import { StrictPropsWithChildren } from '@/types';
+
+const [MemosProvider, useMemosContext] = generateContext<{ memos: GetMemosResponse; cardId: string }>({
+  name: 'memos-provider',
+});
+
+function MemosFetcher({ cardId, children }: StrictPropsWithChildren<{ cardId: string }>) {
+  const { data } = useGetMemos(cardId);
+
+  return (
+    <MemosProvider memos={data} cardId={cardId}>
+      {children}
+    </MemosProvider>
+  );
+}
+
+export { MemosFetcher, useMemosContext };
diff --git a/src/app/(sidebar)/write/[id]/page.tsx b/src/app/(sidebar)/write/[id]/page.tsx
new file mode 100644
index 00000000..83c9835c
--- /dev/null
+++ b/src/app/(sidebar)/write/[id]/page.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import { Input } from '@/system/components/Input/Input';
+import { TagSelector } from './components/TagSelector/TagSelector';
+import { abilityTags, personalityTags, categoryTags, tags, categories } from './components/TagSelector/constants';
+import { cn } from '@/utils';
+import { Icon } from '@/system/components';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/system/components/DropdownMenu/DropdownMenu';
+import MemoContainer from './components/MemoContainer/MemoContainer';
+import { MemosFetcher } from './fetcher/MemosFetcher';
+import { AsyncBoundaryWithQuery } from '@/lib';
+import { If } from '@/system/utils/If';
+import { Spacing } from '@/system/utils/Spacing';
+
+const Editor = dynamic(() => import('@/components/Editor/Editor').then(({ Editor }) => Editor), { ssr: false });
+
+export default function Page({ params: { id: cardId } }: { params: { id: string } }) {
+  const [category, setSelectedCategories] = useState<(typeof categories)[number] | null>(null);
+  const [selectedTags, setSelectedTags] = useState<typeof tags>([]);
+
+  return (
+    <section className="flex">
+      <section className="w-[820px] pt-64 h-full">
+        <div className="flex justify-between px-80">
+          <Input
+            placeholder="제목을 입력해주세요."
+            classNames={{ base: 'w-[552px]' }}
+            className="text-[24px] font-bold px-0 leading-32 tracking-[-0.0345rem] border-none"
+          />
+          <div className="flex gap-8 items-center text-neutral-20">
+            <p>00.00.00</p>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Icon name="more" color="black" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem className="flex gap-4 w-176 h-52 pl-16 cursor-pointer">
+                  <Icon name="trash" size={20} color="#FF5C5C" />
+                  <p className="text-[#FF5C5C] text-15">삭제하기</p>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <Spacing direction="column" size={24} />
+
+        <TagSelector classNames={{ base: 'px-80', trigger: cn('hover:bg-neutral-1') }}>
+          <TagSelector.Title>분류</TagSelector.Title>
+
+          <TagSelector.Trigger>
+            <If condition={category == null}>카드의 종류를 선택해주세요</If>
+            <If condition={category != null}>
+              <ul className="flex gap-8">
+                <TagSelector.RemovalbleTag
+                  key={category?.value}
+                  className="text-yellow-1 bg-yellow-bg-1"
+                  color="#37383C"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setSelectedCategories(null);
+                  }}>
+                  <li>{category?.value}</li>
+                </TagSelector.RemovalbleTag>
+              </ul>
+            </If>
+          </TagSelector.Trigger>
+
+          <TagSelector.Content>
+            <div className="px-16 pt-16 pb-24">
+              <TagSelector.Notice>
+                어떤 단계를 위한 정보인가요? <span className="text-neutral-30">(택1)</span>
+              </TagSelector.Notice>
+              <TagSelector.TagList title="분류">
+                {categoryTags.map((tag) => (
+                  <TagSelector.Tag
+                    key={tag.value}
+                    className="text-yellow-1 bg-yellow-bg-1"
+                    onClick={() => {
+                      setSelectedCategories(tag);
+                    }}>
+                    {tag.value}
+                  </TagSelector.Tag>
+                ))}
+              </TagSelector.TagList>
+            </div>
+          </TagSelector.Content>
+        </TagSelector>
+
+        <TagSelector
+          disabled={selectedTags.length === 3}
+          classNames={{ base: 'px-80', content: 'h-264', trigger: 'hover:bg-neutral-1' }}>
+          <TagSelector.Title>태그</TagSelector.Title>
+
+          <TagSelector.Trigger>
+            <If condition={!selectedTags.length}>태그를 선택해주세요</If>
+            <If condition={!!selectedTags.length}>
+              <ul className="flex gap-8">
+                {selectedTags.map((tag) => (
+                  <TagSelector.RemovalbleTag
+                    key={tag.value}
+                    className={cn(
+                      tag.type === 'ability' && 'text-[#418CC3] bg-[#E8F1FF]',
+                      tag.type === 'personality' && 'text-[#9C6BB3] bg-[#F1E8FF]',
+                    )}
+                    color={tag.type === 'ability' ? '#418CC3' : '#9C6BB3'}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      setSelectedTags((prev) => prev.filter(({ value }) => value !== tag.value));
+                    }}>
+                    <li>{tag.value}</li>
+                  </TagSelector.RemovalbleTag>
+                ))}
+              </ul>
+            </If>
+          </TagSelector.Trigger>
+
+          <TagSelector.Content>
+            <div className="px-16 pt-16 pb-24">
+              <TagSelector.Notice>최대 3개까지 설정 가능해요!</TagSelector.Notice>
+
+              <TagSelector.TagList title="역량 태그">
+                {abilityTags.map((tag) => (
+                  <TagSelector.Tag
+                    key={tag.value}
+                    className="text-[#418CC3] bg-[#E8F1FF]"
+                    onClick={() => {
+                      if (selectedTags.length < 3 && !selectedTags.find(({ value }) => value === tag.value)) {
+                        setSelectedTags((prev) => [...prev, tag]);
+                      }
+                    }}>
+                    {tag.value}
+                  </TagSelector.Tag>
+                ))}
+              </TagSelector.TagList>
+
+              <Spacing direction="column" size={20} />
+
+              <TagSelector.TagList title="인성 태그">
+                {personalityTags.map((tag) => (
+                  <TagSelector.Tag
+                    key={tag.value}
+                    className="text-[#9C6BB3] bg-[#F1E8FF]"
+                    onClick={() => {
+                      if (selectedTags.length < 3 && !selectedTags.find(({ value }) => value === tag.value)) {
+                        setSelectedTags((prev) => [...prev, tag]);
+                      }
+                    }}>
+                    {tag.value}
+                  </TagSelector.Tag>
+                ))}
+              </TagSelector.TagList>
+            </div>
+          </TagSelector.Content>
+        </TagSelector>
+
+        <Spacing direction="column" size={20} />
+
+        <div
+          style={{ scrollbarWidth: 'thin', scrollbarColor: '#DBDCDF' }}
+          className="px-80 h-[calc(100vh-264px)] overflow-x-hidden">
+          <Editor />
+        </div>
+      </section>
+
+      <AsyncBoundaryWithQuery>
+        <MemosFetcher cardId={cardId}>
+          <MemoContainer />
+        </MemosFetcher>
+      </AsyncBoundaryWithQuery>
+    </section>
+  );
+}
diff --git a/src/app/(sidebar)/write/page.tsx b/src/app/(sidebar)/write/page.tsx
index 08b45ef4..079f13a7 100644
--- a/src/app/(sidebar)/write/page.tsx
+++ b/src/app/(sidebar)/write/page.tsx
@@ -3,8 +3,8 @@
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import { Input } from '@/system/components/Input/Input';
-import { TagSelector } from './components/TagSelector/TagSelector';
-import { abilityTags, personalityTags, categoryTags, tags, categories } from './components/TagSelector/constants';
+// import { TagSelector } from './components/TagSelector/TagSelector';
+// import { abilityTags, personalityTags, categoryTags, tags, categories } from './components/TagSelector/constants';
 import { If } from '@/system/utils/If';
 import { cn } from '@/utils';
 import { Spacing } from '@/system/utils/Spacing';
@@ -16,6 +16,8 @@ import {
   DropdownMenuTrigger,
 } from '@/system/components/DropdownMenu/DropdownMenu';
 import MemoContainer from './components/MemoContainer/MemoContainer';
+import { TagSelector } from './[id]/components/TagSelector/TagSelector';
+import { abilityTags, personalityTags, categoryTags, tags, categories } from './[id]/components/TagSelector/constants';
 
 const Editor = dynamic(() => import('@/components/Editor/Editor').then(({ Editor }) => Editor), { ssr: false });