🛠 Fix: 대시보드 페이지 내 버그 수정 #214

wayandway · 2024-07-07T01:36:08Z

연관된 이슈

작업 내용

대시보드 페이지 내 컬럼 섹션, 할일카드 모달 버그 수정

카드 컴포넌트

카드 due date로 바꾸기 & 날짜기 -1로 찍힘
카드 컴포넌트에 댓글 개수+아이콘 띄우기

할일카드 모달

담당자 닉네임 긴 경우 레이아웃 깨짐
댓글 입력 버튼 디자인 수정
이름이 길어지면 버튼이 작아짐
줄바꿈 반영
댓글 프로필 찌그러짐 수정
댓글 섹션 깜빡거리는 문제 -> refetch 적용

추가사항

컬럼 섹션 스켈레톤 적용
카드 컴포넌트 내 이미지 placeholder 지정

스크린샷

코멘트 및 논의 사항

#171 이슈의 디자인 버그 & 카드 데이터 쿼리 무효화 & 댓글 섹션 깜빡거림 문제들을 수정했습니다!
추가설명은 코멘트 남겨놓겠습니다!

- #207 : 카드 컴포넌트 댓글 개수 보여주기 - 대시보드 반응형 디자인 수정 - 카드 이미지 placeholder 지정 - 프로필이미지 깨짐, 카드 제목 깨짐 수정 - 카드에 댓글이 없을 때 빈댓글 이미지 표시 - 카드 설명글 줄바꿈 반영 - 카드 모달 내 애니메이션들 추가

wayandway · 2024-07-07T01:37:33Z

src/components/Modal/EditCardModal/index.tsx

              onKeyDown={handleTagsEnterKeyDown}
            />
-            <Tags tags={formValues.tags} customClass='mt-[10px]' onClick={handleTagClick} />
+            <Tags tags={formValues.tags} customClass='mt-[10px] flex flex-wrap' onClick={handleTagClick} />


수정 모달에도 쿼리 무효화 지정해두었습니다!

태그 수가 많아지면 밖으로 튀어나오는 디자인 문제도 flex-wrap 으로 감싸 수정했습니다.

wayandway · 2024-07-07T01:39:07Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

+  const { data, refetch } = useFetchData<CommentsResponse>(['comments', card.id], () => getComments(card.id));
  const [newComment, setNewComment] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
  const comments = data?.comments;
  const { closeModal } = useModal();
  const router = useRouter();
  const { id: dashboardId } = router.query;
  const queryClient = useQueryClient();

  const handleModalClose = () => {
+    useEffect(() => {
+      refetch();
+    }, [refetch]);
+


멘토님이 피드백 주신 리패치 적용해서, 카드모달을 띄울 때마다 댓글 데이터를 바로 최신화되도록 했습니다.
댓글 섹션 이제 안깜빡거리네요!
자세한 해결 내용은 아래 이슈에 정리해두었습니다!

🗣 Presentation: 발표 자료 재료 준비 #122

wayandway · 2024-07-07T01:40:59Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

+      setErrorMessage(''); // 성공 시 에러 메시지 초기화
    } catch (error) {
-      console.error('댓글 추가 중 에러 발생:', error);
-      // 에러 처리
+      if (error) {
+        setErrorMessage('내용을 작성해주세요.');
+      } else {
+        setErrorMessage('댓글을 작성하는 데 실패했습니다.');
+      }


빈 댓글 입력 시 에러메시지 뜨게 했습니다. 괜찮으신지 팀원분들 피드백 주시면 감사하겠습니다!

오 깔끔하네요 👍
현재 버튼이랑 에러메세지의 item-center가 안맞는거 같습니다!

넵 수정해둘게요!!

프로젝트 전반적으로는 빈 값 or 변경사항 없으면 버튼이 비활성화 되어있긴 합니다!
지금처럼 해도 문제는 없을 것 같아요 (제 PR 공유 대시보드의 멤버 아닌 로그인 한 사람 에러처리랑 같은 상황)

아 그렇네요!! 그럼 그냥 에러메시지 없애고 깔끔하게 disabled 처리해볼게요!

2024-07-07.3.19.25.mov

wayandway · 2024-07-07T01:43:20Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

          {/* Card Description & Comment Section */}
          <div className='flex h-[484px] w-[288px] flex-col gap-[16px] overflow-y-auto pr-3 md:h-[608px] md:w-[420px] lg:w-[450px]'>
-            <p className='break-words text-[14px] leading-6'>{card.description}</p>
+            <p className='whitespace-pre-wrap break-words text-[14px] leading-6'>{card.description}</p>


모달 내 설명란도 줄바꿈 되도록 수정했습니다

wayandway · 2024-07-07T01:44:37Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

+            {comments && comments.length > 0 ? (
              comments.map((comment) => (
                <Comment key={comment.id} comment={comment} columnId={column.id} cardId={card.id} />
              ))
            ) : (
-              <>아직 댓글이 없습니다.</>
+              <div className='flex flex-col items-center text-[14px] text-gray-9f hover:cursor-default'>
+                <Image src='/icons/comment-empty.svg' width={150} height={150} alt='빈 댓글창' />
+                작성된 댓글이 없습니다.
+              </div>


댓글이 하나도 없을 때, 다음과 같이 "댓글이 없습니다" 이미지가 뜨게 수정했습니다

요거 안그래도 너무 귀엽더라구요!! 👍

wayandway · 2024-07-07T01:50:10Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

+          <button onClick={handleModalClose} className='transition-all duration-200 hover:opacity-50'>
            <Image src='/icons/x.svg' alt='X 아이콘' width={32} height={32} className='dark:hidden' />
            <Image src='/icons/x-white.svg' alt='X 아이콘' width={32} height={32} className='hidden dark:block' />


카드모달의 "X" 버튼 호버 투명도 애니메이션 적용했습니다

wayandway · 2024-07-07T01:53:33Z

src/components/Modal/TodoCardModal/Comment.tsx

+                      취소
+                    </button>
+                    <button
+                      className='text-black-33 transition-all duration-100 hover:text-violet hover:underline dark:text-dark-10 dark:hover:text-violet-light-hover'


댓글

버튼들에 대해 애니메이션 적용했습니다

wayandway · 2024-07-07T01:56:44Z

src/containers/dashboard/ColumnSkeleton.tsx

+export default function ColumnSkeleton() {
+  return (
+    <div className='block animate-pulse lg:flex'>
+      <div className='flex flex-col bg-gray-fa p-5 transition-colors lg:w-[354px] dark:bg-dark-bg'>
+        {/* Column Header */}
+        <div className='mb-[6px] flex cursor-default items-center justify-between'>
+          <div className='flex items-center'>
+            <span className='mr-[8px] text-xs text-violet'>𒊹</span>
+            <span className='flex size-[20px] items-center justify-center rounded-[6px] bg-gray-ee text-xs text-gray-78 dark:bg-dark-200 dark:text-dark-10'></span>
+          </div>
+        </div>
+
+        {/* Add Card Button */}
+        <button className='btn-violet-light dark:btn-violet-dark mb-[16px] h-[40px] rounded-[6px] border-none hover:cursor-default hover:bg-white'></button>
+
+        {/* Card List Section */}
+        <div className='lg:h-[700px] lg:overflow-y-auto'>
+          <div className='h-[200px] rounded-[6px] bg-white lg:h-[500px] dark:bg-dark-bg'></div>
+        </div>
+      </div>
+    </div>
+  );
+}


컬럼 섹션 스켈레톤 UI 적용했습니다! 카드 이미지도 placeholder 지정해서 로드중엔 회색 카드가 보이게 했습니다

un0211

수고하셨습니다~~

un0211 · 2024-07-07T06:04:06Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

+      setErrorMessage(''); // 성공 시 에러 메시지 초기화
    } catch (error) {
-      console.error('댓글 추가 중 에러 발생:', error);
-      // 에러 처리
+      if (error) {
+        setErrorMessage('내용을 작성해주세요.');
+      } else {
+        setErrorMessage('댓글을 작성하는 데 실패했습니다.');
+      }


프로젝트 전반적으로는 빈 값 or 변경사항 없으면 버튼이 비활성화 되어있긴 합니다!
지금처럼 해도 문제는 없을 것 같아요 (제 PR 공유 대시보드의 멤버 아닌 로그인 한 사람 에러처리랑 같은 상황)

un0211 · 2024-07-07T06:05:11Z

src/components/Modal/TodoCardModal/TodoCardModal.tsx

+            {comments && comments.length > 0 ? (
              comments.map((comment) => (
                <Comment key={comment.id} comment={comment} columnId={column.id} cardId={card.id} />
              ))
            ) : (
-              <>아직 댓글이 없습니다.</>
+              <div className='flex flex-col items-center text-[14px] text-gray-9f hover:cursor-default'>
+                <Image src='/icons/comment-empty.svg' width={150} height={150} alt='빈 댓글창' />
+                작성된 댓글이 없습니다.
+              </div>


요거 안그래도 너무 귀엽더라구요!! 👍

un0211 · 2024-07-07T08:14:10Z

요거 아이콘 글씨 조금만 줄이면 좋을 것 같아요!

wayandway · 2024-07-07T08:20:03Z

요거 아이콘 글씨 조금만 줄이면 좋을 것 같아요!

??! 죄송한데 요게 어디에 위치한 아이콘이죠?!

un0211 · 2024-07-07T08:24:29Z

아, 대양님 생성/수정 모달에 있는 내용이었네요...! 혹시 여기서 같이 수정해주실 수 있을까요?!
그리고 머지하셔도 될 것 같아요!!

wayandway · 2024-07-07T08:26:50Z

아, 대양님 생성/수정 모달에 있는 내용이었네요...! 혹시 여기서 같이 수정해주실 수 있을까요?! 그리고 머지하셔도 될 것 같아요!!

아 네네!! 이 부분은 제가 수정할게요!
수정하고 바로 머지해놓겠습니다!

- 할일 생성/수정 카드 내의 프로필아이콘 - 댓글 내의 프로필아이콘

wayandway · 2024-07-07T08:54:55Z

카드목록/댓글목록 무한스크롤은 새로운 PR로 올리겠습니다!
다들 코멘트 많이 남겨주셔서 감사합니다 🙇‍♂️

* ⚙️ Chore: tailwind 컬러 팔레트 및 반응형 브레이크 포인트 세팅 (#33) ⚙️ chore: tailwind 컬러 팔레트 및 반응형 브레이크 포인트 세팅 * ✨ Feat: 페이지 라우팅 설정 (#34) * ⚙️ Chore: 배포하기 (#39) * ⚙️ chore: pnpm-lock.yaml 업데이트 * ⚙️ chore: 배포용 repo에 main과 develop 변화 반영하도록 workflow 생성 * ✨ feat: userReducer 추가 - store 설정 - userSlice 추가 - app 컴포넌트에서의 Provider 지정 * ⚙️ Chore: eslintrc.json 타입스크립트에 맞춰서 수정 (#38) * ⚙️ Chore: eslintrc.json 타입스크립트에 맞춰서 수정 * ⚙️ Chore: eslintrc.json rules 변경 - react/jsx-filename-extension에 .js, .jsx 추가 * ✨ feat: 로그인 커스텀 훅 useSignIn 추가 * ✅ test: 테스트용 로그인 폼 * 🛠 fix: 중복된 userReducer 등록 수정 * ⚙️ Chore: eslintrc.json 변경에 따른 패키지 추가 (#46) * ⚙️ Chore: 유저 기능 관련 패키지 추가 (#47) * ⚙️ chore: install React Query * ⚙️ chore: install Redux Toolkit(+ Persist) * ✨ Feat: 공용 버튼 컴포넌트 구현 (#50) * ✨ feat: 공용 버튼 컴포넌트 구현 * ✨ feat: className 기본값 추가 * 🗑 remove: 테스트 코드 제거 * ✨ feat: useFetchData 커스텀 훅 (#55) ✨ feat: useFetchData 커스텀 훅 정의 * ✨ Feat: generateTagIndex 함수 구현 (#44) ✨ feat: generateTagIndex 함수 구현 * ⚙️ Chore: scope 적는 것 강제하도록 변경 (이슈넘버 적기) (#56) ⚙️ chore(#51): scope 적는 것 강제하도록 변경 (이슈넘버 적기) * ♻️ Refactor: 서비스 로직 분리 & useFetch 커스텀훅 리팩토링 (#63) * ⚙️ chore(#58): install axios * ♻️ refactor(#54): useFetchData 리팩토링 -> useQuery 훅 사용 * ✨ feat(#58): axios 인스터스 생성 & GET 호출 로직 분리 * ✨ feat(#52): 대시보드 인터페이스 정의 * ✨ feat(#52): 대시보드 목록을 전역 상태로 등록 (Reducer) * ✨ feat(#52): 대시보드 목록 데이터 패칭 커스텀훅 * 🛠 fix(#54): 캐시 키를 파라미터로 지정할 수 있도록 수정 * 🛠 fix(#58): getDashboardsList() 파라미터 타입 수정 * ✨ Feat(#2): Sidebar 제작 (#65) * ✨ Feat(#2): Sidebar Layout 구성 * ✨ Feat(#2): Sidebar 임시 api 연동 및 구현 * ✨ Feat(#2): Sidebar 임시 구현 완료 - API 재연동 필요 - 모달 연동 필요 * ✨ Feat(#2): Sidebar 제작 완료 - 모달 연동 필요 * ♻️ refactor(#2): Sidebar 코드 개선 * 🎨 design(#2): sidebar css 수정 * 🎨 design(#2): padding, margin 피그마 디자인에 맞춰서 수정 * ✨ Feat: user 관련 저장하는 정보 추가 (이메일, 프로필 이미지) (#70) * 🛠 fix(#69): 로그인 시 이메일, 프로필 이미지 정보도 저장하도록 변경 * ⚙️ chore(#69): import named 에러 해결 .eslintrc.json에import/typescript 플러그인 추가 * ✨ feat(#31): Layout 설정 (#67) * ✨ feat(#31): Layout 적용 - 랜딩, 로그인, 회원가입, 404 페이지 제외한 모든 페이지에 레이아웃 적용 * ✨ feat(#31): Layout 임시 설정 * ♻️ refactor(#2): Sidebar 코드 개선 * 🎨 design(#2): sidebar css 수정 * 🎨 design(#2): padding, margin 피그마 디자인에 맞춰서 수정 * ✨ feat(#31): Layout에 Sidebar 추가 * ✨ feat(#31): Layouts 폴더로 MainLayout 이동 - src/components/MainLayout/index.tsx -> src/layouts/MainLayout.tsx로 변경 - src/layouts/MainLayout.tsx에서 tailwindcss 적용 안되는 문제 해결 * ✨ Feat(#6, #7): 로그인, 회원가입 페이지 (#68) * ⚙️ chore: react-hook-form 추가 * ⚙️ chore: yup 추가 * ⚙️ chore: hookform resolvers 추가 * ✨ feat(#7): 회원가입 페이지 퍼블리싱 * ⚙️ chore(#7): 파일 구조 변경 * 🎨 design(#7): css 조정 * ✨ feat(#7): 비밀번호 확인 validation 변경 * ⚙️ chore(#72): eslint tui 제거 * ↔️ style(#6): 화살표 함수, 선언문으로 변경 * 🚚 rename(#6, #7): input 컴포넌트 파일명 변경 * ⚙️ Chore(#74): tailwind.config.ts 컬러 수정 및 기존 컬러 클래스명 변경 (#75) * ⚙️ chore(#74): tailwind.config.ts 컬러 수정 * ↔️ style(#74): 기존 color 데이터 현재 포맷에 맞게 변경 * ✨ Feat: 컬럼 섹션 & 개별 컬럼 (#71) * ⚙️ chore(#29): containers/ 이하의 컴포넌트에도 tailwindCSS 적용 * ✨ feat(#12): define Column Interface * ✨ feat(#12): add ColumnsSection.tsx * ✨ feat(#13): add Column.tsx * ↔️ style(#12, #13): 시맨틱 태그로 수정 & 주석 추가 * 🛠 fix(#12): modify ColumnsSectionProps Type * ✨ feat(#12): dashboard/[id] 페이지 내 ColumnsSection 컴포넌트 렌더링 * ↔️ style(#74): tailwind 컬러명 수정 반영 * 🛠 fix(#31): 레이아웃 내 main 태그의 패딩값 제거 * ⚙️ chore(#79): pnpm-lock.yaml 최신화 (#81) * ✨ Feat(#9): Header 컴포넌트 구현 (#78) * 🎨 design(#9): 폰트 Pretendard 400 기본으로 설정 * ✨ feat(#9): 랜딩 페이지 내비게이션 구현(로고 이미지 제외 반응형) * ✨ feat(#9): 사용자 프로필 컴포넌트 구현 * ✨ feat(#9): 기본 헤더 컴포넌트 구현 * 🚚 rename(#9): 이미지 이름 - 사용하도록 변경 * ✨ feat(#9): 대시보드 헤더 컴포넌트 구현 (구성원 목록 제외) * ✨ feat(#9): 헤더 컴포넌트 구현 * ✨ feat(#9): 대시보드 헤더 컴포넌트 구성원 구현(미완) * ✨ feat(#9): 레이아웃에 헤더 적용 * ↔️ style(#74): 바뀐 tailwind 설정에 맞게 색상 지정 * 🗑 remove(#9): 중복 아이콘 삭제 * 🎨 design(#9): 유저 아이콘 폰트 적용 * 🛠 fix(#9): 관리 버튼 관리 페이지로 이동하도록 변경 * ⚙️ chore(#38): tailwind 관련 프리티어 설정 변경 * 🎨 design(#9): inline style로 구성원 프로필 겹쳐서 배열 * ✨ feat(#9): 헤더의 유저 메뉴 드롭다운 기능만 구현 * 🛠 fix(#9): 대시보드 페이지 전환시 에러 해결 * ↔️ style(#9): 컨벤션에 맞게 함수 표현식으로 변경 * 🛠 fix(#9): localStoarge 관련 코드 제거 * 🎨 design(#9): 아이콘에서 글자 가운데정렬 * ⚙️ chore(#38): tailwind 관련 eslint 설정 변경 * ✨ Feat(#16): mydashboard 페이지 DashboardList 컴포넌트 구현 (#80) * ✨ Feat(#16): mydashboard 페이지 DashboardList 컴포넌트 구현 - 리덕스에 등록된 대시보드 목록을 5개씩 보여주는 컴포넌트 구현 - 대시보드 목록을 클릭하면 해당 대시보드로 이동하는 기능 구현 * 🛠 fix(#16): mydashboard 페이지 대시보드 목록 페이지 수정 - 기존 전역 대시보드 목록을 받아오던 방식을 서버에 요청하여 받아오도록 수정 - 페이지네이션 기능 추가 * 🛠 fix(#16): mydashboard 페이지 개선 - API 호출 방식을 useFetchData hook을 사용하도록 변경 - 페이지네이션 버튼 수정 * 🎨 design(#16): 대시보드 이동 버튼 화살표 추가 - section 크기 조정 * 🎨 design(#16): 화살표 이미지 추가 * 🎨 design(#16): 반응형 디자인 설정 * 🎨 design(#16): 대시보드 목록 버튼 배경색 수정 * 🛠 fix(#16): 페이지네이션 버튼 분리 * ⚙️ chore(#78): 프리티어 플러그인 설치에 따른 패키지 업데이트 (#91) * ✨ Feat: POST API 로직 분리 (#83) * ↔️ style(#58): getService.ts 내에 function 선언 함수들 -> 표현식으로 변경 * ✨ feat(#76): define SignUpForm Interface * ✨ feat(#76): define async function - postSignUp() * ✨ feat(#76): 회원가입 폼 POST API 연동 * ✨ feat(#76): 회원가입 성공 시 로그인 페이지로 리다이렉트되도록 로직 추가 * 🛠 fix(#6): 로그인폼 내의 이용약관 동의 체크박스 제거 * ✨ feat(#76): 로그인 성공 시 MY대시보드페이지로 리다이렉트되도록 로직 추가 * ✨ feat(#76): 로그인폼 리퀘스트/리스폰스 인터페이스 정의 * ✨ feat(#76): redefined User Interface * ♻️ refactor(#76): postSignIn과 연동한 useSignin 리팩토링 * 🛠 fix(#76): postSignIn 함수 내 accessToken을 로컬스토리지에 저장하는 코드 삭제 * ✨ Feat: SideBar 컴포넌트 반응형 디자인 추가 및 로딩 UI 수정 (#92) * 🛠 fix(#2): API 로딩 시 UI 수정 * 🎨 design(#2): 반응형 디자인 설정 * 🎨 design(#2): 모바일용 로고 이미지 파일 업로드 * 🎨 design(#2): 이미지를 불러오는 방식 수정 * ♻️ Refactor(#86): 버튼 디자인 클래스 생성 및 버튼 컴포넌트 개선 (#89) * 🎨 design(#86): 색상별 버튼 클래스 생성 * ♻️ refactor(#86): 버튼 클래스 리팩토링 (자주 사용하는 버튼 컴포넌트화) * 🛠 fix(#86): 버튼 컴포넌트 반응형 수정 * ♻️ refactor(#86): 기존 버튼에 버튼 스타일 적용 * 🎨 design(#86): 버튼 디자인 적용 * 🎨 design(#86): 로그인/회원가입 버튼 디자인 적용 * 🛠 fix(#16): 대시보드 리스트 버튼 비활성화 추가 (#93) * 🛠 fix(#16): 대시보드 리스트 버튼 비활성화 추가 * 🎨 design(#16): 페이지 이동 버튼 배경색 수정 * 🎨 design(#16): 이미지를 받아오는 방식 수정 * 🛠 fix(#16): 페이지 리스트 totalPage 수정 * 🎨 design(#31): 레이아웃 크기, 색상 수정 (#95) - 최대 크기 없앰 - 최소 너비 375px로 설정 - main 부분 배경색 지정 (페이지별로 각각 지정하던 것 삭제) * 🎨 Design(#31): 레이아웃 main이 남은 크기 차지하도록 설정 (#98) * ⚙️ Chore: Tanstack Query 업그레이드 (#96) * ⚙ chore(#73): install Tanstack Query * 🛠 fix(#73): tanstack query 패키지 임포트 & 개발자 도구 추가 * 🛠 fix(#73): useFetchData 수정 - Tanstack Query 적용 * 🛠 fix(#73): useSignIn 수정 - Tanstack Query 적용 * 🛠 fix(#73): useFetchDashboards 수정 - Tanstack Query 적용 * ✨ Feat(#8): 프로필 수정 기능 (#100) * 🎨 design(#8): 프로필 변경 섹션 디자인 * ✨ feat(#8): 입력폼 내부기능 완성 (API 연결 X) * ✨ feat(#8): 프로필변경 API 연결 (내부정보 업데이트 X) * ✨ feat(#8): 프로필 변경시 유저 정보 업데이트 - userSlice에서 accessToken이 string | null이므로 함수에서도 같은 타입을 받도록 함 * 🛠 fix(#9): 헤더에서 에러 정보를 유저정보대신 표시하지 않도록 함 * ↔️ style(#9): 안쓰게 된 import 삭제 * ⚙️ chore(#9): 프로필 이미지 받아올 수 있게 next.config.mjs 설정 * 🎨 design(#9): 프로필 이미지 디자인 수정 - 비율 유지 - 둥근 테두리 * ✨ feat(#8): 닉네임 유효성 검사 - 길이 1자 이상 10자 이하 * ✨ feat(#8): 프로필 이미지 삭제 기능 추가 + 업데이트 폼에서 정보 선택적으로 전달하도록 변경 * 🎨 design(#8): 이미지 인풋 호버, 클릭시 효과 적용 * 🛠 fix(#8, #73): tanstack query 업그레이드에 따른 훅과 사용처 수정" * 🎨 design(#8): label 반응형 크기 수정 * ✨ feat(#20) 내가 받은 초대 목록 컴포넌트 제작 (#99) * ✨ feat(#20): 내가 초대받은 대시보드 목록을 보여주는 페이지 추가 - 임시로 초대받은 대시보드 목록을 보여주는 페이지를 추가 * 🎨 design(#20): Image 오류 수정 * ✨ feat(#20): API 연동 및 UI 구현 완료 * ✨ feat(#20): 초대 목록 state 관리 및 렌더링 구현 * ✨ feat(#20): 초대받은 대시보드 검색 기능 추가 * ♻️ refactor(#20): 내가 받은 초대 목록 컴포넌트 구조 변경 및 분리 * ♻️ refactor(#20): getInvitationsList 수정 * ✨ feat(#20): 초대 수락 시 대시보드 리스트 갱신 * ✨ feat(#20): 무한스크롤 구현 - 검색 기능 API 연동해서 검색하도록 구현 * 🎨 design(#20): 반응형 디자인 설정 * 🛠 fix(#20): 초대 목록 무한스크롤 수정 * ✨ Feat: 전역 모달 1차 완료 (#97) * ✨ feat(#42): redux 모달 상태 관리 추가 * ✨ feat(#42): _app에 Modal 컴포넌트 추가 * ✨ feat(#42): modal 컴포넌트 추가 * ♻️ refactor(#42): button 컴포넌트 변경 * ✨ feat(#94, #42): 공통 모달 알림창 구현 * ✨ feat(#94, #42): openModal의 props optional로 변경 * ✨ feat(#42): 초대하기, 컬럼 생성 모달 구현 * ✨ feat(#42, #17): 대시보드 생성 모달 구현 * ✨ feat(#42, #17): 초대하기 모달 valid 추가 * 🚚 rename(#42): 상수 네이밍 변경 * ✨ feat(#42): 컬럼 삭제 수정 모달, props 추가 * ✨ feat(#42): 모달 props 타입 추가 * ✨ feat(#42): 모달 프롭 타입 정의 * ✨ feat(#42): null 값 초기화 제거 * ✨ feat(#42): 대시보드 생성 모달, 컬럼 생성 모달 API 연결 * ✨ feat(#42): 대시보드 멤버 초대 API 연결 * 🛠 fix(#42): 대시보드 생성 모달 컬러 버튼 색상 보이게 수정 * 🛠 fix(#42): 대시보드 생성 모달 컬러 버그 수정 * ✨ feat(#42): 컬럼 수정 및 삭제하기 API 연결 * ✨ feat(#42, #109): 대시보드 삭제 모달 및 대시보드 삭제 API 연결 * ✨ feat(#42): 초대하기 모달, 존재하지 않는 멤버 초대 시 에러 메시지 출력 * 🛠 fix(#42): 함수 이름 변경 * 🎨 Design(#85, #87): 헤더와 사용자 프로필, 드롭다운 디자인 완성 (#105) * 🎨 design(#85): 아이콘 가운데정렬 * 🎨 design(#87): 드롭다운 디자인 적용 * 🛠 fix(#87): 드롭다운 메뉴 선택시 드롭다운 닫기 * 🛠 fix(#85): 대시보드 헤더에서 직접 상세정보 조회하도록 변경 * 🎨 design(#85): 랜딩 헤더 로고 반응형 * ♻️ refactor(#85): 대시보드 헤더 컴포넌트 파일 분리 * 🎨 design(#85): 대시보드 헤더 멤버목록 반응형 디자인 (노가다) * ✨ Feat(#27): 비밀번호 변경 기능 (#102) * 🎨 design(#27): 비밀번호 변경 기능 반응형 디자인 구현 * ✨ feat(#27): 비밀번호 유효성 검사 * 🛠 fix(#8): 프로필 변경 관련 타입 export 하도록 변경 * ✨ feat(#27): 비밀번호 변경 기능 구현 * 🎨 design(#27): 마이페이지에 비밀번호 변경 폼 배치 * 🛠 fix(#27): 입력 유효성 검사 로직 변경 - 모두 포커스 아웃 될 때 검사 - 새 비밀번호가 기존 비밀번호랑 같은 경우 거절 (서버에서도 거절하며, 변경 의미가 없으므로) - 값 입력 안되어있을 때 버튼 비활성화 * 🛠 fix(#8, #27): type export/import 관련 문제 해결 * ✨ Feat(#84): 사용자 아이콘 색상 배정 함수 구현과 색상 설정 (#107) * 🎨 design(#84): 프로필 아이콘 색상 설정 * ✨ feat(#84): 프로필 아이콘 배경 색상 적용 * ✨ Feat: Card 컴포넌트 (대시보드 페이지) (#117) * ✨ feat(#13): define Card Interface * ✨ feat(#13): 컬럼 내 카드 개수 데이터 표시(API 연결) * ♻️ refactor(#58): 서비스 함수들 파라미터 id 타입들을 number로 수정 * ✨ feat(#19): 날짜 형식 포맷팅 함수 정의 * 🎨 design(#41): 대시보드 페이지 내 div태그 제거 * 🛠 fix(#31): 메인 레이아웃 내 수직 스크롤 제거 * 🛠 fix(#12): 컬럼 섹션 내 스크롤 수정 * 🛠 fix(#13): 컬럼 queryKey 값 수정 * ✨ feat(#13): 컬럼 내 카드 렌더링 & 컬럼 내 수평 스크롤 추가 * ✨ feat(#19): 할일 카드 컴포넌트 추가 * ✨ feat(#19): 태그컬러 자동생성 유틸함수 정의 * ✨ feat(#19): 카드 상세 데이터 조회 GET 함수 추가 * ⚙️ chore(#19): 태그전용 컬러 4종 추가 * ✨ feat(#19): 카드 내 ProfilIcon 추가 * 🛠 fix(#19): 카드 내 이미지 값이 있을 때만 렌더링되도록 수정 * 🛠 fix(#12): 컬럼 추가 버튼 내 마진값 수정 * ✨ feat(#13): 컬럼수정 모달 연동 * ✨ feat(#12): 컬럼추가 모달 연동 * 🛠 fix(#12): 컬럼 내 x-scroll 버그픽스 - width크기 임시 지정 * 🛠 fix(#13): 컬럼 내 y-scroll 버그픽스 - height 값 수정 * 💬 comment(#12): 컬럼추가 모달을 위한 주석 추가 * 🛠 fix(#12): 컬럼섹션 내 오버스크롤 수정 * ✨ feat(#104): 사이드바 페이지네이션 구현 및 이동 버튼 추가 (#110) * ✨ feat(#104): 사이드바 페이지네이션 구현 및 이동 버튼 추가 - 내 대시보드, 내 페이지 이동 버튼 추가 * 🎨 design(#104): 디자인 수정 * ✨ feat(#104): 사이드바에 대시보드 생성 모달 연동 * 🎨 design(#104): 사이드바 스켈레톤 추가 * ✨ Feat(#7): 회원가입 모달 연결 (#112) * ✨ feat(#7): 회원가입 모달 연결 * ✨ feat(#7): email 중복 시 이메일 필드 비우기 * ✨ feat(#7): 이메일 input focus 및 비우기, 일반 텍스트 전달 받는 모달 추가 * ✨ Feat: 초대 내역 컴포넌트 (#116) * 🎨 design(#23): 초대내역 컴포넌트 반응형 디자인 * ✨ feat(#23): 초대내역 불러오기 기능 구현 (페이지내이션) * 🛠 fix(#23): ol의 모든 자식 태그에 고유한 key 부여 * ✨ feat(#23): 초대 취소 기능 구현 * ♻️ refactor(#23): useDeleteData 훅으로 다른 delete 함수들도 호출할 수 있도록 함 * ✨ feat(#23): 페이지네이션 텍스트 없이 사용 가능하게 변경 * ♻️ refactor(#23): 기존 코드에서도 페이지네이션 컴포넌트 사용하도록 변경 * 🛠 Fix(#84): 멤버의 프로필색상을 제대로 보여줄 수 있도록 수정 (#120) * 🛠 fix(#84): 멤버의 프로필색상을 제대로 보여줄 수 있도록 수정 * 🛠 fix(#84): 카드 컴포넌트에서도 userId 사용하도록 수정 --------- Co-authored-by: 류혜원 <[email protected]> * 🛠 Fix(#118): 새 비밀번호도 글자수 확인하도록 변경 (#126) 🛠 fix(#118): 새 비밀번호도 글자수 확인하도록 변경 * 🎨 design(#124): 내 대시보드 대시보드 목록 스켈레톤 설정 (#125) * 🎨 design(#124): 내 대시보드 대시보드 목록 스켈레톤 설정 * 🎨 design(#124): 대시보드 초대 목록 스켈레톤 설정 * ♻️ refactor(#124): 중복 코드 배열로 묶음 * ✨ Feat: Tags 컴포넌트 (#130) * ⚙️ chore(#127): tailwind.config 내 태그컬러 정의 제거" * 🛠 fix(#12): 컬럼섹션 내 너비/높이 값 버그 수정 * 🗑 remove(#127): generateTagColor 유틸함수 삭제 * ✨ feat(#127): add Tags Component * 🛠 fix(#19): 프로필아이콘 조건부 렌더링 * 🛠 fix(#127): generateTagIndex 함수를 이용한 고유 색상값 지정 & 파라미터 수정 * 🛠 fix(#127): generateTagIndex 수정 - generateTagIndex 파라미터 원래대로 수정 - 색상 종류 6가지로 수정(NUM_TAG_COLORS) - yellow, purple 색상 추가(상수 객체) * ✨ Feat: 로그인 폼, 회원가입 폼 모달 연결 및 모달 리팩토링 (#132) * ✨ feat(#6): 로그인 폼 모달 연결 * ♻️ refactor(#6): 모달 프롭 제거 * ♻️ refactor(#6): 알림 모달 제거 후 텍스트 모달로 변경 * ♻️ refactor(#6): 모달 index 코드 정리 * 🗑 remove(#6): notificationModal 제거 * ✨ Feat: 멤버 컴포넌트 (#128) * 🎨 design(#24): 구성원 컴포넌트 반응형 디자인 완성 * ✨ feat(#24): 구성원 불러오기와 페이지네이션 구현 * ✨ feat(#24): 멤버 삭제 기능 구현 * ✨ feat(#40): 대시보드 수정페이지 완성 (#134) * ✨ feat(#40): 대시보드 수정페이지 완성 * 🛠 fix(#9): 헤더 모바일 높이 수정 * 🗑 Remove(#136): 안쓰는 파일 삭제 (dashboard, context) (#138) * 🗑 remove(#136): dashboard 전역 상태 관련 안 쓰는 파일 삭제 * 🗑 remove(#136): context 폴더 삭제 * ♻️ Refactor(#121): 기본 모달 리팩토링 (#141) * ♻️ refactor(#121): 기본 모달 리팩토링 - notificationModal: 설명과 확인 버튼만 존재. 특별한 작업 원할 시 onClick 선택적으로 - confirmModal: 삭제전 확인하는 모달. 삭제와 확인 버튼 존재. 삭제작업은 onActionClick 필수 * ♻️ refactor(#121): 새 컬럼 생성 모달 리팩토링 - 컬럼 중복 검사 추가 - 추가시 화면에 반영되도록 refetch - 컬럼 10개 있을 때 더 생성하지 못하도록 막음 * 🗑 remove(#121): default modal 삭제하고 빈 notification으로 대체 * 🛠 fix(#121, #84, #24): button 타입 지정 + 대시보드관리 구성원 컴포넌트 프로필 아이콘 변경 반영 * 🛠 fix(#121): 모달에서 dashboard id 알아서 가져다 쓰도록 변경 * ✨ Feat(#25): 대시보드 정보 수정 컴포넌트 추가 (#143) * ✨ feat(#25): 대시보드 정보 수정 컴포넌트 추가 * 🛠 fix(#25): 코드 리뷰 반영 및 주석 제거 * 🎨 design(#129): 화면 세로 크기를 줄이면 레이아웃이 고장나는 버그 수정 (#133) * 🎨 design(#129): 화면 세로 크기를 줄이면 레이아웃이 고장나는 버그 수정 * 🎨 design(#129): UI 높이 고정 * 🎨 design(#129): 대시보드 제목이 긴 경우 생기는 문제 해결 - 사이드바 크기 조정 - 대시보드 리스트 아이템 크기 조정 * ♻️ refactor(#121, #114, #21): 컬럼 수정 모달 리팩토링 및 적용 (#147) * ♻️ refactor(#121, #114, #21): 컬럼 수정 모달 리팩토링 - 중복 이름 방지 - 변경사항 바로 반영되도록 쿼리 무효화 - 사용처인 dashboard 변경 (추가 파일 정리) * 🛠 fix(#121): 에러 발생 시 입력 하단에 에러메시지 출력하도록 변경 * ✨ feat(#121, #21): 글자수 10자 제한 * ♻️ Refactor(#121, #22): 초대하기 모달 리팩토링 및 적용 (#148) * ♻️ refactor(#121, #22): 초대하기 모달 컴포넌트 리팩토링 * ✨ feat(#121, #9, #23): 초대하기 모달 적용 * 🛠 fix(#121): 초대 버튼 글자 변경, 초기 비활성화 설정 * ♻️ Refactor: 대시보드 생성 모달 리팩토링 및 적용 (#150) * ♻️ refactor(#121, #17): 대시보드 생성 모달 리팩토링 - 에러 출력 추가 * ✨ feat(#121): 대시보드 생성 모달 적용 * ✨ feat(#121, #17): 글자수 10자 제한 * ✨ Feat: 카드 DnD (대시보드 페이지) (#145) * ⚙️ chore(#131): install react-beautiful-dnd * ⚙️ chore(#131): next.config 내 reactStrictMode false로 변경 * 🎨 design(#19): 카드 컴포넌트 오른쪽 마진값 제거 * ✨ feat(#131): 대시보드 내 카드 DnD 구현 - react-beautiful-dnd 라이브러리 활용(DragDropContext: 컬럼 섹션, Droppable: 개별 컬럼/카드, Draggable: 카드) - 한 컬럼 내 & 다른 컬럼으로의 카드 이동 - 다른 컬럼으로의 이동시, 컬럼 ID값을 수정하기 위한 PUT API 함수 정의 * 🛠 fix(#131): 한 컬럼 내 카드 DnD 기능 삭제 * 🗑 Remove(#136): 누락된 useFetchDashboard 삭제 (#159) 🗑 remove(#136): 누락된 useFetchDashboard 삭제 * ✨ feat(#10): 랜딩페이지 제작 (#115) * ✨ feat(#10): 랜딩페이지 임시 제작 * 🎨 design(#10): 반응형 디자인 추가 * ✨ feat(#10): 로그인 후 로고 클릭 시 내 대시보드로 이동하는 기능 추가 - 로그인 전에는 랜딩 페이지로 이동하도록 수정 * 🎨 design(#10): Footer 링크 제거 및 색 변경 * 🛠 Fix(#128): 배포 오류 해결 (#161) 🛠 fix(#128): 잘못 붙은 copy 삭제 * 🛠 fix(#158): 내 대시보드 스켈레톤 key 문제 해결 (#160) * 🛠 fix(#137): 드롭다운 클릭효과 범위 수정 (#139) * 🛠 fix(#137): 드롭다운 클릭효과 범위 수정 * 🎨 design(#137): 잘 보이게 크기 수정 * 🛠 fix(#137): 전역에서 드롭다운 닫을 수 있도록 변경 * ✨ feat(#157): 404 페이지 제작 (#163) * ✨ feat(#157): 404 페이지 제작 * ✨ feat(#157): 404 페이지에서 레이아웃 안나오게 수정 * ✨ feat(#157): 로그인 시 404페이지에서 사이드바 보이게 설정 * ♻️ Refactor(#121): 함수를 분리하여 타입 점검함으로써 타입 단언 방어 (#151) * ♻️ refactor(#121): 함수를 분리하여 타입 점검함으로써 타입 단언 방어 * 🛠 fix(#121): 글자수 제한 15자로 변경 * ✨ feat(#121): 대시보드 생성 시 생성된 대시보드로 이동 * ✨ Feat(#90): 비밀번호 암호화 (#164) * ⚙️ chore(#90): .env를 .gitignnore에 추가 * ⚙️ chore(#90): sha256 설치 * ✨ feat(#90): 비밀번호 암호화 (돕는 key를 .env에 저장) * 🎨 design(#171): 내 대시보드 고정된 디자인 수정 (#175) * 🎨 design(#171): 내 대시보드 고정된 디자인 수정 * 🎨 design(#162): HTML HEAD 설정 * 🎨 design(#171): 내 대시보드 PC, Mobile 최대 가로 사이즈 설정 * 🎨 design(#162): HTML 프리뷰 추가 * 🛠 Fix(#77): 재요청 횟수 제한 (#172) * 🛠 fix(#85): 헤더 수정 (#169) * 🛠 fix(#85): 헤더 구성원 프로필 오류 해결 - 구성원 숫자 바르게 (totalCount) - 구성원 수에 맞는 사이즈 갖도록 - 385px일 때 레이아웃 깨지지 않도록 모바일 헤더 패딩 줄임 * 🎨 design(#9, #171): 모바일 사이즈에서 헤더 버튼 아이콘만 보이도록 변경 * 🛠 fix(#168): 대시보드 생성자가 아니면 관리 버튼 보이지 않도록 함 * 🛠 fix(#171): 디자인 오류 수정 - 위치 적절하도록 header relative 설정 - z index 설정 * ✨ Feat(#173): 모달 적용하기 (#174) * ✨ feat(#173): 계정관리 - 프로필 변경에 모달 적용 - 추가로 변경사항 있을때만 버튼 활성화 * ✨ feat(#173): 계정관리 - 비밀번호 변경에 모달 적용 * ✨ feat(#173): 대시보드 수정 - 구성원 삭제 모달 연결 * 🎨 design(#121): 모달 텍스트 줄바꿈 반영, 글씨 가운데정렬 * ✨ feat(#173): 대시보드 수정 - 대시보드 삭제 기능 구현 및 모달 연결 * ✨ Feat(#82) : 로그인 상태에 따른 리다이렉션 구현 (#154) * ✨ feat(#82): 로그인 상태에 따른 리다이렉션 구현 * 🛠 fix(#82): 리다이렉트 로직 수정 --------- Co-authored-by: un0211 <[email protected]> * ❗️HOTFIX(#82): 리다이렉션 중 이전 모달 사용하는 부분 수정 (#186) * 🛠 fix(#185): 대시보드 이름 수정 시 15자 길이 제한 (#187) * 🛠 fix(#185): 대시보드 이름 수정 시 15자 길이 제한 * 🛠 fix(#185): 회원가입 시 닉네임 10자로 길이 제한 * ✨ Feat(#156): 대시보드 초대 알림 기능 추가 (#178) * 🚚 rename(#156): 헤더 폴더구조 변경 * ⚙️ chore(#156): toastify 추가 * ✨ feat(#156): 초대 알림 토스트 구현 (3초마다 갱신) * 🚚 rename(#156): 위치 변경, 재요청 간격 5초로 조정 * ✨ Feat(#11): 할 일 카드 생성 모달 컴포넌트 구현 (#184) * ✨ feat(#11): 할 일 카드 모달 퍼블리싱 및 columnId 전달 * ✨ feat(#11): 담당자 선택 드랍다운 구현 * ✨ feat(#11): 할 일 카드 생성 기본 폼 구현 * Merge branch 'develop' into feature/newCardModal * ✨ feat(#11): 생성 API 연결 * ✨ feat(#11): 모달 폼 디자인 수정 및 isEdit 프롭 추가 * ⚙️ chore(#11): react-datepicker 라이브러리 설치 * ✨ feat(#11): 이미지 API 수정 * 🗑 remove(#11): react-datepicker 제거 * 🛠 fix(#11): 코드 리뷰 반영 * 🎨 design(#171): 전체 레이아웃과 내 대시보드 디자인 문제 수정 (#189) * 🎨 design(#171): 내 대시보드 높이 디자인 문제 수정 * 🎨 design(#171): 내 대시보드 흰색 부분 최대 높이 지정 * 🎨 design(#171): 내 대시보드 모바일 크기 수정 * 🎨 design(#171): 초대받은 대시보드 목록 버튼 크기 수정 * 🎨 design(#171): 레이아웃 전반적인 문제 해결 * 🎨 design(#171): 대시보드 페이지 레이아웃 개선 - 너비 조정 (사이드바 크기 맞게, PC만) - 높이 조정 (full로 채우게) - section 안에 굳이 div 필요 없을 것 같아 삭제 --------- Co-authored-by: un0211 <[email protected]> * 🎨 Design(#171) 헤더 관련 디자인 수정사항 (#190) * 🎨 design(#171): 닉네임 길어도 헤더 깨지지 않게 간격 조정 * 🎨 design(#171): 구성원 수에 맞게 멤버 프로필 영역 너비 변경 * 🎨 design(#171): 헤더 간격 재조정 (패딩 늘리기) * 🛠 fix(#168): 대시보드 초대 알림 문제 해결 (#193) 🛠 fix(#168): 대시보드 초대 알림 비로그인 시 계속 호출되는 문제 해결 * 🛠 fix(#11): 카드 생성 모달 태그 색상 추가 (#195) * 🛠 fix(#11): 카드 생성 모달 태그 색상 추가 * 🛠 fix(#11): 태그 컴포넌트 수정 및 적용(삭제 기능 동작하도록) --------- Co-authored-by: un0211 <[email protected]> * 🎨 design(#171): 로그인/회원가입 여백설정 (#191) * 🎨 design(#171): 로그인/회원가입 여백설정 * 🎨 design(#171): 로그인/회원가입 Tablet, PC 최대 높이 지정 --------- Co-authored-by: jmj <[email protected]> * 🛠 fix(#168): 초대알림에서 user 접근 시 에러 해결 (#196) * ✨ Feat: 할일 카드 모달 (#180) * 🎨 design(#127): 태그 호버시 커서 디자인 수정 * ♻️ refactor(#3): formatDate 함수 시간까지 볼 수 있도록 수정 * 🎨 design(#12): 대시보드 스크롤 태블릿 이하에서는 안보이도록 수정 * ✨ feat(#3): 할일카드 모달 선언 & 타입 선언 * ✨ feat(#3): 할일카드 모달 관련 API 함수 추가 - 댓글 조회, 생성, 수정, 삭제 API 함수 정의 - POST용 CommentForm 타입 정의 * ✨ feat(#3): 할일카드 모달 & 댓글 기능 추가 * 🎨 design(#3): 할일카드 모달 내의 디자인 수정 - 스크롤 보이게 하기 - (꼽사리 커밋) 데스크톱 화면에서 컬럼 너비 고정되도록 수정 * 🎨 design(#127): 할일카드 태그 스크롤/줄바꿈 디자인 추가 * ✨ feat(#3): 수정하기 드롭다운 추가 - 수정하기/삭제하기 드롭다운 추가 - 카드 삭제 DELETE API 함수 정의 * 🎨 design(#3): 수정 칸 패딩 & 댓글 줄바꿈 추가 * 🎨 design(#3): 담당자&마감일 섹션 수징 중앙 정렬 * 🎨 design(#3): 할일카드 모달 내 디자인 오류 수정 * ⚙️ chore(#3): 할일카드 모달 배포 테스트 * ✨ Feat(#155): 대시보드 공유 기능 (#181) * 🎨 design(#155): 토글 디자인, 클릭 기능 구현 * ✨ feat(#155): 대시보드 생성 시 공유선택하면 공유 계정 멤버로 추가 * ✨ feat(#155): 대시보드 수정 페이지에서 공유 on/off에 따른 멤버 추가 삭제 * ✨ feat(#155): 공유계정 멤버 삭제시 자동 공유 취소 * 🎨 design(#155): 공유 시 로그인 안한 상태에서도 헤더 보이게 변경 * 🎨 design(#157): 404 페이지에서 헤더 보이게 수정 후 디자인 조정 * 🎨 design(#155): 로그인 안한 상태에서 공유 대시보드 접근 시 사이드바 제거 * ↔️ style(#155): 안쓰는 코드 제거 * 🛠 fix(#9, #155): 멤버 삭제시 상단 멤버 프로필에 반영 * ✨ feat(#155, #168): 관리 페이지 접근 권한 없을 경우 리다이렉트 * 🛠 fix(#162): 프리뷰 안뜨는 문제 수정 (#204) * ❗️ HOTFIX(#24): 대시보드 생성자 멤버 삭제 불가능하게 변경 (#203) 🛠 fix(#24): 대시보드 생성자 멤버 삭제 불가능하게 변경 * 🎨 design(#171): 랜딩 페이지 디자인 수정 (#192) * 🎨 design(#171): 랜딩 페이지 가로 크기 오버되는 문제 해결 * 🎨 design(#171): 랜딩 페이지 이미지 수정 * 🛠 fix(#200): 같은 대시보드 초대를 하나만 받을 수 있도록 수정 (#201) * 🎨 Design(#153): 다크 모드 설정 (#197) * 🎨 design(#153): 다크 모드 추가 * 🎨 design(#153): 내 대시보드 페이지 다크 모드 추가 * 🎨 design(#153): 모든 페이지, 모달 다크 모드 추가 * 🎨 design(#153): 할 일 모달 댓글 다크모드 적용 * 🎨 design(#153): 테마 버튼 수정 * 🎨 design(#153): 버튼 디자인 수정 * 🎨 design(#153): 취소 버튼 색상 변경 * 🎨 design(#153): 로그인, 회원가입 페이지 다크모드 적용 * ✨ Feat(#18): 할 일 카드 수정 모달 구현 (#205) * ✨ feat(#11): 할 일 생성 모달 컬럼 드랍다운 추가 * ✨ feat(#11): 할 일 카드 생성 및 수정 props 변경 * ✨ feat(#11): 할 일 카드 모달 수정 완성 * ✨ feat(#11): submit 버튼 로딩 시 disabled * 🗑 remove(#11): 주석 제거 * ✨ feat(#18): 컬럼 변화 없을 시 수정 버튼 비활성화 * ✨ feat(#11, #18): 제목 길이 제한 추가 (한글 25자, 영어 50자) * 🛠 fix(#198): 초대목록 변동 생길 경우를 고려해 필터링 기준을 시간으로 변경 (#202) * ✨ Feat(#210): 할 일 카드 수정 및 생성 추가 기능 구현 (#212) * ✨ feat(#18): 수정 -> 취소 시 할 일 카드 다시 오픈 기능 구현 * ✨ feat(#11, #18): 생성 및 수정 시 카드 오픈 * ✨ feat(#11, #18): 로딩 스피너 구현 * 🛠 fix(#11, #18): 생성 시 생성 완료 모달로 변경 및 타입 변경 * 🛠 Fix(#153): 다크모드로 바뀐 버튼 디자인 복귀 (#216) 🎨 design(#153): 다크모드로 바뀐 버튼 디자인 복귀 * ✨ Feat(#209): 폰트 적용 (#219) * 🎨 design(#209): 나눔고딕, Pretendard 폰트 적용 * 🎨 design(#209): 프로필 아이콘에 나눔고딕 폰트 적용 * 🛠 fix(#219): font weight 400 기본 설정 다시 추가 * 🎨 design(#217): 다크모드 수정 (#218) * 🎨 design(#217): 다크모드 수정 * 🎨 design(#153): 다크모드로 바뀐 버튼 디자인 복귀 --------- Co-authored-by: un0211 <[email protected]> * 🛠 Fix: 대시보드 페이지 내 버그 수정 (#214) * ♻️ refactor(#12): 프롭 id명을 dashboardId로 수정 * 🎨 design(#180): 수정 드롭다운을 위한 z-index 수정 * 🛠 fix(#180): 날짜가 -1로 찍히는 문제 수정 (fix formatDate.ts) * 🛠 fix(#182, #194): 카드 데이터 쿼리 무효화 적용 * 🎨 design(#171): 대시보드 내 종합 디자인 수정 - #207 : 카드 컴포넌트 댓글 개수 보여주기 - 대시보드 반응형 디자인 수정 - 카드 이미지 placeholder 지정 - 프로필이미지 깨짐, 카드 제목 깨짐 수정 - 카드에 댓글이 없을 때 빈댓글 이미지 표시 - 카드 설명글 줄바꿈 반영 - 카드 모달 내 애니메이션들 추가 * ✨ feat(#3): 댓글 입력 없이 제출하면 에러메시지 뜨는 기능 추가 * 🛠 fix(#4): 카드모달 댓글 섹션 깜빡거림 문제 수정 (refetch 적용) * ✨ feat(#166): 컬럼 섹션 스켈레톤 UI 적용 * 🛠 fix(#4): refetch & useEffect 훅을 컴포넌트 최상위 레벨에서 호출되도록 분리 * 🎨 design(#3): 댓글 에러메시지 패딩 수정 * 🛠 fix(#4): 댓글 에러를 버튼 disabled로 변경 * 🎨 design(#184): 카드 모달 내 프로필아이콘 폰트 크기 수정 - 할일 생성/수정 카드 내의 프로필아이콘 - 댓글 내의 프로필아이콘 * 🎨 design(#171): 할일카드 모달 내 프로필 아이콘 크기 수정 * ♻️ refactor(#167): 내 대시보드 페이지 서버 사이드 렌더링 적용 (#199) * ♻️ refactor(#167): 내 대시보드 페이지 서버 사이드 렌더링 적용 * ♻️ refactor(#167): 내 대시보드 서버 사이드 렌더링 수정 * 🛠 fix(#167): 서버사이드 중복 코드 제거 * 🛠 fix(#167): 초대 목록 함수 수정 * 🛠 fix(#167): 이미지 불러오는 성능 개선 * 🛠 fix(#167): 컨플릭트 해결 * ✨ feat(#188): 대시보드 즐겨찾기 추가 (#213) * ✨ feat(#188): 대시보드 즐겨찾기 API 추가 * ✨ feat(#188): 대시보드 즐겨찾기 3개 제한 기능 추가 * ✨ feat(#188): 대시보드 즐겨찾기 사이드바에 추가 * 🛠 fix(#188): 대시보드 즐겨찾기 갯수 제한 수정 * 🛠 fix(#188): 대시보드 갯수 제한 수정 * 🛠 fix(#188): request.http 제거 * 🛠 fix(#188): 대시보드 즐겨찾기 유저마다 받아오게 설정 * 🛠 fix(#188): 즐겨찾기 제거기능 수정 * 🛠 fix(#188): 즐겨찾기 최대 3개까지 추가 가능하게 수정 * 🛠 fix(#188): 즐겨찾기 추가 안되는 버그 수정 * 🛠 fix(#188): 즐겨찾기 에러 수정 * 🛠 fix(#188): 즐겨찾기 useFetchData 사용해서 불러오게 수정 * 🛠 fix(#188): 즐겨찾기 버그 수정 * 🛠 Fix(#168): 권한에 따른 페이지 접근 제어 (#211) * 🛠 fix(#82): 훅 최상위에서만 쓰도록 변경 * 🛠 fix(#168): 공유계정으로 하는 요청 제한 * 🛠 fix(#168): 생성자가 아닌 경우 대시보드 관리 페이지 접근시 리다이렉트 * 🎨 design(#168): 대시보드 관리페이지 에러문구 개선 * 🛠 fix(#168): 대시보드 관리페이지 접근 완전 제어, 리다이렉트 훅 형식 변경 * 🛠 fix(#168): 대시보드 접근 제어 * 🎨 design(#168, #41): 공유 대시보드 비로그인 상태일때 레이아웃 꽉 차게 * 🛠 fix(#168): 공유계정에서 모든 수정 기능 비활성화 * 🛠 fix(#4, #21): 변경사항 없을 시 버튼 비활성화 (댓글수정, 컬럼 수정 * 🛠 fix(#168): 리다이렉트 수정 (랜딩, 404) - 랜딩: 로그인 상태일때 모달 없이 바로 나의 대시보드로 - 404: 3초 뒤 로그인 여부에 따라 랜딩 or 나의 대시보드로 * 🛠 fix(#168): 멤버가 아닌 로그인 한 사람도 수정 버튼 비활성화 * 🎨 design(#13): 대시보드 컬럼 길이 수정 (#220) * 🛠 fix(#212, #211): 배포 오류 해결 (#222) * 🛠 fix(#212): postCardDat -> PostCardData * 🛠 fix(#211): 할 일 카드 모달 여는 곳마다 isMember 인자 추가 * 🛠 fix(#212): postCardDat -> PostCardData * 🛠 fix(#214): 할 일 수정에서 컬럼 변동 시 두 컬럼 모두 새로고침하도록 수정 (#223) * 🛠 fix(#198): 첫 번째 초대도 알람 올 수 있게 변경 (#224) * 🎨 design(#188): 사이드바 즐겨찾기 글자 수정 (#221) * 🎨 design(#188): 사이드바 즐겨찾기 모바일 사이즈에서 아이콘으로 변경 * 🎨 design(#188): 사이드바 즐겨찾기 글자 수정 * 🎨 design(#188): 사이드바 디자인 수정 * 🎨 design(#153): 다크모드 버튼 위치 수정 (#228) * 🎨 design(#153): 다크모드 버튼 위치 수정 - 랜딩 페이지는 항상 light 모드로 고정 * 🎨 design(#181): 토글 원이 정 가운데 오도록 높이고정 --------- Co-authored-by: un0211 <[email protected]> * ♻️ refactor(#226): 즐겨찾기 기능 최적화 (#227) * ♻️ refactor(#188): 즐겨찾기 기능 최적화 - 즐겨찾기용 유저 정보를 Redux에 저장하도록 변경 - 즐겨찾기 정보를 가져오는 요청을 최소화 * 🛠 fix(#226): 초기값 한번만 불러오게 변경 * 🛠 fix(#226): 로그아웃 시 즐겨찾기 정보 정리 --------- Co-authored-by: un0211 <[email protected]> * ✨ Feat: 카드목록, 댓글목록 무한스크롤 적용 & 기타 리팩토링 (#225) * ♻️ refactor(#3): 댓글 섹션 refetch - 언마운트시 쿼리를 취소하도록 변경 * 🎨 design(#166): 컬럼섹션 스켈레톤 수정 * 🗑 remove(#41): 쓰지 않는 index.tsx 파일 삭제 * ♻️ refactor(#4): 댓글 생성 날짜(UTC)도 포맷될 수 있도록 formatDate.ts 리팩토링 * 🎨 design(#166): 다크모드 컬럼 스켈레톤 색상 수정 * ✨ feat(#13): 컬럼 내 카드 무한스크롤 적용 - 10개를 기본으로 로드하고, 이후로는 1개씩 로드 - 로드 중인 카드는 로딩 스피너로 대체 - getCardsList() 서비스 함수 로직 수정 * 🎨 design(#166): 로딩 스피너 라이트모드에서 색상반전 * 🛠 fix(#13): 카드 패치 개수 5개로 수정 * ✨ feat(#4): 할일카드 내 댓글목록 무한스크롤 적용 * ✨ feat(#4): 할일카드 내 댓글목록 무한스크롤 적용 * ♻️ refactor(#58): getComments 서비스 함수 수정 * 🎨 design(#207): 댓글이 10개 이상이면 10+로 보이도록 지정 * 🎨 design(#166): 대시보드 페이지, 컬럼 섹션에 로딩 스피너 적용 * ♻️ refactor(#194): 쓰지 않는 refetch 함수 제거 * 🎨 design(#166): 카드 로딩스피너 투명도 수정 * 🎨 design(#4): 컬럼섹션 내 카드추가 버튼 높이 수정 * 📝 docs(#165): README.md 수정 (#215) * 📝 docs(#165): 파일 README.md 1차 수정 (이미지, 팀원후기 추가 필요) * 📝 docs(#165): 드래그 앤 드롭 설명 추가 * 📝 docs(#165): 즐겨찾기 설명 추가 * 📝 docs(#165): 다크모드 설명 추가 * 📝 docs(#165): 즐겨찾기 설명 수정 * 📝 docs(#165): 유저플로우 추가 * 📝 docs(#165): 페이지 이미지와 일부 설명 추가 * 📝 docs(#165): 시연영상 추가 --------- Co-authored-by: Jiyun Kim <[email protected]> Co-authored-by: jmj <[email protected]> --------- Co-authored-by: DAEYANG LEE <[email protected]> Co-authored-by: JMJ <[email protected]> Co-authored-by: Jiyun Kim <[email protected]> Co-authored-by: jmj <[email protected]>

wayandway added 8 commits July 5, 2024 19:50

♻️ refactor(#12): 프롭 id명을 dashboardId로 수정

8f0cce4

🎨 design(#180): 수정 드롭다운을 위한 z-index 수정

11b2979

🛠 fix(#180): 날짜가 -1로 찍히는 문제 수정 (fix formatDate.ts)

91b7368

🛠 fix(#182, #194): 카드 데이터 쿼리 무효화 적용

dd0744b

✨ feat(#3): 댓글 입력 없이 제출하면 에러메시지 뜨는 기능 추가

f93ee0d

🛠 fix(#4): 카드모달 댓글 섹션 깜빡거림 문제 수정 (refetch 적용)

69ebe04

✨ feat(#166): 컬럼 섹션 스켈레톤 UI 적용

b056ff9

wayandway added 🛠 fix 버그 수정 📄 dashboard 개별 대시보드 페이지 관련 labels Jul 7, 2024

wayandway requested review from oceanlee-seoul, un0211 and wjsdncl July 7, 2024 01:36

wayandway self-assigned this Jul 7, 2024

wayandway commented Jul 7, 2024

View reviewed changes

wayandway added 3 commits July 7, 2024 10:58

🛠 fix(#4): refetch & useEffect 훅을 컴포넌트 최상위 레벨에서 호출되도록 분리

164b7f2

Merge remote-tracking branch 'origin' into fix/dashboard-page

f3ebadb

🎨 design(#3): 댓글 에러메시지 패딩 수정

3dcb4cf

un0211 approved these changes Jul 7, 2024

View reviewed changes

🛠 fix(#4): 댓글 에러를 버튼 disabled로 변경

83eb56c

wayandway added 3 commits July 7, 2024 17:29

Merge remote-tracking branch 'origin' into fix/dashboard-page

9b9f8e2

🎨 design(#184): 카드 모달 내 프로필아이콘 폰트 크기 수정

0182ee4

- 할일 생성/수정 카드 내의 프로필아이콘 - 댓글 내의 프로필아이콘

🎨 design(#171): 할일카드 모달 내 프로필 아이콘 크기 수정

3b3c892

wayandway merged commit 66d3ee2 into develop Jul 7, 2024

wayandway deleted the fix/dashboard-page branch July 7, 2024 08:55

un0211 added a commit that referenced this pull request Jul 7, 2024

🛠 fix(#214): 할 일 수정에서 컬럼 변동 시 두 컬럼 모두 새로고침하도록 수정

cb454bf

un0211 mentioned this pull request Jul 7, 2024

🛠 fix(#214): 할 일 수정에서 컬럼 변동 시 두 컬럼 모두 새로고침하도록 수정 #223

Merged

un0211 added a commit that referenced this pull request Jul 7, 2024

🛠 fix(#214): 할 일 수정에서 컬럼 변동 시 두 컬럼 모두 새로고침하도록 수정 (#223)

909e050

🛠 Fix: 대시보드 페이지 내 버그 수정 #214

🛠 Fix: 대시보드 페이지 내 버그 수정 #214

Uh oh!

Conversation

wayandway commented Jul 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

연관된 이슈

작업 내용

스크린샷

코멘트 및 논의 사항

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wayandway Jul 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

un0211 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

un0211 commented Jul 7, 2024

Uh oh!

wayandway commented Jul 7, 2024

Uh oh!

un0211 commented Jul 7, 2024

Uh oh!

wayandway commented Jul 7, 2024

Uh oh!

wayandway commented Jul 7, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wayandway commented Jul 7, 2024 •

edited

Loading

wayandway Jul 7, 2024 •

edited

Loading