From 79721e97c0b240e0fe2f3b5f570319135f46edc4 Mon Sep 17 00:00:00 2001 From: seohyun Date: Sat, 6 Jan 2024 16:35:50 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20Chat-136-=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83-=EC=9E=91=EC=84=B1=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Chore: 컬러 정의 추가 및 svg, font asset 다운로드 * Chore: 폰트 정의 추가 * Feat: AI 변경 화면 header UI 구현 * Feat: AI 변경 화면 UI 구현 (체크박스 제외) * Feat: 변경 가능/불가능일 때 각각 버튼 UI 구현 * Feat: 라디오버튼 UI 구현 * Feat: AI 변경 버튼 선택에 따른 UI 변경 구현 * Feat: 상단 header 버튼으로 화면 전환 구현 * Feat: 변경 버튼 onClick 이벤트 추가 (내용 X) * Chore: Button 컴포넌트 이름 변경 * Chore: ConfirmButton css 수정 --- src/assets/chat-profile-chichi.svg | 8 ++ src/assets/chat-profile-dada.svg | 10 +++ src/assets/chat-profile-lulu.svg | 60 +++++++++++++ src/assets/chichi.svg | 15 ++++ src/assets/dada.svg | 9 ++ src/assets/ic-checkbox-empty.svg | 5 ++ src/assets/ic-checkbox-fill.svg | 4 + src/assets/ic-left-chevron.svg | 3 + src/assets/index.tsx | 7 ++ src/assets/lulu.svg | 73 +++++++++++++++ .../Buttons/ChangeRadioBtn.module.scss | 14 +++ src/components/Buttons/ChangeRadioBtn.tsx | 20 +++++ .../Buttons/ConfirmButton.module.scss | 28 ++++++ src/components/Buttons/ConfirmButton.tsx | 21 +++++ .../Headers/ChangeHeader.module.scss | 18 ++++ src/components/Headers/ChangeHeader.tsx | 19 ++++ src/index.css | 15 ++++ src/index.tsx | 1 + src/pages/Chat/Chat.module.scss | 90 +++++++++---------- src/pages/Chat/Profile.module.scss | 67 ++++++++++++++ src/pages/Chat/Profile.tsx | 85 +++++++++++++++++- 21 files changed, 526 insertions(+), 46 deletions(-) create mode 100644 src/assets/chat-profile-chichi.svg create mode 100644 src/assets/chat-profile-dada.svg create mode 100644 src/assets/chat-profile-lulu.svg create mode 100644 src/assets/chichi.svg create mode 100644 src/assets/dada.svg create mode 100644 src/assets/ic-checkbox-empty.svg create mode 100644 src/assets/ic-checkbox-fill.svg create mode 100644 src/assets/ic-left-chevron.svg create mode 100644 src/assets/index.tsx create mode 100644 src/assets/lulu.svg create mode 100644 src/components/Buttons/ChangeRadioBtn.module.scss create mode 100644 src/components/Buttons/ChangeRadioBtn.tsx create mode 100644 src/components/Buttons/ConfirmButton.module.scss create mode 100644 src/components/Buttons/ConfirmButton.tsx create mode 100644 src/components/Headers/ChangeHeader.module.scss create mode 100644 src/components/Headers/ChangeHeader.tsx create mode 100644 src/index.css create mode 100644 src/pages/Chat/Profile.module.scss diff --git a/src/assets/chat-profile-chichi.svg b/src/assets/chat-profile-chichi.svg new file mode 100644 index 0000000..72432d6 --- /dev/null +++ b/src/assets/chat-profile-chichi.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/chat-profile-dada.svg b/src/assets/chat-profile-dada.svg new file mode 100644 index 0000000..b98fc9c --- /dev/null +++ b/src/assets/chat-profile-dada.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/chat-profile-lulu.svg b/src/assets/chat-profile-lulu.svg new file mode 100644 index 0000000..7f404de --- /dev/null +++ b/src/assets/chat-profile-lulu.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/chichi.svg b/src/assets/chichi.svg new file mode 100644 index 0000000..e785b1e --- /dev/null +++ b/src/assets/chichi.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/dada.svg b/src/assets/dada.svg new file mode 100644 index 0000000..4fe9af3 --- /dev/null +++ b/src/assets/dada.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/ic-checkbox-empty.svg b/src/assets/ic-checkbox-empty.svg new file mode 100644 index 0000000..7587775 --- /dev/null +++ b/src/assets/ic-checkbox-empty.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/ic-checkbox-fill.svg b/src/assets/ic-checkbox-fill.svg new file mode 100644 index 0000000..4e65464 --- /dev/null +++ b/src/assets/ic-checkbox-fill.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/ic-left-chevron.svg b/src/assets/ic-left-chevron.svg new file mode 100644 index 0000000..02af02f --- /dev/null +++ b/src/assets/ic-left-chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/index.tsx b/src/assets/index.tsx new file mode 100644 index 0000000..1f865aa --- /dev/null +++ b/src/assets/index.tsx @@ -0,0 +1,7 @@ +export { ReactComponent as Dada } from './dada.svg'; +export { ReactComponent as Chichi } from './chichi.svg'; +export { ReactComponent as Lulu } from './lulu.svg'; +export { ReactComponent as ChatDada } from './chat-profile-dada.svg'; +export { ReactComponent as ChatChichi } from './chat-profile-chichi.svg'; +export { ReactComponent as ChatLulu } from './chat-profile-lulu.svg'; +export { ReactComponent as LeftChevron } from './ic-left-chevron.svg'; diff --git a/src/assets/lulu.svg b/src/assets/lulu.svg new file mode 100644 index 0000000..0b0c25a --- /dev/null +++ b/src/assets/lulu.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Buttons/ChangeRadioBtn.module.scss b/src/components/Buttons/ChangeRadioBtn.module.scss new file mode 100644 index 0000000..3488310 --- /dev/null +++ b/src/components/Buttons/ChangeRadioBtn.module.scss @@ -0,0 +1,14 @@ +@import '../../styles/variables/colors.scss'; +@import '../../styles/variables/fonts.scss'; + +.changeRadio { + appearance: none; + width: 24px; + height: 24px; + margin: 0 0 0 3px; + background: url('../../assets/ic-checkbox-empty.svg'); + + &:checked { + background: url('../../assets/ic-checkbox-fill.svg'); + } +} diff --git a/src/components/Buttons/ChangeRadioBtn.tsx b/src/components/Buttons/ChangeRadioBtn.tsx new file mode 100644 index 0000000..81c0263 --- /dev/null +++ b/src/components/Buttons/ChangeRadioBtn.tsx @@ -0,0 +1,20 @@ +import styles from './ChangeRadioBtn.module.scss'; + +interface Props { + id: number; + onChange: (id: number) => void; +} + +const ChangeRadioBtn = ({ id, onChange }: Props) => { + return ( + onChange(id)} + > + ); +}; + +export default ChangeRadioBtn; diff --git a/src/components/Buttons/ConfirmButton.module.scss b/src/components/Buttons/ConfirmButton.module.scss new file mode 100644 index 0000000..b9bb3f5 --- /dev/null +++ b/src/components/Buttons/ConfirmButton.module.scss @@ -0,0 +1,28 @@ +@import '../../styles/variables/colors.scss'; +@import '../../styles/variables/fonts.scss'; + +.changeBtn { + all: initial; + position: absolute; + bottom: 12px; + + display: flex; + width: calc(100% - 32px); + height: min-content; + margin: 0 16px; + padding: 14px 0px; + justify-content: center; + align-items: center; + border-radius: 8px; + @include btn; + color: $BK70; + background-color: $BK30; + pointer-events: none; // 클릭 불가능하게 설정 + + &.abled { + // 버튼을 선택한 상태 + background-color: $primary_default; + color: $WH; + pointer-events: auto; // 클릭 가능하게 설정 + } +} diff --git a/src/components/Buttons/ConfirmButton.tsx b/src/components/Buttons/ConfirmButton.tsx new file mode 100644 index 0000000..a55b8db --- /dev/null +++ b/src/components/Buttons/ConfirmButton.tsx @@ -0,0 +1,21 @@ +import styles from './ConfirmButton.module.scss'; + +interface Props { + children: string; + isAble: boolean; + id: number; + onClick: (id: number) => void; +} + +const ChangeButton = ({ children, isAble, id, onClick }: Props) => { + return ( + + ); +}; + +export default ChangeButton; diff --git a/src/components/Headers/ChangeHeader.module.scss b/src/components/Headers/ChangeHeader.module.scss new file mode 100644 index 0000000..9582318 --- /dev/null +++ b/src/components/Headers/ChangeHeader.module.scss @@ -0,0 +1,18 @@ +@import '../../styles/variables/colors.scss'; +@import '../../styles/variables/fonts.scss'; + +.changeHeader { + display: flex; + justify-content: center; + padding: 15px 0px; + + & :first-child { + position: absolute; + left: 15px; + } + + & span { + @include sub18; + color: $BK90; + } +} diff --git a/src/components/Headers/ChangeHeader.tsx b/src/components/Headers/ChangeHeader.tsx new file mode 100644 index 0000000..a010d78 --- /dev/null +++ b/src/components/Headers/ChangeHeader.tsx @@ -0,0 +1,19 @@ +import { useNavigate } from 'react-router-dom'; +import { LeftChevron } from '../../assets'; +import styles from './ChangeHeader.module.scss'; + +interface Props { + children: string; +} +const ChangeHeader = ({ children }: Props) => { + const navigate = useNavigate(); + + return ( +
+ navigate('/chat')} /> + {children} +
+ ); +}; + +export default ChangeHeader; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..74626d6 --- /dev/null +++ b/src/index.css @@ -0,0 +1,15 @@ +/* font 설정 */ +@font-face { + font-family: 'Pretendard-Bold'; + src: url('./assets/fonts/Pretendard-Bold.woff'); +} + +@font-face { + font-family: 'Pretendard-SemiBold'; + src: url('./assets/fonts/Pretendard-SemiBold.woff'); +} + +@font-face { + font-family: 'Pretendard-Regular'; + src: url('./assets/fonts/Pretendard-Regular.woff'); +} diff --git a/src/index.tsx b/src/index.tsx index d23f06b..56a5fca 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import './index.css'; import App from './App'; const root = ReactDOM.createRoot( diff --git a/src/pages/Chat/Chat.module.scss b/src/pages/Chat/Chat.module.scss index 415ccca..fe7726b 100644 --- a/src/pages/Chat/Chat.module.scss +++ b/src/pages/Chat/Chat.module.scss @@ -1,45 +1,45 @@ -@import '../../styles/variables/colors.scss'; -@import '../../styles/variables/fonts.scss'; - -.messagesContainer { - display: flex; - flex-direction: column; - width: 100%; - gap: 20px; - padding: 10px; - margin-top: 56px; - margin-bottom: 48px; -} -.aiChanged { - display: flex; - justify-content: center; - @include caption; - color: $BK70; -} - -.inputBox { - display: flex; - justify-content: space-between; - position: fixed; - bottom: 0; - width: 100%; - height: 48px; - .plusBtn { - display: flex; - justify-content: center; - align-items: center; - border: none; - background-color: transparent; - } - .input { - flex-grow: 1; - border: none; - outline: none; - } - .submitBtn { - width: 56px; - border: none; - background-color: $primary_default; - color: $WH; - } -} +@import '../../styles/variables/colors.scss'; +@import '../../styles/variables/fonts.scss'; + +.messagesContainer { + display: flex; + flex-direction: column; + width: 100%; + gap: 20px; + padding: 10px; + margin-top: 56px; + margin-bottom: 48px; +} +.aiChanged { + display: flex; + justify-content: center; + @include caption; + color: $BK70; +} + +.inputBox { + display: flex; + justify-content: space-between; + position: fixed; + bottom: 0; + width: 100%; + height: 48px; + .plusBtn { + display: flex; + justify-content: center; + align-items: center; + border: none; + background-color: transparent; + } + .input { + flex-grow: 1; + border: none; + outline: none; + } + .submitBtn { + width: 56px; + border: none; + background-color: $primary_default; + color: $WH; + } +} diff --git a/src/pages/Chat/Profile.module.scss b/src/pages/Chat/Profile.module.scss new file mode 100644 index 0000000..0b059c9 --- /dev/null +++ b/src/pages/Chat/Profile.module.scss @@ -0,0 +1,67 @@ +@import '../../styles/variables/colors.scss'; +@import '../../styles/variables/fonts.scss'; + +.profileBefore { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px 0px; + + & .name { + margin-top: 6px; + @include sub18; + color: $BK90; + } + + & .text { + margin-top: 8px; + @include body14; + color: $BK90; + text-align: center; + } + + & .tags { + display: flex; + margin-top: 24px; + gap: 8px; + @include body14; + color: $BK70; + align-items: center; + } +} + +.profileAfter { + padding: 48px 16px; + + & .chatProfile { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 0px; + + & :first-child { + display: flex; + align-items: center; + } + + & .name { + margin-left: 16px; + @include sub16; + color: $BK90; + } + + & .tags { + display: flex; + align-items: center; + gap: 8px; + @include caption; + color: $BK70; + } + } + + & .uncheckedLabel { + opacity: 0.4; + } +} diff --git a/src/pages/Chat/Profile.tsx b/src/pages/Chat/Profile.tsx index 7f6b836..d45d87c 100644 --- a/src/pages/Chat/Profile.tsx +++ b/src/pages/Chat/Profile.tsx @@ -1,5 +1,88 @@ +import { useEffect, useState } from 'react'; +import styles from './Profile.module.scss'; + +import { + Dada, + Chichi, + Lulu, + ChatDada, + ChatChichi, + ChatLulu, +} from '../../assets/index'; +import ChangeHeader from '../../components/Headers/ChangeHeader'; +import ChangeRadioBtn from '../../components/Buttons/ChangeRadioBtn'; +import ConfirmButton from '../../components/Buttons/ConfirmButton'; + const Profile = () => { - return
Profile
; + const [isAble, setIsAble] = useState(false); + const [checkedId, setCheckedId] = useState(0); + + const handleRadioChange = (id: number) => { + setCheckedId(id); + }; + + const handleAiChange = (id: number) => { + console.log(`${id}`); + }; + + useEffect(() => { + if (checkedId === 0) setIsAble(false); + else setIsAble(true); + }, [checkedId]); + + return ( + <> + 대화 상대 변경 +
+ + 다다 +
+ 안녕 나는 다다! +
+ 오늘 하루는 어땠어? 네 이야기를 들려줘! +
+
+ #공감만렙 + #수다스러운 +
+
+
+ + +
+ + 변경하기 + + + ); }; export default Profile;