From 6f3f494be2d19539c7a8c45c5d76ddcb18512775 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 17 Aug 2023 23:17:01 +0900 Subject: [PATCH 01/21] =?UTF-8?q?[Design]=20Logo=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/util/echoLogo.png | Bin 0 -> 3286 bytes src/components/auth/Account/AccountForm.js | 5 ++++- src/components/auth/Signin/SignInForm.js | 5 ++++- src/components/auth/signup/SignUpForm.js | 5 ++++- src/components/home/MainNavigation.js | 7 ++++++- src/styles/auth/Signin/SignInForm-styled.js | 2 +- src/styles/auth/account/AccountForm-styled.js | 2 +- src/styles/auth/signup/SignUpForm-styled.js | 2 +- src/styles/home/MainNavigation-styled.js | 11 +++++------ 9 files changed, 26 insertions(+), 13 deletions(-) create mode 100644 src/assets/util/echoLogo.png diff --git a/src/assets/util/echoLogo.png b/src/assets/util/echoLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..2b8a7c8c95ce847a367495f1dc2f30ba3dafcb78 GIT binary patch literal 3286 zcmV;{3@P)8P)zH{&HvLOk1l|W21Q3wk)R81;EfB<@Dc);7#fR)S0E-dm4t{PBrK1;_k8^>B-X(0-pjJfE@po-%kG}@ z-Mi=UJKs6y`@VBQuz-uQs^V?fpN$9!L?j@{Ac7uHusKn|UFGHZ8bl~kvPue2!TXS8 zIsnEHfQ|r%0OhM)anqk`e|w1=q8J4F%Ury8kFD3y^&=4C2?C0R(Boe^cy4Rnx#r&x zVMxm=zKL7wSwfuTRe<0bJl^@!`uZCNAPVrSecUnK50Jp8$B9%1E)!&X&2{;fnGiup z%6M-o6Y3G4q+$@l?KC}p8ALG%VUl|bm}s?NgQr^;I;O9L2!aBq=JT|7p+6Zk#89q) zCO397xQapOh_QA}tAg;*X5 z1ufOfTOkN&geblYh^(nFiZ2bK#EK#$h!QJ`kRVE|C_;iLv7!hG&H-Yv7jN(t#dsoE zcC4@>FK?rI#GM^SHZhC8rU=ke5S0YBkHrC$+6RTGxS!c|Od~kVhS(2PTmOFO==m%Z z(Fkd2uiMEvbtc)xLblo`aXI3V9oT|sfDORifZ~uxiv0s<`y?Z=y}PjR1|33(yu31Q zA3YB2z|MV4Vc*jQAaDjqaB#N9?Qw$LcZY=HX;5|L)4J+a$5@VF4DdUWQ?pA>^4nxE z0o$>Xf@Q}V4bt+;CQFaDjy>18T$L+0$;B0NSh|?t1R?EaWmd`#n^NfP{J~^~59=kH8d7ev=Eof!%Xy+)HEC zyr&3g3whwlrd=!QhG$wO77TeGY!DdQm{EnADxPjB&p!-fKw9QMXGo#m!M%Gs51jcJ zfDe-l;sZ7_5nlyVUTmn$Z6D3`6K;)le)ikbU7CE03%;3KD?JFLGBBCj{uW`wlBDb% zc@Q`PC6$5mxjyS{8trxE?6^HIFR*&0(* zm|b$SF`zA9?=RD;#^T%TBG5-4QjDUX=k_)b^5w?LRqvXKU!42yJWXnU=0fK~h`^d_ zkI=Q%^)+igJCimFjTM|Su(l8gzjLc%!@=_WK1&xZe%6-iOnQU~aW`Kdg1}7lutt53 z$o^ncRrX0U=^!oMDFXvhe#UBoTY{VMyJ^{_Kd;|eu*sKbW@fdsi+VSOl2it`9`gwu zbNJ(D5GEMff}3W2jE9UeJYjwXiPYHQ`$30?C}e?|WaAs(3D`e7DQVkHEiG5}`;(50 zsgM_xtSL5Jyu8?JV4<<=>r&nK@<_ZILJm60Og9~o;{gPEEH$g_Ml(5AcKJQbtqtQ5 z55_-motj|ZlxH$6MvS?EN7@W<<3;@O=iK z-9kNhizuJG^wNrwy?b+yc@s&>D!B+jU(Z#swi^xtxLCJ!X!1S&_>wP~$g*QOgxBpp z3Aviz=7Kp4ro0Wh{;=C_YxK50$-KVWdGd%mSrV;c;p<_jlc(^jn*jf!dHSAW4La5> zzY(9dL03glb6G*>7w?yzw{7l#X1h|LxSuufg=RP6X>m^9B+oba;|n8m3GJfnKEC;Q zhjObD=s}(mH~X3rBZgQ!Cx7IbYHJ#vp1x{(tjCR44JiQsV2KwdO^ds`*3bFAn!>DJ zFti!J(zCX|q6ymqU3g+i*gu(aa!PA$Z9%{Ri$jILRz=8feN=hcY%xsp)s$Ch?SI4bRJ>MwJ_FU5CB+fB`XPzb{ z){(o7{w|0YcKVw6O|ab~Jio3T#i7x<>eU_m)&arAPd+D=PaxG-LVa3p>7yj+HBNB) zlV-zaIuC;Q)8+jfc2zZuo?$yGryzch-$F+$Nq8S`kB^S}I-p*jewv%B^6PwAoH0gC zX2B_@HzU~ATCr+OhQ+ahE6~R4vu#%8-EH`ebFMtXwOrs&j+NddO@JYD7O^DaW#M#! zGO6>2Rv#n#E-1v(iMBLVg~;+wFvpr0H3rii5(xO$M-^Fp@L+yl>b&A3TzJ34qCvx} zedORGWqz2eJoWtSozvQO!tvo55pQ|tQ4wcFj)zSbgd2#X*4oS(QwOx65~QxHBY)0X z+k_I%0rxa-=@CyX6ll#&g3u3P1`mReMk#pt!LhiIf&#^6^ZM9<$R`$|r7}vkNx-=V z#IX0Dl#16fOaLdeHNFUv=Uy}{L0A`925gQ#ujZKvu*L#Q&TVOR%KTD+#%6O10<;0O z*IW7o80F%W6)A;i2ApHyRYKStNJ@VIB2>-Pr$2PG`&b8QfwjJ(=@Z#hL zWtU7$Vo4QRm@TH(bR(SR!lgUs!8rtpR14t*VvR4qYQ!I=Ai_@e@YkJ=Y4;7pIS%SG z9HV!e#R{E4+Skhxq$=}4fpn61TqsoBP*Jcq2u|p6fzV|m+hY!xJrpifVC%}8zVd=X zEEO?hVNU6M2oNg4sa}sf`0=h4BMgkq<@ukwmX?-sUteK%9|CcQZMOZZt~uKui0zsA zer@fN5sO%vk=z-dmXU*H1qP$^~`duvP z*Jn5s-;Fs!syo~q;#`C(~d;*2yqFgT>wKC{o!k}7@lB$o03yf*;EN8 zj^xMyI`n6tU);%UGp?aC+;E%PYuEW)q6CFlOpHk|c1+<8|C!y1$%%`%-uT5rw^S_K z>&h;9iYxOlSO~oxEDz!$7F;y=olb{Vo<3P%V*Z&d2-gBc7O@b~t3j`^WJRYdv-DP8 zE&r9PH!dz7Zo|TE-T9=ejb}|CBL#5y z6|J~|G#(2+%`S~K1>2>>Yx!djgdErdx_IbtO;)czDZj+xfgX+r;&VURl7}a@6!C&w zsP}NGiXf!GUIg0n#S{hPaVu7C)`$Or(WA{wz}OWFO&sti(_B+fB2a#xKQ=%}L9wLJ z14$X%ruvieODy)&g}9I-!H!(1A%5sB&p0$m4!D^+{#pKN?O4?4z@t##iH z&b@0w0MtlPN?^1=VH&?hNM-fA^GqWr_EoNYQxWR5e8JxUAY}jHgNc5#YIoe?PsTs7 zK>Gs>HuiXdH~k1NpQl2(F9~B!5w9vgW(Ka~ecM(T!?RD%0Edp2{{u+e>Y3tsWO%H6 zefhf`DCDEym&|hWqWF&8FiO~*1Apf_7y8O)HQAwgY`?N<0{N(7S;I6L^BrE3UB_RG zjExZl8LYgGjnG32Gq<~Z$(SvKF(tS3Y9Zr3$00F>wIEkD! za|v5gzs)zyK0cr-v9sr07*qoM6N<$f&}|CM*si- literal 0 HcmV?d00001 diff --git a/src/components/auth/Account/AccountForm.js b/src/components/auth/Account/AccountForm.js index 80b82e9..b73499f 100644 --- a/src/components/auth/Account/AccountForm.js +++ b/src/components/auth/Account/AccountForm.js @@ -1,5 +1,6 @@ import { NavLink, Outlet } from 'react-router-dom'; +import echoLogo from '@assets/util/echoLogo.png'; import StyledSection from '@styles/auth/account/AccountForm-styled'; const AccountForm = () => { @@ -7,7 +8,9 @@ const AccountForm = () => {
-

Logo

+
+ echo logo +
diff --git a/src/components/auth/Signin/SignInForm.js b/src/components/auth/Signin/SignInForm.js index 19867d1..0dab788 100644 --- a/src/components/auth/Signin/SignInForm.js +++ b/src/components/auth/Signin/SignInForm.js @@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form'; import { useSubmit } from 'react-router-dom'; import { ErrorMessage } from '@hookform/error-message'; +import echoLogo from '@assets/util/echoLogo.png'; import StyledSection from '@styles/auth/signin/SignInForm-styled'; import SignInNavigation from './SignInNavigation'; @@ -44,7 +45,9 @@ const SignInForm = ({ error, isSubmitting }) => { className='signin-form' onSubmit={handleSubmit(onSubmit)} > -

Logo

+
+ echo logo +

Echo 로그인

diff --git a/src/hooks/useCheckID.js b/src/hooks/useCheckID.js index 9e3db6f..4e5f02c 100644 --- a/src/hooks/useCheckID.js +++ b/src/hooks/useCheckID.js @@ -17,7 +17,7 @@ const useCheckID = () => { // 중복 체크 함수 const checkDuplicate = async () => { // 중복체크 로직 - const response = await checkUser(enteredID); + const response = await checkUser(enteredID, 'id'); const resData = await response.json(); if (Object.keys(resData).length === 0) { diff --git a/src/pages/auth/SignUp.js b/src/pages/auth/SignUp.js index 3c2cbd0..875477b 100644 --- a/src/pages/auth/SignUp.js +++ b/src/pages/auth/SignUp.js @@ -1,15 +1,14 @@ -import { json, redirect, useActionData, useNavigation } from 'react-router-dom'; +import { json, redirect, useNavigation } from 'react-router-dom'; import SignUpForm from '@components/auth/signup/SignUpForm'; import { signUpAPI } from '@services/auth'; import { getCurrentTime } from '@utils/date'; const SignUpPage = () => { - const error = useActionData(); const navigation = useNavigation(); const isSubmitting = navigation.state === 'submitting'; - return ; + return ; }; export default SignUpPage; @@ -32,12 +31,6 @@ export async function action({ request }) { }; const response = await signUpAPI(authData); - const resData = await response.json(); - - // 닉네임이 중복인 경우 - if (response.status === 409) { - return { message: resData.message }; - } // 내부 서버 오류 if (!response.ok) { diff --git a/src/services/user.js b/src/services/user.js index 82de4cd..bbdd1ab 100644 --- a/src/services/user.js +++ b/src/services/user.js @@ -69,12 +69,13 @@ export async function updateUser(id, data) { /** * 동일한 유저가 있는지 확인 - * @param {String} id 유저 아이디 + * @param {String} id 유저 아이디 & 닉네임 + * @param {String} type 아이디 & 닉네임 * @returns 응답 */ -export async function checkUser(id) { +export async function checkUser(data, type) { const response = await userAPI( - `users.json?orderBy="id"&equalTo="${id}"`, + `users.json?orderBy="${type}"&equalTo="${data}"`, 'GET', ); From 57f23b346b4daf91eab43614951ae4e8eac78b25 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 01:38:53 +0900 Subject: [PATCH 12/21] =?UTF-8?q?[Feat]=20=EC=9D=B8=EC=A6=9D=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=A0=84=EC=86=A1=20=ED=9A=9F=EC=88=98=20=EB=A7=8C?= =?UTF-8?q?=EB=A3=8C=EC=8B=9C=20=EA=B2=BD=EA=B3=A0=EC=B0=BD=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useCheckPhone.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/hooks/useCheckPhone.js b/src/hooks/useCheckPhone.js index 366940d..373d48f 100644 --- a/src/hooks/useCheckPhone.js +++ b/src/hooks/useCheckPhone.js @@ -30,7 +30,10 @@ const useCheckPhone = () => { .padStart(2, '0')}:${(time % 60).toString().padStart(2, '0')}`; const onSendCode = (phoneNumber) => { - if (sendCount <= 0) return; + if (sendCount <= 0) { + alert('인증번호를 모두 전송하였습니다.'); + return; + } // 인증번호 전송 로직 const koreaPhoneNumber = `+1${phoneNumber}`; From 639102ec1fcc11553995cf035453e265aa3fd41b Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:08:35 +0900 Subject: [PATCH 13/21] =?UTF-8?q?[Design]=20=EC=B1=97=EB=B4=87=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/home/Chatbot-styled.js | 51 +++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/src/styles/home/Chatbot-styled.js b/src/styles/home/Chatbot-styled.js index 0d45e60..065ae90 100644 --- a/src/styles/home/Chatbot-styled.js +++ b/src/styles/home/Chatbot-styled.js @@ -6,12 +6,14 @@ const ChatbotContainer = styled.div` right: 25px; background: transparent; - z-index: 999; .chatbot { - color: red; + max-width: 368px; + .chatbot-img { + position: absolute; + right: 0; + bottom: 0; - button { background: none; border: none; cursor: pointer; @@ -20,6 +22,49 @@ const ChatbotContainer = styled.div` width: 64px; } } + + .speech-bubble { + z-index: 10001; + position: relative; + right: -16px; + bottom: 82px; + + padding: 4px 8px; + border: 1px solid #000000; + border-radius: 0.4em; + + text-align: right; + + p { + text-align: left; + margin: 0; + } + + .button-container { + display: flex; + justify-content: end; + margin-top: 8px; + gap: 8px; + + button { + cursor: pointer; + } + } + } + + .speech-bubble:after { + content: ''; + position: absolute; + bottom: 0; + right: 42px; + width: 0; + height: 0; + border: 12px solid transparent; + border-top-color: #000000; + border-bottom: 0; + margin-left: -12px; + margin-bottom: -12px; + } } `; From aa40e97ea8a6e2386066067d2ea576df645a379a Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:08:46 +0900 Subject: [PATCH 14/21] =?UTF-8?q?[Feat]=20=EC=B1=97=EB=B4=87=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/Chatbot.js | 110 +++++++++++++++++++++++++++++++-- src/store/chatbot.js | 54 ++++++++++++++++ src/store/configureStore.js | 2 + 3 files changed, 160 insertions(+), 6 deletions(-) create mode 100644 src/store/chatbot.js diff --git a/src/components/home/Chatbot.js b/src/components/home/Chatbot.js index 047cf79..7184b62 100644 --- a/src/components/home/Chatbot.js +++ b/src/components/home/Chatbot.js @@ -1,13 +1,111 @@ +import { useCallback, useEffect } from 'react'; +import { useToggle } from 'react-use'; +import { useSelector } from 'react-redux'; + import chatbotIcon from '@assets/util/chatbot.png'; +import store from '@store/configureStore'; +import { BackdropDiv } from '@styles/common/Modal-styled'; +import { + initChatbot, + onChatbot, + setChatbot, + endChatbot, + END_MESSAGE, +} from '@store/chatbot'; +import { + getSection, + getMessageForSectionOne, + getMessageForSectionTwo, + getMessageForSectionThree, +} from '@utils/chatbot'; const Chatbot = () => { + const { message, isOverlay, isSelect, isEnd, isMore } = useSelector( + (state) => state.chatbot, + ); + const [isShowMessage, setIsShowMessage] = useToggle(false); + + const onStartChatbot = () => store.dispatch(onChatbot()); + const onCloseChatbot = () => store.dispatch(endChatbot()); + + useEffect(() => { + if (message === END_MESSAGE) { + setTimeout(() => { + store.dispatch(initChatbot()); + setIsShowMessage(false); + }, 2000); + } + }, [setIsShowMessage, message]); + + const detectMousePosition = useCallback((e) => { + // 전체 크기 구하기 + const maxWidth = document.body.offsetWidth; + + // 클릭한 요소의 상대 위치 구하기 + const rect = e.target.getBoundingClientRect(); + const relativeX = e.clientX - rect.left; + const relativeY = e.clientY - rect.top; + + // 클릭한 요소의 섹션 구하기 + const section = getSection(relativeX, maxWidth); + + // 클릭한 요소의 요소 구하기 + let explanation = ''; + if (section === 1) explanation = getMessageForSectionOne(relativeY); + if (section === 2) explanation = getMessageForSectionTwo(relativeY); + if (section === 3) explanation = getMessageForSectionThree(relativeY); + + // 요소에 대한 설명 출력하기 + store.dispatch(setChatbot({ message: explanation })); + }, []); + return ( -
-

Message

- -
+ <> + {isOverlay && ( + + )} +
+ {isShowMessage && ( +
+

{message}

+ + {isSelect && ( +
+ + +
+ )} + {isEnd && ( +
+ +
+ )} + {isMore && ( +
+ + +
+ )} +
+ )} + +
+ ); }; diff --git a/src/store/chatbot.js b/src/store/chatbot.js new file mode 100644 index 0000000..7c3ee0f --- /dev/null +++ b/src/store/chatbot.js @@ -0,0 +1,54 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const START_MESSAGE = '화면 안내가 필요하신가요?'; +export const SELECT_MESSAGE = '화면에서 설명이 필요한 부분을 선택해주세요.'; +export const END_MESSAGE = '이용해주셔서 감사합니다.'; + +const chatbotSlice = createSlice({ + name: 'chatbot', + initialState: { + message: START_MESSAGE, + isOverlay: false, + isSelect: true, + isEnd: false, + isMore: false, + }, + reducers: { + // 챗봇 초기화 + initChatbot: (state) => { + state.message = START_MESSAGE; + state.isOverlay = false; + state.isSelect = true; + state.isEnd = false; + state.isMore = false; + }, + // 화면 안내 시작 + onChatbot: (state) => { + state.message = SELECT_MESSAGE; + state.isOverlay = true; + state.isSelect = false; + state.isEnd = true; + state.isMore = false; + }, + // 메시지 설정 + setChatbot: (state, action) => { + state.message = action.payload.message; + state.isOverlay = false; + state.isSelect = false; + state.isEnd = false; + state.isMore = true; + }, + // 화면 안내 종료 + endChatbot: (state) => { + state.message = END_MESSAGE; + state.isOverlay = false; + state.isSelect = false; + state.isEnd = false; + state.isMore = false; + }, + }, +}); + +export const { initChatbot, setChatbot, onChatbot, endChatbot } = + chatbotSlice.actions; +export default chatbotSlice.reducer; diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 61eacb1..d8f7c79 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -1,9 +1,11 @@ import { configureStore } from '@reduxjs/toolkit'; import userReducer from './user'; +import chatbotReducer from './chatbot'; const store = configureStore({ reducer: { user: userReducer, + chatbot: chatbotReducer, }, }); From d01762a24b85ac1544f4bb6d176ac1943adb7736 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:09:02 +0900 Subject: [PATCH 15/21] =?UTF-8?q?[Feat]=20=EC=B1=97=EB=B4=87=20=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/chatbot.js | 63 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 src/utils/chatbot.js diff --git a/src/utils/chatbot.js b/src/utils/chatbot.js new file mode 100644 index 0000000..352315a --- /dev/null +++ b/src/utils/chatbot.js @@ -0,0 +1,63 @@ +// 클릭한 좌표의 섹션을 나눠주는 함수 +// 1(왼쪽), 2(중앙), 3(오른쪽) +export const getSection = (clickedX, maxX) => { + const middle = maxX / 2; + + // 왼쪽 + if (clickedX <= middle - 317) { + return 1; + } + + // 오른쪽 + if (clickedX >= middle + 317) { + return 3; + } + + // 중앙 + return 2; +}; + +// 첫 번째 섹션에 대한 설명 +export const getMessageForSectionOne = (clickedY) => { + if (clickedY <= 62 && clickedY >= 17) { + return 'Echo SNS를 상징하는 Logo 이미지입니다.'; + } + + if (clickedY <= 120 && clickedY >= 88) { + return '현재 로그인하신 사용자님의 프로필 이미지와 닉네임입니다. 프로필 이미지를 클릭하면 사용자님의 프로필 페이지로 이동됩니다.'; + } + + if (clickedY <= 165 && clickedY >= 140) { + return '홈 버튼으로, 클릭하면 홈페이지로 이동되어 다른 사용자들의 게시물을 확인할 수 있습니다.'; + } + + if (clickedY <= 206 && clickedY >= 193) { + return '로그아웃 버튼으로, 클릭하면 로그아웃되어 로그인 화면으로 이동하게 됩니다.'; + } + + return '아무것도 존재하지 않는 여백의 미 입니다. 저희 Echo SNS를 이용해 주셔서 감사합니다!'; +}; + +export const getMessageForSectionTwo = (clickedY) => { + // eslint-disable-next-line no-console + console.log(clickedY); + if (clickedY >= 63 && clickedY <= 118) { + return '게시물을 작성할 수 있는 곳으로, 클릭한 후에 간편하게 게시물을 작성할 수 있습니다.'; + } + + if (clickedY >= 129) { + return '사용자가 올린 게시물입니다. 게시물의 내용부분을 클릭하면 사용자의 게시물을 자세하게 볼 수 있으며, 다른 사람들이 작성한 댓글 또한 볼 수 있습니다.'; + } +}; + +export const getMessageForSectionThree = (clickedY) => { + if (clickedY <= 45 && clickedY >= 9) { + return 'Echo SNS의 검색창으로, 유저명을 검색하시면 해당하는 유저들과 유저가 작성한 게시물들이 화면에 표시됩니다.'; + } + + if (clickedY <= 272 && clickedY >= 62) { + return 'Echo SNS를 사용하고 있는 다른 친구들을 추천해줍니다. 다른 친구들을 사귀어보고 친구들과 함께 저희 Echo SNS를 즐겨보세요!'; + } + + return '아무것도 존재하지 않는 여백의 미 입니다. 저희 Echo SNS를 이용해 주셔서 감사합니다!'; +}; From 45b8a5bfc25305884523525581a1f8ebe1783979 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:13:14 +0900 Subject: [PATCH 16/21] =?UTF-8?q?[Feat]=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=99=B8=20=EC=B1=97=EB=B4=87=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EB=AF=B8=EA=B5=AC=ED=98=84=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/Chatbot.js | 41 +++++++++++++++++++--------------- src/store/chatbot.js | 3 ++- src/utils/chatbot.js | 10 ++++++--- 3 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/components/home/Chatbot.js b/src/components/home/Chatbot.js index 7184b62..cbb1c47 100644 --- a/src/components/home/Chatbot.js +++ b/src/components/home/Chatbot.js @@ -1,5 +1,5 @@ import { useCallback, useEffect } from 'react'; -import { useToggle } from 'react-use'; +import { useLocation, useToggle } from 'react-use'; import { useSelector } from 'react-redux'; import chatbotIcon from '@assets/util/chatbot.png'; @@ -20,6 +20,7 @@ import { } from '@utils/chatbot'; const Chatbot = () => { + const { pathname } = useLocation(); const { message, isOverlay, isSelect, isEnd, isMore } = useSelector( (state) => state.chatbot, ); @@ -37,27 +38,31 @@ const Chatbot = () => { } }, [setIsShowMessage, message]); - const detectMousePosition = useCallback((e) => { - // 전체 크기 구하기 - const maxWidth = document.body.offsetWidth; + const detectMousePosition = useCallback( + (e) => { + // 전체 크기 구하기 + const maxWidth = document.body.offsetWidth; - // 클릭한 요소의 상대 위치 구하기 - const rect = e.target.getBoundingClientRect(); - const relativeX = e.clientX - rect.left; - const relativeY = e.clientY - rect.top; + // 클릭한 요소의 상대 위치 구하기 + const rect = e.target.getBoundingClientRect(); + const relativeX = e.clientX - rect.left; + const relativeY = e.clientY - rect.top; - // 클릭한 요소의 섹션 구하기 - const section = getSection(relativeX, maxWidth); + // 클릭한 요소의 섹션 구하기 + const section = getSection(relativeX, maxWidth); - // 클릭한 요소의 요소 구하기 - let explanation = ''; - if (section === 1) explanation = getMessageForSectionOne(relativeY); - if (section === 2) explanation = getMessageForSectionTwo(relativeY); - if (section === 3) explanation = getMessageForSectionThree(relativeY); + // 클릭한 요소의 요소 구하기 + let explanation = ''; + if (section === 1) explanation = getMessageForSectionOne(relativeY); + if (section === 2) + explanation = getMessageForSectionTwo(relativeY, pathname); + if (section === 3) explanation = getMessageForSectionThree(relativeY); - // 요소에 대한 설명 출력하기 - store.dispatch(setChatbot({ message: explanation })); - }, []); + // 요소에 대한 설명 출력하기 + store.dispatch(setChatbot({ message: explanation })); + }, + [pathname], + ); return ( <> diff --git a/src/store/chatbot.js b/src/store/chatbot.js index 7c3ee0f..a35baef 100644 --- a/src/store/chatbot.js +++ b/src/store/chatbot.js @@ -2,7 +2,8 @@ import { createSlice } from '@reduxjs/toolkit'; const START_MESSAGE = '화면 안내가 필요하신가요?'; export const SELECT_MESSAGE = '화면에서 설명이 필요한 부분을 선택해주세요.'; -export const END_MESSAGE = '이용해주셔서 감사합니다.'; +export const END_MESSAGE = + 'Echo Bot을 이용해주셔서 감사합니다. 궁금한 점이 있으면 언제든 이용해주세요.'; const chatbotSlice = createSlice({ name: 'chatbot', diff --git a/src/utils/chatbot.js b/src/utils/chatbot.js index 352315a..5d0635f 100644 --- a/src/utils/chatbot.js +++ b/src/utils/chatbot.js @@ -38,9 +38,11 @@ export const getMessageForSectionOne = (clickedY) => { return '아무것도 존재하지 않는 여백의 미 입니다. 저희 Echo SNS를 이용해 주셔서 감사합니다!'; }; -export const getMessageForSectionTwo = (clickedY) => { - // eslint-disable-next-line no-console - console.log(clickedY); +export const getMessageForSectionTwo = (clickedY, location) => { + if (location !== '/') { + return '죄송합니다. 아직까지 홈페이지 외에 정보가 부족합니다. 더 도움이 될 수 있는 Echo Bot이 되도록 노력하겠습니다.'; + } + if (clickedY >= 63 && clickedY <= 118) { return '게시물을 작성할 수 있는 곳으로, 클릭한 후에 간편하게 게시물을 작성할 수 있습니다.'; } @@ -48,6 +50,8 @@ export const getMessageForSectionTwo = (clickedY) => { if (clickedY >= 129) { return '사용자가 올린 게시물입니다. 게시물의 내용부분을 클릭하면 사용자의 게시물을 자세하게 볼 수 있으며, 다른 사람들이 작성한 댓글 또한 볼 수 있습니다.'; } + + return '아무것도 존재하지 않는 여백의 미 입니다. 저희 Echo SNS를 이용해 주셔서 감사합니다!'; }; export const getMessageForSectionThree = (clickedY) => { From e2386f9e01b9e215ead6a02b8cd0598ff588c594 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:13:24 +0900 Subject: [PATCH 17/21] =?UTF-8?q?[Style]=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 11dd6f3..84b7114 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { Provider } from 'react-redux'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; From 82f3963f2e66b9f1eb02ec7783ed00bba6663956 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:25:46 +0900 Subject: [PATCH 18/21] =?UTF-8?q?[Feat]=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EA=B0=80=205=EC=B4=88=EA=B0=84=20=EC=9B=80=EC=A7=81=EC=9E=84?= =?UTF-8?q?=EC=9D=B4=20=EC=97=86=EC=9D=84=20=EC=8B=9C=20Echo=20bot=20?= =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/Chatbot.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/home/Chatbot.js b/src/components/home/Chatbot.js index cbb1c47..5443cae 100644 --- a/src/components/home/Chatbot.js +++ b/src/components/home/Chatbot.js @@ -1,5 +1,5 @@ import { useCallback, useEffect } from 'react'; -import { useLocation, useToggle } from 'react-use'; +import { useIdle, useLocation, useToggle } from 'react-use'; import { useSelector } from 'react-redux'; import chatbotIcon from '@assets/util/chatbot.png'; @@ -20,6 +20,7 @@ import { } from '@utils/chatbot'; const Chatbot = () => { + const isIdle = useIdle(5e3); const { pathname } = useLocation(); const { message, isOverlay, isSelect, isEnd, isMore } = useSelector( (state) => state.chatbot, @@ -29,6 +30,12 @@ const Chatbot = () => { const onStartChatbot = () => store.dispatch(onChatbot()); const onCloseChatbot = () => store.dispatch(endChatbot()); + useEffect(() => { + if (isIdle) { + setIsShowMessage(true); + } + }, [setIsShowMessage, isIdle]); + useEffect(() => { if (message === END_MESSAGE) { setTimeout(() => { From 113bab6ecdfb5128af9f0bd779d9a28060ee6467 Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:25:56 +0900 Subject: [PATCH 19/21] =?UTF-8?q?[Design]=20=EC=B1=97=EB=B4=87=20=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=ED=9A=A8=EA=B3=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/home/Chatbot-styled.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/styles/home/Chatbot-styled.js b/src/styles/home/Chatbot-styled.js index 065ae90..55ca3ce 100644 --- a/src/styles/home/Chatbot-styled.js +++ b/src/styles/home/Chatbot-styled.js @@ -9,6 +9,7 @@ const ChatbotContainer = styled.div` .chatbot { max-width: 368px; + .chatbot-img { position: absolute; right: 0; @@ -24,6 +25,19 @@ const ChatbotContainer = styled.div` } .speech-bubble { + animation: 0.5s slide-down ease-in-out; + + @keyframes slide-down { + from { + opacity: 0; + transform: translateY(1rem); + } + to { + opacity: 1; + transform: translateY(0); + } + } + z-index: 10001; position: relative; right: -16px; From dc4203a5456b2e5e186369abb18344ea72313dcc Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:33:02 +0900 Subject: [PATCH 20/21] =?UTF-8?q?[Feat]=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=99=80=20=ED=94=84=EB=A1=9C=ED=95=84=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9D=BC?= =?UTF-8?q?=EB=B6=80=EB=B6=84=EB=A7=8C=20=EB=85=B8=EC=B6=9C=EC=8B=9C?= =?UTF-8?q?=ED=82=A4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/post/PostItem.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/home/post/PostItem.js b/src/components/home/post/PostItem.js index 47b178e..fe60995 100644 --- a/src/components/home/post/PostItem.js +++ b/src/components/home/post/PostItem.js @@ -65,7 +65,13 @@ const PostItem = ({ post }) => {
{isLink && ( -
{formattedContent}
+
+ {content.replace(/\\r\\n/g, ' ').slice(0, 360)} + +

+ {content.length >= 360 && '더보기.....'} +

+
)} {!isLink &&
{formattedContent}
} From b0b6b6e576543e527f2d314ab4b258817a7bc55c Mon Sep 17 00:00:00 2001 From: BangDori Date: Fri, 18 Aug 2023 04:33:17 +0900 Subject: [PATCH 21/21] =?UTF-8?q?[Feat]=20=EC=B1=97=EB=B4=87=EC=9D=B4=20?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=ED=99=9C=EC=84=B1=ED=99=94=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/Chatbot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/home/Chatbot.js b/src/components/home/Chatbot.js index 5443cae..5ad79a8 100644 --- a/src/components/home/Chatbot.js +++ b/src/components/home/Chatbot.js @@ -20,7 +20,7 @@ import { } from '@utils/chatbot'; const Chatbot = () => { - const isIdle = useIdle(5e3); + const isIdle = useIdle(5e3, true); const { pathname } = useLocation(); const { message, isOverlay, isSelect, isEnd, isMore } = useSelector( (state) => state.chatbot,