dev-hpk 님의 블로그

카드의 태그 관련 이슈가 발생했습니다.카드 생성 POST API에 태그 색상과 관련된 속성이 없어서 생긴 문제인데 확인해 보겠습니다. 🚫 문제 상황화면이 리렌더링 될 때마다 태그의 색상이 랜덤 하게 변경됩니다. 카드를 생성하는 POST API에 태그 색상에 대한 옵션이 없어서 발생한 문제입니다.처음 작업할 때 태그 컴포넌트가 렌더링 될 때 정해진 5개 색상 중 랜덤하게 설정되도록 만들었거든요...😅const getTagColor = (styles: Record): string => { if (!bgTag || bgTag.length === 0) return ''; const idx = Math.floor(Math.random() * bgTag.length); return styles[bgTag[..

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다. 담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다.  제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠😊   🚫 문제 상황 이미지를 등록한 상태로 카드를 생성했지만, 화면에 보이는 카드는 이미지가 없이 렌더링 됩니다. 💡 해결 방법에 accept 속성을 사용해 이미지 확장자를 제한해 보겠습니다❗테스트해 보니 svg 형식을 업로드하면 이미지가 안 보이는 것 같습니다.gif, jpg, png 확장자의 경우 잘 렌더링 되는 것을 확인했습니다. 결과를 확인해 보겠습니다.깔끔하게 해결이면 좋겠지만, 파일 선택창 하단에 사용자 지정 파일을 선택할 수 있게 되어있네요..🤔한 번 눌러봐야겠죠?슬픈 예감은 항상 틀린 적이 없네요. 사용자가 파일 ..

오늘은 대시보드 상세에서 카드의 상세 모달을 작업해 봤습니다! 우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요!(컴포넌트 구조보다 기능적인 부분을 보고 싶으시다면 아래 링크를 눌러주세요↓)기능 코드 DetailCardModal.tsx (할 일 카드 모달)기능이 많아 컴포넌트는 아직 분리하지 못했습니다... import 부분은 생략했으니 이해해 주세요😭빠른 시일 내로 리팩토링 할 예정이니 코드 블록이 불편하시다면 아래 Github PR을 확인해 주세요!! #92 모달 할 일 카드 by hpk5802 · Pull Request #98 · codeit-sprint-part3-6team/project이슈 번호 close #92 변경 사항 요약 공통 dropd..

무한 스크롤 관련된 문제로 라이브러리를 사용해야 하나 고민이 많았습니다. 우선 문제 상황과 지금까지 시도한 방법들을 간단하게 소개해보겠습니다.문제 상황PC로 확인했을 때는 잘 동작하던 Intersection Observer API가 13인치 노트북으로 확인했더니 작동하지 않는다.브라우저의 크기를 변경한 상태(확대 및 축소)에서 Intersection Observer API가 작동하지 않는다.(브라우저의 확대 및 축소 기능을 사용하는 경우까지는 고려하지 않아도 된다고 피드백 받음!!)특정 사이즈에서 Intersection Observer API가 의도한 대로 동작하지 않아 무한 스크롤을 마음대로 동작시킨다.시도한 방법 resize 이벤트를 추가해서 브라우저 사이즈가 변경될 때마다 IntersectionOb..

라이브러리 없이 무한 스크롤 구현하기!!!어떤 방식으로 구현할까 고민하다가 Intersection Observer API라는 좋은 기능을 찾았습니다. Intersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다. 기본 사용법let options = { root: document.querySelector("#scrollArea"), rootMargin: "0px", threshold: 1.0,};let observer = new IntersectionObserver(callback, options); 컬럼과 댓글을 불러오는데 모두 사용하기 위해 커스텀 훅으로 관리하도록 만들어 보겠습니다.impo..

오늘은 대시보드 페이지를 개발해 봤습니다.우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요! GET Columnsimport axios from '@/lib/instance';import { GetColumnParams, GetColumnsResponse } from '@/type/column';const getColumns = async ({ teamId, dashboardId,}: GetColumnParams): Promise => { try { const response = await axios.get(`/${teamId}/columns/`, { params: { dashboardId, }, }); ..

오늘은 공통 컴포넌트 Chip을 개발해 보겠습니다.// Chip.tsimport { ReactNode } from 'react';type ChipType = 'tag' | 'status' | 'status-option';export interface ChipProps { children: ReactNode; chipType: ChipType;}export const bgTag = ['orange', 'green', 'pink', 'blue'];// Chip.tsximport clsx from 'clsx';import { ChipProps } from '@/type/chip';import { PropsWithChildren } from 'react';import styles from './Chip.mo..

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!// Button.tsximport styles from "./Button.module.css";import { PropsWithChildren, ReactNode } from "react";import clsx from "clsx";interface ButtonProps { children: ReactNode; classes?: string | string[]; disabled?: boolean; handler: () => void;}function Button({ children, classes, disabled, handler,}: Pr..

드디어 중급 프로젝트 시작이다!!지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거나 누락되는 경우도 있었고, 서로의 의견을 조율하다가 오전을 모두 사용한 적도 있었습니다. 이런 경험은 당시에는 힘들었지만 팀 프로젝트에서 무엇이 중요한지를 배우는 값진 기회였습니다. 중급 프로젝트를 시작하며 설레는 마음도 크지만 긴장감도 함께 느껴집니다.이전 경험을 바탕으로 소통을 더욱 원활히 하고 일정 관리와 업무 분담을 철저히 계획해 프로젝트를 성공적으로 마무리하며 팀원들과 함께 좋은 결과를 만들어내고 싶습니다. 이번에는 더 나은 협업을 통해 성장과 성취를 모두 이루는 뜻깊은 시간을 기대해 봅니다✨✨ 기술 스택Next...