diff --git a/package-lock.json b/package-lock.json index b500ee7..9e47204 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3725,15 +3725,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/src/assets/Archive.png b/src/assets/Archive.png new file mode 100644 index 0000000..9a97c55 Binary files /dev/null and b/src/assets/Archive.png differ diff --git a/src/assets/Arrow.png b/src/assets/Arrow.png new file mode 100644 index 0000000..96d26e9 Binary files /dev/null and b/src/assets/Arrow.png differ diff --git a/src/assets/Exclamation.png b/src/assets/Exclamation.png new file mode 100644 index 0000000..7b2f036 Binary files /dev/null and b/src/assets/Exclamation.png differ diff --git a/src/assets/LayerLogo.png b/src/assets/LayerLogo.png new file mode 100644 index 0000000..3b077c9 Binary files /dev/null and b/src/assets/LayerLogo.png differ 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 ( +
+
+
+
+

모든 항목을 입력해주세요.

+ +
+
+
+
+ ); + } +} \ No newline at end of file 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({ /> - {value.length} / {maxLength} + {value?.length} / {maxLength} ) diff --git a/src/components/onboarding/OnboardingComponentChange.tsx b/src/components/onboarding/OnboardingComponentChange.tsx new file mode 100644 index 0000000..673ef11 --- /dev/null +++ b/src/components/onboarding/OnboardingComponentChange.tsx @@ -0,0 +1,24 @@ +import { onboardingComponentProps } from '@/pages/Onboarding' +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 + case 2: return + case 3: return + } +} \ 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..830acaf --- /dev/null +++ b/src/components/onboarding/OnboardingHeader.tsx @@ -0,0 +1,14 @@ +export default function OnboardingHeader(props: { pageNumber:number; }) { + return ( +
+ {[1, 2, 3].map((step) => ( +
+ ))} +
+ ) +} \ No newline at end of file diff --git a/src/components/onboarding/OnboardingPage1Component.tsx b/src/components/onboarding/OnboardingPage1Component.tsx new file mode 100644 index 0000000..a60b78c --- /dev/null +++ b/src/components/onboarding/OnboardingPage1Component.tsx @@ -0,0 +1,30 @@ +export default function OnboardingPage1Component() { + + return ( +
+ {/* nine blocks */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* content */} +
가치관을 묻지 않아요
+
대신 지금 고민 중인 선택 하나만 물어볼게요.
'당신의 가치'는 무엇인가는 묻지 않지만,
구체적인 갈림길 앞에서는 누구나 이유를 둘 수 있으니까요.
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/onboarding/OnboardingPage2Component.tsx b/src/components/onboarding/OnboardingPage2Component.tsx new file mode 100644 index 0000000..fbf75f6 --- /dev/null +++ b/src/components/onboarding/OnboardingPage2Component.tsx @@ -0,0 +1,50 @@ +export default function OnboardingPage2Component() { + return ( +
+

고르고, 이유를 남기면

+
+
+
+
+
+
+
+

고민

+

지금 하는 갈림길 하나를 이름 붙인다

+
+
+
+
+
+
+
+
+

오늘의 판단

+

오늘, 어느 쪽으로 마음이 갔는지

+
+
+
+
+
+
+
+
+

이유

+

한 줄이면 충분하다

+
+
+
+
+
+
+
+
+

가치

+

가장 가까운 것 하나만 고른다

+
+
+
+

쌓일수록, 당신의 선택이 보여요.

+
+ ); +} \ No newline at end of file diff --git a/src/components/onboarding/OnboardingPage3Component.tsx b/src/components/onboarding/OnboardingPage3Component.tsx new file mode 100644 index 0000000..d3a6097 --- /dev/null +++ b/src/components/onboarding/OnboardingPage3Component.tsx @@ -0,0 +1,101 @@ +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' + +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 OnboardingPage3Component({pageNumber, topic, setTopic, decision, setDecision, reason, setReason, selectedValue, setSelectedValue, selectedCategory, setSelectedCategory} : onboardingComponentProps) { + + + return ( + <> +
+

지금 고민,
하나씩 적어볼까요?

+

아직 연습이예요. 편하게 가볍게 한 번 써볼까요?

+
고민은 취업, 관계, 돈, 건강처럼 영역으로 나눠서 적어볼 수 있어요. 아래에서 골라보세요.
+
+
+