CodeitFESI4-Team1 · yulrang · Nov 21, 2024 · Nov 20, 2024 · Nov 20, 2024 · Nov 20, 2024
diff --git a/src/app/(crew)/crew/create/_components/create-crew-form/index.tsx b/src/app/(crew)/crew/create/_components/create-crew-form/index.tsx
@@ -154,7 +154,7 @@ export default function CreateCrewForm({
         </div>
         <div className="flex flex-col gap-3">
           <label
-            htmlFor="crew-category"
+            htmlFor="crew-mainCategory"
             className="text-base font-semibold text-gray-800 md:text-xl"
           >
             카테고리를 선택해주세요.
@@ -167,6 +167,7 @@ export default function CreateCrewForm({
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-mainCategory"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '메인 카테고리'}
@@ -180,12 +181,16 @@ export default function CreateCrewForm({
                 />
               )}
             />
+            <label htmlFor="crew-subCategory" className="sr-only">
+              세부 카테고리를 선택해주세요.
+            </label>
             <Controller
               name="subCategory"
               control={control}
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-subCategory"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '세부 카테고리'}
@@ -199,9 +204,9 @@ export default function CreateCrewForm({
         </div>
 
         <div className="flex flex-col gap-3">
-          <label htmlFor="crew-image" className="text-base font-semibold text-gray-800 md:text-xl">
+          <span className="text-base font-semibold text-gray-800 md:text-xl">
             대표이미지를 선택하거나 첨부해주세요.
-          </label>
+          </span>
           <Controller
             name="imageUrl"
             control={control}
@@ -237,7 +242,7 @@ export default function CreateCrewForm({
 
         <div className="flex flex-col gap-3">
           <label
-            htmlFor="crew-category"
+            htmlFor="crew-mainLocation"
             className="text-base font-semibold text-gray-800 md:text-xl"
           >
             지역을 선택해주세요.
@@ -250,6 +255,7 @@ export default function CreateCrewForm({
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-mainLocation"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '특별시/도'}
@@ -263,13 +269,17 @@ export default function CreateCrewForm({
                 />
               )}
             />
+            <label htmlFor="crew-subLocation" className="sr-only">
+              세부 지역을 선택해주세요.
+            </label>
             <Controller
               name="subLocation"
               control={control}
               rules={{ required: '시/군/구를 선택해주세요.' }}
               render={({ field }) => (
                 <DropDown
                   {...field}
+                  id="crew-subLocation"
                   variant="default"
                   inWhere="form"
                   placeholder={isEdit && field.value ? field.value : '시/군/구'}
@@ -314,11 +324,14 @@ export default function CreateCrewForm({
         </div>
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
-            <label htmlFor="gathering-introduce" className="text-base font-semibold text-gray-800">
+            <label
+              htmlFor="crew-introduce"
+              className="text-base font-semibold text-gray-800 md:text-xl"
+            >
               크루 소개
             </label>
             <span>
-              <span className="text-blue-500">{introduce?.length}</span>/100
+              <span className="text-blue-500">{introduce.length}</span>/100
             </span>
           </div>
           <Controller
@@ -327,6 +340,7 @@ export default function CreateCrewForm({
             render={({ field }) => (
               <Textarea
                 {...field}
+                id="crew-introduce"
                 placeholder="크루 소개글을 100자 이내로 입력해주세요."
                 maxLength={100}
                 inputClassNames="h-40 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl"

diff --git a/src/app/(crew)/crew/create/page.tsx b/src/app/(crew)/crew/create/page.tsx
@@ -57,7 +57,8 @@ export default function CreateCrewPage() {
           <Image
             src={IcoCreateCrew}
             fill
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
             alt=""
           />
         </figure>

diff --git a/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx b/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx
@@ -88,9 +88,7 @@ export default function CreateGatheringForm({
           />
         </div>
         <div className="flex flex-col gap-3">
-          <label htmlFor="gathering-image" className="text-base font-semibold text-gray-800">
-            이미지 선택/첨부
-          </label>
+          <span className="text-base font-semibold text-gray-800">이미지 선택/첨부</span>
           <div className="flex">
             <Controller
               name="imageUrl"
@@ -161,9 +159,7 @@ export default function CreateGatheringForm({
         </div>
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
-            <label htmlFor="gathering-dateTime" className="text-base font-semibold text-gray-800">
-              날짜
-            </label>
+            <span className="text-base font-semibold text-gray-800">날짜</span>
           </div>
           <Controller
             name="dateTime"
@@ -223,6 +219,7 @@ export default function CreateGatheringForm({
             render={({ field }) => (
               <Textarea
                 {...field}
+                id="gathering-introduce"
                 placeholder="모집 설명/공지를 100자 이내로 입력해주세요."
                 maxLength={100}
                 inputClassNames="h-40 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl"

diff --git a/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx
@@ -59,7 +59,13 @@ export default function DetailCrewPresenter({
     <div className="mx-auto flex max-w-[1200px] flex-col gap-6">
       {/* 상단 이미지와 정보 영역 */}
       <div className="relative h-96 w-full overflow-hidden rounded-lg p-6 shadow-sm">
-        <Image src={imageUrl} alt={title} layout="fill" objectFit="cover" className="rounded-lg" />
+        <Image
+          src={imageUrl}
+          alt={title}
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full rounded-lg object-cover"
+        />
         <div className="absolute inset-0 bg-gradient-to-b from-[rgba(0,0,0,0.0)] via-transparent to-[rgba(0,0,0,0.8)]" />
 
         {/* 오버레이 컨테이너 */}

diff --git a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx
@@ -46,7 +46,8 @@ export default function GatheringDetailModalPresenter({
             src={data?.imageUrl}
             alt="모임 이미지"
             fill
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
           />
           {isToday(data?.dateTime) && (
             <strong className="absolute right-0 top-0 flex items-center gap-2 bg-blue-600 px-4 py-2 text-base font-medium text-white">
@@ -91,8 +92,9 @@ export default function GatheringDetailModalPresenter({
                 <Image
                   src={IcoUser}
                   fill
+                  sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
                   alt="아이콘"
-                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  className="h-full w-full object-cover"
                 />
               </figure>
               <span>

diff --git a/src/app/(crew)/crew/detail/[id]/edit/page.tsx b/src/app/(crew)/crew/detail/[id]/edit/page.tsx
@@ -43,7 +43,8 @@ export default function EditCrewPage() {
           <Image
             src={IcoCreateCrew}
             fill
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
             alt=""
           />
         </figure>

diff --git a/src/app/(crew)/my-crew/hosted/page.tsx b/src/app/(crew)/my-crew/hosted/page.tsx
@@ -4,6 +4,7 @@ import { Loader } from '@mantine/core';
 import { useGetMyCrewHostedQuery } from '@/src/_queries/crew/my-crew-hosted-list-query';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+import CrewSkeletonList from '@/src/components/common/skeleton/crew-skeleton-list';
 
 export default function MyCrewHostedPage() {
   const { data, isLoading, error, ref, isFetchingNextPage } = useInfiniteScroll(
@@ -15,9 +16,7 @@ export default function MyCrewHostedPage() {
     <div>
       <CrewCardList inWhere="my-crew" data={data ?? { pages: [], pageParams: [] }} />
       {isLoading || isFetchingNextPage ? (
-        <div className="flex justify-center py-10">
-          <Loader size="sm" />
-        </div>
+        <CrewSkeletonList num={6} column={1} />
       ) : (
         <div ref={ref} className="h-[1px]" />
       )}

diff --git a/src/app/(crew)/my-crew/joined/page.tsx b/src/app/(crew)/my-crew/joined/page.tsx
@@ -4,6 +4,7 @@ import { Loader } from '@mantine/core';
 import { useGetMyCrewJoinedQuery } from '@/src/_queries/crew/my-crew-joined-list-query';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+import CrewSkeletonList from '@/src/components/common/skeleton/crew-skeleton-list';
 
 export default function MyCrewJoinedPage() {
   const { data, isLoading, error, ref, isFetchingNextPage } = useInfiniteScroll(
@@ -15,9 +16,7 @@ export default function MyCrewJoinedPage() {
     <div>
       <CrewCardList inWhere="my-crew" data={data ?? { pages: [], pageParams: [] }} />
       {isLoading || isFetchingNextPage ? (
-        <div className="flex justify-center py-10">
-          <Loader size="sm" />
-        </div>
+        <CrewSkeletonList num={6} column={1} />
       ) : (
         <div ref={ref} className="h-[1px]" />
       )}

diff --git a/src/app/(crew)/my-gathering/hosted/page.tsx b/src/app/(crew)/my-gathering/hosted/page.tsx
@@ -6,13 +6,14 @@ import { useGetHostedGatheringListQuery } from '@/src/_queries/my-gathering/host
 import { formatDateToRequest } from '@/src/utils/format-date';
 import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
 import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import MyGatheringSkeletonList from '@/src/components/common/skeleton/my-gathering-skeleton-list';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
 export default function MyGatheringHostedPage() {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [hostedGatheringList, setHostedGatheringList] = useState<GatheringCardProps[]>();
 
-  const { data, refetch } = useQuery(
+  const { data, isLoading, refetch } = useQuery(
     useGetHostedGatheringListQuery(formatDateToRequest(selectedDate)),
   );
 
@@ -29,6 +30,7 @@ export default function MyGatheringHostedPage() {
       <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>
+      {isLoading && <MyGatheringSkeletonList num={6} />}
       {hostedGatheringList && <GatheringListWithDate gatheringList={hostedGatheringList} />}
     </div>
   );

diff --git a/src/app/(crew)/my-gathering/joined/page.tsx b/src/app/(crew)/my-gathering/joined/page.tsx
@@ -6,13 +6,14 @@ import { useGetJoinedGatheringListQuery } from '@/src/_queries/my-gathering/join
 import { formatDateToRequest } from '@/src/utils/format-date';
 import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
 import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import MyGatheringSkeletonList from '@/src/components/common/skeleton/my-gathering-skeleton-list';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
 export default function MyGatheringJoinedPage() {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [joinedGatheringList, setJoinedGatheringList] = useState<GatheringCardProps[]>();
 
-  const { data, refetch } = useQuery(
+  const { data, isLoading, refetch } = useQuery(
     useGetJoinedGatheringListQuery(formatDateToRequest(selectedDate)),
   );
 
@@ -29,6 +30,7 @@ export default function MyGatheringJoinedPage() {
       <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>
+      {isLoading && <MyGatheringSkeletonList num={6} />}
       {joinedGatheringList && <GatheringListWithDate gatheringList={joinedGatheringList} />}
     </div>
   );

diff --git a/src/app/(crew)/my-page/_components/profile-card/container.tsx b/src/app/(crew)/my-page/_components/profile-card/container.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/src/_apis/auth/user-apis';
 import { useUser } from '@/src/_queries/auth/user-queries';
 import { useAuth } from '@/src/hooks/use-auth';
+import ProfileSkeleton from '@/src/components/common/skeleton/profile-skeleton';
 import ProfileCardPresenter from './presenter';
 
 export default function ProfileCard() {
@@ -38,7 +39,7 @@ export default function ProfileCard() {
     }
   }, [user]);
 
-  if (userLoading || !isAuthChecked) return <div>로딩 중...</div>;
+  if (userLoading || !isAuthChecked) return <ProfileSkeleton />;
   if (!user) return null;
 
   const handleEdit = () => {

diff --git a/src/app/(crew)/page.tsx b/src/app/(crew)/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react';
 import Image from 'next/image';
-import { Divider, Loader, TextInput } from '@mantine/core';
+import { Divider, Loader, Skeleton, TextInput } from '@mantine/core';
 import { useGetCrewListQuery } from '@/src/_queries/crew/crew-list-queries';
 import regionData from '@/src/data/region.json';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
@@ -11,6 +11,7 @@ import HeroCrew from '@/src/app/(crew)/_components/hero/hero-crew';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
 import Button from '@/src/components/common/input/button';
 import DropDown from '@/src/components/common/input/drop-down';
+import CrewSkeletonList from '@/src/components/common/skeleton/crew-skeleton-list';
 import IcoSearch from '@/public/assets/icons/ic-search.svg';
 
 export default function HomePage() {
@@ -102,7 +103,11 @@ export default function HomePage() {
             </Button>
           </div>
           <div className="flex-0 flex justify-between gap-2 md:gap-4">
+            <label htmlFor="region" className="sr-only">
+              지역 선택
+            </label>
             <DropDown
+              id="region"
               name="region"
               variant="default"
               data={regionData.map((dataItem) => dataItem.main)}
@@ -113,7 +118,11 @@ export default function HomePage() {
                 setRegion(newValue as string);
               }}
             />
+            <label htmlFor="sort" className="sr-only">
+              정렬 선택
+            </label>
             <DropDown
+              id="sort"
               name="sort"
               variant="sort"
               data={[
@@ -133,9 +142,7 @@ export default function HomePage() {
       <div className="mt-8 px-3 md:px-8 lg:px-11.5">
         {data && <CrewCardList data={data} />}
         {isLoading || isFetchingNextPage ? (
-          <div className="flex justify-center py-10">
-            <Loader size="sm" />
-          </div>
+          <CrewSkeletonList num={6} column={2} />
         ) : (
           <div ref={ref} className="h-[1px]" />
         )}

diff --git a/src/components/common/crew-list/crew-card-list.tsx b/src/components/common/crew-list/crew-card-list.tsx
@@ -33,7 +33,7 @@ export default function CrewCardList({ data, inWhere }: CrewCardListProps) {
     );
 
   return (
-    <ul className={`mx-auto grid w-full grid-cols-1 gap-x-2 gap-y-2 ${gridColsStyle}`}>
+    <ul className={`mx-auto grid w-full grid-cols-1 gap-x-4 gap-y-6 ${gridColsStyle}`}>
       {crewDataList.map((inform) => (
         <li key={inform?.id} className="w-full">
           <CrewCard

diff --git a/src/components/common/crew-list/crew-card.tsx b/src/components/common/crew-list/crew-card.tsx
@@ -45,11 +45,17 @@ export default function CrewCard({
     <div
       role="presentation"
       onClick={() => router.push(CREWPAGE)}
-      className="relative mx-auto flex h-[430px] w-full animate-fade cursor-pointer flex-col overflow-hidden rounded-[14px] bg-white shadow-bg md:h-[203px] md:flex-row"
+      className="relative mx-auto flex h-[430px] w-full animate-fade cursor-pointer flex-col overflow-hidden rounded-[14px] bg-white transition-shadow hover:shadow-card md:h-[203px] md:flex-row"
     >
       {/* 썸네일 */}
       <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px]">
-        <Image fill objectFit="cover" alt={title} src={imageUrl} />
+        <Image
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          alt={title}
+          src={imageUrl}
+          className="h-full w-full object-cover"
+        />
       </div>
 
       <div className="flex w-full flex-col justify-between p-6 sm:h-[238px] sm:px-4 sm:pt-4 md:h-[203px]">

diff --git a/src/components/common/gathering-card/presenter.tsx b/src/components/common/gathering-card/presenter.tsx
@@ -60,9 +60,9 @@ export default function GatheringCardPresenter({
         <Image
           src={imageUrl}
           alt={title}
-          layout="fill"
-          objectFit="cover"
-          className="rounded-t-lg"
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full rounded-t-lg object-cover"
         />
       </div>