diff --git a/src/apis/auth/index.ts b/src/apis/auth/index.ts index cd1591a..09c022d 100644 --- a/src/apis/auth/index.ts +++ b/src/apis/auth/index.ts @@ -1,6 +1,6 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { LoginFormData, LoginResponse, loginResponseSchema, PutPasswordFormData } from './types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { LoginFormData, LoginResponse, loginResponseSchema, PutPasswordFormData } from '@/apis/auth/types'; /** * login diff --git a/src/apis/auth/queries.tsx b/src/apis/auth/queries.ts similarity index 83% rename from src/apis/auth/queries.tsx rename to src/apis/auth/queries.ts index 6b71bef..13f31ac 100644 --- a/src/apis/auth/queries.tsx +++ b/src/apis/auth/queries.ts @@ -1,6 +1,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { login, logout, putPassword } from '.'; -import { LoginFormData, PutPasswordFormData } from './types'; +import { login, logout, putPassword } from '@/apis/auth'; +import { LoginFormData, PutPasswordFormData } from '@/apis/auth/types'; export const useLogin = () => { return useMutation({ diff --git a/src/apis/cards/index.ts b/src/apis/cards/index.ts index 0761fab..d75a978 100644 --- a/src/apis/cards/index.ts +++ b/src/apis/cards/index.ts @@ -1,7 +1,7 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { Card, CardRequest, cardSchema, CardsResponse, cardsResponseSchema, GetCardsParams } from './types'; -import { Column } from '../columns/types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { Card, CardRequest, cardSchema, CardsResponse, cardsResponseSchema, GetCardsParams } from '@/apis/cards/types'; +import { Column } from '@/apis/columns/types'; /** * card 생성 diff --git a/src/apis/cards/queries.tsx b/src/apis/cards/queries.ts similarity index 96% rename from src/apis/cards/queries.tsx rename to src/apis/cards/queries.ts index d35740c..0798a3b 100644 --- a/src/apis/cards/queries.tsx +++ b/src/apis/cards/queries.ts @@ -1,9 +1,9 @@ 'use client'; import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { deleteCard, getCard, getCards, moveCard, postCard, putCard } from '.'; -import { Card, CardRequest, CardsResponse, GetCardsParams } from './types'; -import { Column } from '../columns/types'; +import { deleteCard, getCard, getCards, moveCard, postCard, putCard } from '@/apis/cards'; +import { Card, CardRequest, CardsResponse, GetCardsParams } from '@/apis/cards/types'; +import { Column } from '@/apis/columns/types'; export const useCardsQuery = (params: GetCardsParams) => { return useInfiniteQuery({ diff --git a/src/apis/cards/types.ts b/src/apis/cards/types.ts index 0ce8888..968e7ec 100644 --- a/src/apis/cards/types.ts +++ b/src/apis/cards/types.ts @@ -1,5 +1,5 @@ -import isValidDate from '@/utils/isValidDate'; import { z } from 'zod'; +import isValidDate from '@/utils/isValidDate'; const IMAGE_URL = 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/taskify/task_image/'; diff --git a/src/apis/columns/index.ts b/src/apis/columns/index.ts index 94a9a59..914aabd 100644 --- a/src/apis/columns/index.ts +++ b/src/apis/columns/index.ts @@ -1,6 +1,6 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { CardImageForm, CardImageResponse, cardImageResponseSchema, Column, ColumnForm, columnSchema, ColumnsResponse, columnsResponseSchema, GetColumnsParams } from './types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { CardImageForm, CardImageResponse, cardImageResponseSchema, Column, ColumnForm, columnSchema, ColumnsResponse, columnsResponseSchema, GetColumnsParams } from '@/apis/columns/types'; /** * column 생성 diff --git a/src/apis/columns/queries.tsx b/src/apis/columns/queries.ts similarity index 94% rename from src/apis/columns/queries.tsx rename to src/apis/columns/queries.ts index 4aca819..4f3c2e2 100644 --- a/src/apis/columns/queries.tsx +++ b/src/apis/columns/queries.ts @@ -1,8 +1,8 @@ 'use client'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { deleteColumn, getColumns, postColumn, putColumn } from '.'; -import { ColumnForm } from './types'; +import { deleteColumn, getColumns, postColumn, putColumn } from '@/apis/columns'; +import { ColumnForm } from '@/apis/columns/types'; export const useColumnsQuery = (dashboardId: number) => { return useQuery({ diff --git a/src/apis/comments/index.ts b/src/apis/comments/index.ts index 725efba..fbab138 100644 --- a/src/apis/comments/index.ts +++ b/src/apis/comments/index.ts @@ -1,6 +1,6 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { Comment, CommentForm, commentSchema, CommentsResponse, commentsResponseSchema, GetCommentsParams, PutCommentForm } from './types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { Comment, CommentForm, commentSchema, CommentsResponse, commentsResponseSchema, GetCommentsParams, PutCommentForm } from '@/apis/comments/types'; /** * comment 생성 diff --git a/src/apis/comments/queries.tsx b/src/apis/comments/queries.ts similarity index 98% rename from src/apis/comments/queries.tsx rename to src/apis/comments/queries.ts index 5242bf2..c633b63 100644 --- a/src/apis/comments/queries.tsx +++ b/src/apis/comments/queries.ts @@ -1,5 +1,5 @@ import { InfiniteData, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'; -import { getComments, postComment, putComment, deleteComment } from '.'; +import { getComments, postComment, putComment, deleteComment } from '@/apis/comments'; import type { CommentForm, CommentsResponse, GetCommentsParams, PutCommentForm } from '@/apis/comments/types'; export const useCommentsQuery = (params: GetCommentsParams) => { diff --git a/src/apis/dashboards/index.ts b/src/apis/dashboards/index.ts index 38a97dc..2b05635 100644 --- a/src/apis/dashboards/index.ts +++ b/src/apis/dashboards/index.ts @@ -1,4 +1,5 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; +import { safeResponse } from '@/utils/network/safeResponse'; import { Dashboard, DashboardInvitation, @@ -14,8 +15,7 @@ import { InviteDashboardRequest, dashboardInvitationSchema, CancelInviteDashboardRequest, -} from './types'; -import { safeResponse } from '@/utils/network/safeResponse'; +} from '@/apis/dashboards/types'; /** * dashboard 생성 diff --git a/src/apis/dashboards/queries.tsx b/src/apis/dashboards/queries.ts similarity index 89% rename from src/apis/dashboards/queries.tsx rename to src/apis/dashboards/queries.ts index 8a87748..ade925f 100644 --- a/src/apis/dashboards/queries.tsx +++ b/src/apis/dashboards/queries.ts @@ -1,8 +1,16 @@ 'use client'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { cancelDashboardInvitation, createDashboard, deleteDashboard, getDashboardDetails, getDashboardInvitations, getDashboards, inviteDashboard, updateDashboard } from '.'; -import { CancelInviteDashboardRequest, CreateDashboardRequest, Dashboard, GetDashboardInvitationsRequest, GetDashboardsRequest, InviteDashboardRequest, UpdateDashboardRequest } from './types'; +import { cancelDashboardInvitation, createDashboard, deleteDashboard, getDashboardDetails, getDashboardInvitations, getDashboards, inviteDashboard, updateDashboard } from '@/apis/dashboards'; +import { + CancelInviteDashboardRequest, + CreateDashboardRequest, + Dashboard, + GetDashboardInvitationsRequest, + GetDashboardsRequest, + InviteDashboardRequest, + UpdateDashboardRequest, +} from '@/apis/dashboards/types'; export const useDashboardsQuery = (params: GetDashboardsRequest) => { return useQuery({ diff --git a/src/apis/dashboards/types.ts b/src/apis/dashboards/types.ts index d0cddd3..a524526 100644 --- a/src/apis/dashboards/types.ts +++ b/src/apis/dashboards/types.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; +import { userSchema } from '@/apis/users/types'; import { DASHBOARD_FORM_ERROR_MESSAGE, DASHBOARD_FORM_VALID_LENGTH } from '@/constants/dashboard'; import { DEFAULT_COLORS } from '@/constants/colors'; -import { userSchema } from '@/apis/users/types'; import { BasePagination, NavigationMethod } from '@/types/common'; export const dashboardSchema = z.object({ diff --git a/src/apis/invitations/index.ts b/src/apis/invitations/index.ts index 06ab477..915b626 100644 --- a/src/apis/invitations/index.ts +++ b/src/apis/invitations/index.ts @@ -1,7 +1,7 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { GetMyInvitationsRequest, MyInvitations, myInvitationsSchema, RespondToInvitationRequest } from './types'; -import { DashboardInvitation, dashboardInvitationSchema } from '../dashboards/types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { GetMyInvitationsRequest, MyInvitations, myInvitationsSchema, RespondToInvitationRequest } from '@/apis/invitations/types'; +import { DashboardInvitation, dashboardInvitationSchema } from '@/apis/dashboards/types'; /** * 내가 받은 초대 목록 조회 diff --git a/src/apis/invitations/queries.tsx b/src/apis/invitations/queries.ts similarity index 89% rename from src/apis/invitations/queries.tsx rename to src/apis/invitations/queries.ts index 3b96294..2076488 100644 --- a/src/apis/invitations/queries.tsx +++ b/src/apis/invitations/queries.ts @@ -1,8 +1,8 @@ 'use client'; import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'; -import { getMyInvitations, respondToInvitation } from '.'; -import { GetMyInvitationsRequest, RespondToInvitationRequest } from './types'; +import { getMyInvitations, respondToInvitation } from '@/apis/invitations/'; +import { GetMyInvitationsRequest, RespondToInvitationRequest } from '@/apis/invitations/types'; export const useMyInvitationsQuery = (params: GetMyInvitationsRequest) => { return useInfiniteQuery({ diff --git a/src/apis/invitations/types.ts b/src/apis/invitations/types.ts index 5a803b3..b54135a 100644 --- a/src/apis/invitations/types.ts +++ b/src/apis/invitations/types.ts @@ -1,5 +1,5 @@ import { z } from 'zod'; -import { DashboardInvitation, dashboardInvitationSchema } from '../dashboards/types'; +import { DashboardInvitation, dashboardInvitationSchema } from '@/apis/dashboards/types'; import { BaseCursor } from '@/types/common'; export type GetMyInvitationsRequest = Partial & { diff --git a/src/apis/members/index.ts b/src/apis/members/index.ts index 8cd1df8..f7b66cd 100644 --- a/src/apis/members/index.ts +++ b/src/apis/members/index.ts @@ -1,6 +1,6 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { DeleteMemberRequest, GetMembersRequest, Members, membersSchema } from './types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { DeleteMemberRequest, GetMembersRequest, Members, membersSchema } from '@/apis/members/types'; /** * 대시보드 멤버 목록 조회 diff --git a/src/apis/members/queries.tsx b/src/apis/members/queries.ts similarity index 79% rename from src/apis/members/queries.tsx rename to src/apis/members/queries.ts index 314078d..c172ffc 100644 --- a/src/apis/members/queries.tsx +++ b/src/apis/members/queries.ts @@ -1,6 +1,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { deleteMember, getMembers } from '.'; -import { DeleteMemberRequest, GetMembersRequest } from './types'; +import { deleteMember, getMembers } from '@/apis/members/'; +import { DeleteMemberRequest, GetMembersRequest } from '@/apis/members/types'; export const useMembersQuery = (params: GetMembersRequest) => { return useQuery({ diff --git a/src/apis/members/types.ts b/src/apis/members/types.ts index dd2a255..c21074d 100644 --- a/src/apis/members/types.ts +++ b/src/apis/members/types.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; -import { User, userSchema } from '../users/types'; +import { User, userSchema } from '@/apis//users/types'; +import { Dashboard } from '@/apis/dashboards/types'; import { BasePagination } from '@/types/common'; -import { Dashboard } from '../dashboards/types'; export type GetMembersRequest = BasePagination & { dashboardId: Dashboard['id']; diff --git a/src/apis/users/index.ts b/src/apis/users/index.ts index de73e41..99dd861 100644 --- a/src/apis/users/index.ts +++ b/src/apis/users/index.ts @@ -1,6 +1,6 @@ import axiosClientHelper from '@/utils/network/axiosClientHelper'; -import { CreateProfileImageForm, ProfileImageUrlResponse, profileImageUrlResponseSchema, SignupFormData, SignupResponse, UpdateUserForm, User, userSchema } from './types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { CreateProfileImageForm, ProfileImageUrlResponse, profileImageUrlResponseSchema, SignupFormData, SignupResponse, UpdateUserForm, User, userSchema } from '@/apis/users/types'; /** * signup diff --git a/src/apis/users/queries.tsx b/src/apis/users/queries.ts similarity index 95% rename from src/apis/users/queries.tsx rename to src/apis/users/queries.ts index ceaf384..21d59db 100644 --- a/src/apis/users/queries.tsx +++ b/src/apis/users/queries.ts @@ -1,6 +1,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { createProfileImage, getUser, signup, updateUser } from '.'; -import { CreateProfileImageForm, SignupFormData, UpdateUserForm } from './types'; +import { createProfileImage, getUser, signup, updateUser } from '@/apis/users'; +import { CreateProfileImageForm, SignupFormData, UpdateUserForm } from '@/apis/users/types'; export const useGetUser = () => { return useQuery({ diff --git a/src/apis/users/types.ts b/src/apis/users/types.ts index 45c009f..fde19d7 100644 --- a/src/apis/users/types.ts +++ b/src/apis/users/types.ts @@ -1,6 +1,6 @@ import { z } from 'zod'; import { SIGNUP_FORM_VALID_LENGTH, SIGNUP_FORM_ERROR_MESSAGE } from '@/constants/auth'; -import { PROFILEEDIT_FORM_VALID_LENGTH, PROFILEEDIT_FORM_ERROR_MESSAGE } from '@/constants/profileEdit'; +import { PROFILEEDIT_FORM_VALID_LENGTH, PROFILEEDIT_FORM_ERROR_MESSAGE } from '@/constants/user'; interface FailResponse { message: string; diff --git a/src/app/(after-login)/dashboard/[id]/edit/layout.tsx b/src/app/(after-login)/dashboard/[id]/edit/layout.tsx index f59ee95..dd20d1f 100644 --- a/src/app/(after-login)/dashboard/[id]/edit/layout.tsx +++ b/src/app/(after-login)/dashboard/[id]/edit/layout.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react'; import { Metadata } from 'next'; import axiosServerHelper from '@/utils/network/axiosServerHelper'; -import { Dashboard, dashboardSchema } from '@/apis/dashboards/types'; import { safeResponse } from '@/utils/network/safeResponse'; +import { Dashboard, dashboardSchema } from '@/apis/dashboards/types'; export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise { const resolvedParams = await params; diff --git a/src/app/(after-login)/dashboard/[id]/edit/loading.tsx b/src/app/(after-login)/dashboard/[id]/edit/loading.tsx index 3934c34..56fda21 100644 --- a/src/app/(after-login)/dashboard/[id]/edit/loading.tsx +++ b/src/app/(after-login)/dashboard/[id]/edit/loading.tsx @@ -1,5 +1,5 @@ import { Page, PageInner } from '@/components/layout/Page'; -import { CardSkeleton } from '@/components/ui/Card/Card'; +import { CardSkeleton } from '@/components/ui/Card'; import { GoBackSkeleton } from '@/components/ui/Link/GoBackLink'; export default function loading() { diff --git a/src/app/(after-login)/dashboard/[id]/edit/page.tsx b/src/app/(after-login)/dashboard/[id]/edit/page.tsx index 08a60aa..054cd24 100644 --- a/src/app/(after-login)/dashboard/[id]/edit/page.tsx +++ b/src/app/(after-login)/dashboard/[id]/edit/page.tsx @@ -1,13 +1,13 @@ +import { redirect } from 'next/navigation'; +import { Dashboard, dashboardSchema } from '@/apis/dashboards/types'; +import axiosServerHelper from '@/utils/network/axiosServerHelper'; +import { safeResponse } from '@/utils/network/safeResponse'; import { Page, PageInner } from '@/components/layout/Page'; import DetailModify from '@/components/dashboard/DetailModify'; import DetailMembers from '@/components/dashboard/DetailMembers'; import DetailInvited from '@/components/dashboard/DetailInvited'; import GoBackLink from '@/components/ui/Link/GoBackLink'; import DetailDelete from '@/components/dashboard/DetailDelete'; -import axiosServerHelper from '@/utils/network/axiosServerHelper'; -import { redirect } from 'next/navigation'; -import { Dashboard, dashboardSchema } from '@/apis/dashboards/types'; -import { safeResponse } from '@/utils/network/safeResponse'; export default async function DashboardEditPage({ params }: { params: Promise<{ id: string }> }) { const id = (await params).id; diff --git a/src/app/(after-login)/dashboard/[id]/page.tsx b/src/app/(after-login)/dashboard/[id]/page.tsx index 44cd9b9..fa0d634 100644 --- a/src/app/(after-login)/dashboard/[id]/page.tsx +++ b/src/app/(after-login)/dashboard/[id]/page.tsx @@ -1,7 +1,7 @@ -import ColumnList from '@/components/columns/ColumnList'; import { Metadata } from 'next'; -import axiosServerHelper from '@/utils/network/axiosServerHelper'; +import ColumnList from '@/components/columns/ColumnList'; import { Dashboard, dashboardSchema } from '@/apis/dashboards/types'; +import axiosServerHelper from '@/utils/network/axiosServerHelper'; import { safeResponse } from '@/utils/network/safeResponse'; export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise { diff --git a/src/app/(after-login)/layout.tsx b/src/app/(after-login)/layout.tsx index 722fbab..614ad57 100644 --- a/src/app/(after-login)/layout.tsx +++ b/src/app/(after-login)/layout.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren } from 'react'; -import Header from '@/components/dashboard-header/Header'; -import Sidebar from '@/components/dashboard/Sidebar'; +import Header from '@/components/dashboard/header/Header'; +import Sidebar from '@/components/dashboard/sidebar/Sidebar'; export default function layout({ children }: PropsWithChildren) { return ( diff --git a/src/app/(after-login)/mypage/loading.tsx b/src/app/(after-login)/mypage/loading.tsx index 13dca7c..ae24f6e 100644 --- a/src/app/(after-login)/mypage/loading.tsx +++ b/src/app/(after-login)/mypage/loading.tsx @@ -1,5 +1,5 @@ import { Page, PageInner } from '@/components/layout/Page'; -import { CardSkeleton } from '@/components/ui/Card/Card'; +import { CardSkeleton } from '@/components/ui/Card'; import { GoBackSkeleton } from '@/components/ui/Link/GoBackLink'; export default function loading() { diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx index 4114a5f..278ce0f 100644 --- a/src/app/(after-login)/mypage/page.tsx +++ b/src/app/(after-login)/mypage/page.tsx @@ -1,11 +1,11 @@ import { redirect } from 'next/navigation'; import { User, userSchema } from '@/apis/users/types'; +import axiosServerHelper from '@/utils/network/axiosServerHelper'; +import { safeResponse } from '@/utils/network/safeResponse'; import { Page, PageInner } from '@/components/layout/Page'; import PasswordEdit from '@/components/profile/PasswordEdit'; import ProfileEdit from '@/components/profile/ProfileEdit'; import GoBackLink from '@/components/ui/Link/GoBackLink'; -import axiosServerHelper from '@/utils/network/axiosServerHelper'; -import { safeResponse } from '@/utils/network/safeResponse'; export const metadata = { title: 'Taskify - 마이페이지', diff --git a/src/app/api/[...endpoint]/route.ts b/src/app/api/[...endpoint]/route.ts index e615e57..7f28233 100644 --- a/src/app/api/[...endpoint]/route.ts +++ b/src/app/api/[...endpoint]/route.ts @@ -12,10 +12,10 @@ * */ +import { NextRequest, NextResponse } from 'next/server'; +import { isEmpty, omit } from 'es-toolkit/compat'; import axiosServerHelper from '@/utils/network/axiosServerHelper'; import errorResponse from '@/utils/network/errorResponse'; -import { isEmpty, omit } from 'es-toolkit/compat'; -import { NextRequest, NextResponse } from 'next/server'; export const GET = async (request: NextRequest) => { const url = new URL(request.url); diff --git a/src/app/error.tsx b/src/app/error.tsx index 5ab7867..a1c9887 100644 --- a/src/app/error.tsx +++ b/src/app/error.tsx @@ -1,12 +1,12 @@ 'use client'; -import Image from 'next/image'; import React from 'react'; -import LogoCi from '@/assets/images/logo_ci.svg'; -import LogoBi from '@/assets/images/logo_bi.svg'; -import Button from '@/components/ui/Button/Button'; +import Image from 'next/image'; import Link from 'next/link'; import axios from 'axios'; +import Button from '@/components/ui/Button'; +import LogoCi from '@/assets/images/logo_ci.svg'; +import LogoBi from '@/assets/images/logo_bi.svg'; interface ErrorProps { error: Error; diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index b52bc57..9e42451 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,11 +1,11 @@ 'use client'; import Image from 'next/image'; +import Link from 'next/link'; import { useRouter } from 'next/navigation'; +import Button from '@/components/ui/Button'; import LogoCi from '@/assets/images/logo_ci.svg'; import LogoBi from '@/assets/images/logo_bi.svg'; -import Button from '@/components/ui/Button/Button'; -import Link from 'next/link'; export default function NotFound() { const router = useRouter(); diff --git a/src/components/auth/Field.tsx b/src/components/auth/Field.tsx index 432fb0c..6a06ec7 100644 --- a/src/components/auth/Field.tsx +++ b/src/components/auth/Field.tsx @@ -1,9 +1,9 @@ -import OpendEyeIcon from '@/assets/icons/opend_eye.svg'; -import ClosedEyeIcon from '@/assets/icons/closed_eye.svg'; -import Image from 'next/image'; import { useState } from 'react'; +import Image from 'next/image'; import { UseFormRegisterReturn } from 'react-hook-form'; import { isEmpty } from 'es-toolkit/compat'; +import OpendEyeIcon from '@/assets/icons/opend_eye.svg'; +import ClosedEyeIcon from '@/assets/icons/closed_eye.svg'; type Input = 'text' | 'email' | 'password'; diff --git a/src/components/auth/Header.tsx b/src/components/auth/Header.tsx index a8fa4d7..e75e0eb 100644 --- a/src/components/auth/Header.tsx +++ b/src/components/auth/Header.tsx @@ -1,9 +1,9 @@ +import { PropsWithChildren } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import LogoCi from '@/assets/images/logo_ci.svg'; -import { ReactNode } from 'react'; -export default function Header({ children }: { children: ReactNode }) { +export default function Header({ children }: PropsWithChildren) { return (
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx index 065e301..5775a4a 100644 --- a/src/components/auth/LoginForm.tsx +++ b/src/components/auth/LoginForm.tsx @@ -1,14 +1,14 @@ 'use client'; -import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import useAlert from '@/hooks/useAlert'; +import { loginSchema, LoginFormData } from '@/apis/auth/types'; +import { useLogin } from '@/apis/auth/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; import Field from '@/components/auth/Field'; import SubmitButton from '@/components/auth/SubmitButton'; import { LOGIN_FORM_PLACEHOLDER } from '@/constants/auth'; -import { loginSchema, LoginFormData } from '@/apis/auth/types'; -import useAlert from '@/hooks/useAlert'; -import { useLogin } from '@/apis/auth/queries'; -import { getErrorMessage } from '@/utils/errorMessage'; export default function LoginForm() { const { diff --git a/src/components/auth/SignupForm.tsx b/src/components/auth/SignupForm.tsx index 77e6938..20a4f38 100644 --- a/src/components/auth/SignupForm.tsx +++ b/src/components/auth/SignupForm.tsx @@ -1,16 +1,16 @@ 'use client'; -import { zodResolver } from '@hookform/resolvers/zod'; +import { useRouter } from 'next/navigation'; import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import useAlert from '@/hooks/useAlert'; +import { signupSchema, SignupFormData } from '@/apis/users/types'; +import { useSignup } from '@/apis/users/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; import Field from '@/components/auth/Field'; import SubmitButton from '@/components/auth/SubmitButton'; -import Checkbox from './Checkbox'; +import Checkbox from '@/components/auth/Checkbox'; import { SIGNUP_FORM_PLACEHOLDER } from '@/constants/auth'; -import { signupSchema, SignupFormData } from '@/apis/users/types'; -import useAlert from '@/hooks/useAlert'; -import { useRouter } from 'next/navigation'; -import { useSignup } from '@/apis/users/queries'; -import { getErrorMessage } from '@/utils/errorMessage'; export default function SignupForm() { const { diff --git a/src/components/columns/AddColumnBtn.tsx b/src/components/columns/AddColumnBtn.tsx index a402628..a65ea8b 100644 --- a/src/components/columns/AddColumnBtn.tsx +++ b/src/components/columns/AddColumnBtn.tsx @@ -1,19 +1,19 @@ 'use client'; -import { ColumnForm, columnFormSchema, ColumnsResponse } from '@/apis/columns/types'; -import DashboardButton from '@/components/ui/Button/DashboardButton'; -import { zodResolver } from '@hookform/resolvers/zod'; -import { useForm } from 'react-hook-form'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal'; import { useRef } from 'react'; +import Image from 'next/image'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { some } from 'es-toolkit/compat'; import useAlert from '@/hooks/useAlert'; -import { Input } from '@/components/ui/Field'; -import Button from '../ui/Button/Button'; +import { ColumnForm, columnFormSchema, ColumnsResponse } from '@/apis/columns/types'; import { useColumnMutation } from '@/apis/columns/queries'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import DashboardButton from '@/components/ui/Button/DashboardButton'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import { Input } from '@/components/ui/Field'; +import Button from '@/components/ui/Button'; import xIcon from '@/assets/icons/x.svg'; -import Image from 'next/image'; -import { some } from 'es-toolkit/compat'; interface AddColumnBtnProps { dashboardId: number; diff --git a/src/components/columns/ColumnItem.tsx b/src/components/columns/ColumnItem.tsx index 3505d39..831ed59 100644 --- a/src/components/columns/ColumnItem.tsx +++ b/src/components/columns/ColumnItem.tsx @@ -1,17 +1,17 @@ 'use client'; -import { Column } from '@/apis/columns/types'; -import ColumnSettingBtn from './ColumnSettingBtn'; -import Dot from '@/components/ui/Dot/Dot'; -import DashboardButton from '@/components/ui/Button/DashboardButton'; -import { useCardsQuery } from '@/apis/cards/queries'; -import { useInView } from 'react-intersection-observer'; import { useEffect, useRef } from 'react'; import { motion } from 'motion/react'; -import TodoCard from '../dashboard/TodoCard'; -import { ModalHandle } from '../ui/Modal/Modal'; -import CreateCard from './CreateCard'; +import { useInView } from 'react-intersection-observer'; import { Draggable } from '@hello-pangea/dnd'; +import { Column } from '@/apis/columns/types'; +import { useCardsQuery } from '@/apis/cards/queries'; +import ColumnSettingBtn from '@/components/columns/ColumnSettingBtn'; +import Dot from '@/components/ui/Dot'; +import DashboardButton from '@/components/ui/Button/DashboardButton'; +import TodoCard from '@/components/todo/TodoCard'; +import { ModalHandle } from '@/components/ui/Modal'; +import CreateCard from '@/components/columns/CreateCard'; const PAGE_SIZE = 5; diff --git a/src/components/columns/ColumnList.tsx b/src/components/columns/ColumnList.tsx index 6f50a3d..634de9e 100644 --- a/src/components/columns/ColumnList.tsx +++ b/src/components/columns/ColumnList.tsx @@ -1,14 +1,14 @@ 'use client'; -import { useColumnsQuery } from '@/apis/columns/queries'; import { useParams } from 'next/navigation'; -import ColumnItem from './ColumnItem'; -import AddColumnBtn from './AddColumnBtn'; +import { useQueryClient } from '@tanstack/react-query'; import { isEmpty } from 'es-toolkit/compat'; import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd'; +import { useColumnsQuery } from '@/apis/columns/queries'; import { useMoveCard } from '@/apis/cards/queries'; -import { useQueryClient } from '@tanstack/react-query'; import { Card, CardsResponse } from '@/apis/cards/types'; +import ColumnItem from '@/components/columns/ColumnItem'; +import AddColumnBtn from '@/components/columns/AddColumnBtn'; export default function ColumnList() { const params = useParams(); diff --git a/src/components/columns/ColumnSettingBtn.tsx b/src/components/columns/ColumnSettingBtn.tsx index 43712dc..7d0c79b 100644 --- a/src/components/columns/ColumnSettingBtn.tsx +++ b/src/components/columns/ColumnSettingBtn.tsx @@ -1,17 +1,17 @@ 'use client'; import { useRef } from 'react'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal'; import Image from 'next/image'; -import Setting from '@/assets/icons/setting.svg'; -import Button from '@/components/ui/Button/Button'; import { useForm } from 'react-hook-form'; -import { Column, ColumnForm, columnFormSchema } from '@/apis/columns/types'; import { zodResolver } from '@hookform/resolvers/zod'; -import { Input } from '@/components/ui/Field'; -import { getErrorMessage } from '@/utils/errorMessage'; import useAlert from '@/hooks/useAlert'; +import { Column, ColumnForm, columnFormSchema } from '@/apis/columns/types'; import { useColumnMutation } from '@/apis/columns/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Input } from '@/components/ui/Field'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import Button from '@/components/ui/Button'; +import Setting from '@/assets/icons/setting.svg'; import xIcon from '@/assets/icons/x.svg'; export default function ColumnSettingBtn({ column }: { column: Column }) { diff --git a/src/components/columns/CreateCard.tsx b/src/components/columns/CreateCard.tsx index efbcb7f..df1fff2 100644 --- a/src/components/columns/CreateCard.tsx +++ b/src/components/columns/CreateCard.tsx @@ -1,27 +1,28 @@ 'use client'; -import { forwardRef } from 'react'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '../ui/Modal/Modal'; +import { Ref } from 'react'; import { Controller, useForm } from 'react-hook-form'; -import { CardForm, cardFormSchema } from '@/apis/cards/types'; import { zodResolver } from '@hookform/resolvers/zod'; -import { AssignInput, DateInput, ImageUpload, Input, TagInput, Textarea } from '../ui/Field'; -import Button from '../ui/Button/Button'; -import { useCreateCard } from '@/apis/cards/queries'; import useAlert from '@/hooks/useAlert'; +import { CardForm, cardFormSchema } from '@/apis/cards/types'; +import { useCreateCard } from '@/apis/cards/queries'; import { postCardImage } from '@/apis/columns'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { getErrorMessage } from '@/utils/network/errorMessage'; import convertDateFormat from '@/utils/convertDateFormat'; -import { DEFAULT_CARD_IMAGE_URL } from '@/constants/paths'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import { AssignInput, DateInput, ImageUpload, Input, TagInput, Textarea } from '@/components/ui/Field'; +import Button from '@/components/ui/Button'; +import { DEFAULT_CARD_IMAGE_URL } from '@/constants/todo'; const DEFAULT_POST_IMAGE = { imageUrl: DEFAULT_CARD_IMAGE_URL } as const; interface CreateCardProps { dashboardId: number; columnId: number; + ref: Ref; } -const CreateCard = forwardRef(({ dashboardId, columnId }, ref) => { +export default function CreateCard({ dashboardId, columnId, ref }: CreateCardProps) { const { handleSubmit, register, @@ -121,8 +122,4 @@ const CreateCard = forwardRef(({ dashboardId, colu ); -}); - -CreateCard.displayName = 'CreateCard'; - -export default CreateCard; +} diff --git a/src/components/dashboard/CreateDashboard.tsx b/src/components/dashboard/CreateDashboard.tsx index 1c9b7b7..762281f 100644 --- a/src/components/dashboard/CreateDashboard.tsx +++ b/src/components/dashboard/CreateDashboard.tsx @@ -1,18 +1,22 @@ -import { forwardRef } from 'react'; +import { Ref } from 'react'; import { useRouter } from 'next/navigation'; import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import useAlert from '@/hooks/useAlert'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal'; -import Button from '@/components/ui/Button/Button'; -import { Input } from '@/components/ui/Field'; -import ColorPicker from '@/components/ui/Chip/ColorPicker'; import { useCreateDashboard } from '@/apis/dashboards/queries'; import { dashboardFormSchema, DashboardFormType } from '@/apis/dashboards/types'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import Button from '@/components/ui/Button'; +import { Input } from '@/components/ui/Field'; +import ColorPicker from '@/components/ui/Chip/ColorPicker'; import { DEFAULT_COLORS } from '@/constants/colors'; -import { getErrorMessage } from '@/utils/errorMessage'; -const CreateDashboard = forwardRef((props, ref) => { +interface CreateDashboardProps { + ref: Ref; +} + +export default function CreateDashboard({ ref }: CreateDashboardProps) { const { handleSubmit, register, @@ -81,8 +85,4 @@ const CreateDashboard = forwardRef((props, ref) => { ); -}); - -CreateDashboard.displayName = 'CreateDashboard'; - -export default CreateDashboard; +} diff --git a/src/components/dashboard/DetailDelete.tsx b/src/components/dashboard/DetailDelete.tsx index b659a32..e79b6d0 100644 --- a/src/components/dashboard/DetailDelete.tsx +++ b/src/components/dashboard/DetailDelete.tsx @@ -1,11 +1,11 @@ 'use client'; import { useParams, useRouter } from 'next/navigation'; -import { useRemoveDashboard } from '@/apis/dashboards/queries'; -import Button from '@/components/ui/Button/Button'; import useAlert from '@/hooks/useAlert'; -import { getErrorMessage } from '@/utils/errorMessage'; import useConfirm from '@/hooks/useConfirm'; +import { useRemoveDashboard } from '@/apis/dashboards/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import Button from '@/components/ui/Button'; export default function DetailDelete() { const { id } = useParams<{ id: string }>(); diff --git a/src/components/dashboard/DetailInvited.tsx b/src/components/dashboard/DetailInvited.tsx index 6234f8d..e55b58e 100644 --- a/src/components/dashboard/DetailInvited.tsx +++ b/src/components/dashboard/DetailInvited.tsx @@ -1,18 +1,18 @@ 'use client'; import { useRef, useState } from 'react'; -import Button from '@/components/ui/Button/Button'; -import { Card, CardTitle } from '@/components/ui/Card/Card'; -import { ModalHandle } from '@/components/ui/Modal/Modal'; -import InviteDashboard from './InviteDashboard'; import { useParams } from 'next/navigation'; -import { useCancelInviteDashboard, useDashboardInvitationsQuery } from '@/apis/dashboards/queries'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { isAxiosError } from 'axios'; +import Button from '@/components/ui/Button'; import useAlert from '@/hooks/useAlert'; import useConfirm from '@/hooks/useConfirm'; -import { Table, TableBody, TableCell, TableCol, TableColGroup, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table/Table'; +import { useCancelInviteDashboard, useDashboardInvitationsQuery } from '@/apis/dashboards/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Card, CardTitle } from '@/components/ui/Card'; +import { ModalHandle } from '@/components/ui/Modal'; +import InviteDashboard from '@/components/dashboard/InviteDashboard'; +import { Table, TableBody, TableCell, TableCol, TableColGroup, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table'; import PaginationWithCounter from '@/components/pagination/PaginationWithCounter'; -import { isAxiosError } from 'axios'; const PAGE_SIZE = 5; diff --git a/src/components/dashboard/DetailMembers.tsx b/src/components/dashboard/DetailMembers.tsx index b9df188..2dec53a 100644 --- a/src/components/dashboard/DetailMembers.tsx +++ b/src/components/dashboard/DetailMembers.tsx @@ -1,17 +1,17 @@ 'use client'; -import { isAxiosError } from 'axios'; import { useState } from 'react'; import { useParams } from 'next/navigation'; +import { isAxiosError } from 'axios'; import useAlert from '@/hooks/useAlert'; import useConfirm from '@/hooks/useConfirm'; import { useMembersQuery, useRemoveMember } from '@/apis/members/queries'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { getErrorMessage } from '@/utils/network/errorMessage'; import PaginationWithCounter from '@/components/pagination/PaginationWithCounter'; -import { Table, TableBody, TableCell, TableCol, TableColGroup, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table/Table'; -import { Card, CardTitle } from '@/components/ui/Card/Card'; -import Button from '@/components/ui/Button/Button'; -import Avatar from '@/components/ui/Avatar/Avatar'; +import { Table, TableBody, TableCell, TableCol, TableColGroup, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table'; +import { Card, CardTitle } from '@/components/ui/Card'; +import Button from '@/components/ui/Button'; +import Avatar from '@/components/ui/Avatar'; const PAGE_SIZE = 5; diff --git a/src/components/dashboard/DetailModify.tsx b/src/components/dashboard/DetailModify.tsx index a2445ca..5ac4c80 100644 --- a/src/components/dashboard/DetailModify.tsx +++ b/src/components/dashboard/DetailModify.tsx @@ -1,16 +1,16 @@ 'use client'; +import { useRouter } from 'next/navigation'; import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; +import useAlert from '@/hooks/useAlert'; import { useUpdateDashboard } from '@/apis/dashboards/queries'; -import { Card, CardTitle } from '@/components/ui/Card/Card'; +import { Dashboard, dashboardFormSchema, DashboardFormType } from '@/apis/dashboards/types'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Card, CardTitle } from '@/components/ui/Card'; import { Input } from '@/components/ui/Field'; import ColorPicker from '@/components/ui/Chip/ColorPicker'; -import { Dashboard, dashboardFormSchema, DashboardFormType } from '@/apis/dashboards/types'; -import { getErrorMessage } from '@/utils/errorMessage'; -import Button from '@/components/ui/Button/Button'; -import useAlert from '@/hooks/useAlert'; -import { useRouter } from 'next/navigation'; +import Button from '@/components/ui/Button'; export default function DetailModify({ data }: { data: Dashboard }) { const { diff --git a/src/components/dashboard/InviteDashboard.tsx b/src/components/dashboard/InviteDashboard.tsx index 77190bf..e340d90 100644 --- a/src/components/dashboard/InviteDashboard.tsx +++ b/src/components/dashboard/InviteDashboard.tsx @@ -1,16 +1,20 @@ -import { forwardRef } from 'react'; +import { Ref } from 'react'; import { useParams } from 'next/navigation'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import useAlert from '@/hooks/useAlert'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal'; -import { Input } from '@/components/ui/Field'; -import Button from '@/components/ui/Button/Button'; import { inviteDashboardFormSchema, InviteDashboardFormType } from '@/apis/dashboards/types'; import { useInviteDashboard } from '@/apis/dashboards/queries'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import { Input } from '@/components/ui/Field'; +import Button from '@/components/ui/Button'; + +interface InviteDashboardProps { + ref: Ref; +} -const InviteDashboard = forwardRef((props, ref) => { +export default function InviteDashboard({ ref }: InviteDashboardProps) { const { handleSubmit, register, @@ -73,8 +77,4 @@ const InviteDashboard = forwardRef((props, ref) => { ); -}); - -InviteDashboard.displayName = 'InviteDashboard'; - -export default InviteDashboard; +} diff --git a/src/components/dashboard/MyDashboard.tsx b/src/components/dashboard/MyDashboard.tsx index 7dafd41..4f24269 100644 --- a/src/components/dashboard/MyDashboard.tsx +++ b/src/components/dashboard/MyDashboard.tsx @@ -1,9 +1,9 @@ 'use client'; import { useRef } from 'react'; -import { ModalHandle } from '@/components/ui/Modal/Modal'; -import CreateDashboard from './CreateDashboard'; -import MyDashboardList from './MyDashboardList'; +import { ModalHandle } from '@/components/ui/Modal'; +import CreateDashboard from '@/components/dashboard/CreateDashboard'; +import MyDashboardList from '@/components/dashboard/MyDashboardList'; export default function MyDashboard() { const addDashboardModalRef = useRef(null); diff --git a/src/components/dashboard/MyDashboardCard.tsx b/src/components/dashboard/MyDashboardCard.tsx index 54bc9b2..e3dbeb0 100644 --- a/src/components/dashboard/MyDashboardCard.tsx +++ b/src/components/dashboard/MyDashboardCard.tsx @@ -1,9 +1,9 @@ -import { cn } from '@/utils/helper'; -import Dot from '@/components/ui/Dot/Dot'; import Image from 'next/image'; +import { cn } from '@/utils/helper'; +import Dot from '@/components/ui/Dot'; +import { DEFAULT_COLOR } from '@/constants/colors'; import crown from '@/assets/icons/crown.svg'; import right_arrow from '@/assets/icons/right_arrow.svg'; -import { DEFAULT_COLOR } from '@/constants/colors'; interface MyDashboardCardProps { title: string; diff --git a/src/components/dashboard/MyDashboardList.tsx b/src/components/dashboard/MyDashboardList.tsx index 4865755..a3632e3 100644 --- a/src/components/dashboard/MyDashboardList.tsx +++ b/src/components/dashboard/MyDashboardList.tsx @@ -2,10 +2,10 @@ import { useState } from 'react'; import Link from 'next/link'; -import MyDashboardCard from '@/components/dashboard/MyDashboardCard'; import { useDashboardsQuery } from '@/apis/dashboards/queries'; -import DashboardButton from '../ui/Button/DashboardButton'; -import PaginationWithCounter from '../pagination/PaginationWithCounter'; +import MyDashboardCard from '@/components/dashboard/MyDashboardCard'; +import DashboardButton from '@/components/ui/Button/DashboardButton'; +import PaginationWithCounter from '@/components/pagination/PaginationWithCounter'; interface MyDashboardListProps { onAdd: () => void; diff --git a/src/components/dashboard/MyInvitedDashboardList.tsx b/src/components/dashboard/MyInvitedDashboardList.tsx index b7dce0c..6f853be 100644 --- a/src/components/dashboard/MyInvitedDashboardList.tsx +++ b/src/components/dashboard/MyInvitedDashboardList.tsx @@ -1,17 +1,17 @@ 'use client'; -import Button from '../ui/Button/Button'; import { useEffect, useState } from 'react'; -import { useRespondToInvitaion, useMyInvitationsQuery } from '@/apis/invitations/queries'; import { useInView } from 'react-intersection-observer'; +import Button from '@/components/ui/Button'; import useDebounce from '@/hooks/useDebounce'; -import { Card, CardTitle } from '@/components/ui/Card/Card'; -import MyInvitedEmptyCard from './MyInvitedEmptyCard'; -import { SearchInput } from '../ui/Field'; import useAlert from '@/hooks/useAlert'; -import { getErrorMessage } from '@/utils/errorMessage'; -import { Table, TableBody, TableCell, TableCol, TableColGroup, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table/Table'; +import { useRespondToInvitaion, useMyInvitationsQuery } from '@/apis/invitations/queries'; import { RespondToInvitationRequest } from '@/apis/invitations/types'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Card, CardTitle } from '@/components/ui/Card'; +import MyInvitedEmptyCard from '@/components/dashboard/MyInvitedEmptyCard'; +import { SearchInput } from '@/components/ui/Field'; +import { Table, TableBody, TableCell, TableCol, TableColGroup, TableHead, TableHeadCell, TableRow } from '@/components/ui/Table'; const PAGE_SIZE = 10; diff --git a/src/components/dashboard-header/DashboardInfo.tsx b/src/components/dashboard/header/DashboardInfo.tsx similarity index 95% rename from src/components/dashboard-header/DashboardInfo.tsx rename to src/components/dashboard/header/DashboardInfo.tsx index 160d606..0c898ec 100644 --- a/src/components/dashboard-header/DashboardInfo.tsx +++ b/src/components/dashboard/header/DashboardInfo.tsx @@ -7,9 +7,9 @@ import useMediaQuery from '@/hooks/useMediaQuery'; import { useDashboardQuery } from '@/apis/dashboards/queries'; import { useMembersQuery } from '@/apis/members/queries'; import StackAvatars from '@/components/ui/Avatar/StackAvatars'; -import { ModalHandle } from '@/components/ui/Modal/Modal'; +import { ModalHandle } from '@/components/ui/Modal'; import InviteDashboard from '@/components/dashboard/InviteDashboard'; -import HeaderButton from '@/components/dashboard-header/HeaderButton'; +import HeaderButton from '@/components/dashboard/header/HeaderButton'; import Setting from '@/assets/icons/setting.svg'; import AddBox from '@/assets/icons/add_box.svg'; import crown from '@/assets/icons/crown.svg'; diff --git a/src/components/dashboard-header/Header.tsx b/src/components/dashboard/header/Header.tsx similarity index 86% rename from src/components/dashboard-header/Header.tsx rename to src/components/dashboard/header/Header.tsx index ea55e92..348c14e 100644 --- a/src/components/dashboard-header/Header.tsx +++ b/src/components/dashboard/header/Header.tsx @@ -1,8 +1,8 @@ 'use client'; import { useParams, useSelectedLayoutSegment } from 'next/navigation'; -import Profile from '@/components/dashboard-header/Profile'; -import DashboardInfo from '@/components/dashboard-header/DashboardInfo'; +import Profile from '@/components/dashboard/header/Profile'; +import DashboardInfo from '@/components/dashboard/header/DashboardInfo'; import { PAGE_TITLE } from '@/constants/dashboard'; export default function Header() { diff --git a/src/components/dashboard-header/HeaderButton.tsx b/src/components/dashboard/header/HeaderButton.tsx similarity index 100% rename from src/components/dashboard-header/HeaderButton.tsx rename to src/components/dashboard/header/HeaderButton.tsx diff --git a/src/components/dashboard-header/Profile.tsx b/src/components/dashboard/header/Profile.tsx similarity index 98% rename from src/components/dashboard-header/Profile.tsx rename to src/components/dashboard/header/Profile.tsx index ab11162..c26aad4 100644 --- a/src/components/dashboard-header/Profile.tsx +++ b/src/components/dashboard/header/Profile.tsx @@ -3,10 +3,10 @@ import { useEffect, useRef, useState } from 'react'; import Link from 'next/link'; import { motion } from 'motion/react'; -import { useGetUser } from '@/apis/users/queries'; -import Avatar from '@/components/ui/Avatar/Avatar'; import useAlert from '@/hooks/useAlert'; +import { useGetUser } from '@/apis/users/queries'; import { useLogout } from '@/apis/auth/queries'; +import Avatar from '@/components/ui/Avatar'; export default function Profile() { const [isMenuOpen, setIsMenuOpen] = useState(false); diff --git a/src/components/dashboard/Sidebar.tsx b/src/components/dashboard/sidebar/Sidebar.tsx similarity index 84% rename from src/components/dashboard/Sidebar.tsx rename to src/components/dashboard/sidebar/Sidebar.tsx index 6dfa6e7..29c22d0 100644 --- a/src/components/dashboard/Sidebar.tsx +++ b/src/components/dashboard/sidebar/Sidebar.tsx @@ -1,11 +1,11 @@ 'use client'; import { useEffect, useRef, useState } from 'react'; -import { cn } from '@/utils/helper'; -import SidebarDashboardList from '@/components/dashboard/SidebarDashboardList'; -import SidebarLogo from '@/components/dashboard/SidebarLogo'; -import SidebarHeader from '@/components/dashboard/SidebarHeader'; import { usePathname } from 'next/navigation'; +import { cn } from '@/utils/helper'; +import SidebarDashboardList from '@/components/dashboard/sidebar/SidebarDashboardList'; +import SidebarLogo from '@/components/dashboard/sidebar/SidebarLogo'; +import SidebarHeader from '@/components/dashboard/sidebar/SidebarHeader'; export default function Sidebar() { const pathname = usePathname(); diff --git a/src/components/dashboard/SidebarDashboardList.tsx b/src/components/dashboard/sidebar/SidebarDashboardList.tsx similarity index 98% rename from src/components/dashboard/SidebarDashboardList.tsx rename to src/components/dashboard/sidebar/SidebarDashboardList.tsx index f8629d0..64fb218 100644 --- a/src/components/dashboard/SidebarDashboardList.tsx +++ b/src/components/dashboard/sidebar/SidebarDashboardList.tsx @@ -2,14 +2,14 @@ import { useState } from 'react'; import Link from 'next/link'; +import { useParams } from 'next/navigation'; import Image from 'next/image'; import { cn } from '@/utils/helper'; import { useDashboardsQuery } from '@/apis/dashboards/queries'; import PaginationControls from '@/components/pagination/PaginationControls'; -import Dot from '@/components/ui/Dot/Dot'; +import Dot from '@/components/ui/Dot'; import crown from '@/assets/icons/crown.svg'; import menu from '@/assets/icons/hamburger.svg'; -import { useParams } from 'next/navigation'; const ITEMS_PER_PAGE = 15; diff --git a/src/components/dashboard/SidebarHeader.tsx b/src/components/dashboard/sidebar/SidebarHeader.tsx similarity index 93% rename from src/components/dashboard/SidebarHeader.tsx rename to src/components/dashboard/sidebar/SidebarHeader.tsx index 9b102cc..a5c5498 100644 --- a/src/components/dashboard/SidebarHeader.tsx +++ b/src/components/dashboard/sidebar/SidebarHeader.tsx @@ -4,7 +4,7 @@ import { useRef } from 'react'; import Image from 'next/image'; import { cn } from '@/utils/helper'; import CreateDashboard from '@/components/dashboard/CreateDashboard'; -import { ModalHandle } from '@/components/ui/Modal/Modal'; +import { ModalHandle } from '@/components/ui/Modal'; import add_box from '@/assets/icons/add_box.svg'; export default function SidebarHeader({ open }: { open: boolean }) { diff --git a/src/components/dashboard/SidebarLogo.tsx b/src/components/dashboard/sidebar/SidebarLogo.tsx similarity index 100% rename from src/components/dashboard/SidebarLogo.tsx rename to src/components/dashboard/sidebar/SidebarLogo.tsx diff --git a/src/components/landing/Accordion.tsx b/src/components/landing/Accordion.tsx index 1d1e720..ef40685 100644 --- a/src/components/landing/Accordion.tsx +++ b/src/components/landing/Accordion.tsx @@ -1,4 +1,5 @@ 'use client'; + import { createContext, PropsWithChildren, useContext, useState } from 'react'; interface AccordionContextType { diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx index 048bfbe..3de67da 100644 --- a/src/components/landing/Hero.tsx +++ b/src/components/landing/Hero.tsx @@ -1,10 +1,10 @@ -import dynamic from 'next/dynamic'; import { useState } from 'react'; +import Link from 'next/link'; +import dynamic from 'next/dynamic'; import Image from 'next/image'; import { easeInOut, motion } from 'motion/react'; import LottieData from '@/assets/landings/hero.json'; import LogoFull from '@/assets/images/logo_full_white.svg'; -import Link from 'next/link'; const Lottie = dynamic(() => import('lottie-react'), { ssr: false }); diff --git a/src/components/landing/layout/Footer.tsx b/src/components/landing/layout/Footer.tsx index 9e707a6..ec27b64 100644 --- a/src/components/landing/layout/Footer.tsx +++ b/src/components/landing/layout/Footer.tsx @@ -1,7 +1,7 @@ import Image from 'next/image'; import Link from 'next/link'; -import { RootInner } from './Inner'; -import { BaseLinkItem, IconLinkItem } from './type'; +import { RootInner } from '@/components/landing/layout/Inner'; +import { BaseLinkItem, IconLinkItem } from '@/components/landing/layout/type'; export default function Footer({ menus, sns }: { menus: BaseLinkItem[]; sns: IconLinkItem[] }) { return ( diff --git a/src/components/landing/layout/Header.tsx b/src/components/landing/layout/Header.tsx index 226c5ba..8e6b5d3 100644 --- a/src/components/landing/layout/Header.tsx +++ b/src/components/landing/layout/Header.tsx @@ -1,7 +1,7 @@ import Link from 'next/link'; import Image from 'next/image'; -import { RootInner } from './Inner'; -import { BaseLinkItem } from './type'; +import { RootInner } from '@/components/landing/layout/Inner'; +import { BaseLinkItem } from '@/components/landing/layout/type'; import LogoBI from '@/assets/images/logo_bi_white.svg'; import LogoCI from '@/assets/images/logo_ci_white.svg'; diff --git a/src/components/landing/layout/Main.tsx b/src/components/landing/layout/Main.tsx index 4457c57..327968a 100644 --- a/src/components/landing/layout/Main.tsx +++ b/src/components/landing/layout/Main.tsx @@ -1,5 +1,5 @@ import { PropsWithChildren } from 'react'; -import { MainInner } from './Inner'; +import { MainInner } from '@/components/landing/layout/Inner'; export default function Main({ children }: PropsWithChildren) { return ( diff --git a/src/components/layout/Page.tsx b/src/components/layout/Page.tsx index c8fdb41..de070c9 100644 --- a/src/components/layout/Page.tsx +++ b/src/components/layout/Page.tsx @@ -1,5 +1,5 @@ -import { cn } from '@/utils/helper'; import { HTMLAttributes, PropsWithChildren } from 'react'; +import { cn } from '@/utils/helper'; type PageProps = PropsWithChildren>; diff --git a/src/components/pagination/Arrow.tsx b/src/components/pagination/Arrow.tsx index bb54315..a0d4b38 100644 --- a/src/components/pagination/Arrow.tsx +++ b/src/components/pagination/Arrow.tsx @@ -1,6 +1,9 @@ -import { ARROW_PATH_LEFT, ARROW_PATH_RIGHT } from '@/constants/paths'; import { cn } from '@/utils/helper'; +export const ARROW_PATH_LEFT = `M2.641 7.99933L8.91824 1.72208C9.08384 1.55648 9.16451 1.35937 9.16024 1.13074C9.15596 0.902106 9.07103 0.704996 8.90543 0.539412C8.73983 0.373815 8.54272 0.291016 8.31409 0.291016C8.08547 0.291016 7.88836 0.373815 7.72276 0.539412L1.34295 6.93204C1.19231 7.08268 1.08066 7.25147 1.00801 7.43843C0.93537 7.62541 0.899048 7.81237 0.899048 7.99933C0.899048 8.18629 0.93537 8.37325 1.00801 8.56022C1.08066 8.74718 1.19231 8.91598 1.34295 9.06662L7.73557 15.4592C7.90117 15.6248 8.09615 15.7055 8.32051 15.7012C8.54486 15.697 8.73983 15.612 8.90543 15.4464C9.07103 15.2808 9.15383 15.0837 9.15383 14.8551C9.15383 14.6265 9.07103 14.4294 8.90543 14.2638L2.641 7.99933Z`; + +export const ARROW_PATH_RIGHT = `M7.35901 7.99933L1.08176 1.72208C0.916163 1.55648 0.835496 1.35937 0.83976 1.13074C0.844038 0.902106 0.928975 0.704996 1.09457 0.539412C1.26017 0.373815 1.45728 0.291016 1.68591 0.291016C1.91453 0.291016 2.11164 0.373815 2.27724 0.539412L8.65705 6.93204C8.80769 7.08268 8.91934 7.25147 8.99199 7.43843C9.06463 7.62541 9.10095 7.81237 9.10095 7.99933C9.10095 8.18629 9.06463 8.37325 8.99199 8.56022C8.91934 8.74718 8.80769 8.91598 8.65705 9.06662L2.26443 15.4592C2.09883 15.6248 1.90385 15.7055 1.67949 15.7012C1.45514 15.697 1.26017 15.612 1.09457 15.4464C0.928975 15.2808 0.846176 15.0837 0.846176 14.8551C0.846176 14.6265 0.928975 14.4294 1.09457 14.2638L7.35901 7.99933Z`; + /* * direction: 'left' | 'right' * disabled일 경우 색상/커서 상태 변경 diff --git a/src/components/pagination/PaginationControls.tsx b/src/components/pagination/PaginationControls.tsx index bd7fdc7..d20b9b1 100644 --- a/src/components/pagination/PaginationControls.tsx +++ b/src/components/pagination/PaginationControls.tsx @@ -1,4 +1,4 @@ -import Arrow from './Arrow'; +import Arrow from '@/components/pagination/Arrow'; /* * "PaginationControls" 컴포넌트 사용 가이드 diff --git a/src/components/pagination/PaginationWithCounter.tsx b/src/components/pagination/PaginationWithCounter.tsx index 2cf7314..9dac85d 100644 --- a/src/components/pagination/PaginationWithCounter.tsx +++ b/src/components/pagination/PaginationWithCounter.tsx @@ -1,5 +1,5 @@ import { Dispatch, SetStateAction } from 'react'; -import PaginationControls from './PaginationControls'; +import PaginationControls from '@/components/pagination/PaginationControls'; interface PaginationWithCounterProps { totalCount: number; diff --git a/src/components/profile/PasswordEdit.tsx b/src/components/profile/PasswordEdit.tsx index 0cc05f0..2696b83 100644 --- a/src/components/profile/PasswordEdit.tsx +++ b/src/components/profile/PasswordEdit.tsx @@ -2,13 +2,13 @@ import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; -import { Input } from '@/components/ui/Field/Input'; -import { passwordSchema, PutPasswordFormData } from '@/apis/auth/types'; import useAlert from '@/hooks/useAlert'; -import { Card, CardTitle } from '@/components//ui/Card/Card'; -import Button from '@/components/ui/Button/Button'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { passwordSchema, PutPasswordFormData } from '@/apis/auth/types'; import { usePutPassword } from '@/apis/auth/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Input } from '@/components/ui/Field/Input'; +import { Card, CardTitle } from '@/components/ui/Card'; +import Button from '@/components/ui/Button'; export default function PasswordEdit() { const { diff --git a/src/components/profile/ProfileEdit.tsx b/src/components/profile/ProfileEdit.tsx index 0d57dbd..be4ac5d 100644 --- a/src/components/profile/ProfileEdit.tsx +++ b/src/components/profile/ProfileEdit.tsx @@ -6,11 +6,11 @@ import { zodResolver } from '@hookform/resolvers/zod'; import useAlert from '@/hooks/useAlert'; import { UpdateUserForm, updateUserFormSchema, User } from '@/apis/users/types'; import { useCreateProfileImage, useUpdateUser } from '@/apis/users/queries'; +import { getErrorMessage } from '@/utils/network/errorMessage'; import { Input } from '@/components/ui/Field/Input'; import { ImageUpload } from '@/components/ui/Field/ImageUpload'; -import Button from '@/components/ui/Button/Button'; -import { Card, CardTitle } from '@/components//ui/Card/Card'; -import { getErrorMessage } from '@/utils/errorMessage'; +import Button from '@/components/ui/Button'; +import { Card, CardTitle } from '@/components/ui/Card'; type ProfileEditProps = { user: User; diff --git a/src/components/provider/QueryProvider.tsx b/src/components/provider/QueryProvider.tsx index 6553cc9..de1173b 100644 --- a/src/components/provider/QueryProvider.tsx +++ b/src/components/provider/QueryProvider.tsx @@ -1,7 +1,7 @@ 'use client'; -import { QueryClientProvider as Provider, QueryClient } from '@tanstack/react-query'; import { PropsWithChildren } from 'react'; +import { QueryClientProvider as Provider, QueryClient } from '@tanstack/react-query'; const queryClient = new QueryClient({ defaultOptions: { diff --git a/src/components/dashboard/CommentSection.tsx b/src/components/todo/CommentSection.tsx similarity index 94% rename from src/components/dashboard/CommentSection.tsx rename to src/components/todo/CommentSection.tsx index a1c0453..0505f8c 100644 --- a/src/components/dashboard/CommentSection.tsx +++ b/src/components/todo/CommentSection.tsx @@ -1,18 +1,18 @@ 'use client'; -import useAlert from '@/hooks/useAlert'; -import { formatDate } from '@/utils/formatDate'; import { useEffect, useRef, useState } from 'react'; -import Avatar from '../ui/Avatar/Avatar'; -import Button from '../ui/Button/Button'; -import { Textarea } from '../ui/Field'; +import { useInView } from 'react-intersection-observer'; +import useAlert from '@/hooks/useAlert'; import useConfirm from '@/hooks/useConfirm'; import { useCommentsQuery, useDeleteComment, usePostComment, useUpdateComment } from '@/apis/comments/queries'; import { CommentForm } from '@/apis/comments/types'; -import { getErrorMessage } from '@/utils/errorMessage'; -import { useInView } from 'react-intersection-observer'; -import { ModalHandle } from '../ui/Modal/Modal'; -import EditCommentModal from './EditCommentModal'; +import { formatDate } from '@/utils/formatDate'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import Avatar from '@/components/ui/Avatar'; +import Button from '@/components/ui/Button'; +import { Textarea } from '@/components/ui/Field'; +import { ModalHandle } from '@/components/ui/Modal'; +import EditCommentModal from '@/components/todo/EditCommentModal'; interface CommentSectionProps { cardId: number; diff --git a/src/components/dashboard/DetailTodo.tsx b/src/components/todo/DetailTodo.tsx similarity index 89% rename from src/components/dashboard/DetailTodo.tsx rename to src/components/todo/DetailTodo.tsx index c463656..ced8a3d 100644 --- a/src/components/dashboard/DetailTodo.tsx +++ b/src/components/todo/DetailTodo.tsx @@ -1,29 +1,30 @@ 'use client'; -import { forwardRef } from 'react'; +import { Ref } from 'react'; import Image from 'next/image'; import useAlert from '@/hooks/useAlert'; +import useConfirm from '@/hooks/useConfirm'; import { Card } from '@/apis/cards/types'; import { useColumnsQuery } from '@/apis/columns/queries'; import { useRemoveCard } from '@/apis/cards/queries'; -import useConfirm from '@/hooks/useConfirm'; -import CommentSection from '@/components/dashboard/CommentSection'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal'; -import Avatar from '@/components/ui/Avatar/Avatar'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { formatDate } from '@/utils/formatDate'; +import CommentSection from '@/components/todo/CommentSection'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import Avatar from '@/components/ui/Avatar'; import TagChip from '@/components/ui/Chip/TagChip'; import RoundChip from '@/components/ui/Chip/RoundChip'; -import { getErrorMessage } from '@/utils/errorMessage'; -import { formatDate } from '@/utils/formatDate'; -import Dropdown from '@/components/ui/Dropdown/Dropdown'; -import { DEFAULT_CARD_IMAGE_URL } from '@/constants/paths'; +import Dropdown from '@/components/ui/Dropdown'; +import { DEFAULT_CARD_IMAGE_URL } from '@/constants/todo'; import x_img from '@/assets/icons/x.svg'; interface DetailTodoProps { card: Card; onEdit: () => void; + ref: Ref; } -const DetailTodo = forwardRef(({ card, onEdit }, ref) => { +export default function DetailTodo({ card, onEdit, ref }: DetailTodoProps) { const { data: columnsData } = useColumnsQuery(card.dashboardId); const { mutateAsync: remove } = useRemoveCard(); const columns = columnsData?.data ?? []; @@ -133,7 +134,4 @@ const DetailTodo = forwardRef(({ card, onEdit }, r ); -}); - -DetailTodo.displayName = 'DetailTodoModal'; -export default DetailTodo; +} diff --git a/src/components/dashboard/EditCommentModal.tsx b/src/components/todo/EditCommentModal.tsx similarity index 78% rename from src/components/dashboard/EditCommentModal.tsx rename to src/components/todo/EditCommentModal.tsx index f9132c7..413c492 100644 --- a/src/components/dashboard/EditCommentModal.tsx +++ b/src/components/todo/EditCommentModal.tsx @@ -1,16 +1,17 @@ 'use client'; -import { forwardRef, useEffect, useState } from 'react'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '../ui/Modal/Modal'; -import { Textarea } from '../ui/Field'; -import Button from '../ui/Button/Button'; +import { Ref, useEffect, useState } from 'react'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import { Textarea } from '@/components/ui/Field'; +import Button from '@/components/ui/Button'; interface EditCommentModalProps { initialContent: string; onSave: (content: string) => Promise; + ref: Ref; } -const EditCommentModal = forwardRef(({ initialContent, onSave }, ref) => { +export default function EditCommentModal({ initialContent, onSave, ref }: EditCommentModalProps) { const [content, setContent] = useState(initialContent); const [isSubmitting, setIsSubmitting] = useState(false); @@ -51,7 +52,4 @@ const EditCommentModal = forwardRef(({ initi ); -}); - -EditCommentModal.displayName = 'EditCommentModal'; -export default EditCommentModal; +} diff --git a/src/components/dashboard/TodoCard.tsx b/src/components/todo/TodoCard.tsx similarity index 86% rename from src/components/dashboard/TodoCard.tsx rename to src/components/todo/TodoCard.tsx index 69b0bd6..b1b1320 100644 --- a/src/components/dashboard/TodoCard.tsx +++ b/src/components/todo/TodoCard.tsx @@ -1,16 +1,16 @@ 'use client'; +import { useRef } from 'react'; import Image from 'next/image'; -import { formatDate } from '@/utils/formatDate'; import { Card } from '@/apis/cards/types'; -import Avatar from '../ui/Avatar/Avatar'; -import TagChip from '../ui/Chip/TagChip'; +import { formatDate } from '@/utils/formatDate'; +import Avatar from '@/components/ui/Avatar'; +import TagChip from '@/components/ui/Chip/TagChip'; +import { ModalHandle } from '@/components/ui/Modal'; +import DetailTodo from '@/components/todo/DetailTodo'; +import TodoEditModal from '@/components/todo/TodoEditModal'; +import { DEFAULT_CARD_IMAGE_URL } from '@/constants/todo'; import calendar from '@/assets/icons/calendar.svg'; -import { useRef } from 'react'; -import { ModalHandle } from '../ui/Modal/Modal'; -import DetailTodo from '@/components/dashboard/DetailTodo'; -import TodoEditModal from './TodoEditModal'; -import { DEFAULT_CARD_IMAGE_URL } from '@/constants/paths'; interface TodoCardProps { card: Card; diff --git a/src/components/dashboard/TodoEditModal.tsx b/src/components/todo/TodoEditModal.tsx similarity index 91% rename from src/components/dashboard/TodoEditModal.tsx rename to src/components/todo/TodoEditModal.tsx index 859cfdd..f7c9fba 100644 --- a/src/components/dashboard/TodoEditModal.tsx +++ b/src/components/todo/TodoEditModal.tsx @@ -1,24 +1,25 @@ -import { forwardRef } from 'react'; -import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '../ui/Modal/Modal'; -import { Card, CardForm, cardFormSchema } from '@/apis/cards/types'; -import { AssignInput, DateInput, ImageUpload, Input, TagInput } from '../ui/Field'; -import { useColumnsQuery } from '@/apis/columns/queries'; -import StatusDropdown from '../ui/Dropdown/StatusDropdown'; -import { Textarea } from '../ui/Field'; -import Button from '../ui/Button/Button'; -import useAlert from '@/hooks/useAlert'; +import { Ref } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; +import useAlert from '@/hooks/useAlert'; +import { Card, CardForm, cardFormSchema } from '@/apis/cards/types'; +import { useColumnsQuery } from '@/apis/columns/queries'; import { useUpdateCard } from '@/apis/cards/queries'; import { postCardImage } from '@/apis/columns'; import convertDateFormat from '@/utils/convertDateFormat'; -import { getErrorMessage } from '@/utils/errorMessage'; +import { getErrorMessage } from '@/utils/network/errorMessage'; +import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal'; +import { AssignInput, DateInput, ImageUpload, Input, TagInput } from '@/components/ui/Field'; +import StatusDropdown from '@/components/ui/Dropdown/StatusDropdown'; +import { Textarea } from '@/components/ui/Field'; +import Button from '@/components/ui/Button'; interface TodoEditModalProps { card: Card; + ref: Ref; } -const TodoEditModal = forwardRef(({ card }, ref) => { +export default function TodoEditModal({ card, ref }: TodoEditModalProps) { const alert = useAlert(); const { data: columnData } = useColumnsQuery(card.dashboardId); const columns = columnData?.data ?? []; @@ -130,7 +131,4 @@ const TodoEditModal = forwardRef(({ card }, ref ); -}); - -TodoEditModal.displayName = 'TodoEditModal'; -export default TodoEditModal; +} diff --git a/src/components/ui/Avatar/StackAvatars.tsx b/src/components/ui/Avatar/StackAvatars.tsx index 8696038..8df3513 100644 --- a/src/components/ui/Avatar/StackAvatars.tsx +++ b/src/components/ui/Avatar/StackAvatars.tsx @@ -1,5 +1,5 @@ import { Member } from '@/apis/members/types'; -import Avatar from './Avatar'; +import Avatar from '@/components/ui/Avatar'; interface StackAvatarsProps { members: Pick[]; diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/index.tsx similarity index 100% rename from src/components/ui/Avatar/Avatar.tsx rename to src/components/ui/Avatar/index.tsx index ce39202..27375a4 100644 --- a/src/components/ui/Avatar/Avatar.tsx +++ b/src/components/ui/Avatar/index.tsx @@ -3,9 +3,9 @@ import { HTMLAttributes, useState } from 'react'; import Image from 'next/image'; import { cva, VariantProps } from 'class-variance-authority'; +import { User } from '@/apis/users/types'; import { cn, getColorByString } from '@/utils/helper'; import { DEFAULT_COLORS } from '@/constants/colors'; -import { User } from '@/apis/users/types'; /** * 커스터마이징 가능한 기본 공용 Avatar 컴포넌트입니다. diff --git a/src/components/ui/Button/DashboardButton.tsx b/src/components/ui/Button/DashboardButton.tsx index 719ea6f..e75dff5 100644 --- a/src/components/ui/Button/DashboardButton.tsx +++ b/src/components/ui/Button/DashboardButton.tsx @@ -18,10 +18,10 @@ */ 'use client'; +import type { ReactNode, ButtonHTMLAttributes } from 'react'; import Image from 'next/image'; import { cva } from 'class-variance-authority'; import { twMerge } from 'tailwind-merge'; -import type { ReactNode, ButtonHTMLAttributes } from 'react'; import plusIcon from '@/assets/icons/plus.svg'; const dashboardButtonStyles = cva('', { diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/index.tsx similarity index 100% rename from src/components/ui/Button/Button.tsx rename to src/components/ui/Button/index.tsx diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/index.tsx similarity index 100% rename from src/components/ui/Card/Card.tsx rename to src/components/ui/Card/index.tsx diff --git a/src/components/ui/Chip/ColorChip.tsx b/src/components/ui/Chip/ColorChip.tsx index 77c863f..5dbf1d3 100644 --- a/src/components/ui/Chip/ColorChip.tsx +++ b/src/components/ui/Chip/ColorChip.tsx @@ -1,6 +1,6 @@ -import { DEFAULT_COLOR } from '@/constants/colors'; -import { cn } from '@/utils/helper'; import { HTMLAttributes } from 'react'; +import { cn } from '@/utils/helper'; +import { DEFAULT_COLOR } from '@/constants/colors'; interface ColorChipProps extends HTMLAttributes { color: DEFAULT_COLOR; diff --git a/src/components/ui/Chip/ColorPicker.tsx b/src/components/ui/Chip/ColorPicker.tsx index 30c8a6d..e7e8c16 100644 --- a/src/components/ui/Chip/ColorPicker.tsx +++ b/src/components/ui/Chip/ColorPicker.tsx @@ -1,8 +1,8 @@ import Image from 'next/image'; +import { cn } from '@/utils/helper'; +import ColorChip from '@/components/ui/Chip/ColorChip'; import { DEFAULT_COLORS } from '@/constants/colors'; import check_icon from '@/assets/icons/check.svg'; -import ColorChip from './ColorChip'; -import { cn } from '@/utils/helper'; /** * input name을 통한 radio group으로 구성된 컬러 피커 입니다. diff --git a/src/components/ui/Chip/NumberChip.tsx b/src/components/ui/Chip/NumberChip.tsx index 8df8dd4..0602745 100644 --- a/src/components/ui/Chip/NumberChip.tsx +++ b/src/components/ui/Chip/NumberChip.tsx @@ -1,5 +1,5 @@ -import { cn } from '@/utils/helper'; import { HTMLAttributes } from 'react'; +import { cn } from '@/utils/helper'; interface NumberChipProps extends HTMLAttributes { label: number; diff --git a/src/components/ui/Chip/RoundChip.tsx b/src/components/ui/Chip/RoundChip.tsx index 5eb718d..0e5c38d 100644 --- a/src/components/ui/Chip/RoundChip.tsx +++ b/src/components/ui/Chip/RoundChip.tsx @@ -1,5 +1,5 @@ -import { cn } from '@/utils/helper'; import { HTMLAttributes } from 'react'; +import { cn } from '@/utils/helper'; interface RoundChipProps extends HTMLAttributes { label: string; diff --git a/src/components/ui/Chip/TagChip.tsx b/src/components/ui/Chip/TagChip.tsx index 083e413..57e44f5 100644 --- a/src/components/ui/Chip/TagChip.tsx +++ b/src/components/ui/Chip/TagChip.tsx @@ -1,6 +1,6 @@ import { HTMLAttributes } from 'react'; -import { DEFAULT_COLORS } from '@/constants/colors'; import { cn, getColorByString } from '@/utils/helper'; +import { DEFAULT_COLORS } from '@/constants/colors'; /** * 하나의 color 값으로 배경색과 폰트색상에 적용합니다. diff --git a/src/components/ui/Dot/Dot.tsx b/src/components/ui/Dot/index.tsx similarity index 100% rename from src/components/ui/Dot/Dot.tsx rename to src/components/ui/Dot/index.tsx diff --git a/src/components/ui/Dropdown/StatusDropdown.tsx b/src/components/ui/Dropdown/StatusDropdown.tsx index e7c6fdc..1907df9 100644 --- a/src/components/ui/Dropdown/StatusDropdown.tsx +++ b/src/components/ui/Dropdown/StatusDropdown.tsx @@ -1,9 +1,9 @@ 'use client'; import { useEffect, useRef, useState } from 'react'; -import { motion } from 'motion/react'; import Image from 'next/image'; -import RoundChip from '../Chip/RoundChip'; +import { motion } from 'motion/react'; +import RoundChip from '@/components/ui/Chip/RoundChip'; import check from '@/assets/icons/check_gray.svg'; interface Column { diff --git a/src/components/ui/Dropdown/Dropdown.tsx b/src/components/ui/Dropdown/index.tsx similarity index 100% rename from src/components/ui/Dropdown/Dropdown.tsx rename to src/components/ui/Dropdown/index.tsx index e2c65f2..dc38e92 100644 --- a/src/components/ui/Dropdown/Dropdown.tsx +++ b/src/components/ui/Dropdown/index.tsx @@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react'; import Image from 'next/image'; +import { cn } from '@/utils/helper'; import KebabIcon from '@/assets/icons/kebab.svg'; import DropdownArrow from '@/assets/icons/drop_down_arrow.svg'; import Check from '@/assets/icons/check_gray.svg'; -import { cn } from '@/utils/helper'; interface DropdownOption { value: string; diff --git a/src/components/ui/Field/AssignInput.tsx b/src/components/ui/Field/AssignInput.tsx index b21826e..0d654b2 100644 --- a/src/components/ui/Field/AssignInput.tsx +++ b/src/components/ui/Field/AssignInput.tsx @@ -1,18 +1,18 @@ 'use client'; import { InputHTMLAttributes, useId, useRef, useState, useEffect } from 'react'; -import { cn } from '@/utils/helper'; -import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from './Base'; -import { BaseField } from './types'; -import { useMembersQuery } from '@/apis/members/queries'; +import Image from 'next/image'; import { useParams } from 'next/navigation'; -import PaginationWithCounter from '@/components/pagination/PaginationWithCounter'; import { AnimatePresence, motion } from 'motion/react'; -import Image from 'next/image'; -import XIcon from '@/assets/icons/x.svg'; -import Avatar from '../Avatar/Avatar'; +import { useMembersQuery } from '@/apis/members/queries'; import { Member } from '@/apis/members/types'; +import { cn } from '@/utils/helper'; +import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from '@/components/ui/Field/Base'; +import { BaseField } from '@/components/ui/Field/types'; +import PaginationWithCounter from '@/components/pagination/PaginationWithCounter'; +import Avatar from '@/components/ui/Avatar'; import { Assignee } from '@/types/common'; +import XIcon from '@/assets/icons/x.svg'; const PAGE_SIZE = 5; diff --git a/src/components/ui/Field/DateInput.tsx b/src/components/ui/Field/DateInput.tsx index 5c1e115..2598c2a 100644 --- a/src/components/ui/Field/DateInput.tsx +++ b/src/components/ui/Field/DateInput.tsx @@ -5,11 +5,11 @@ import DatePicker, { ReactDatePickerCustomHeaderProps, registerLocale } from 're import { ko } from 'date-fns/locale/ko'; import { getMonth, getYear } from 'date-fns'; import { cn } from '@/utils/helper'; -import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from './Base'; -import calendarIcon from '@/assets/icons/calendar.svg'; -import { BaseField } from './types'; +import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from '@/components/ui/Field/Base'; import arrowLeft from '@/assets/icons/circle_arrow_left.svg'; import arrowRight from '@/assets/icons/circle_arrow_right.svg'; +import { BaseField } from '@/components/ui/Field/types'; +import calendarIcon from '@/assets/icons/calendar.svg'; import 'react-datepicker/dist/react-datepicker.css'; import '@/assets/css/datepicker.css'; diff --git a/src/components/ui/Field/ImageUpload.tsx b/src/components/ui/Field/ImageUpload.tsx index 838715f..79467c5 100644 --- a/src/components/ui/Field/ImageUpload.tsx +++ b/src/components/ui/Field/ImageUpload.tsx @@ -1,8 +1,8 @@ import { ChangeEvent, InputHTMLAttributes, useEffect, useId, useRef } from 'react'; import Image from 'next/image'; import { cn } from '@/utils/helper'; -import { BaseError, BaseItem, BaseLabel } from './Base'; -import { BaseField } from './types'; +import { BaseError, BaseItem, BaseLabel } from '@/components/ui/Field/Base'; +import { BaseField } from '@/components/ui/Field/types'; import deleteIcon from '@/assets/icons/x_white.svg'; import addIcon from '@/assets/icons/plus.svg'; diff --git a/src/components/ui/Field/Input.tsx b/src/components/ui/Field/Input.tsx index 1d0bd69..88c2d64 100644 --- a/src/components/ui/Field/Input.tsx +++ b/src/components/ui/Field/Input.tsx @@ -1,11 +1,14 @@ -import { forwardRef, InputHTMLAttributes, useId } from 'react'; +import { InputHTMLAttributes, Ref, useId } from 'react'; import { cn } from '@/utils/helper'; -import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from './Base'; -import { BaseField } from './types'; +import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from '@/components/ui/Field/Base'; +import { BaseField } from '@/components/ui/Field/types'; -type InputProps = BaseField & InputHTMLAttributes; +type InputProps = BaseField & + InputHTMLAttributes & { + ref?: Ref; + }; -export const Input = forwardRef(({ label, error, className, ...props }, ref) => { +export function Input({ label, error, className, ref, ...props }: InputProps) { const id = useId(); return ( @@ -19,6 +22,4 @@ export const Input = forwardRef(({ label, error, c {error && {error}} ); -}); - -Input.displayName = 'Input'; +} diff --git a/src/components/ui/Field/SearchInput.tsx b/src/components/ui/Field/SearchInput.tsx index afeaf72..5507f1c 100644 --- a/src/components/ui/Field/SearchInput.tsx +++ b/src/components/ui/Field/SearchInput.tsx @@ -1,19 +1,20 @@ -import { forwardRef, InputHTMLAttributes } from 'react'; +import { InputHTMLAttributes, Ref } from 'react'; import Image from 'next/image'; import { cn } from '@/utils/helper'; -import { baseFieldClassName } from './Base'; -import { BaseField } from './types'; +import { baseFieldClassName } from '@/components/ui/Field/Base'; +import { BaseField } from '@/components/ui/Field/types'; import searchIcon from '@/assets/icons/search.svg'; -type SearchInputProps = BaseField & InputHTMLAttributes; +type SearchInputProps = BaseField & + InputHTMLAttributes & { + ref?: Ref; + }; -export const SearchInput = forwardRef(({ className, ...props }, ref) => { +export function SearchInput({ className, ref, ...props }: SearchInputProps) { return (
search
); -}); - -SearchInput.displayName = 'SearchInput'; +} diff --git a/src/components/ui/Field/TagInput.tsx b/src/components/ui/Field/TagInput.tsx index 9203954..8402d42 100644 --- a/src/components/ui/Field/TagInput.tsx +++ b/src/components/ui/Field/TagInput.tsx @@ -1,9 +1,9 @@ import { FocusEvent, InputHTMLAttributes, KeyboardEvent, useEffect, useId, useRef, useState } from 'react'; import { motion } from 'motion/react'; import { cn } from '@/utils/helper'; -import TagChip from '../Chip/TagChip'; -import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from './Base'; -import { BaseField } from './types'; +import TagChip from '@/components/ui/Chip/TagChip'; +import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from '@/components/ui/Field/Base'; +import { BaseField } from '@/components/ui/Field/types'; type TagInputProps = BaseField & Omit, 'value' | 'onChange'> & { diff --git a/src/components/ui/Field/Textarea.tsx b/src/components/ui/Field/Textarea.tsx index fb8fc30..75c5b0d 100644 --- a/src/components/ui/Field/Textarea.tsx +++ b/src/components/ui/Field/Textarea.tsx @@ -1,11 +1,14 @@ -import { forwardRef, TextareaHTMLAttributes, useId } from 'react'; +import { Ref, TextareaHTMLAttributes, useId } from 'react'; import { cn } from '@/utils/helper'; -import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from './Base'; -import { BaseField } from './types'; +import { BaseError, baseErrorClassName, baseFieldClassName, BaseItem, BaseLabel } from '@/components/ui/Field/Base'; +import { BaseField } from '@/components/ui/Field/types'; -type TextareaProps = BaseField & TextareaHTMLAttributes; +type TextareaProps = BaseField & + TextareaHTMLAttributes & { + ref?: Ref; + }; -export const Textarea = forwardRef(({ label, error, className, ...props }, ref) => { +export function Textarea({ label, error, className, ref, ...props }: TextareaProps) { const id = useId(); return ( @@ -19,6 +22,4 @@ export const Textarea = forwardRef(({ label, {error && {error}} ); -}); - -Textarea.displayName = 'Textarea'; +} diff --git a/src/components/ui/Modal/DialogContainer.tsx b/src/components/ui/Modal/DialogContainer.tsx index b19e876..f0ce125 100644 --- a/src/components/ui/Modal/DialogContainer.tsx +++ b/src/components/ui/Modal/DialogContainer.tsx @@ -2,7 +2,7 @@ import { useDialogStore } from '@/stores/modalStore'; import BaseModal from '@/components/ui/Modal/BaseModal'; -import Button from '@/components/ui/Button/Button'; +import Button from '@/components/ui/Button'; export function DialogContainer() { const { isOpen, message, type, buttons, callback, resolvePromise, rejectPromise } = useDialogStore(); diff --git a/src/components/ui/Modal/Modal.tsx b/src/components/ui/Modal/index.tsx similarity index 86% rename from src/components/ui/Modal/Modal.tsx rename to src/components/ui/Modal/index.tsx index 1c6b9df..14340fe 100644 --- a/src/components/ui/Modal/Modal.tsx +++ b/src/components/ui/Modal/index.tsx @@ -1,6 +1,6 @@ -import { forwardRef, HTMLAttributes, PropsWithChildren, useImperativeHandle, useState } from 'react'; -import BaseModal from './BaseModal'; +import { HTMLAttributes, PropsWithChildren, Ref, useImperativeHandle, useState } from 'react'; import { cn } from '@/utils/helper'; +import BaseModal from '@/components/ui/Modal/BaseModal'; /** * Modal 컴포넌트 (컨텐츠 주입형) @@ -30,7 +30,11 @@ export type ModalHandle = { close: () => void; }; -export const Modal = forwardRef((props, ref) => { +type ModalProps = PropsWithChildren & { + ref: Ref; +}; + +export function Modal({ ref, ...props }: ModalProps) { const [isOpen, setIsOpen] = useState(false); useImperativeHandle(ref, () => { @@ -45,7 +49,7 @@ export const Modal = forwardRef((props, ref) => }); return setIsOpen(false)} {...props} />; -}); +} export function ModalHeader({ children, className, ...props }: PropsWithChildren>) { return ( @@ -70,6 +74,3 @@ export function ModalFooter({ children, className, ...props }: PropsWithChildren ); } - -// eslintreact/display-name (forwardref) -Modal.displayName = 'Modal'; diff --git a/src/components/ui/Table/Table.tsx b/src/components/ui/Table/index.tsx similarity index 100% rename from src/components/ui/Table/Table.tsx rename to src/components/ui/Table/index.tsx diff --git a/src/constants/paths.ts b/src/constants/paths.ts deleted file mode 100644 index 7930f27..0000000 --- a/src/constants/paths.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const ARROW_PATH_LEFT = `M2.641 7.99933L8.91824 1.72208C9.08384 1.55648 9.16451 1.35937 9.16024 1.13074C9.15596 0.902106 9.07103 0.704996 8.90543 0.539412C8.73983 0.373815 8.54272 0.291016 8.31409 0.291016C8.08547 0.291016 7.88836 0.373815 7.72276 0.539412L1.34295 6.93204C1.19231 7.08268 1.08066 7.25147 1.00801 7.43843C0.93537 7.62541 0.899048 7.81237 0.899048 7.99933C0.899048 8.18629 0.93537 8.37325 1.00801 8.56022C1.08066 8.74718 1.19231 8.91598 1.34295 9.06662L7.73557 15.4592C7.90117 15.6248 8.09615 15.7055 8.32051 15.7012C8.54486 15.697 8.73983 15.612 8.90543 15.4464C9.07103 15.2808 9.15383 15.0837 9.15383 14.8551C9.15383 14.6265 9.07103 14.4294 8.90543 14.2638L2.641 7.99933Z`; - -export const ARROW_PATH_RIGHT = `M7.35901 7.99933L1.08176 1.72208C0.916163 1.55648 0.835496 1.35937 0.83976 1.13074C0.844038 0.902106 0.928975 0.704996 1.09457 0.539412C1.26017 0.373815 1.45728 0.291016 1.68591 0.291016C1.91453 0.291016 2.11164 0.373815 2.27724 0.539412L8.65705 6.93204C8.80769 7.08268 8.91934 7.25147 8.99199 7.43843C9.06463 7.62541 9.10095 7.81237 9.10095 7.99933C9.10095 8.18629 9.06463 8.37325 8.99199 8.56022C8.91934 8.74718 8.80769 8.91598 8.65705 9.06662L2.26443 15.4592C2.09883 15.6248 1.90385 15.7055 1.67949 15.7012C1.45514 15.697 1.26017 15.612 1.09457 15.4464C0.928975 15.2808 0.846176 15.0837 0.846176 14.8551C0.846176 14.6265 0.928975 14.4294 1.09457 14.2638L7.35901 7.99933Z`; - -export const DEFAULT_CARD_IMAGE_URL = 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/taskify/task_image/12-5_45251_1739412796075.jpeg'; diff --git a/src/constants/todo.ts b/src/constants/todo.ts new file mode 100644 index 0000000..e4fd7b7 --- /dev/null +++ b/src/constants/todo.ts @@ -0,0 +1 @@ +export const DEFAULT_CARD_IMAGE_URL = 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/taskify/task_image/12-5_45251_1739412796075.jpeg'; diff --git a/src/constants/profileEdit.ts b/src/constants/user.ts similarity index 100% rename from src/constants/profileEdit.ts rename to src/constants/user.ts diff --git a/src/hooks/useChunkPagination.ts b/src/hooks/useChunkPagination.ts deleted file mode 100644 index f214101..0000000 --- a/src/hooks/useChunkPagination.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { useState } from 'react'; -import { chunkArray } from '@/utils/chunkArray'; - -/* - * "UseChunkPagination" 커스텀 훅 사용 가이드 - * ------------------------------------------------------------ - * // 예시 - * const { - * currentGroups, - * page, - * canGoPrev, - * canGoNext, - * handlePrev, - * handleNext, - * totalPages, - * } = UseChunkPagination({ - * items: myDataArray, // 전체 아이템 배열 - * chunkSize: 5, // 한 묶음에 몇 개씩 자를지 - * maxGroupsPerPage: 3, // 한 페이지에 묶음을 몇 개까지 보여줄지 - * }); - * - * // 이후, currentGroups로 화면을 렌더하고, - * // canGoPrev/canGoNext로 이전/다음 버튼 활성화 여부를 결정하며, - * // handlePrev/handleNext로 페이지 이동을 제어 - * - * // 만약 "한 페이지에 1묶음씩" 보이길 원하면 maxGroupsPerPage를 1로 바꾸면 됨. - * // => 데이터가 2묶음 이상이면 다음 페이지가 생김 - * ------------------------------------------------------------ - */ -interface UseChunkPaginationProps { - items: T[]; - chunkSize: number; - maxGroupsPerPage: number; -} - -export function UseChunkPagination({ items, chunkSize, maxGroupsPerPage }: UseChunkPaginationProps) { - const [page, setPage] = useState(1); - - const chunkedData = chunkArray(items, chunkSize); - const totalPages = Math.ceil(chunkedData.length / maxGroupsPerPage); - - const startIndex = (page - 1) * maxGroupsPerPage; - const endIndex = page * maxGroupsPerPage; - const currentGroups = chunkedData.slice(startIndex, endIndex); - - const canGoPrev = page > 1; - const canGoNext = page < totalPages; - - const handlePrev = () => { - if (canGoPrev) setPage((prev) => prev - 1); - }; - - const handleNext = () => { - if (canGoNext) setPage((prev) => prev + 1); - }; - return { - currentGroups, - page, - setPage, - totalPages, - canGoPrev, - canGoNext, - handlePrev, - handleNext, - }; -} diff --git a/src/hooks/useDebounce.tsx b/src/hooks/useDebounce.ts similarity index 100% rename from src/hooks/useDebounce.tsx rename to src/hooks/useDebounce.ts diff --git a/src/utils/chunkArray.ts b/src/utils/chunkArray.ts deleted file mode 100644 index c8e4ccc..0000000 --- a/src/utils/chunkArray.ts +++ /dev/null @@ -1,7 +0,0 @@ -export function chunkArray(array: T[], size: number): T[][] { - const result: T[][] = []; - for (let i = 0; i < array.length; i += size) { - result.push(array.slice(i, i + size)); - } - return result; -} diff --git a/src/utils/errorMessage.ts b/src/utils/network/errorMessage.ts similarity index 100% rename from src/utils/errorMessage.ts rename to src/utils/network/errorMessage.ts