juni

투어 종류 4개이상 늘리기 로딩에 맞춰 로딩 화면을 잘 보여주기 채팅 페이지 세로 길이 맞추기 메인페이지 박스 크기 화면 크기에 맞추기 메시지 수정 로그? 확인하기 -> 이따 물어보자 모든 리뷰 보기 헤더 위치 맞추기 -> 모든 페이지 헤더 컴포넌트를 만드는게 편할 듯 커스텀 백 네비게이션 구성하기 언어 변경 추가하기 github1s.com으로 편하게 보기 가능 메인페이지 서버 코드 route분리 , 레이아웃 만들어서 헤더 적용 return에서 반복문이 사용 되는 경우 컴포넌트 분리가 좋음 new Date는 p태그가 아니라 함수로 만들어서 사용해야 성능이 향상됨 상세 페이지 Rear 컴포넌트 이름 정확하게 바꾸기 , 불필요한 코드 삭제 Read - tags를 상태로 관리해야 좋음 , 컴포넌트 더 쪼개야함..

setNickname(e.target.value)} />  setNickname(e.target.value)} />닉네임이 입력을 끝냈을 때만 바뀌도록 하려면 onChange 대신 onBlur 이벤트를 사용해야 합니다. onBlur 이벤트는 사용자가 입력 필드를 벗어날 때 트리거됩니다 입력하는 동안에는 바뀌지 않고 필드를 벗어났을 경우에만 setNickname이 변경

return ( Go Back My Page Logout setSelectedComponent('Wishlist')}>Wishlist setSelectedComponent('Post')}>Post setSelectedComponent('Reservation')}>Reservation setSelectedComponent('Review')}>Review {selectedComponent === 'Wishlist' && } {selectedComponent === 'Post' && } {selec..

const groupedChats = chatData?.reduce((acc: { [key: string]: Chat }, message) => { const chatId = `${message.post_id}-${[message.sender_id, message.receiver_id].sort().join('-')}`; if (!acc[chatId]) { acc[chatId] = { post_id: message.post_id, sender_id: message.sender_id, receiver_id: message.receiver_id, messages: [] }; } acc[chatId].messages.pu..

채팅 목록을 게시글 정보가아닌 메시지를 보낸 유저 정보로 고정하기기존 로직은 게시글 정보가 보였고 , 단순하게 조건문만 추가해서는 마지막으로 채팅을 보낸 사람의 정보가 나오면서 채팅 목록에 내 계정 정보가 나오는 문제 발생 -> 해결을 위해 조건문 추가 및 userId를 받아오는 과정에서도 로직을 추가하여 구현 하지만 채팅 목록이 많아짐에따라 userId는 채팅 목록 갯수만큼 ( 현재는 4번 ) , senderDetails는 4x4 총 16번 호출 되는 비효율 발생 -> 추후 개선 필요'use client';import React from 'react';import { useQuery } from '@tanstack/react-query';import { useRouter } from 'next/navi..

채팅 양 방향 실시간 기능 및 리스트현재 투어 이미지 + 투어 제목으로 보이지만 메시지 보낸 사람 프로필 이미지 + 닉네임으로 수정 예정-> 어떤 투어에관한 채팅인지는 채팅페이지에서 확인 가능 , 채팅 리스트도 별도 페이지 만들어서 분리 예정'use client';import React from 'react';import { useQuery } from '@tanstack/react-query';import { useRouter } from 'next/navigation';import Image from 'next/image';import { API_MYPAGE_CHATS, API_POST_DETAILS } from '@/utils/apiConstants';import axios from 'axios';..

투어 상세 페이지에서 가이드에게 메시지 보내기과정에서 팀원의 코드를 기반으로 추가 및 수정을 진행해야 하다보니 어려움이 많았음사용중인 api부터 코드 스타일 등등 로직을 이해하여 구현에 성공1:1 실시간 채팅은 확인해보고 개선해야함기존에 가이드 일부 정보만 받아오던 코드에서가이드 고유id , 위치 정보 등 더 필요한 정보를 받아오고 투어 내용도 받아와서 params를 통해 채팅 페이지로 전달'use client';import { useQuery } from '@tanstack/react-query';import axios from 'axios';import Image from 'next/image';import { useParams, useRouter } from 'next/navigation';impo..

refetch는 react-query 라이브러리에서 데이터를 다시 가져오는 기능을 제공하는 함수입니다.useQuery 훅을 사용할 때, 데이터를 불러오는 함수(queryFn)가 실행되어 데이터를 가져오고, 이후 refetch 함수를 호출하여 동일한 데이터를 다시 요청할 수 있습니다.주요 기능데이터 갱신: refetch를 호출하면 queryFn이 다시 실행되어 최신 데이터를 가져옵니다.강제 갱신: 캐시된 데이터를 사용하지 않고 강제로 데이터를 새로 불러올 때 유용합니다.조건부 데이터 요청: 특정 이벤트(예: 버튼 클릭, 페이지 전환 등) 발생 시 데이터를 다시 불러올 수 있습니다. const { data, isPending, error, refetch } = useQuery[]>({ queryKey..