본문 바로가기

분류 전체보기

 (114)
favicon & og 설정하기 ■ favicon- 브라우저 탭에서 보이는 작은 로고- 북마크할 때 옆에 표시되는 사이트 대표 이미지- 보통 16x16 또는 32x32 픽셀 크기의 작은 이미지  favicon 등록시의 장점- 사용자가 여러 탭 사이에서 원하는 페이지를 쉽게 찾을 수 있다.- 모바일 기기에서 홈 스크린 바로가기 아이콘으로 활용할 수 있다.- 사이트의 첫인상을 결정하는 요소이며 완성도를 높일 수 있다.  favicon 설정하기① 프로젝트 안의 public 폴더에 변경할 로고이미지 추가 및 기본 favicon 삭제요롷게 생긴 기본 favicon 을 삭제하고 변경할 로고이미지를 추가해주었다. ② Metadata 설정 변경하기layout.tsx 컴포넌트안의 Metadata 설정에서 icon - 이미지 경로를 넣어주어 설정완료!..
아키텍쳐, 다이어그램, 기능명세서 만들기 최종프로젝트의 브로슈어를 제작 중 아키텍쳐가 필요했다. 아키텍쳐활용 사이트 https://www.cloudcraft.co/   피드백- 어떤 식으로 굴러가는지 기능별로 흐름이나 아키텍쳐를 간결하게 구조도처럼 개발자스럽게 수정하면 좋을 것 같다.- 기능 명세서도 추가하면 좋을 것 같다.  피드백 적용- 다이어그램  - 기능명세서구분주요 기능상세 기능비고홈이벤트 페이지캐러셀을 통해 스터디 관련 이벤트 확인 검색검색으로 원하는 스터디 조회 인기스터디인기스터디를 캐러셀로 확인 모집글최신순, 태그 필터링 순으로 모집글 조회 찜모집글 찜 -> 마이페이지에서 찜 리스트 조회 인증인가소셜 로그인supabase auth 소셜 로그인 연동 (카카오 / 구글) 이메일 로그인 / 회원가입 마이페이지프로필 관리프로필 이미지,..
더보기 기능 구현하기 스터디 멤버들의 회고록 데이터여서 양이 그렇게 많지 않아 데이터 전체를 불러와 클라이언트에서 더보기 처리를 하였다.만약 서버에서 많은 데이터를 불러오는 경우라면 API 호출 로직을 수정해야 할 것이다.  구현 기능- 초기에 4개의 메모만 표시되고, 더보기 버튼을 클릭할 때마다 4개씩 추가로 메모가 표시됨- 더 이상 표시할 메모가 없으면 더보기 버튼이 사라짐  구현 과정1. useState 훅을 사용해 초기값이 4인 showItems 상태를 관리const [showItems, setShowItem] = useState(4); 2. handleLoadMore 함수를 추가해 더보기 버튼 클릭 시 showItems + 4씩 증가const handleLoadMore = () => { setShowItem((..
css 우선순위 문제 🚨 문제Calendar 컴포넌트의 스타일링에서 day_today 클래스가 제대로 적용되지 않는다.오늘 날짜의 경우 글자 색상이 black 이어야하는데 반영이 안되었다.day_today: "bg-primary-50 w-7 h-7 text-black rounded-full font-bold hover:bg-white/10 hover:text-white"  ❓ 원인- CSS 우선순위 문제- day 클래스의 text-white 스타일이 day_today의 text-black 을 덮어쓰고 있음day: "text-white font-medium text-[12px] caption w-7 h-7 hover:bg-white/10 rounded-full",day_range_end: "day-range-end",day_..
자체 UT 후 계획 및 버그수정 어제 최종 프로젝트의 중간발표를 마친 뒤 중간 회고를 진행했다. 🥲 아쉬웠던 점커스텀 훅, 공용 컴포넌트 사용 미숙체계적인 일정 관리가 조금 안됐던 것 같다비지니스 로직 분리가 잘 안되어서 아쉽다개발 기능에 집중 하다 보니 , 성능적인 부분이나, 구조적인 문제 개선을 하지 못했슴 + 로딩창을 거의 사용하지 못함 + 이벤트나 ui동적 요소 부족fetch 로직 겹치는 부분 정리가 잘 되지 않음 / Query, fetch 일관성 부족필요하지 않은 client 컴포넌트 / 렌더링 방식을 고려하지 않은 컴포넌트 작성 😍 좋았던 점소통이 잘 되고 피드백이 좋았음팀원들의 태도가 매우 우수함 / 감정상해죄 0오류나 어려운 부분이 있을때 서로 질문하면서 해결한 점작업하고 있는 팀원의 흐름이 깨지지 않도록 각 팀원과의..
shadcn/ui 캘린더 css 적용하기 기본으로 생성되었던 calendar 컴포넌트를 디자인 시안에 맞게 각 요소가 뭘 뜻하는지 정리하면서 하나씩 적용을 했다."use client";import * as React from "react";import { ChevronLeft, ChevronRight } from "lucide-react";import { DayPicker } from "react-day-picker";import { cn } from "@/lib/utils";export type CalendarProps = React.ComponentProps;function Calendar({ className, classNames, showOutsideDays = true, ...props}: CalendarProps) { ret..
[Refactoring] 바텀시트 재사용 컴포넌트로 분리하기 캘린더 일정 등록 시 기존에 모달로 표시되던 시간 선택 모달을 바텀시트로 변경하게되었다. 프로젝트 내 다른 페이지들에서도 스크롤 선택 형태의 기능이 바텀시트로 디자인 되어 있어, 전반적인 사용자 경험의 통일성을 높였고,기존 모달 방식에서는 모달창이선택한 시간들을 가렸었는데 바텀시트 방식으로 변경해 사용자가 이전 선택 내용을 확인하면서 새로운 시간을 선택할 수 있게 되었다. [ 이전 디자인 ][ 변경 디자인 ]  구현 과정 ① 기존 코드모달형태로 작업했던 코드인데, 시간 선택 기능을 하는 컴포넌트인 ScrollPicker 를 제외하고 별도 컴포넌트로 분리하면 좋을 것 같다고 생각했다. return ( e.stopPropagation()} > ..
댓글&답글 삭제 유효성 적용하기 댓글기능에 답글 기능을 추가하고 수정, 삭제 테스트를 하는데 답글의 경우 삭제가 잘 되지만 부모인 댓글의 경우 삭제가 되지 않았다.또한 답글이 있는 부모댓글을 삭제했을때 해당 댓글과 답글까지 싹다 삭제하는지? or 댓글만 "삭제된 댓글입니다." 로 내용을 바꾸어야 할지? 혼자 판단하면 안될 것 같은 부분도 있어서 팀원과 논의하였고, 전체 삭제하기보다 부모댓글만 "삭제된 댓글입니다." 로 표시하도록 하기로 결정했다. 처음엔 mutation 함수에서 무작정 코드를 써보다가 코드가 너무나 길어져서 나조차도 자꾸 헷갈렸고, 게다가 의도한대로 동작하지도 않아서 결국 작성했던 코드들을 다 지운 뒤 댓글/답글 삭제 관련해서 일어날 수 있는 경우들을 차근차근 적어봤다. 부모댓글부모댓글 삭제 시 답글이 없는경우 → 바로..

티스토리툴바