개발개발/LifeGraph_인생그래프13 [인생 그래프] 반응형 버그 해결 푸터 추가할 겸 사이트 보다가 버그를 발견했다.아래 두 개 gif의 차이점이 보이나요? 그래프 영역의 너비가 줄어들지 않아도 윈도우 너비가 변하면 그래프가 같이 축소되고있다.윈도우 너비에 반응하도록 구현해두었기 때문에 발생한 문제이다.파란 테두리 안쪽 영역(.border)의 최대 너비를 1200px에서 900px로 줄이면서 이 문제를 알아채게 되었다. 이전에 반응형 테스트할때 최대 너비 이상으로는 늘려보지 않았던게 패착이었다. 즉 1200px 이내에서만 너비를 늘리고, 줄이는 테스트를 했기때문에 항상 그래프 영역의 너비도 줄어들었던 것이다. //기존 코드const [width, setWidth] = useState(window.innerWidth);const [prevWidth, setPrevWidth.. 2025. 2. 20. [인생 그래프] 텍스트가 그래프 밖으로 튀어나온다 유저가 그래프 오른쪽 끝에서 타이틀을 입력하면 아래 캡쳐이미지처럼 그래프 영역 밖으로 튀어나온다.이 상태에서 그래프 저장이나 복사를 하면 이렇게 짤려서 나오게 된다import { MouseEvent } from "react";import "./graphContainer.scss";import XScale from "./XScale/XScale";const GraphContainer = ({ children, onClick,}: { children: React.ReactNode; onClick?: (e: MouseEvent) => void;}) => { return ( {children} );};export default GraphCon.. 2025. 2. 14. [인생 그래프] 아이폰 safari에서 이미지 복사가 안됨 - 해결 과정 카톡 인앱 브라우저에서 외부 브라우저로 강제 리다이렉트를 시켜서 이미지 저장 기능은 구현했다.그런데 이미지 복사는 안되는 상황 Clipboard API 를 사용해 구현한 코드이다. const handleImageAction = async () => { const image = imageRef.current; if (!image) return; try { const canvas = await html2canvas(image, { scale: 2 }); canvas.toBlob(async (blob) => { if (!blob) { alert("이미지 파일이 생성되지 않았습니다."); return; } .. 2025. 2. 13. [인생 그래프] 카카오톡 인앱 브라우저 탈출하기 그래프 이미지를 저장하는 기능을 html2canvas와 file-saver로 구현했다.그런데 카톡에서 링크를 열어서 그래프를 그리고 저장 버튼을 누르면.. 아무일도 일어나지 않는다! 아이폰 기준 사파리에서는 잘 되는데 ㅠㅡㅠ찾아보니 이 문제로 이미 많은 개발자들이 고통받고 있었다. 방법을 찾다가 카카오톡 브라우저에 대한 문제 제기해주신 글을 봤다.https://medium.com/@sunyi233 위 글을 읽다가 여기서 솔루션을 찾을 수 있었다!https://burndogfather.com/271 카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)이전부터 카카오톡 등과 같은 메신저에서 인앱브라우저를 강제하는 불합리한 조치를 우회하기.. 2025. 2. 13. [인생 그래프] SCSS 반응형 디자인 구현하기 폰트 크기, 여백 등의 스타일은 미디어 쿼리로 쉽게 반응형 구현이 가능하다.scss에서는 변수를 선언할 수 있어서 매우 편리하다// variables.scss// 반응형 너비$mobile: 375px;$tablet: 768px;$desktop: 1024px;@import "./variables";.border { // 기본 스타일 @media (max-width: $mobile) { // 모바일 너비에서 보여줄 스타일 } } 또한 폰트 크기를 px 단위에서 rem 단위로 변경하였다.html { font-size: 62.5%;}body { font-size: 1.6rem;}브라우저 기본 폰트 크기 = 16px 의 62.5% = 10px rem은 최상위 루트를 기준으로 계산하므로 1.. 2025. 2. 12. [인생 그래프] 이모지 피커를 추가하자 내가 개발하면서 테스트하는 입장에서도 점을 찍고 거기에 타이틀을 적는게 손이 안간다고해야하나, 자연스럽지 않은 흐름인듯했다.그래서 간단하게 이모지를 선택할 수 있으면 좋겠다 싶어서 emoji-picker-react 라이브러리를 이용했다.https://www.npmjs.com/package/emoji-picker-react#hiddenemojis---excluding-certain-emojis emoji-picker-reactEmoji Picker component for React Applications on the web. Latest version: 4.12.0, last published: 5 months ago. Start using emoji-picker-react in your project .. 2025. 2. 11. 이전 1 2 3 다음
