Project

📌 채팅 구현시 구글 로그인된 정보값을 가져오지 못하는 문제 [구글 로그인시] 채팅 프로필에 구글 로그인시에는 그냥 디폴트이미지만 불러오는 이슈가 발생했다. 🥹 [이메일로 회원가입시] 이메일로 회원가입시에는 마이페이지에서 변경한 이미지가 실시간으로 잘 들어오지만 구글 로그인은 정보값을 가져오지 못했다. 🧐 해결 과정 알고 보니 구글 로그인한 정보값은 파이어베이스의 users collection에 들어가지 않아서 생긴 이슈였다. [ handleGoogleSignIn.tsx ] import classNames from 'classnames'; import { auth } from '@/firebase/auth'; import { db } from '@/firebase/firestore'; import cla..

프로필이미지가 다 똑같이 나오는 이슈가 발생..! 이를 해결하기 위해서 다음과 같이 해결하였습니다. [ Firebase를 사용하여 채팅 메시지를 표시하는 컴포넌트 ] import { useState, useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import classNames from 'classnames'; import classes from './Message.module.scss'; import { authImagState } from '@/@recoil/authImgState'; import defaultAvatar from '/public/assets/defaultAvatars.svg'; import { collectio..

[ Recommend.tsx ] import axios from 'axios'; import { Banner } from '@/components'; import { useEffect, useState } from 'react'; import classes from './Recommend.module.scss'; import { FoodList } from '@/components/FoodList/FoodList'; import { useDocumentTitle } from '@/hooks/useDocumentTitle'; import { Pagination } from '@/components/Pagination/Pagination'; import { ScrollButton } from '@/compo..

React를 사용한 채팅 애플리케이션에서 메시지 입력과 이미지 업로드를 처리하는 컴포넌트의 코드입니다. export function SendMessage() { .... const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter') { const fileInput = document.getElementById('file') as HTMLInputElement; fileInput.click(); } }; return ( 메세지 입력 setInput(e.target.value)} required /> setImg(e.target.files[0])} aria-label="이미지 업로드 버튼" tabIndex={-1} /> ⌲ ); } 이미지 업로드 ..

⭐️ 채팅 기능 메세지와 이미지 업로드 구현 해당 코드는 Firebase를 사용하여 실시간 채팅 애플리케이션의 메시지 전송 기능을 구현하는데 사용되는 React 컴포넌트입니다. import { getDownloadURL, ref, uploadBytesResumable, UploadTaskSnapshot, } from '@firebase/storage'; import { db } from '@/firebase/app'; import { storage } from '@/firebase/storage'; import { BsFillSendFill } from 'react-icons/bs'; import classes from './SendMessage.module.scss'; import { AuthConte..

라우터 연결 관련 문제 첫 홈 화면에는 헤더와 푸터가 불러와 지지 않게 하고, 다른 페이지들은 헤더와 푸터가 불러와 지게 하고싶은데 둘다 헤더와 푸터가 불러와 지는 이슈 발생. 문제 : [렌더링 되는 홈 화면] 문제 : [ 라우터 코드 ] import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Home from '@/pages/Home/Home'; import Chat from '@/pages/Chat/Chat'; import MyPage from '@/pages/MyPage/MyPage'; import RootLayout from './pages/Layout/Layout'; import NotFound from '@/..

과정 : 1. 전역에 설정 import { getNode, css } from "./../lib/index.js"; const dropDown = getNode(".nav-menu__item"); const handlerOnDropDown = () => { css(".nav-sub-menu", "display", "block"); }; const handlerOffDropDown = () => { css(".nav-sub-menu", "display", "none"); }; dropDown.addEventListener("mouseover", handlerOnDropDown); dropDown.addEventListener("mouseout", handlerOffDropDown); 2.함수로 감싸줌 im..