From 740acb21d3a0274d4efb5d929b451e4bb67fb8e9 Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Fri, 14 Aug 2026 21:04:46 +0900
Subject: [PATCH 1/9] onboarding pages and components

---
 .../onboarding/OnboardingComponent1.tsx       |  39 +++++++
 .../onboarding/OnboardingComponent2.tsx       |  50 +++++++++
 .../onboarding/OnboardingComponent3.tsx       | 105 ++++++++++++++++++
 .../onboarding/OnboardingComponentChange.tsx  |  11 ++
 .../onboarding/OnboardingHeader.tsx           |  38 +++++++
 src/pages/Onboarding.tsx                      |  32 ++++++
 6 files changed, 275 insertions(+)
 create mode 100644 src/components/onboarding/OnboardingComponent1.tsx
 create mode 100644 src/components/onboarding/OnboardingComponent2.tsx
 create mode 100644 src/components/onboarding/OnboardingComponent3.tsx
 create mode 100644 src/components/onboarding/OnboardingComponentChange.tsx
 create mode 100644 src/components/onboarding/OnboardingHeader.tsx
 create mode 100644 src/pages/Onboarding.tsx

diff --git a/src/components/onboarding/OnboardingComponent1.tsx b/src/components/onboarding/OnboardingComponent1.tsx
new file mode 100644
index 0000000..87b24ab
--- /dev/null
+++ b/src/components/onboarding/OnboardingComponent1.tsx
@@ -0,0 +1,39 @@
+export default function OnboardingComponent1() {
+    
+  return (
+    <div>
+      {/* nine blocks */}
+      <section className="mb-[23px]">
+        <div className="h-[34px]">
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-growth` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-stability` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-autonomy` }}></div>
+        </div>
+        <div className="h-[34px]">
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-connection` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-recognition` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-fun` }}></div>
+        </div>
+        <div className="h-[34px]">
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-efficiency` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-meaning` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
+          style={{ backgroundColor: `var(--color-responsibility` }}></div>
+        </div>
+      </section>
+      <section>
+        {/* content */}
+        <div className="text-[32px] font-[800] mb-[12px]">가치관을 묻지 않아요</div>
+        <div className="text-15px] font-[400]">대신 지금 고민 중인 선택 하나만 물어볼게요.<br/>'당신의 가치'는 무엇인가는 묻지 않지만,<br/>구체적인 갈림길 앞에서는 누구나 이유를 둘 수 있으니까요.</div>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/onboarding/OnboardingComponent2.tsx b/src/components/onboarding/OnboardingComponent2.tsx
new file mode 100644
index 0000000..3948227
--- /dev/null
+++ b/src/components/onboarding/OnboardingComponent2.tsx
@@ -0,0 +1,50 @@
+export default function OnboardingComponent2() {
+  return (
+    <div>
+      <h1 className="text-[32px] font-[800] text-[#201E1D] mb-[38px] ">고르고, 이유를 남기면</h1>
+      <section>
+        <div className="h-[64px]">
+          <div className="w-[10px] h-[64px] inline-block mr-[14px]">
+            <div className="w-[10px] h-[10px] bg-[#3E2723]"></div>
+            <div className="w-[2px] h-[54px] bg-[#3e2723] opacity-[22%] ml-[4px]"></div>
+          </div>
+          <div className="inline-block align-top">
+            <h3 className="text-[15px] font-[600] text-[#201E1D]">고민</h3>
+            <p className="text-[13px] font-[400] text-[#2A1F1C8C]">지금 하는 갈림길 하나를 이름 붙인다</p>
+          </div>
+        </div>
+        <div className="h-[64px]">
+          <div className="w-[10px] h-[64px] inline-block mr-[14px]">
+            <div className="w-[10px] h-[10px] bg-[#3E2723]"></div>
+            <div className="w-[2px] h-[54px] bg-[#3e2723] opacity-[22%] ml-[4px]"></div>
+          </div>
+          <div className="inline-block align-top">
+            <h3 className="text-[15px] font-[600] text-[#201E1D]">오늘의 판단</h3>
+            <p className="text-[13px] font-[400] text-[#2A1F1C8C]">오늘, 어느 쪽으로 마음이 갔는지</p>
+          </div>
+        </div>
+        <div className="h-[64px]">
+          <div className="w-[10px] h-[64px] inline-block mr-[14px]">
+            <div className="w-[10px] h-[10px] bg-[#3E2723]"></div>
+            <div className="w-[2px] h-[54px] bg-[#3e2723] opacity-[22%] ml-[4px]"></div>
+          </div>
+          <div className="inline-block align-top">
+            <h3 className="text-[15px] font-[600] text-[#201E1D]">이유</h3>
+            <p className="text-[13px] font-[400] text-[#2A1F1C8C]">한 줄이면 충분하다</p>
+          </div>
+        </div>
+        <div className="h-[64px]">
+          <div className="w-[10px] h-[64px] inline-block mr-[14px]">
+            <div className="w-[10px] h-[10px] bg-[#3E2723]"></div>
+            <div className="w-[2px] h-[54px] bg-[#3e2723] opacity-[22%] ml-[4px]"></div>
+          </div>
+          <div className="inline-block align-top">
+            <h3 className="text-[15px] font-[600] text-[#201E1D]">가치</h3>
+            <p className="text-[13px] font-[400] text-[#2A1F1C8C]">가장 가까운 것 하나만 고른다</p>
+          </div>
+        </div>
+      </section>
+      <p className="text-[13px] font-[400] text-[#2A1F1C8C] mt-[15px]">쌓일수록, 당신의 선택이 보여요.</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/onboarding/OnboardingComponent3.tsx b/src/components/onboarding/OnboardingComponent3.tsx
new file mode 100644
index 0000000..51b8227
--- /dev/null
+++ b/src/components/onboarding/OnboardingComponent3.tsx
@@ -0,0 +1,105 @@
+import { useState, type ChangeEvent } from 'react'
+
+import RecordValueButton from '@/components/common/button/RecordValueButton'
+import TextArea from '@/components/common/input/TextArea'
+import CategoryButton from '@/components/common/button/CategoryButton'
+
+import { VALUE_LABELS, type ValueKey } from '@/constants/insights'
+import { VALUE_DESCRIPTIONS } from '@/constants/values'
+
+
+
+const VALUE_KEYS = Object.keys(VALUE_LABELS) as ValueKey[]
+
+const CATEGORY_OPTIONS = [
+  { value: 'work', title: '일·진로', description: '취업, 이직, 업무 판단' },
+  {
+    value: 'relationship',
+    title: '관계',
+    description: '친구, 연인, 가족, 동료',
+  },
+  { value: 'money', title: '돈', description: '소비, 저축, 투자' },
+  { value: 'health', title: '건강·몸', description: '운동, 수면, 컨디션' },
+  { value: 'self', title: '나 자신', description: '성격, 원칙, 새로운 시도' },
+  { value: 'etc', title: '기타', description: '위 어디에도 해당 없음' },
+] as const
+
+type CategoryValue = (typeof CATEGORY_OPTIONS)[number]['value']
+
+
+export default function OnboardingComponent3() {
+
+  const [topic, setTopic] = useState('');
+  const [selectedValue, setSelectedValue] = useState<ValueKey | null>(null)
+  const [selectedCategory, setSelectedCategory] =
+    useState<CategoryValue | null>(null)
+    
+  return (
+    <>
+      <div>
+        <h1 className="text-[32px] font-[800] text-[#201E1D] mb-[13px] ">지금 고민,<br/>하나씩 적어볼까요?</h1>
+        <p className="text-[13px] font-[400] text-[#2A1F1C8C] mb-[20px]">아직 연습이예요. 편하게 가볍게 한 번 써볼까요?</p>
+        <div className="w-[344px] h-[64px] px-[16px] py-[14px] bg-[#DDF0FA] text-[12px] font-[400] text-[#201E1D] mb-[20px]">고민은 취업, 관계, 돈, 건강처럼 <b>영역</b>으로 나눠서 적어볼 수 있어요. 아래에서 골라보세요.</div>
+      </div>
+      <section className="flex w-[352px] flex-col gap-5 mb-[20px]">
+        <TextArea
+          label="무슨 고민인가요?"
+          placeholder="예: A사 vs B사"
+          value={topic}
+          onChange={(e) => setTopic(e.target.value)}
+          maxLength={50}
+        />
+      </section>
+      <section className="flex w-[352px] flex-col gap-3 mb-[20px]">
+        <h2 className="text-[13px] text-[#2A1F1C]/70">이 고민은 어떤 영역인가요?</h2>
+        <div className="flex flex-col gap-2">
+          {CATEGORY_OPTIONS.map((option) => (
+            <CategoryButton
+              key={option.value}
+              title={option.title}
+              description={option.description}
+              isSelected={selectedCategory === option.value}
+              onClick={() => setSelectedCategory(option.value)}
+            />
+          ))}
+        </div>
+      </section>
+      <section className="flex w-[352px] flex-col gap-5 mb-[20px]">
+        <TextArea
+          label="오늘, 어떤 판단을 내렸나요?"
+          placeholder="예: 아직 못 정함/ A로 마음이 기움"
+          value={topic}
+          onChange={(e) => setTopic(e.target.value)}
+          maxLength={50}
+        />
+      </section>
+      <div className="w-[344px] h-[64px] px-[16px] py-[14px] bg-[#DDF0FA] text-[12px] font-[400] text-[#201E1D] mb-[20px]">이유는 '성장', '안정', '재미'처럼 9가지 <b>가치</b> 중 가장 가까운 하나로 정리돼요.</div>
+      
+      <section className="flex w-[352px] flex-col gap-5 mb-[20px]">
+        <TextArea
+          label="그건 왜인가요?"
+          placeholder="한 줄이면 충분해요"
+          value={topic}
+          onChange={(e) => setTopic(e.target.value)}
+          maxLength={100}
+          rows={3}
+        />
+      </section>
+      <section className="flex w-[352px] flex-col gap-3 mb-[20px]">
+        <h2 className="text-[13px] text-[#2A1F1C]/70">방금 그 이유, 가장 가까운 하나는?</h2>
+        <div className="flex flex-col gap-2">
+          {VALUE_KEYS.map((key) => (
+            <RecordValueButton
+              key={key}
+              valueKey={key}
+              title={VALUE_LABELS[key]}
+              description={VALUE_DESCRIPTIONS[key]}
+              isSelected={selectedValue === key}
+              onClick={() => setSelectedValue(key)}
+            />
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/onboarding/OnboardingComponentChange.tsx b/src/components/onboarding/OnboardingComponentChange.tsx
new file mode 100644
index 0000000..4b7119f
--- /dev/null
+++ b/src/components/onboarding/OnboardingComponentChange.tsx
@@ -0,0 +1,11 @@
+import OnboardingComponent1 from '@/components/onboarding/OnboardingComponent1'
+import OnboardingComponent2 from '@/components/onboarding/OnboardingComponent2'
+import OnboardingComponent3 from '@/components/onboarding/OnboardingComponent3'
+
+export default function OnboardingComponentChange(props : { pageNumber : number }) {
+  switch(props.pageNumber){
+    case 1: return <OnboardingComponent1 />
+    case 2: return <OnboardingComponent2 />
+    case 3: return <OnboardingComponent3 />
+  }
+}
\ No newline at end of file
diff --git a/src/components/onboarding/OnboardingHeader.tsx b/src/components/onboarding/OnboardingHeader.tsx
new file mode 100644
index 0000000..735fc6e
--- /dev/null
+++ b/src/components/onboarding/OnboardingHeader.tsx
@@ -0,0 +1,38 @@
+export default function OnboardingHeader(props: { pageNumber:number; }) {
+  {/*colored block numbers change by pageNumber */}
+  switch(props.pageNumber){
+    case 1: 
+    {/*on pageNumber == 1*/}
+      return (
+        <header className="h-[31px] grow-0 px-[28px]">
+          <div className="flex flex-row items-end h-[100%]">
+            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
+            <div className="h-[3px] w-[32px] bg-[#DDF0FA] mr-[8px]"/>
+            <div className="h-[3px] w-[32px] bg-[#DDF0FA] mr-[8px]"/>
+          </div>
+        </header>
+      );
+    case 2:
+    {/*on pageNumber == 2*/}
+      return (
+        <header className="h-[31px] grow-0 px-[28px]">
+          <div className="flex flex-row items-end h-[100%]">
+            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
+            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
+            <div className="h-[3px] w-[32px] bg-[#DDF0FA] mr-[8px]"/>
+          </div>
+        </header>
+      );
+    case 3:
+    {/*on pageNumber == 3*/}
+      return (
+        <header className="h-[31px] grow-0 px-[28px]">
+          <div className="flex flex-row items-end h-[100%]">
+            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
+            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
+            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
+          </div>
+        </header>
+      );
+  }
+}
\ No newline at end of file
diff --git a/src/pages/Onboarding.tsx b/src/pages/Onboarding.tsx
new file mode 100644
index 0000000..838992d
--- /dev/null
+++ b/src/pages/Onboarding.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import OnboardingComponentChange from '@/components/onboarding/OnboardingComponentChange'
+import OnboardingHeader from '@/components/onboarding/OnboardingHeader'
+
+export default function Onboarding () {
+
+  {/*onboarding page number*/}
+  const [pageNumber, setPageNumber] = useState(1);
+
+  {/*page move function*/}
+  const pageMove = () => {
+    if(pageNumber <= 2)
+      setPageNumber(pageNumber => (pageNumber + 1));
+  }
+
+  return (
+    <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[34px]">
+      {/* onboarding header*/}
+      <OnboardingHeader pageNumber={pageNumber} />
+      <div className="grow-1 flex flex-col justify-between px-[28px] py-[48px]">
+        {/* onboarding contents, change by pageNumber*/}
+        <OnboardingComponentChange pageNumber={pageNumber}/>
+
+        {/*bottom buttons*/}
+        <div className="flex flex-row justify-between">
+          <button className="w-[84px] h-[43px] rounded-[9px] text-[14px] font-[800] text-[#3E2723]">건너뛰기</button>
+          <button onClick={pageMove} className="w-[84px] h-[43px] rounded-[9px] text-[14px] font-[800] text-[#E1F5FE] bg-[#3E2723]">다음</button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From d4c7314823d5f8f34843c2eb5a052ea0b3f1abc2 Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Fri, 14 Aug 2026 21:42:47 +0900
Subject: [PATCH 2/9] login page and image files

---
 src/assets/Exclamation.png | Bin 0 -> 956 bytes
 src/assets/LayerLogo.png   | Bin 0 -> 22892 bytes
 src/pages/Login.tsx        |  54 +++++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 src/assets/Exclamation.png
 create mode 100644 src/assets/LayerLogo.png
 create mode 100644 src/pages/Login.tsx

diff --git a/src/assets/Exclamation.png b/src/assets/Exclamation.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b2f03690eb216a297cee3ffb59ca772666d7221
GIT binary patch
literal 956
zcmV;t14I0YP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=0009wNkl<Zcmd5<OH$iF5bYj|N@d3ploN#PQhb7P18#sh0cMd9
zXM<S;7f!0MPk?;`ZeS5eD!Z5yAWjfxkzZMwPS41aMz&<h4zBR3jAczv_nYZ20RI_S
zR*)LbDm?Pnc*hP1*ygP^zg`_L4_RUW5^ey|#lx$MvU&>%Xv2^FeO6pE3>ItxkN<Q*
z`aP_F@nBH`bh=Rk6i1~EXAzOXG1fnKVO|1sx^>2@wTz`ZR_ub110XRBwa8VFg587c
z8nQEpwAn2OP?i9-w$AyhI`R4vkQ(^v+JzaQ_nQt#tg`0aiKQ;SzS=7!Fm-a|0F$sc
zPhe?1t*t6=K1$t4#!aLMP?I-R;M{oSK`?q*6iB%wnvM+>*-w%1<pI9^)Se=sg#`;^
zEc{Q#(<FkgV5aQP$`fq3I(|efY5BW`afXWCeB(+nU-LJ1*)6?WU(1ujy6f@Po4!}|
zBzAE^K#Hm%!~v6^I^oWsp_L)nu!8%uM0NZiXHJ9)?(6yz5#Uqoq)s1D5AGdwZ2SnT
zYD9pIJI11i_1USm2*&Aqm%QMTo)CbihO7(A0vWn>KZytsCP75<29^e{o-xo)2$;1V
zX$Z>#3R8Cygo`ONh)Vnp3&I+I4<knGj&hxE#cIGGKYaep&t*W|v@kyN&>%n_A1RE3
zbU@|;4|FA~!CVkVtbvZTh|Z-U<UmPKbJI~DC=J|BHq#&>fM9kyyNuGXabaJ5=wzet
zCUl!Niye<{2?5JeY?7d=s5V*v0Z#mEm2jJy5fXS&d)EZCKZ!bqfTPRvEMUMb6+JyK
zKx*$4^lg~~N`P^xPulSrH-}Mh3ufC4M$hi09nWa<aZZG{0O^JyR{GR@Zo`7eFb<P#
zK2?a=FYVNIs#dE>tXE-P<0tGwHHetTC3Pm-eD+X!`l8Dlr-n+^ri(hI&Y%i#5Tlb`
zz#blctWL`3kL9gR6=c(chMM)&aG{!3RNHlhQ<)$f{$)??Q73<Motdh$|1rs$Z0A8Z
zQ6Gn{%@ZlWIFQC^RFa4`j2-wT+R^ZtFFFV40|%DR)04n8edRPxSzQZw+6l;I|6jll
eYfxnP!Qd}Q!CWjd`VV~o0000<MNUMnLSTY5+oZ_=

literal 0
HcmV?d00001

diff --git a/src/assets/LayerLogo.png b/src/assets/LayerLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b077c9547793fa2c7708ca90d29a237ed8b621e
GIT binary patch
literal 22892
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
Lo+IR|+uZseQVo+H

literal 0
HcmV?d00001

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..e0a6e1e
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,54 @@
+import { useState, type ChangeEvent } from 'react'
+
+import LayerLogo from '@/assets/LayerLogo.png'
+import Exclamation from '@/assets/Exclamation.png'
+import Input from '@/components/common/input/Input'
+
+import {
+  validateNickname,
+  validatePassword,
+  validatePasswordConfirm,
+  validateUserId,
+} from '@/utils/validation'
+
+export default function Login () {
+
+  const [id] = useState('')
+  const [password, setPassword] = useState('')
+
+  return (
+    <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[74px] z-1">
+      <header className="w-[344px] h-[74px] mb-[5px] px-[28px]">
+        <img src={LayerLogo} alt="no image" className="h-[48px]" />
+        <p className="text-[13px] font-[400] text-[#2A1F1C8C]">당신이 실제로 골라온 것을 봅니다.</p>
+      </header>
+      <div className="grow-1 flex flex-col justify-between px-[28px] py-[48px]">
+        <div>
+          <section className="flex w-[344px] flex-col gap-5 mb-[28px]">
+            <Input
+              label="아이디"
+              placeholder="아이디"
+              value={id}
+            />
+
+            <Input
+              label="비밀번호"
+              placeholder="비밀번호"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              {...validatePassword(password)}
+            />
+          </section>
+          <button className="w-[100%] h-[46px] rounded-[9px] text-[14px] font-[800] text-[#E1F5FE] bg-[#3E2723]">로그인</button>
+        </div>
+        <center><button className="w-[159px] h-[18px] rounded-[9px] text-[13px] font-[800] text-[#3E2723]">계정이 없으신가요? 회원가입</button></center>
+      </div>
+      {/* alert tab */}
+      <div className="invisible fixed left-[0] bottom-[28px] w-[calc(100%-48px)] h-[48px] px-[16px] py-[14px] mx-[24px] rounded-[9px]  bg-[#3E2723]">
+        <img className="inline-block align-baseline w-[16px] h-[16px]" src={Exclamation} alt="" />
+        <p className="inline-block align-top text-[13px] font-[400] text-[#FFFFFF] ml-[10px]">모든 항목을 입력해주세요.</p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From a7fab5ad12277ebd284e77aa193f590d3167d0a3 Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Sat, 15 Aug 2026 00:52:31 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=EC=9E=91=EC=97=85=EB=AC=BC=20=EC=A0=84?=
 =?UTF-8?q?=EB=B6=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  12 +-
 package.json                                  |   2 +-
 src/App.tsx                                   |  10 +-
 src/assets/Archive.png                        | Bin 0 -> 495 bytes
 src/assets/Arrow.png                          | Bin 0 -> 313 bytes
 src/components/auth/AlertBox.tsx              |  16 +++
 .../onboarding/OnboardingComponent1.tsx       |  29 ++---
 .../onboarding/OnboardingComponent3.tsx       |   2 +-
 src/components/settings/DeleteAccount.tsx     |  22 ++++
 .../settings/DeleteAccountAlert.tsx           |  17 +++
 src/pages/Onboarding.tsx                      |   2 +-
 src/pages/RecordGuide.tsx                     |  92 +++++++++++++++
 src/pages/Register.tsx                        | 107 ++++++++++++++++++
 src/pages/Setting.tsx                         |  49 ++++++++
 14 files changed, 331 insertions(+), 29 deletions(-)
 create mode 100644 src/assets/Archive.png
 create mode 100644 src/assets/Arrow.png
 create mode 100644 src/components/auth/AlertBox.tsx
 create mode 100644 src/components/settings/DeleteAccount.tsx
 create mode 100644 src/components/settings/DeleteAccountAlert.tsx
 create mode 100644 src/pages/RecordGuide.tsx
 create mode 100644 src/pages/Register.tsx
 create mode 100644 src/pages/Setting.tsx

diff --git a/package-lock.json b/package-lock.json
index 7548edf..8ebd28d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "prettier": "^3.9.6",
         "typescript": "^6.0.3",
         "typescript-eslint": "^8.66.0",
-        "vite": "^8.2.0"
+        "vite": "^8.2.1"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -3214,15 +3214,15 @@
       }
     },
     "node_modules/vite": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.0.tgz",
-      "integrity": "sha512-pn+CFpM0lwDeKwmOq1ZaBK/9sjorZcgqxki6MbY/jPEVd9vichIlmlD4HmQ5wdP5EgqQCFRaACBxMC7uEGc6lQ==",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.1.tgz",
+      "integrity": "sha512-EU/eS7BH3XROHh2YnBefjM6DBKA6ZeMZEYQbj7NLWg5wHYlhB8B/Mayd5XsgWq+NFYccDOTemRpdETWR6Ka/lw==",
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.5",
-        "postcss": "^8.5.23",
-        "rolldown": "~1.2.0",
+        "postcss": "^8.5.25",
+        "rolldown": "~1.2.1",
         "tinyglobby": "^0.2.17"
       },
       "bin": {
diff --git a/package.json b/package.json
index 6418f97..ae4f9f3 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "prettier": "^3.9.6",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.66.0",
-    "vite": "^8.2.0"
+    "vite": "^8.2.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/src/App.tsx b/src/App.tsx
index 390b1a7..9d7b913 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,15 @@
+import Test1 from '@/pages/Test1'
 import Test2 from '@/pages/Test2'
+import Onboarding from '@/pages/Onboarding'
+import Login from '@/pages/Login'
+import Register from '@/pages/Register'
+import Setting from '@/pages/Setting'
+import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return <Test2 />
+  return (
+    <Onboarding />
+  );
 }
 
 export default App
diff --git a/src/assets/Archive.png b/src/assets/Archive.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a97c55f0a98ec2be27964dbb4194f3c3bef9a68
GIT binary patch
literal 495
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbBI14-?iy0WiR6&^0Gf3qFP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBK3|DzL`iUdT1k0gQ7VI5W_oVoyp7Y6fx5Ch
zT^vIy7~jrt^lNqyY5U)P#4NUuC1&OBvP|=$=2M(kq+f7e5Wb;&K{z1)LhRkr%<`g^
zT^B{(_BcEH1~228)p#Lg-_>UK6XJ3zd*m}DLauySG;{KTT2(LcS&0sR9?fsp&@K@?
z`@Ulh!vj98royt_+Nr1Y-ng$fSEv#)S|Q~9=}ECu+?Qu6Q&?svFBB1eetuDu1M{3d
zJ<dC~ub=1Comeqt=5iz5e-~%}u+=rveDu=3K_@@{{w-U_guC}=ZJy{i(<mZC!p);q
zFetGlL_$#%iCLC7eT`$i&3>`g?pYf||E^0ay?m~**XMxc{``l=SH5nZpDWAwPu=C=
z6?@r5Ze8xj_TLXQHd<H_+@V`MfsJp)#5*VYF3PF@@cLe*em7zIm6@G8`xkWPOm)j#
z*jc|x;N)@TwTIijy1y6O+fv^u!r1mjcGj<S=Z+OD(T`U%sqNfvv>|HY<F(tq)y_5A
ebYNBCABH!cSyF#&ZU_V8gTd3)&t;ucLK6Vj)y(q%

literal 0
HcmV?d00001

diff --git a/src/assets/Arrow.png b/src/assets/Arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..96d26e99462f84ddc9d7af60f886bd92220cde0b
GIT binary patch
literal 313
zcmeAS@N?(olHy`uVBq!ia0vp^+(0bM!3HGVG{0W}Qk(@Ik;M!QVyYm_=ozH)0Vv2=
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAfK<qHKHUqKdq!Zu_%?nEi*kgao)yh$v~Mc
zo-U3d6^y-;b_*Ud;AvA`y|8obB(?G$AuBJphE9pbX@VLHlUa9dXq>DkyQwm!;>e}=
zh)Z|B|E$@T8F=0LS;3Q2&ToDji#VOBnPA0y#7(%vSz^h$PfIvNcE3B+82HOgSVLE7
zjt<jascwhlVBr_PV^klq&l9OB{mtFqvUSVn<pPCV)282LKJ?5mk^7wPMXqf^Tbe32
zHOX&a+n2~a<I$!1Z4Hvsej7Jx9=R8v`kYZF*E`{q>>0M=&(GC<Tm-tG!PC{xWt~$(
F695mPbwL0C

literal 0
HcmV?d00001

diff --git a/src/components/auth/AlertBox.tsx b/src/components/auth/AlertBox.tsx
new file mode 100644
index 0000000..86d1b44
--- /dev/null
+++ b/src/components/auth/AlertBox.tsx
@@ -0,0 +1,16 @@
+export default function AlertBox(props: {isVisible : boolean}){
+  if(props.isVisible){
+    return (
+      <div className="fixed top-0 z-10 block w-[100%] h-[100%] bg-[#140B0A73]">
+        <div className="flex flex-col justify-around items-stretch h-[100%]">
+          <center>
+            <div className="w-[260px] h-[123px] rounded-[16px] p-[24px] bg-[#FFFFFF]">
+              <h2 className="text-left text-[15px] text-[#201E1D] font-[600] mb-[14px]">모든 항목을 입력해주세요.</h2>
+              <button className="text-[14px] text-[#E1F5FE] font-[800] w-[210px] h-[39px] rounded-[9px] bg-[#3E2723]">확인</button>
+            </div>
+          </center>
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/onboarding/OnboardingComponent1.tsx b/src/components/onboarding/OnboardingComponent1.tsx
index 87b24ab..6457771 100644
--- a/src/components/onboarding/OnboardingComponent1.tsx
+++ b/src/components/onboarding/OnboardingComponent1.tsx
@@ -5,34 +5,25 @@ export default function OnboardingComponent1() {
       {/* nine blocks */}
       <section className="mb-[23px]">
         <div className="h-[34px]">
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-growth` }}></div>
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-stability` }}></div>
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-autonomy` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-growth)]"></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-stability)]"></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-autonomy)]"></div>
         </div>
         <div className="h-[34px]">
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-connection` }}></div>
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-recognition` }}></div>
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-fun` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-connection)]"></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-recognition)]"></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-fun)]"></div>
         </div>
         <div className="h-[34px]">
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-efficiency` }}></div>
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-meaning` }}></div>
-          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px]"
-          style={{ backgroundColor: `var(--color-responsibility` }}></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-efficiency)]"></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-meaning)]"></div>
+          <div className="inline-block h-[28px] w-[28px] mr-[6px] mb-[6px] bg-[var(--color-responsibility)]"></div>
         </div>
       </section>
       <section>
         {/* content */}
         <div className="text-[32px] font-[800] mb-[12px]">가치관을 묻지 않아요</div>
-        <div className="text-15px] font-[400]">대신 지금 고민 중인 선택 하나만 물어볼게요.<br/>'당신의 가치'는 무엇인가는 묻지 않지만,<br/>구체적인 갈림길 앞에서는 누구나 이유를 둘 수 있으니까요.</div>
+        <div className="text-[15px] font-[400]">대신 지금 고민 중인 선택 하나만 물어볼게요.<br/>'당신의 가치'는 무엇인가는 묻지 않지만,<br/>구체적인 갈림길 앞에서는 누구나 이유를 둘 수 있으니까요.</div>
       </section>
     </div>
   );
diff --git a/src/components/onboarding/OnboardingComponent3.tsx b/src/components/onboarding/OnboardingComponent3.tsx
index 51b8227..a2af854 100644
--- a/src/components/onboarding/OnboardingComponent3.tsx
+++ b/src/components/onboarding/OnboardingComponent3.tsx
@@ -77,7 +77,7 @@ export default function OnboardingComponent3() {
       
       <section className="flex w-[352px] flex-col gap-5 mb-[20px]">
         <TextArea
-          label="그건 왜인가요?"
+          label="그건 왜인가요? "
           placeholder="한 줄이면 충분해요"
           value={topic}
           onChange={(e) => setTopic(e.target.value)}
diff --git a/src/components/settings/DeleteAccount.tsx b/src/components/settings/DeleteAccount.tsx
new file mode 100644
index 0000000..ae7d005
--- /dev/null
+++ b/src/components/settings/DeleteAccount.tsx
@@ -0,0 +1,22 @@
+export default function DeleteAccount(props: {isVisible : boolean}){
+  if(props.isVisible){
+    return (
+      <div className="fixed top-0 z-10 block w-[100%] h-[100%] bg-[#140B0A73]">
+        <div className="flex flex-col justify-around items-stretch h-[100%]">
+          <center>
+            <div className="w-[280px] h-[300px] rounded-[16px] p-[24px] bg-[#FFFFFF]">
+              <h2 className="text-left text-[16px] text-[#201E1D] font-[700] mb-[14px]">정말 탈퇴하시겠어요?</h2>
+              <p className="text-left text-[13px] text-[#2A1F1CCC] font-[400] mb-[14px]" >회원 탈퇴 시 아래 데이터가 모두 삭제됩니다.</p>
+              <p className="text-left text-[13px] text-[#201E1D] font-[400] mb-[14px]">&bull;&nbsp; 고민 및 기록 <br />&bull;&nbsp; 가치 분포 및 인사이트 <br />&bull;&nbsp; 계정 정보</p>
+              <p className="text-left text-[13px] text-[#2A1F1C99] font-[400] mb-[14px]">삭제된 데이터는 복구할 수 없습니다.</p>
+              <div>
+                <button className="border-[1px] border-[#201E1D66] font-[14px] text-[#2A1F1C] font-[800] w-[112px] h-[39px] rounded-[9px] bg-[#FFF] mr-[8px]">취소</button>
+                <button className="font-[14px] text-[#FFF] font-[800] w-[112px] h-[39px] rounded-[9px] bg-[#E5342A]">탈퇴하기</button>
+              </div>
+            </div>
+          </center>
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/settings/DeleteAccountAlert.tsx b/src/components/settings/DeleteAccountAlert.tsx
new file mode 100644
index 0000000..5a7cd76
--- /dev/null
+++ b/src/components/settings/DeleteAccountAlert.tsx
@@ -0,0 +1,17 @@
+export default function DeleteAccountAlert(props: {isVisible : boolean}){
+  if(props.isVisible){
+    return (
+      <div className="fixed top-0 z-10 block w-[100%] h-[100%] bg-[#140B0A73]">
+        <div className="flex flex-col justify-around items-stretch h-[100%]">
+          <center>
+            <div className="w-[280px] h-[180px] rounded-[16px] p-[24px] bg-[#FFFFFF]">
+              <h2 className="text-[15px] text-[#201E1D] font-[600] mb-[17px]">회원 탈퇴가 완료되었습니다.</h2>
+              <p className="text-[13px] text-[#2A1F1CCC] font-[400] mb-[30px]">그동안 Layer를 이용해주셔서 감사합니다.</p>
+              <button className="text-[14px] text-[#FFF] font-[800] w-[210px] h-[39px] rounded-[9px] bg-[#3E2723]">확인</button>
+            </div>
+          </center>
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/pages/Onboarding.tsx b/src/pages/Onboarding.tsx
index 838992d..ae1e73e 100644
--- a/src/pages/Onboarding.tsx
+++ b/src/pages/Onboarding.tsx
@@ -17,7 +17,7 @@ export default function Onboarding () {
     <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[34px]">
       {/* onboarding header*/}
       <OnboardingHeader pageNumber={pageNumber} />
-      <div className="grow-1 flex flex-col justify-between px-[28px] py-[48px]">
+      <div className="grow flex flex-col justify-between px-[28px] py-[48px]">
         {/* onboarding contents, change by pageNumber*/}
         <OnboardingComponentChange pageNumber={pageNumber}/>
 
diff --git a/src/pages/RecordGuide.tsx b/src/pages/RecordGuide.tsx
new file mode 100644
index 0000000..84480f2
--- /dev/null
+++ b/src/pages/RecordGuide.tsx
@@ -0,0 +1,92 @@
+import { useState, type ChangeEvent } from 'react'
+import Header from '@/components/common/header/Header'
+import BottomNav, {
+  type NavValue,
+} from '@/components/common/navigation/BottomNav'
+import Tab from '@/components/common/tab/Tab'
+import CategoryButton from '@/components/common/button/CategoryButton'
+import RecordValueButton from '@/components/common/button/RecordValueButton'
+
+import { VALUE_LABELS, type ValueKey } from '@/constants/insights'
+import { VALUE_DESCRIPTIONS } from '@/constants/values'
+
+
+const CATEGORY_OPTIONS = [
+  { value: 'work', title: '일·진로', description: '취업, 이직, 업무 판단' },
+  {
+    value: 'relationship',
+    title: '관계',
+    description: '친구, 연인, 가족, 동료',
+  },
+  { value: 'money', title: '돈', description: '소비, 저축, 투자' },
+  { value: 'health', title: '건강·몸', description: '운동, 수면, 컨디션' },
+  { value: 'self', title: '나 자신', description: '성격, 원칙, 새로운 시도' },
+  { value: 'etc', title: '기타', description: '위 어디에도 해당 없음' },
+] as const
+
+const TAB_ITEMS = [
+  { value: 'topic', label: '주제' },
+  { value: 'value', label: '가치' },
+] as const
+
+type CategoryValue = (typeof CATEGORY_OPTIONS)[number]['value']
+
+type TabValue = (typeof TAB_ITEMS)[number]['value']
+
+const VALUE_KEYS = Object.keys(VALUE_LABELS) as ValueKey[]
+
+export default function RecordGuide () {
+
+  const [activeTab, setActiveTab] = useState<TabValue>('topic')
+  const [selectedValue, setSelectedValue] = useState<ValueKey | null>(null)
+
+  const [selectedCategory, setSelectedCategory] =
+    useState<CategoryValue | null>(null)
+
+  return (
+    <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[34px] px-[24px]">
+      <Header
+        title="기록 가이드"
+        onBack={() => console.log('뒤로가기')}
+      />
+      <Tab items={TAB_ITEMS} value={activeTab} onChange={setActiveTab} />
+      
+      {activeTab === 'topic' ? 
+        <section className="flex w-[352px] flex-col gap-3">
+          {/*active tab selected*/}
+          <h2 className="text-[13px] text-[#2A1F1C]/70 mt-[17px] mb-[5px]">고민을 기록할 때 선택하는 주제예요.</h2>
+          <div className="flex flex-col gap-2">
+            {CATEGORY_OPTIONS.map((option) => (
+              <CategoryButton
+                key={option.value}
+                title={option.title}
+                description={option.description}
+                isSelected={selectedCategory === option.value}
+                onClick={() => setSelectedCategory(option.value)}
+              />
+            ))}
+          </div>
+        </section>
+
+        :
+
+        <section className="flex w-[352px] flex-col gap-3 mb-[20px]">
+          {/*vlaue tab selected*/}
+          <h2 className="text-[13px] text-[#2A1F1C]/70 mt-[17px] mb-[5px]">판단의 이유로 고를 수 있는 가치 축이예요.</h2>
+          <div className="flex flex-col gap-2">
+            {VALUE_KEYS.map((key) => (
+              <RecordValueButton
+                key={key}
+                valueKey={key}
+                title={VALUE_LABELS[key]}
+                description={VALUE_DESCRIPTIONS[key]}
+                isSelected={selectedValue === key}
+                onClick={() => setSelectedValue(key)}
+              />
+            ))}
+          </div>
+        </section>
+      }
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
new file mode 100644
index 0000000..83f5e17
--- /dev/null
+++ b/src/pages/Register.tsx
@@ -0,0 +1,107 @@
+import { useState, type ChangeEvent } from 'react'
+
+import LayerLogo from '../assets/LayerLogo.png'
+import Input from '@/components/common/input/Input'
+import IdInput from '@/components/auth/IdInput'
+import Header from '@/components/common/header/Header'
+import AlertBox from '@/components/auth/AlertBox'
+
+import {
+  validateNickname,
+  validatePassword,
+  validatePasswordConfirm,
+  validateUserId,
+} from '@/utils/validation'
+
+const TAKEN_IDS = ['admin', 'test']
+
+type DuplicateCheckResult = 'available' | 'unavailable' | null
+
+
+export default function Register () {
+
+  const [id] = useState('')
+  const [password, setPassword] = useState('')
+  
+  const [userId, setUserId] = useState('')
+  const [checkResult, setCheckResult] = useState<DuplicateCheckResult>(null)
+
+  const [passwordConfirm, setPasswordConfirm] = useState('')
+
+  const handleUserIdChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUserId(e.target.value)
+    setCheckResult(null) // 입력이 바뀌면 이전 확인 결과 무효화
+  }
+  
+  const idFormat = validateUserId(userId)
+  const idStatus = checkResult ?? idFormat.status
+  const idMessage =
+    checkResult === 'available'
+      ? '사용 가능한 아이디예요.'
+      : checkResult === 'unavailable'
+        ? '이미 사용 중인 아이디예요. 다시 입력해주세요.'
+        : idFormat.message
+
+  const handleCheckDuplicate = () => {
+    setCheckResult(TAKEN_IDS.includes(userId) ? 'unavailable' : 'available')
+  }
+
+  return (
+    <div className="w-[100%] h-[100%]">
+      <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[34px]">
+        <Header
+          title="회원가입"
+          onBack={() => console.log('뒤로가기')}
+        />
+        <div className="grow-1 flex flex-col justify-between px-[28px] py-[48px]">
+          <div>
+            <section className="flex w-[344px] flex-col gap-5 mb-[28px]">
+              <Input
+                label="아이디"
+                placeholder="아이디"
+                value={id}
+              />
+
+              <section className="flex w-[344px] flex-col gap-3">
+                <IdInput
+                  placeholder="아이디"
+                  value={userId}
+                  onChange={handleUserIdChange}
+                  status={idStatus}
+                  message={idMessage}
+                  onCheckDuplicate={handleCheckDuplicate}
+                />
+                <p className="text-[11px] text-gray-500">
+                  임시 확인용: admin, test 입력 시 중복 처리
+                </p>
+              </section>
+
+              <Input
+                label="비밀번호"
+                placeholder="비밀번호"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                {...validatePassword(password)}
+              />
+
+              <Input
+                label="비밀번호 확인"
+                placeholder="비밀번호 확인"
+                type="password"
+                value={passwordConfirm}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+                {...validatePasswordConfirm(password, passwordConfirm)}
+              />
+
+              <p className="text-[12px] font-[400] text-[#2A1F1C8C]">비밀번호를 잊으면 계정을 되찾을 수 없어요. 이메일은 받지 않아요.</p>
+            </section>
+            <button className="w-[100%] h-[46px] rounded-[9px] text-[14px] font-[800] text-[#E1F5FE] bg-[#3E2723]">회원가입</button>
+          </div>
+          <center><button className="w-[159px] h-[18px] rounded-[9px] text-[13px] font-[800] text-[#3E2723]">이미 계정이 있어요, 로그인</button></center>
+        </div>
+      </div>
+      <AlertBox isVisible={false}/>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
new file mode 100644
index 0000000..aa543ec
--- /dev/null
+++ b/src/pages/Setting.tsx
@@ -0,0 +1,49 @@
+import { useState, type ChangeEvent } from 'react'
+import Header from '@/components/common/header/Header'
+import BottomNav, {
+  type NavValue,
+} from '@/components/common/navigation/BottomNav'
+import DeleteAccount from '@/components/settings/DeleteAccount'
+import DeleteAccountAlert from '@/components/settings/DeleteAccountAlert'
+
+import Archive from '@/assets/Archive.png'
+import Arrow from '@/assets/Arrow.png'
+
+export default function Setting () {
+
+  const [activeNav, setActiveNav] = useState<NavValue>('setting')
+
+  return (
+    <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[34px]">
+      <Header
+        title="설정"
+      />
+      <div className="grow-1 flex flex-col justify-between px-[28px] pt-[8px]">
+        <div>
+          <div className="flex flex-row space-between items-center">
+            <section className="inline-block w-[100%] h-[75px] py-[16px] align-middle">
+              <div className="inline-block w-[36px] h-[36px] bg-[#DDF0FA] rounded-[9px] mr-[12px]"><img src={Archive} alt="no image" className="h-[18px] w-[18px] m-[9px]"/></div>
+              <div className="inline-block">
+                <h2 className="text-[14px] font-[600] text-[#201E1D] mb-[2px]">기록 가이드</h2>
+                <p className="text-[12px] font-[400] text-[#2A1F1C8C]">주제와 가치 설명 보기</p>
+              </div>
+            </section>
+            <button className="w-[16px] h-[16px]"><img src={Arrow} alt=""  className="w-[6px] h-[8px]"/></button>
+          </div>
+          <div className="w-[100%] h-[2px] bg-[#3E272338] my-[20px]"/>
+          <button className="w-[100%] h-[55px] text-[14px] text-left font-[400] text-[#201E1D] border-b-[1px] border-[#3E272338]">로그아웃</button>
+          <button className="w-[100%] h-[55px] text-[14px] text-left font-[400] text-[#2A1F1C99] border-b-[1px] border-[#3E272338]">회원탈퇴</button>
+        </div>
+        
+        <center><p className="text-[12px] font-[400] text-[#2A1F1C8C] mb-[48px]">Layer v1.0.0</p></center>
+      </div>
+      <footer className="flex w-[360px] flex-col gap-3 mx-[20px] mb-[20px]">
+        <BottomNav value={activeNav} onChange={setActiveNav} />
+      </footer>
+      {/* Account Delete tab */}
+      <DeleteAccount isVisible={false} />
+      {/* Account Delete tab */}
+      <DeleteAccountAlert isVisible={false} />
+    </div>
+  );
+}
\ No newline at end of file

From 277928de96642bac8bf2057740d69ba5eb24026f Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Sat, 15 Aug 2026 00:55:22 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=EC=9E=91=EC=97=85=EB=AC=BC=20=EC=A0=84?=
 =?UTF-8?q?=EB=B6=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 src/App.tsx  | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index ae4f9f3..6418f97 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "prettier": "^3.9.6",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.66.0",
-    "vite": "^8.2.1"
+    "vite": "^8.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/src/App.tsx b/src/App.tsx
index 9d7b913..232d736 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,9 +7,7 @@ import Setting from '@/pages/Setting'
 import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return (
-    <Onboarding />
-  );
+  return <Test2 />
 }
 
 export default App

From a6d41866cc8ac9972942103b89704cff76727d6d Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Tue, 18 Aug 2026 22:44:49 +0900
Subject: [PATCH 5/9] =?UTF-8?q?fixed:=20=EB=B2=84=ED=8A=BC=20=EB=B0=94?=
 =?UTF-8?q?=EA=BE=B8=EA=B8=B0=20=EC=88=98=EC=A0=95,=20component=20?=
 =?UTF-8?q?=EB=B3=80=EC=88=98=20page=EB=A1=9C=20=EB=B9=BC=EA=B8=B0,=20inpu?=
 =?UTF-8?q?t=EA=B0=92=20=EB=B3=80=EC=88=98=20=ED=95=98=EB=82=98=EC=98=80?=
 =?UTF-8?q?=EB=8D=98=EA=B1=B0=20=EC=84=B8=20=EA=B0=9C=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=ED=95=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  2 +-
 src/components/common/input/TextArea.tsx      |  2 +-
 .../onboarding/OnboardingComponent3.tsx       | 16 ++---
 .../onboarding/OnboardingComponentChange.tsx  | 19 +++++-
 src/pages/Onboarding.tsx                      | 58 ++++++++++++++++++-
 5 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 232d736..1ae0091 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Setting from '@/pages/Setting'
 import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return <Test2 />
+  return <Onboarding />
 }
 
 export default App
diff --git a/src/components/common/input/TextArea.tsx b/src/components/common/input/TextArea.tsx
index 21262f5..532cfa4 100644
--- a/src/components/common/input/TextArea.tsx
+++ b/src/components/common/input/TextArea.tsx
@@ -33,7 +33,7 @@ function TextArea({
       />
 
       <span className="self-end text-[11px] text-[#2A1F1C]/55">
-        {value.length} / {maxLength}
+        {value?.length} / {maxLength}
       </span>
     </div>
   )
diff --git a/src/components/onboarding/OnboardingComponent3.tsx b/src/components/onboarding/OnboardingComponent3.tsx
index a2af854..f2d0bef 100644
--- a/src/components/onboarding/OnboardingComponent3.tsx
+++ b/src/components/onboarding/OnboardingComponent3.tsx
@@ -1,5 +1,6 @@
 import { useState, type ChangeEvent } from 'react'
 
+import { onboardingComponentProps } from '@/pages/Onboarding'
 import RecordValueButton from '@/components/common/button/RecordValueButton'
 import TextArea from '@/components/common/input/TextArea'
 import CategoryButton from '@/components/common/button/CategoryButton'
@@ -26,13 +27,8 @@ const CATEGORY_OPTIONS = [
 
 type CategoryValue = (typeof CATEGORY_OPTIONS)[number]['value']
 
+export default function OnboardingComponent3({pageNumber, topic, setTopic, decision, setDecision, reason, setReason, selectedValue, setSelectedValue, selectedCategory, setSelectedCategory} : onboardingComponentProps) {
 
-export default function OnboardingComponent3() {
-
-  const [topic, setTopic] = useState('');
-  const [selectedValue, setSelectedValue] = useState<ValueKey | null>(null)
-  const [selectedCategory, setSelectedCategory] =
-    useState<CategoryValue | null>(null)
     
   return (
     <>
@@ -68,8 +64,8 @@ export default function OnboardingComponent3() {
         <TextArea
           label="오늘, 어떤 판단을 내렸나요?"
           placeholder="예: 아직 못 정함/ A로 마음이 기움"
-          value={topic}
-          onChange={(e) => setTopic(e.target.value)}
+          value={decision}
+          onChange={(e) => setDecision(e.target.value)}
           maxLength={50}
         />
       </section>
@@ -79,8 +75,8 @@ export default function OnboardingComponent3() {
         <TextArea
           label="그건 왜인가요? "
           placeholder="한 줄이면 충분해요"
-          value={topic}
-          onChange={(e) => setTopic(e.target.value)}
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
           maxLength={100}
           rows={3}
         />
diff --git a/src/components/onboarding/OnboardingComponentChange.tsx b/src/components/onboarding/OnboardingComponentChange.tsx
index 4b7119f..c900e1c 100644
--- a/src/components/onboarding/OnboardingComponentChange.tsx
+++ b/src/components/onboarding/OnboardingComponentChange.tsx
@@ -1,11 +1,24 @@
+import { onboardingComponentProps } from '@/pages/Onboarding'
 import OnboardingComponent1 from '@/components/onboarding/OnboardingComponent1'
 import OnboardingComponent2 from '@/components/onboarding/OnboardingComponent2'
 import OnboardingComponent3 from '@/components/onboarding/OnboardingComponent3'
 
-export default function OnboardingComponentChange(props : { pageNumber : number }) {
-  switch(props.pageNumber){
+export default function OnboardingComponentChange ({pageNumber, topic, setTopic, decision, setDecision, reason, setReason, selectedValue, setSelectedValue, selectedCategory, setSelectedCategory} : onboardingComponentProps) {
+  switch(pageNumber){
     case 1: return <OnboardingComponent1 />
     case 2: return <OnboardingComponent2 />
-    case 3: return <OnboardingComponent3 />
+    case 3: return <OnboardingComponent3
+      pageNumber={pageNumber} 
+      topic = {topic} 
+      setTopic = {setTopic}
+      decision = {decision}
+      setDecision = {setDecision}
+      reason = {reason}
+      setReason = {setReason}
+      selectedValue = {selectedValue}
+      setSelectedValue = {setSelectedValue}
+      selectedCategory = {selectedCategory}
+      setSelectedCategory = {setSelectedCategory}
+    />
   }
 }
\ No newline at end of file
diff --git a/src/pages/Onboarding.tsx b/src/pages/Onboarding.tsx
index ae1e73e..4715091 100644
--- a/src/pages/Onboarding.tsx
+++ b/src/pages/Onboarding.tsx
@@ -1,9 +1,49 @@
-import { useState } from 'react'
+import React, { Dispatch, SetStateAction, useState } from 'react'
 import OnboardingComponentChange from '@/components/onboarding/OnboardingComponentChange'
 import OnboardingHeader from '@/components/onboarding/OnboardingHeader'
 
+
+const VALUE_KEYS = Object.keys(VALUE_LABELS) as ValueKey[]
+import { VALUE_LABELS, type ValueKey } from '@/constants/insights'
+
+const CATEGORY_OPTIONS = [
+  { value: 'work', title: '일·진로', description: '취업, 이직, 업무 판단' },
+  {
+    value: 'relationship',
+    title: '관계',
+    description: '친구, 연인, 가족, 동료',
+  },
+  { value: 'money', title: '돈', description: '소비, 저축, 투자' },
+  { value: 'health', title: '건강·몸', description: '운동, 수면, 컨디션' },
+  { value: 'self', title: '나 자신', description: '성격, 원칙, 새로운 시도' },
+  { value: 'etc', title: '기타', description: '위 어디에도 해당 없음' },
+] as const
+
+type CategoryValue = (typeof CATEGORY_OPTIONS)[number]['value']
+
+export interface onboardingComponentProps {
+  pageNumber : number,
+  topic : string,
+  setTopic : React.Dispatch<React.SetStateAction<string>>,
+  decision : string
+  setDecision : React.Dispatch<React.SetStateAction<string>>,
+  reason : string,
+  setReason : React.Dispatch<React.SetStateAction<string>>,
+  selectedValue : string | null,
+  setSelectedValue : React.Dispatch<React.SetStateAction<ValueKey | null>>,
+  selectedCategory : string | null,
+  setSelectedCategory : React.Dispatch<React.SetStateAction<ValueKey | null>>,
+}
+
 export default function Onboarding () {
 
+  const [topic, setTopic] = useState('');
+  const [decision, setDecision] = useState('');
+  const [reason, setReason] = useState('');
+  const [selectedValue, setSelectedValue] = useState<ValueKey | null>(null)
+  const [selectedCategory, setSelectedCategory] =
+    useState<CategoryValue | null>(null)
+
   {/*onboarding page number*/}
   const [pageNumber, setPageNumber] = useState(1);
 
@@ -19,12 +59,24 @@ export default function Onboarding () {
       <OnboardingHeader pageNumber={pageNumber} />
       <div className="grow flex flex-col justify-between px-[28px] py-[48px]">
         {/* onboarding contents, change by pageNumber*/}
-        <OnboardingComponentChange pageNumber={pageNumber}/>
+        <OnboardingComponentChange 
+          pageNumber={pageNumber} 
+          topic = {topic} 
+          setTopic = {setTopic}
+          decision = {decision}
+          setDecision = {setDecision}
+          reason = {reason}
+          setReason = {setReason}
+          selectedValue = {selectedValue}
+          setSelectedValue = {setSelectedValue}
+          selectedCategory = {selectedCategory}
+          setSelectedCategory = {setSelectedCategory}
+          />
 
         {/*bottom buttons*/}
         <div className="flex flex-row justify-between">
           <button className="w-[84px] h-[43px] rounded-[9px] text-[14px] font-[800] text-[#3E2723]">건너뛰기</button>
-          <button onClick={pageMove} className="w-[84px] h-[43px] rounded-[9px] text-[14px] font-[800] text-[#E1F5FE] bg-[#3E2723]">다음</button>
+          <button onClick={pageMove} className={`${pageNumber < 3 ? 'w-[84px]' : 'w-[156px]'} h-[43px] rounded-[9px] text-[14px] font-[800] text-[#E1F5FE] bg-[#3E2723]`}>{pageNumber < 3 ? '다음' : '가볍게 시도해보기'}</button>
         </div>
       </div>
     </div>

From c960a1fa6b9d6697ad347c67ddec6ca8ca178d5b Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Tue, 18 Aug 2026 23:48:09 +0900
Subject: [PATCH 6/9] =?UTF-8?q?feature:=20=EC=84=A4=EC=A0=95=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  2 +-
 src/components/settings/DeleteAccount.tsx     | 35 +++++++++++++++--
 .../settings/DeleteAccountAlert.tsx           |  8 +++-
 src/pages/Onboarding.tsx                      |  2 +-
 src/pages/Setting.tsx                         | 38 ++++++++++++++++---
 5 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1ae0091..9f04ece 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Setting from '@/pages/Setting'
 import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return <Onboarding />
+  return <Setting />
 }
 
 export default App
diff --git a/src/components/settings/DeleteAccount.tsx b/src/components/settings/DeleteAccount.tsx
index ae7d005..d1cec7a 100644
--- a/src/components/settings/DeleteAccount.tsx
+++ b/src/components/settings/DeleteAccount.tsx
@@ -1,4 +1,33 @@
-export default function DeleteAccount(props: {isVisible : boolean}){
+import { Dispatch, SetStateAction } from 'react';
+
+export default function DeleteAccount(props: {
+  isVisible : boolean; 
+  deleteAccountShow: boolean,
+  setDeleteAccountShow:Dispatch<SetStateAction<boolean>>,
+  deleteAccountAlertShow : boolean,
+  setDeleteAccountAlertShow : Dispatch<SetStateAction<boolean>>,
+  }){
+  
+  const DeleteAccountShow = () =>{
+    if(props.deleteAccountShow == false){
+      props.setDeleteAccountShow(true);
+    }
+    else{
+      props.setDeleteAccountShow(false);
+    }
+  }
+
+  const DeleteAccountAlertShow = () =>{
+    if(props.deleteAccountAlertShow == false){
+      props.setDeleteAccountShow(false);
+      props.setDeleteAccountAlertShow(true);
+    }
+    else{
+      props.setDeleteAccountShow(true);
+      props.setDeleteAccountAlertShow(false);
+    }
+  }
+  
   if(props.isVisible){
     return (
       <div className="fixed top-0 z-10 block w-[100%] h-[100%] bg-[#140B0A73]">
@@ -10,8 +39,8 @@ export default function DeleteAccount(props: {isVisible : boolean}){
               <p className="text-left text-[13px] text-[#201E1D] font-[400] mb-[14px]">&bull;&nbsp; 고민 및 기록 <br />&bull;&nbsp; 가치 분포 및 인사이트 <br />&bull;&nbsp; 계정 정보</p>
               <p className="text-left text-[13px] text-[#2A1F1C99] font-[400] mb-[14px]">삭제된 데이터는 복구할 수 없습니다.</p>
               <div>
-                <button className="border-[1px] border-[#201E1D66] font-[14px] text-[#2A1F1C] font-[800] w-[112px] h-[39px] rounded-[9px] bg-[#FFF] mr-[8px]">취소</button>
-                <button className="font-[14px] text-[#FFF] font-[800] w-[112px] h-[39px] rounded-[9px] bg-[#E5342A]">탈퇴하기</button>
+                <button onClick={DeleteAccountShow} className="border-[1px] border-[#201E1D66] font-[14px] text-[#2A1F1C] font-[800] w-[112px] h-[39px] rounded-[9px] bg-[#FFF] mr-[8px]">취소</button>
+                <button onClick={DeleteAccountAlertShow} className="font-[14px] text-[#FFF] font-[800] w-[112px] h-[39px] rounded-[9px] bg-[#E5342A]">탈퇴하기</button>
               </div>
             </div>
           </center>
diff --git a/src/components/settings/DeleteAccountAlert.tsx b/src/components/settings/DeleteAccountAlert.tsx
index 5a7cd76..63b43aa 100644
--- a/src/components/settings/DeleteAccountAlert.tsx
+++ b/src/components/settings/DeleteAccountAlert.tsx
@@ -1,4 +1,10 @@
-export default function DeleteAccountAlert(props: {isVisible : boolean}){
+import { Dispatch, SetStateAction } from 'react';
+
+export default function DeleteAccountAlert(props: {
+  isVisible : boolean,
+  deleteAccountAlertShow : boolean,
+  setDeleteAccountAlertShow : Dispatch<SetStateAction<boolean>>,
+  }){
   if(props.isVisible){
     return (
       <div className="fixed top-0 z-10 block w-[100%] h-[100%] bg-[#140B0A73]">
diff --git a/src/pages/Onboarding.tsx b/src/pages/Onboarding.tsx
index 4715091..f74ccb6 100644
--- a/src/pages/Onboarding.tsx
+++ b/src/pages/Onboarding.tsx
@@ -32,7 +32,7 @@ export interface onboardingComponentProps {
   selectedValue : string | null,
   setSelectedValue : React.Dispatch<React.SetStateAction<ValueKey | null>>,
   selectedCategory : string | null,
-  setSelectedCategory : React.Dispatch<React.SetStateAction<ValueKey | null>>,
+  setSelectedCategory : Dispatch<SetStateAction<"etc" | "health" | "money" | "relationship" | "self" | "work" | null>>,
 }
 
 export default function Onboarding () {
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
index aa543ec..7b5130a 100644
--- a/src/pages/Setting.tsx
+++ b/src/pages/Setting.tsx
@@ -11,7 +11,29 @@ import Arrow from '@/assets/Arrow.png'
 
 export default function Setting () {
 
-  const [activeNav, setActiveNav] = useState<NavValue>('setting')
+  const [activeNav, setActiveNav] = useState<NavValue>('setting');
+  const [deleteAccountShow, setDeleteAccountShow] = useState(false);
+  const [deleteAccountAlertShow, setDeleteAccountAlertShow] = useState(false);
+
+  const DeleteAccountShow = () =>{
+    if(deleteAccountShow == false){
+      setDeleteAccountShow(true);
+    }
+    else{
+      setDeleteAccountShow(false);
+    }
+  }
+
+  const DeleteAccountAlertShow = () =>{
+    if(deleteAccountAlertShow == false){
+      setDeleteAccountShow(false);
+      setDeleteAccountAlertShow(true);
+    }
+    else{
+      setDeleteAccountShow(true);
+      setDeleteAccountAlertShow(false);
+    }
+  }
 
   return (
     <div className="flex flex-col items-stretch min-h-screen bg-[#E1F5FE] pt-[34px]">
@@ -32,7 +54,7 @@ export default function Setting () {
           </div>
           <div className="w-[100%] h-[2px] bg-[#3E272338] my-[20px]"/>
           <button className="w-[100%] h-[55px] text-[14px] text-left font-[400] text-[#201E1D] border-b-[1px] border-[#3E272338]">로그아웃</button>
-          <button className="w-[100%] h-[55px] text-[14px] text-left font-[400] text-[#2A1F1C99] border-b-[1px] border-[#3E272338]">회원탈퇴</button>
+          <button onClick={DeleteAccountShow} className="w-[100%] h-[55px] text-[14px] text-left font-[400] text-[#2A1F1C99] border-b-[1px] border-[#3E272338]">회원탈퇴</button>
         </div>
         
         <center><p className="text-[12px] font-[400] text-[#2A1F1C8C] mb-[48px]">Layer v1.0.0</p></center>
@@ -41,9 +63,15 @@ export default function Setting () {
         <BottomNav value={activeNav} onChange={setActiveNav} />
       </footer>
       {/* Account Delete tab */}
-      <DeleteAccount isVisible={false} />
-      {/* Account Delete tab */}
-      <DeleteAccountAlert isVisible={false} />
+      <DeleteAccount 
+        isVisible={deleteAccountShow} 
+        deleteAccountShow={deleteAccountShow} 
+        setDeleteAccountShow={setDeleteAccountShow} 
+        deleteAccountAlertShow={deleteAccountAlertShow} 
+        setDeleteAccountAlertShow={setDeleteAccountAlertShow}
+      />
+      {/* Account Delete Alert tab */}
+      <DeleteAccountAlert isVisible={deleteAccountAlertShow}/>
     </div>
   );
 }
\ No newline at end of file

From 2be3c61423c2feaa22a91d0930317f45b12f1e37 Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Thu, 20 Aug 2026 03:57:33 +0900
Subject: [PATCH 7/9] =?UTF-8?q?fixed:=EC=98=A8=EB=B3=B4=EB=94=A9=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                          |  2 +-
 .../onboarding/OnboardingComponentChange.tsx         | 12 ++++++------
 ...ngComponent1.tsx => OnboardingPage1Component.tsx} |  2 +-
 ...ngComponent2.tsx => OnboardingPage2Component.tsx} |  2 +-
 ...ngComponent3.tsx => OnboardingPage3Component.tsx} |  2 +-
 src/components/settings/DeleteAccountAlert.tsx       |  2 --
 6 files changed, 10 insertions(+), 12 deletions(-)
 rename src/components/onboarding/{OnboardingComponent1.tsx => OnboardingPage1Component.tsx} (96%)
 rename src/components/onboarding/{OnboardingComponent2.tsx => OnboardingPage2Component.tsx} (97%)
 rename src/components/onboarding/{OnboardingComponent3.tsx => OnboardingPage3Component.tsx} (94%)

diff --git a/src/App.tsx b/src/App.tsx
index 9f04ece..1ae0091 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Setting from '@/pages/Setting'
 import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return <Setting />
+  return <Onboarding />
 }
 
 export default App
diff --git a/src/components/onboarding/OnboardingComponentChange.tsx b/src/components/onboarding/OnboardingComponentChange.tsx
index c900e1c..673ef11 100644
--- a/src/components/onboarding/OnboardingComponentChange.tsx
+++ b/src/components/onboarding/OnboardingComponentChange.tsx
@@ -1,13 +1,13 @@
 import { onboardingComponentProps } from '@/pages/Onboarding'
-import OnboardingComponent1 from '@/components/onboarding/OnboardingComponent1'
-import OnboardingComponent2 from '@/components/onboarding/OnboardingComponent2'
-import OnboardingComponent3 from '@/components/onboarding/OnboardingComponent3'
+import OnboardingPage1Component from '@/components/onboarding/OnboardingPage1Component'
+import OnboardingPage2Component from '@/components/onboarding/OnboardingPage2Component'
+import OnboardingPage3Component from '@/components/onboarding/OnboardingPage3Component'
 
 export default function OnboardingComponentChange ({pageNumber, topic, setTopic, decision, setDecision, reason, setReason, selectedValue, setSelectedValue, selectedCategory, setSelectedCategory} : onboardingComponentProps) {
   switch(pageNumber){
-    case 1: return <OnboardingComponent1 />
-    case 2: return <OnboardingComponent2 />
-    case 3: return <OnboardingComponent3
+    case 1: return <OnboardingPage1Component />
+    case 2: return <OnboardingPage2Component />
+    case 3: return <OnboardingPage3Component
       pageNumber={pageNumber} 
       topic = {topic} 
       setTopic = {setTopic}
diff --git a/src/components/onboarding/OnboardingComponent1.tsx b/src/components/onboarding/OnboardingPage1Component.tsx
similarity index 96%
rename from src/components/onboarding/OnboardingComponent1.tsx
rename to src/components/onboarding/OnboardingPage1Component.tsx
index 6457771..a60b78c 100644
--- a/src/components/onboarding/OnboardingComponent1.tsx
+++ b/src/components/onboarding/OnboardingPage1Component.tsx
@@ -1,4 +1,4 @@
-export default function OnboardingComponent1() {
+export default function OnboardingPage1Component() {
     
   return (
     <div>
diff --git a/src/components/onboarding/OnboardingComponent2.tsx b/src/components/onboarding/OnboardingPage2Component.tsx
similarity index 97%
rename from src/components/onboarding/OnboardingComponent2.tsx
rename to src/components/onboarding/OnboardingPage2Component.tsx
index 3948227..fbf75f6 100644
--- a/src/components/onboarding/OnboardingComponent2.tsx
+++ b/src/components/onboarding/OnboardingPage2Component.tsx
@@ -1,4 +1,4 @@
-export default function OnboardingComponent2() {
+export default function OnboardingPage2Component() {
   return (
     <div>
       <h1 className="text-[32px] font-[800] text-[#201E1D] mb-[38px] ">고르고, 이유를 남기면</h1>
diff --git a/src/components/onboarding/OnboardingComponent3.tsx b/src/components/onboarding/OnboardingPage3Component.tsx
similarity index 94%
rename from src/components/onboarding/OnboardingComponent3.tsx
rename to src/components/onboarding/OnboardingPage3Component.tsx
index f2d0bef..d3a6097 100644
--- a/src/components/onboarding/OnboardingComponent3.tsx
+++ b/src/components/onboarding/OnboardingPage3Component.tsx
@@ -27,7 +27,7 @@ const CATEGORY_OPTIONS = [
 
 type CategoryValue = (typeof CATEGORY_OPTIONS)[number]['value']
 
-export default function OnboardingComponent3({pageNumber, topic, setTopic, decision, setDecision, reason, setReason, selectedValue, setSelectedValue, selectedCategory, setSelectedCategory} : onboardingComponentProps) {
+export default function OnboardingPage3Component({pageNumber, topic, setTopic, decision, setDecision, reason, setReason, selectedValue, setSelectedValue, selectedCategory, setSelectedCategory} : onboardingComponentProps) {
 
     
   return (
diff --git a/src/components/settings/DeleteAccountAlert.tsx b/src/components/settings/DeleteAccountAlert.tsx
index 63b43aa..d353553 100644
--- a/src/components/settings/DeleteAccountAlert.tsx
+++ b/src/components/settings/DeleteAccountAlert.tsx
@@ -2,8 +2,6 @@ import { Dispatch, SetStateAction } from 'react';
 
 export default function DeleteAccountAlert(props: {
   isVisible : boolean,
-  deleteAccountAlertShow : boolean,
-  setDeleteAccountAlertShow : Dispatch<SetStateAction<boolean>>,
   }){
   if(props.isVisible){
     return (

From 916852a79a8f17e708cfc55ff891c7ac40f041d7 Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Thu, 20 Aug 2026 04:08:36 +0900
Subject: [PATCH 8/9] =?UTF-8?q?fixed:=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD(=EB=B8=8C=EB=9E=9C=EC=B9=98=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=9E=98=EB=AA=BB=ED=96=88=EC=8A=B5?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4...)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx         | 2 +-
 src/pages/Login.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1ae0091..6794de1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Setting from '@/pages/Setting'
 import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return <Onboarding />
+  return <Login />
 }
 
 export default App
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index e0a6e1e..d1881be 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -3,6 +3,7 @@ import { useState, type ChangeEvent } from 'react'
 import LayerLogo from '@/assets/LayerLogo.png'
 import Exclamation from '@/assets/Exclamation.png'
 import Input from '@/components/common/input/Input'
+import Button from '@/components/common/button/Button'
 
 import {
   validateNickname,
@@ -40,7 +41,7 @@ export default function Login () {
               {...validatePassword(password)}
             />
           </section>
-          <button className="w-[100%] h-[46px] rounded-[9px] text-[14px] font-[800] text-[#E1F5FE] bg-[#3E2723]">로그인</button>
+          <Button>로그인</Button>
         </div>
         <center><button className="w-[159px] h-[18px] rounded-[9px] text-[13px] font-[800] text-[#3E2723]">계정이 없으신가요? 회원가입</button></center>
       </div>

From 135b8905179eb84ab189f17dbede14007df52713 Mon Sep 17 00:00:00 2001
From: sangwon <leesangwon83@naver.com>
Date: Thu, 20 Aug 2026 04:10:53 +0900
Subject: [PATCH 9/9] =?UTF-8?q?fixed:=EC=98=A8=EB=B3=B4=EB=94=A9=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20OnboardingHeader=EC=9D=98=20=EC=BD=94=EB=93=9C?=
 =?UTF-8?q?=EB=A5=BC=20map=EC=9D=84=20=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  2 +-
 .../onboarding/OnboardingHeader.tsx           | 48 +++++--------------
 2 files changed, 13 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6794de1..1ae0091 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import Setting from '@/pages/Setting'
 import RecordGuide from '@/pages/RecordGuide'
 
 function App() {
-  return <Login />
+  return <Onboarding />
 }
 
 export default App
diff --git a/src/components/onboarding/OnboardingHeader.tsx b/src/components/onboarding/OnboardingHeader.tsx
index 735fc6e..830acaf 100644
--- a/src/components/onboarding/OnboardingHeader.tsx
+++ b/src/components/onboarding/OnboardingHeader.tsx
@@ -1,38 +1,14 @@
 export default function OnboardingHeader(props: { pageNumber:number; }) {
-  {/*colored block numbers change by pageNumber */}
-  switch(props.pageNumber){
-    case 1: 
-    {/*on pageNumber == 1*/}
-      return (
-        <header className="h-[31px] grow-0 px-[28px]">
-          <div className="flex flex-row items-end h-[100%]">
-            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
-            <div className="h-[3px] w-[32px] bg-[#DDF0FA] mr-[8px]"/>
-            <div className="h-[3px] w-[32px] bg-[#DDF0FA] mr-[8px]"/>
-          </div>
-        </header>
-      );
-    case 2:
-    {/*on pageNumber == 2*/}
-      return (
-        <header className="h-[31px] grow-0 px-[28px]">
-          <div className="flex flex-row items-end h-[100%]">
-            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
-            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
-            <div className="h-[3px] w-[32px] bg-[#DDF0FA] mr-[8px]"/>
-          </div>
-        </header>
-      );
-    case 3:
-    {/*on pageNumber == 3*/}
-      return (
-        <header className="h-[31px] grow-0 px-[28px]">
-          <div className="flex flex-row items-end h-[100%]">
-            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
-            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
-            <div className="h-[3px] w-[32px] bg-[#3E2723] mr-[8px]"/>
-          </div>
-        </header>
-      );
-  }
+  return (
+    <header className="h-[31px] px-7 flex items-end gap-2">
+      {[1, 2, 3].map((step) => (
+        <div
+          key={step}
+          className={`h-[3px] w-8 ${
+            step <= props.pageNumber ? 'bg-[#3E2723]' : 'bg-[#DDF0FA]'
+          }`}
+        />
+      ))}
+    </header>
+  )
 }
\ No newline at end of file