diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
index 725e9e4..d5841ad 100644
--- a/.github/workflows/cicd.yml
+++ b/.github/workflows/cicd.yml
@@ -20,6 +20,9 @@ jobs:
           echo "API_HOST=${{ vars.API_HOST }}" >> .env
           echo "NODE_ENV=${{ vars.NODE_ENV }}" >> .env
           echo "NEXT_PUBLIC_GA_ID=${{ secrets.PUBLIC_GA_ID }}" >> .env
+          echo "AUTH_KAKAO_ID=${{secrets.AUTH_KAKAO_ID}}" >> .env
+          echo "AUTH_KAKAO_SECRET=${{secrets.AUTH_KAKAO_SECRET}}" >> .env
+          echo "AUTH_SECRET=${{secrets.AUTH_SECRET}}" >> .env
       - name: Build docker image
         run: docker build -t ${{ vars.DOCKER_IMAGE }} .
       - name: Login to DockerHub
diff --git a/public/icons/arrow_down.svg b/public/icons/arrow_down.svg
new file mode 100644
index 0000000..f1d9ce2
--- /dev/null
+++ b/public/icons/arrow_down.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="arrow_back_ios" d="M9.9879 8.275L17.3379 0.924999C17.5879 0.674999 17.8796 0.554166 18.2129 0.562499C18.5462 0.570832 18.8379 0.699999 19.0879 0.949999C19.3379 1.2 19.4629 1.49167 19.4629 1.825C19.4629 2.15833 19.3379 2.45 19.0879 2.7L11.4129 10.4C11.2129 10.6 10.9879 10.75 10.7379 10.85C10.4879 10.95 10.2379 11 9.9879 11C9.7379 11 9.4879 10.95 9.2379 10.85C8.9879 10.75 8.7629 10.6 8.5629 10.4L0.862903 2.7C0.612903 2.45 0.49207 2.15417 0.500403 1.8125C0.508736 1.47083 0.637903 1.175 0.887903 0.925C1.1379 0.675 1.42957 0.55 1.7629 0.55C2.09624 0.55 2.3879 0.675 2.6379 0.925L9.9879 8.275Z" fill="#A3A3A3"/>
+</svg>
diff --git a/public/icons/arrow_up.svg b/public/icons/arrow_up.svg
new file mode 100644
index 0000000..6e4e3dc
--- /dev/null
+++ b/public/icons/arrow_up.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="arrow_back_ios" d="M9.9879 3.27505L17.3379 10.625C17.5879 10.875 17.8796 10.9959 18.2129 10.9875C18.5462 10.9792 18.8379 10.85 19.0879 10.6C19.3379 10.35 19.4629 10.0584 19.4629 9.72505C19.4629 9.39172 19.3379 9.10005 19.0879 8.85005L11.4129 1.15005C11.2129 0.950049 10.9879 0.800049 10.7379 0.700049C10.4879 0.600049 10.2379 0.550049 9.9879 0.550049C9.7379 0.550049 9.4879 0.600049 9.2379 0.700049C8.9879 0.800049 8.7629 0.950049 8.5629 1.15005L0.862903 8.85005C0.612903 9.10005 0.49207 9.39588 0.500403 9.73755C0.508736 10.0792 0.637903 10.375 0.887903 10.625C1.1379 10.875 1.42957 11 1.7629 11C2.09624 11 2.3879 10.875 2.6379 10.625L9.9879 3.27505Z" fill="#262626"/>
+</svg>
diff --git a/public/icons/check.svg b/public/icons/check.svg
new file mode 100644
index 0000000..fc2dcf7
--- /dev/null
+++ b/public/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 171 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M11.4147 0.77968C11.6641 1.04324 11.6613 1.46763 11.4084 1.72759L5.24286 8.06612C4.80328 8.51803 4.10367 8.5399 3.6389 8.11626L0.619653 5.36417C0.352306 5.12047 0.325105 4.69702 0.558898 4.41836C0.792692 4.13969 1.19895 4.11134 1.46629 4.35503L4.4106 7.03881L10.5053 0.773143C10.7581 0.513192 11.1653 0.516118 11.4147 0.77968Z" fill="#0A0A0A"/>
+</svg>
diff --git a/src/app/(home)/components/TotalCount.tsx b/src/app/(home)/components/TotalCount.tsx
index 0f37ab0..13e489b 100644
--- a/src/app/(home)/components/TotalCount.tsx
+++ b/src/app/(home)/components/TotalCount.tsx
@@ -6,7 +6,7 @@ const TotalCount = async () => {
   if (!sharedCount) return null
 
   return (
-    <div className="text-center mb-2.5">
+    <div className="mb-2.5 text-center">
       지금까지
       <span className="font-semiBold">{sharedCount.toLocaleString()}개</span>의
       보드가 만들어졌어요!
diff --git a/src/app/mypage/leave/components/LeaveConfirmModal.tsx b/src/app/mypage/leave/components/LeaveConfirmModal.tsx
new file mode 100644
index 0000000..afdaf02
--- /dev/null
+++ b/src/app/mypage/leave/components/LeaveConfirmModal.tsx
@@ -0,0 +1,22 @@
+import Modal from '@/components/Modal'
+import TwoPolaroidsIcon from 'public/icons/twopolaroids.svg'
+
+interface LeaveConfirmModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+const LeaveConfirmModal = ({ isOpen, onClose }: LeaveConfirmModalProps) => {
+  const title = 'POLABO 탈퇴가 완료되었습니다.'
+  const content = '그동안 POLABO를\n이용해주셔서 감사합니다.'
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} closeOnOutsideClick={false}>
+      <Modal.CenterModal icon={<TwoPolaroidsIcon />}>
+        <Modal.Title>{title}</Modal.Title>
+        <Modal.Content>{content}</Modal.Content>
+        <Modal.CenterConfirm confirmText="확인" />
+      </Modal.CenterModal>
+    </Modal>
+  )
+}
+
+export default LeaveConfirmModal
diff --git a/src/app/mypage/leave/components/LeaveForm.tsx b/src/app/mypage/leave/components/LeaveForm.tsx
new file mode 100644
index 0000000..2c1fe04
--- /dev/null
+++ b/src/app/mypage/leave/components/LeaveForm.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import TextArea from '@/components/TextArea'
+import Button from '@/components/Button'
+import { useEffect, useState } from 'react'
+import Select from '@/components/Select'
+import { withdraw } from '@/lib'
+import { signOut } from 'next-auth/react'
+import LeaveConfirmModal from './LeaveConfirmModal'
+
+const WITHDRAW_TYPE = {
+  SELECT: '선택해주세요.',
+  UNUSED: '더 이상 이용하지 않아요.',
+  PRIVACY: '개인정보가 걱정돼요.',
+  DELETE_DATA: '제 데이터를 삭제하고 싶어요.',
+  NEW_ACCOUNT: '새로운 계정을 만들고 싶어요.',
+  ETC: '기타',
+}
+
+const LeaveForm = () => {
+  const [withdrawType, setWithdrawType] = useState<string>(WITHDRAW_TYPE.SELECT)
+  const [customReason, setCustomReason] = useState<string>('')
+  const [isFormValid, setIsFormValid] = useState<boolean>(false)
+  const [isLeaveConfirmModalOpen, setIsLeaveConfirmModalOpen] = useState(false)
+  const errorMessage =
+    customReason.length > 50 ? '50자까지 입력 가능합니다.' : ''
+  const isCustomReasonValid = customReason && !errorMessage
+
+  useEffect(() => {
+    if (withdrawType === WITHDRAW_TYPE.SELECT) {
+      setIsFormValid(false)
+    } else if (withdrawType === WITHDRAW_TYPE.ETC && !isCustomReasonValid) {
+      setIsFormValid(false)
+    } else {
+      setIsFormValid(true)
+    }
+  }, [withdrawType, customReason])
+
+  const submit = async () => {
+    if (!isFormValid) {
+      return
+    }
+
+    await withdraw({
+      type: withdrawType,
+      reason: customReason,
+    })
+
+    setIsLeaveConfirmModalOpen(true)
+  }
+
+  const onCloseLeaveConfirmModal = () => {
+    signOut({ callbackUrl: '/' })
+  }
+
+  return (
+    <form className="flex flex-1 flex-col justify-between">
+      <div className="flex flex-col gap-8">
+        <Select
+          value={withdrawType}
+          options={Object.values(WITHDRAW_TYPE)}
+          onSelect={setWithdrawType}
+        />
+        {withdrawType === WITHDRAW_TYPE.ETC && (
+          <TextArea
+            placeholder="이유를 입력해주세요."
+            value={customReason}
+            setValue={setCustomReason}
+            description={`${customReason.length}/50`}
+            hasError={!!errorMessage}
+            errorMessage={errorMessage}
+          />
+        )}
+      </div>
+      <Button
+        size="lg"
+        onClick={submit}
+        disabled={!isFormValid}
+        className="w-full"
+      >
+        탈퇴하기
+      </Button>
+      <LeaveConfirmModal
+        isOpen={isLeaveConfirmModalOpen}
+        onClose={onCloseLeaveConfirmModal}
+      />
+    </form>
+  )
+}
+
+export default LeaveForm
diff --git a/src/app/mypage/leave/components/Title.tsx b/src/app/mypage/leave/components/Title.tsx
new file mode 100644
index 0000000..175f627
--- /dev/null
+++ b/src/app/mypage/leave/components/Title.tsx
@@ -0,0 +1,7 @@
+import { ReactNode } from 'react'
+
+const Title = ({ children }: { children: ReactNode }) => {
+  return <h1 className="mb-3.5 text-xl font-semiBold">{children}</h1>
+}
+
+export default Title
diff --git a/src/app/mypage/leave/page.tsx b/src/app/mypage/leave/page.tsx
index c00092d..7b2d344 100644
--- a/src/app/mypage/leave/page.tsx
+++ b/src/app/mypage/leave/page.tsx
@@ -1,13 +1,23 @@
 import Header from '@/components/Header'
+import LeaveForm from '@/app/mypage/leave/components/LeaveForm'
+import Title from './components/Title'
 
 const Page = () => {
+  const leaveCheckTitle = '탈퇴전 꼭 확인해주세요.'
+  const leaveReasonTitle = '탈퇴하려는 이유를 알려주세요.'
+  const leaveDescription =
+    '계정을 삭제하면 복구가 불가능하며, 같은 계정으로\n재가입이 어려워요. 회원정보 및 보드가 모두\n삭제되며, 삭제된 데이터는 복구가 불가능해요.'
+
   return (
-    <div className="min-h-dvh">
+    <div className="flex h-dvh flex-col bg-gray-50">
       <Header title="탈퇴하기" leftButton={<Header.BackButton />} />
-      <div>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
-        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
-        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      <div className="relative flex flex-1 flex-col px-8 pb-8 pt-9">
+        <Title>{leaveCheckTitle}</Title>
+        <div className="mb-9 whitespace-pre text-sm text-gray-700">
+          {leaveDescription}
+        </div>
+        <Title>{leaveReasonTitle}</Title>
+        <LeaveForm />
       </div>
     </div>
   )
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index ea5d4b0..fb35115 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -16,7 +16,7 @@ const Header = ({
 }: HeaderProps) => {
   return (
     <>
-      <header className="fixed grid h-16 w-full max-w-md grid-cols-3 justify-between bg-gray-0 p-5 shadow-header">
+      <header className="fixed z-10 grid h-16 w-full max-w-md grid-cols-3 justify-between bg-gray-0 p-5 shadow-header">
         <div className="justify-self-start">{leftButton}</div>
         <div className="justify-self-center">
           <div className="text-center text-md font-semiBold leading-6">
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 33db0bc..f2969ee 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -32,7 +32,7 @@ const ModalOverlay = ({
 
   return (
     <div
-      className={`fixed inset-0 flex items-center justify-center bg-gray-900/60 ${
+      className={`fixed inset-0 z-20 flex items-center justify-center bg-gray-900/60 ${
         isVisible ? 'opacity-100' : 'opacity-0'
       }`}
       onClick={handleClick}
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
new file mode 100644
index 0000000..79c4556
--- /dev/null
+++ b/src/components/Select/index.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import ArrowUpIcon from 'public/icons/arrow_up.svg'
+import ArrowDownIcon from 'public/icons/arrow_down.svg'
+import CheckIcon from 'public/icons/check.svg'
+import { useState } from 'react'
+
+interface SelectOptionProps {
+  text: string
+  selected: boolean
+  onSelect: (value: string) => void
+}
+
+const SelectOption = ({ text, selected, onSelect }: SelectOptionProps) => {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(text)}
+      className="ml-1.5 grid grid-cols-[13px_minmax(0,1fr)] items-center justify-items-start gap-1 border-b-[0.5px] border-b-gray-200 py-1.5 text-sm active:bg-gray-100"
+    >
+      {selected ? <CheckIcon /> : <div />}
+      {text}
+    </button>
+  )
+}
+
+interface SelectProps {
+  value: string
+  options: string[]
+  onSelect: (value: string) => void
+}
+
+const Select = ({ value, options, onSelect }: SelectProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onSelectItem = (selectedValue: string) => {
+    onSelect(selectedValue)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="relative">
+      <button
+        className={`flex h-12 w-full items-center justify-between rounded-md border ${isOpen ? 'border-gray-400' : 'border-gray-800'} px-3.5`}
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <span>{value}</span>
+        {isOpen ? <ArrowDownIcon /> : <ArrowUpIcon />}
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 top-12 z-10 mt-1 flex w-full flex-col rounded-md border border-gray-400 bg-gray-0">
+          {options.map((option) => (
+            <SelectOption
+              key={option}
+              text={option}
+              selected={value === option}
+              onSelect={onSelectItem}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Select
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
new file mode 100644
index 0000000..617bd6d
--- /dev/null
+++ b/src/components/TextArea/index.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { ChangeEvent, useRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+interface TextInputProps {
+  value: string
+  setValue: (value: string) => void
+  hasError: boolean
+  description: string
+  errorMessage: string
+  placeholder: string
+}
+
+const TextInput = ({
+  value,
+  setValue,
+  hasError,
+  description,
+  errorMessage,
+  placeholder,
+}: TextInputProps) => {
+  const borderClass = twMerge(
+    'flex items-center mb-2 border-b ',
+    hasError ? 'border-negative' : 'border-gray-950',
+  )
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  return (
+    <div className={`w-full ${hasError ? 'text-negative' : ''}`}>
+      <div className={borderClass}>
+        <textarea
+          placeholder={placeholder}
+          ref={textareaRef}
+          rows={1}
+          value={value}
+          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+            if (textareaRef.current) {
+              textareaRef.current.style.height = 'auto'
+              textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
+            }
+            setValue(e.target.value)
+          }}
+          className="w-full resize-none overflow-y-hidden bg-transparent p-1 outline-none"
+        />
+      </div>
+      <div className="text-right text-xs">
+        {hasError ? errorMessage : description}
+      </div>
+    </div>
+  )
+}
+
+export default TextInput
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 9f6a8cc..d272d7c 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -2,3 +2,4 @@ export * from './board'
 export * from './file'
 export * from './polaroid'
 export * from './auth'
+export * from './user'
diff --git a/src/lib/api/user.ts b/src/lib/api/user.ts
index 7af2c1c..a64176e 100644
--- a/src/lib/api/user.ts
+++ b/src/lib/api/user.ts
@@ -1,7 +1,14 @@
-import { put } from './base'
+import { put } from '@/lib/api/base'
+import { WithdrawUserPayload } from '@/types'
 
-export const changeNickname = async (nickName: string): Promise<void> => {
-  await put('/api/v1/user/nickname', {
+export const withdraw = async (body: WithdrawUserPayload) => {
+  return put('/api/v1/user/withdraw', {
+    body: JSON.stringify(body),
+  })
+}
+
+export const changeNickname = async (nickName: string) => {
+  return put('/api/v1/user/nickname', {
     body: JSON.stringify({ nickName }),
   })
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 0a38bec..3ae1f14 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,3 +2,4 @@ export * from './board'
 export * from './polaroid'
 export * from './file'
 export * from './auth'
+export * from './user'
diff --git a/src/types/user.ts b/src/types/user.ts
new file mode 100644
index 0000000..4fec770
--- /dev/null
+++ b/src/types/user.ts
@@ -0,0 +1,4 @@
+export type WithdrawUserPayload = {
+  type: string
+  reason: string
+}