From 0d9f6b6ab81f0dfd18beb6b1dff80ab3ea228458 Mon Sep 17 00:00:00 2001 From: JWJung-99 <39busy@naver.com> Date: Fri, 18 Oct 2024 16:06:48 +0900 Subject: [PATCH 01/19] =?UTF-8?q?Feat:=20=EA=B0=90=EC=A0=95=EA=B8=B0?= =?UTF-8?q?=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.tsx | 2 +- src/pages/emotion/Emotion.tsx | 13 ++++++++++ src/pages/emotion/message/EmotionMessage.tsx | 7 ++++++ src/pages/emotion/record/EmotionRecord.tsx | 7 ++++++ src/router/route.tsx | 25 ++++++++++++++++++-- 5 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 src/pages/emotion/Emotion.tsx create mode 100644 src/pages/emotion/message/EmotionMessage.tsx create mode 100644 src/pages/emotion/record/EmotionRecord.tsx diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index f522aae..6bb578f 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -17,7 +17,7 @@ const Home = () => { 심리 상담
  • - 감정 기록 + 감정 기록
    • diff --git a/src/pages/emotion/Emotion.tsx b/src/pages/emotion/Emotion.tsx new file mode 100644 index 0000000..59fe4b9 --- /dev/null +++ b/src/pages/emotion/Emotion.tsx @@ -0,0 +1,13 @@ +// 진욱 + +import { Outlet } from 'react-router-dom'; + +const Emotion = () => { + return ( + <> + + + ); +}; + +export default Emotion; diff --git a/src/pages/emotion/message/EmotionMessage.tsx b/src/pages/emotion/message/EmotionMessage.tsx new file mode 100644 index 0000000..c6a3118 --- /dev/null +++ b/src/pages/emotion/message/EmotionMessage.tsx @@ -0,0 +1,7 @@ +// 진욱 + +const EmotionMessage = () => { + return
    나와 상대방에게 한 마디
    ; +}; + +export default EmotionMessage; diff --git a/src/pages/emotion/record/EmotionRecord.tsx b/src/pages/emotion/record/EmotionRecord.tsx new file mode 100644 index 0000000..43bbe6a --- /dev/null +++ b/src/pages/emotion/record/EmotionRecord.tsx @@ -0,0 +1,7 @@ +// 진욱 + +const EmotionRecord = () => { + return
    오늘 느낀 감정 입력
    ; +}; + +export default EmotionRecord; diff --git a/src/router/route.tsx b/src/router/route.tsx index 48307e0..2f8d403 100644 --- a/src/router/route.tsx +++ b/src/router/route.tsx @@ -1,10 +1,13 @@ import { Navigate, createBrowserRouter } from 'react-router-dom'; -import SignUpPage from '@pages/User/signup/SignUpPage'; -import LoginPage from '@pages/User/login/LoginPage'; import Layout from '@components/layout/Layout'; import Home from '@pages/Home/Home'; +import LoginPage from '@pages/User/login/LoginPage'; +import SignUpPage from '@pages/User/signup/SignUpPage'; import Counseling from '@pages/counseling/Counseling'; +import Emotion from '@pages/emotion/Emotion'; +import EmotionMessage from '@pages/emotion/message/EmotionMessage'; +import EmotionRecord from '@pages/emotion/record/EmotionRecord'; const router = createBrowserRouter([ { @@ -31,6 +34,24 @@ const router = createBrowserRouter([ path: '/counseling', element: , }, + { + path: 'emotion', + element: , + children: [ + { + index: true, + element: , + }, + { + path: 'record', + element: , + }, + { + path: 'message', + element: , + }, + ], + }, ], }, ]); From ca7f08cd8768a2fc32e929f8ffb894a7adf07898 Mon Sep 17 00:00:00 2001 From: JWJung-99 <39busy@naver.com> Date: Fri, 18 Oct 2024 16:09:29 +0900 Subject: [PATCH 02/19] =?UTF-8?q?Edit:=20useStore=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=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/store/{userStroe.ts => userStore.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/store/{userStroe.ts => userStore.ts} (100%) diff --git a/src/store/userStroe.ts b/src/store/userStore.ts similarity index 100% rename from src/store/userStroe.ts rename to src/store/userStore.ts From 833322adbcd112a7643655667356157070a368cc Mon Sep 17 00:00:00 2001 From: woojoung Date: Fri, 18 Oct 2024 17:25:03 +0900 Subject: [PATCH 03/19] =?UTF-8?q?Feat=20:=20checkAgreement=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Images/checkArrow.svg | 3 + src/assets/Images/checkedArrow.svg | 3 + src/components/Auth/AuthError.tsx | 24 +++- src/components/Auth/CheckAgreement.tsx | 130 +++++++++++++----- src/components/Auth/PageTitleHeader.tsx | 1 + src/components/Auth/SetupEmail.tsx | 2 +- src/components/Auth/SetupKoreanIDInput.tsx | 6 +- src/components/Auth/SetupName.tsx | 2 +- src/components/Auth/SetupPassword.tsx | 18 ++- src/components/common/Button.tsx | 35 +++-- .../GenericProgressBar.tsx} | 8 +- src/components/common/Input.tsx | 2 +- src/components/common/ToolTip.tsx | 54 ++------ src/components/layout/Layout.tsx | 30 ++-- src/pages/User/signup/SignUpPage.tsx | 3 +- 15 files changed, 203 insertions(+), 118 deletions(-) create mode 100644 src/assets/Images/checkArrow.svg create mode 100644 src/assets/Images/checkedArrow.svg rename src/components/{Auth/SignupProgressBar.tsx => common/GenericProgressBar.tsx} (81%) diff --git a/src/assets/Images/checkArrow.svg b/src/assets/Images/checkArrow.svg new file mode 100644 index 0000000..96c9546 --- /dev/null +++ b/src/assets/Images/checkArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/Images/checkedArrow.svg b/src/assets/Images/checkedArrow.svg new file mode 100644 index 0000000..be5f6f5 --- /dev/null +++ b/src/assets/Images/checkedArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Auth/AuthError.tsx b/src/components/Auth/AuthError.tsx index 9e537a4..d6890af 100644 --- a/src/components/Auth/AuthError.tsx +++ b/src/components/Auth/AuthError.tsx @@ -2,8 +2,11 @@ import styled from '@emotion/styled'; import variables from '@styles/Variables'; +// 디폴트 형식과 툴팁형식을 제공함 + interface AuthErrorProps { message: string; + type?: 'default' | 'tooltip'; } const AuthErrorContainer = styled.div` @@ -13,7 +16,26 @@ const AuthErrorContainer = styled.div` padding-top: 1.2rem; `; -const AuthError = ({ message }: AuthErrorProps) => { +const AuthErrorTypeToolTip = styled.div` + color: #ffa997; + padding: 0.6rem; + background-color: #ffefeb; + font-size: ${variables.size.medium}; + padding-left: 1.2rem; + padding-top: 1.2rem; + position: absolute; + z-index: 1000; + width: 36.8rem; + bottom: 20rem; + box-sizing: border-box; + border-radius: ${variables.borderRadius}; +`; + +const AuthError = ({ message, type = 'default' }: AuthErrorProps) => { + if (type === 'tooltip') { + return X {message}; + } + return {message}; }; diff --git a/src/components/Auth/CheckAgreement.tsx b/src/components/Auth/CheckAgreement.tsx index 7198a3a..7d7f9df 100644 --- a/src/components/Auth/CheckAgreement.tsx +++ b/src/components/Auth/CheckAgreement.tsx @@ -1,48 +1,66 @@ import React, { useState } from 'react'; import styled from '@emotion/styled'; import Button from '@components/common/Button'; +import variables from '@styles/Variables'; +import checkArrow from '@assets/Images/checkArrow.svg'; +import checkedArrow from '@assets/Images/checkedArrow.svg'; // 체크된 상태의 아이콘 +// TODO - 모든 동의가 완료되면 가입이 진행되도록 수정해야함 interface CheckAgreementProps { submitSignup: () => void | undefined; onClose?: () => void; } -// CheckAgreement 컴포넌트 const CheckAgreement = ({ submitSignup }: CheckAgreementProps) => { - const [isChecked, setIsChecked] = useState(false); - const [checkboxStates, setCheckboxStates] = useState([false, false, false]); + const [isChecked, setIsChecked] = useState(false); // 전체 동의 체크 상태 + const [checkboxStates, setCheckboxStates] = useState([false, false, false, false]); // 각 체크박스 상태 const handleMainCheckboxChange = () => { const newChecked = !isChecked; setIsChecked(newChecked); - setCheckboxStates(checkboxStates.map(() => newChecked)); + setCheckboxStates(checkboxStates.map(() => newChecked)); // 모든 체크박스 상태 변경 }; const handleCheckboxChange = (index: number) => { const updatedStates = [...checkboxStates]; - updatedStates[index] = !updatedStates[index]; - setIsChecked(updatedStates.every((state) => state)); + updatedStates[index] = !updatedStates[index]; // 특정 체크박스 상태 변경 + setIsChecked(updatedStates.every((state) => state)); // 전체 체크 상태 업데이트 setCheckboxStates(updatedStates); }; + // 모든 체크박스가 체크되었는지 확인 + const allCheckboxesChecked = checkboxStates.every((state) => state); + return ( - 약관 동의 + + + + 약관에 모두 동의 + + + + {/* 개별 체크박스들 추가 */} - - - 전체 동의 - + {['이용약관 동의', '개인정보 처리방침 동의', '마케팅 정보 수신 동의', 'AI 개인정보 보안 항목 동의'].map( + (label, index) => ( + + handleCheckboxChange(index)} /> + {label} + + ) + )} - {checkboxStates.map((state, index) => ( - - - handleCheckboxChange(index)} /> - 약관 {index + 1}: 사용자 동의 내용이 여기에 들어갑니다. - - - ))} - + + + + + "안 좋았던 일 기록" + + + + + + "노력한 일 기록" + + + + + ); }; export default EmotionRecord; diff --git a/src/pages/emotion/record/EmotionRecordPage.tsx b/src/pages/emotion/record/EmotionRecordPage.tsx new file mode 100644 index 0000000..1e50a79 --- /dev/null +++ b/src/pages/emotion/record/EmotionRecordPage.tsx @@ -0,0 +1,108 @@ +// 진욱 +import styled from '@emotion/styled'; +import { useFunnel } from '@hooks/useFunnel'; +import { useCallback } from 'react'; +import EmotionRecord from './EmotionRecord'; +import variables from '@styles/Variables'; + +// interface IEmotionRecord { +// goods: string[]; +// bads: string[]; +// efforts: string[]; +// } + +const steps = ['goods', 'bads', 'efforts']; + +const EmotionLayout = styled.section` + box-shadow: inset 0 0 5px black; + height: calc(100vh - 2 * ${variables.layoutPadding}); + padding-top: calc(7.2rem - ${variables.layoutPadding}); + box-sizing: border-box; + display: flex; + flex-direction: column; +`; + +const ProgressBar = styled.div` + box-shadow: inset 0 0 1px black; + height: 1.2rem; + margin-left: calc(-1 * ${variables.layoutPadding}); + margin-right: calc(-1 * ${variables.layoutPadding}); + display: flex; + align-items: center; +`; + +const DashedLine = styled.div` + width: 100%; + height: 0.2rem; + background: repeating-linear-gradient( + to right, + ${variables.colors.primarySoft} 0, + ${variables.colors.primarySoft} 0.5rem, + transparent 0.5rem, + transparent 1rem + ); +`; + +const ImageContainer = styled.div` + border-radius: 50%; + overflow: hidden; + width: 12.8rem; + height: 12.8rem; + aspect-ratio: 1/1; + background-color: ${variables.colors.secondarySoft}; + margin: 0 auto; + margin-top: 4.5rem; + position: relative; +`; + +const WishImage = styled.img` + position: absolute; + top: 1rem; + left: -4.5rem; +`; + +const EmotionRecordPage = () => { + // const [emotionRecord, setEmotionRecord] = useState(); + const { Funnel, Step, setStep, currentStep } = useFunnel(steps[0]); + + console.log(currentStep); + // const currentStepIndex = steps.indexOf(currentStep); + + const prevClickHandler = useCallback( + (prevStep: string) => { + if (prevStep) { + setStep(prevStep); + } + }, + [setStep] + ); + + const nextClickHandler = useCallback( + (nextStep: string) => { + if (nextStep) { + setStep(nextStep); + } + }, + [setStep] + ); + + return ( + + + + + + + + + + ); +}; + +export default EmotionRecordPage; diff --git a/src/router/route.tsx b/src/router/route.tsx index 2f8d403..435ca40 100644 --- a/src/router/route.tsx +++ b/src/router/route.tsx @@ -7,7 +7,7 @@ import SignUpPage from '@pages/User/signup/SignUpPage'; import Counseling from '@pages/counseling/Counseling'; import Emotion from '@pages/emotion/Emotion'; import EmotionMessage from '@pages/emotion/message/EmotionMessage'; -import EmotionRecord from '@pages/emotion/record/EmotionRecord'; +import EmotionRecordPage from '@pages/emotion/record/EmotionRecordPage'; const router = createBrowserRouter([ { @@ -40,11 +40,11 @@ const router = createBrowserRouter([ children: [ { index: true, - element: , + element: , }, { path: 'record', - element: , + element: , }, { path: 'message', From a2d948603cd6965ddbfc93e67745ad5ceab7ac17 Mon Sep 17 00:00:00 2001 From: JWJung-99 <39busy@naver.com> Date: Sat, 19 Oct 2024 17:31:48 +0900 Subject: [PATCH 15/19] =?UTF-8?q?Fix:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.tsx | 2 +- src/router/route.tsx | 23 ++++++----------------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 6bb578f..da8b4a4 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -17,7 +17,7 @@ const Home = () => { 심리 상담
  • - 감정 기록 + 감정 기록
    • diff --git a/src/router/route.tsx b/src/router/route.tsx index 435ca40..d07ed46 100644 --- a/src/router/route.tsx +++ b/src/router/route.tsx @@ -5,7 +5,6 @@ import Home from '@pages/Home/Home'; import LoginPage from '@pages/User/login/LoginPage'; import SignUpPage from '@pages/User/signup/SignUpPage'; import Counseling from '@pages/counseling/Counseling'; -import Emotion from '@pages/emotion/Emotion'; import EmotionMessage from '@pages/emotion/message/EmotionMessage'; import EmotionRecordPage from '@pages/emotion/record/EmotionRecordPage'; @@ -35,22 +34,12 @@ const router = createBrowserRouter([ element: , }, { - path: 'emotion', - element: , - children: [ - { - index: true, - element: , - }, - { - path: 'record', - element: , - }, - { - path: 'message', - element: , - }, - ], + path: 'emotion/record', + element: , + }, + { + path: 'emotion/message', + element: , }, ], }, From d11adcbadc4c1108aaad9f25e10fb53bacc057d7 Mon Sep 17 00:00:00 2001 From: JWJung-99 <39busy@naver.com> Date: Sun, 20 Oct 2024 17:32:45 +0900 Subject: [PATCH 16/19] =?UTF-8?q?Asset:=20=EC=A0=84=EC=86=A1=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=97=85=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Images/icon-send.svg | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/assets/Images/icon-send.svg diff --git a/src/assets/Images/icon-send.svg b/src/assets/Images/icon-send.svg new file mode 100644 index 0000000..75093e9 --- /dev/null +++ b/src/assets/Images/icon-send.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From c47188f0ffe9c643d076e01ee519e0d216234263 Mon Sep 17 00:00:00 2001 From: JWJung-99 <39busy@naver.com> Date: Sun, 20 Oct 2024 17:33:31 +0900 Subject: [PATCH 17/19] =?UTF-8?q?Style:=20textarea=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=83=89=EC=83=81?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=93=B1=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/GlobalStyles.tsx | 18 ++++++++++++++++-- src/styles/Variables.tsx | 1 + 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx index a653cd1..c2b33a3 100644 --- a/src/styles/GlobalStyles.tsx +++ b/src/styles/GlobalStyles.tsx @@ -173,21 +173,35 @@ const GlobalStyles = css` cursor: pointer; } - /* input, select style */ + /* input, select, textarea style */ select { color: inherit; appearance: none; background: url(/img/icon-accordion-blue.svg) no-repeat center right var(--title-medium) / 1rem; } + textarea { + all: unset; + } + select, - input { + input, + textarea { font-family: 'Pretendard', sans-serif; /* Pretendard 폰트 적용 */ letter-spacing: -0.02em; box-sizing: border-box; padding: 0; } + textarea { + width: 100%; + font-size: ${variables.size.medium}; + box-sizing: border-box; + overflow-y: auto; + overflow-wrap: break-word; + white-space: pre-wrap; + } + select, input[type='text'], input[type='email'], diff --git a/src/styles/Variables.tsx b/src/styles/Variables.tsx index dcf68ff..0db63c9 100644 --- a/src/styles/Variables.tsx +++ b/src/styles/Variables.tsx @@ -3,6 +3,7 @@ const variables = { primary: '#ccb2ff', primaryStrong: '#b691ff', primarySoft: '#eee5ff', + primaryLight: '#f8f4ff', secondary: '#ffd4cb', secondaryStrong: '#ffa997', secondarySoft: '#ffefeb', From b77e8fab1b8defb288f3d631fe9e4f2936315b03 Mon Sep 17 00:00:00 2001 From: JWJung-99 <39busy@naver.com> Date: Sun, 20 Oct 2024 17:34:28 +0900 Subject: [PATCH 18/19] =?UTF-8?q?Feat:=20=EA=B0=90=EC=A0=95=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/emotion/Emotion.tsx | 13 - src/pages/emotion/record/EmotionBad.tsx | 84 ++++++ src/pages/emotion/record/EmotionEffort.tsx | 84 ++++++ src/pages/emotion/record/EmotionForm.tsx | 13 - src/pages/emotion/record/EmotionGood.tsx | 81 ++++++ .../emotion/record/EmotionRecord.style.tsx | 248 ++++++++++++++++++ src/pages/emotion/record/EmotionRecord.tsx | 49 ++-- .../emotion/record/EmotionRecordPage.tsx | 83 ++---- 8 files changed, 556 insertions(+), 99 deletions(-) delete mode 100644 src/pages/emotion/Emotion.tsx create mode 100644 src/pages/emotion/record/EmotionBad.tsx create mode 100644 src/pages/emotion/record/EmotionEffort.tsx delete mode 100644 src/pages/emotion/record/EmotionForm.tsx create mode 100644 src/pages/emotion/record/EmotionGood.tsx create mode 100644 src/pages/emotion/record/EmotionRecord.style.tsx diff --git a/src/pages/emotion/Emotion.tsx b/src/pages/emotion/Emotion.tsx deleted file mode 100644 index 59fe4b9..0000000 --- a/src/pages/emotion/Emotion.tsx +++ /dev/null @@ -1,13 +0,0 @@ -// 진욱 - -import { Outlet } from 'react-router-dom'; - -const Emotion = () => { - return ( - <> - - - ); -}; - -export default Emotion; diff --git a/src/pages/emotion/record/EmotionBad.tsx b/src/pages/emotion/record/EmotionBad.tsx new file mode 100644 index 0000000..2cd5e4a --- /dev/null +++ b/src/pages/emotion/record/EmotionBad.tsx @@ -0,0 +1,84 @@ +import { useState } from 'react'; +import { + AIMessageContainer, + ButtonContainer, + ChattingArea, + EmotionContainer, + InputArea, + MessageContainer, +} from './EmotionRecord.style'; + +const EmotionBad = ({ + onPrev, + onNext, + value, + onChange, +}: { + onPrev: () => void; + onNext: () => void; + value: string[]; + onChange: (value: string[]) => void; +}) => { + const [userInput, setUserInput] = useState(''); + const [badRecords, setBadRecords] = useState(value); + + const handleInput = (e: React.FormEvent) => { + e.preventDefault(); + + if (!userInput.trim()) { + setUserInput(''); + return null; + } + + setBadRecords((prev) => [...prev, userInput]); + setUserInput(''); + }; + + const handleNext = () => { + onChange(badRecords); + onNext(); + }; + + return ( + + + 
    +          {badRecords.length
+            ? `그런일이 있었군요...\n저에게 들려주셔서 감사해요\n저와 함께라면 뭐든 이겨낼 수 있어요.`
+            : `그럼 오늘 혹시 기분 안좋았던 일은 없었나요?\n하루를 보내다보면 좋은일도 있고 나쁜일도 있죠..`}
+
    +     + + + + {badRecords.map((item, index) => ( + 
    {item}
    + ))} +     + + + + +     + + +
    +
    +