Fix/youl bug fix

public/assets/images/crew-sample/index.tsx

@@ -5,7 +5,7 @@ import ImgCrewSample03 from './crew-sample-3.jpg';
 const ImgCrewSamples = [ImgCrewSample01, ImgCrewSample02, ImgCrewSample03];
 const ImgCrewSampleUrls = [
   'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/0e05d971-15a8-4a32-bf03-80d12cae392e',
-  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/eb35c35d-829a-402b-8019-29e42f91589f',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/817dac5a-f5e7-43c4-b32e-50d1ad2983aa',
   'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/471b3b3b-b23c-48e8-8e6b-9a7ec31e1917',
 ];
 

public/assets/images/gathering-sample/index.tsx

@@ -4,9 +4,9 @@ import ImgGatheringSample03 from './gathering-sample-3.jpg';
 
 const ImgGatheringSamples = [ImgGatheringSample01, ImgGatheringSample02, ImgGatheringSample03];
 const ImgGatheringSampleUrls = [
-  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/1ff61110-e238-4fd6-8736-e6f03483f4df',
-  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/85ad6a48-a1cb-4c8f-b713-94b9e18b023a',
-  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/60bc093c-cb3a-4628-93b9-fbf19e47a1ac',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/e276276c-c79e-4654-a2b2-279bccb7ca05',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/69d4f72f-8bad-4e9e-894c-9e8c9b57db2d',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/d3c507f4-0391-4acb-8bc3-ae5379bdb058',
 ];
 
 export default ImgGatheringSampleUrls;

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"

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>

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"

src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx

@@ -61,7 +61,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)]" />
 
         {/* 오버레이 컨테이너 */}

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">

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>

src/app/(crew)/page.tsx

@@ -103,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)}
@@ -114,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={[

src/app/layout.tsx

@@ -9,7 +9,7 @@ import { theme } from '@/src/styles/theme';
 
 export const metadata: Metadata = {
   title: 'CrewCrew',
-  description: 'Generated by CODEIT TEAM1',
+  description: '내 크루와 함께 약속하고 만나는 운동 소모임 웹사이트',
 };
 
 export default function RootLayout({
@@ -20,6 +20,13 @@ export default function RootLayout({
   return (
     <html lang="en" className={pretendard.variable}>
       <head>
+        <meta property="og:image" content="/assets/images/og.png" />
+        <meta property="og:title" content="CrewCrew" />
+        <meta
+          property="og:description"
+          content="내 크루와 함께 약속하고 만나는 운동 소모임 웹사이트"
+        />
+        <meta property="og:url" content="https://crewcrew.vercel.app" />
         <ColorSchemeScript />
       </head>
       <body>

src/components/common/crew-list/crew-card.tsx

@@ -49,7 +49,13 @@ export default function CrewCard({
     >
       {/* 썸네일 */}
       <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px]">
-        <Image fill style={{ 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 min-h-[203px] w-full flex-col justify-between p-6 sm:px-4 sm:pt-4">

src/components/common/gathering-card/presenter.tsx

@@ -60,8 +60,8 @@ export default function GatheringCardPresenter({
           src={imageUrl}
           alt={title}
           fill
-          style={{ objectFit: 'cover' }}
-          className="rounded-t-lg"
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full rounded-t-lg object-cover"
         />
       </div>
 

src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx

@@ -28,8 +28,15 @@ export default function ScheduledGatheringCardPresenter({
         tabIndex={0}
         className="h-80 cursor-pointer items-center rounded-xl bg-white shadow-xs md:flex md:h-44"
       >
-        <div className="relative h-1/2 w-full flex-shrink-0 overflow-hidden rounded-t-lg md:h-full md:w-1/3 md:rounded-l-lg md:rounded-r-none">
-          <Image src={imageUrl} alt={title} layout="fill" className="object-cover" />
+        {/* Image Section */}
+        <div className="relative h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg md:h-32 md:w-32 lg:h-32 lg:w-32">
+          <Image
+            src={imageUrl}
+            alt={title}
+            fill
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full object-cover"
+          />
         </div>
         <div className="flex h-1/2 w-full min-w-0 flex-grow flex-col justify-between p-4 md:h-full">
           <div className="overflow-hidden text-ellipsis whitespace-nowrap">

src/components/common/input/drop-down/index.tsx

@@ -3,6 +3,7 @@ import { ComboboxData, Select } from '@mantine/core';
 import IconArrow from '@/public/assets/icons/ic-arrow';
 
 export interface DropDownProps {
+  id?: string;
   variant: 'default' | 'sort';
   data: ComboboxData;
   name: string;
@@ -16,6 +17,7 @@ export interface DropDownProps {
 }
 
 export default function DropDown({
+  id,
   inWhere = 'default',
   name,
   variant,
@@ -73,6 +75,7 @@ export default function DropDown({
 
   return (
     <Select
+      id={id}
       error={error}
       mt="md"
       data={data}

src/components/common/input/file-input-wrap/file-input/index.tsx

@@ -98,9 +98,10 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
         <figure className="relative flex h-3.5 w-3.5 md:h-5 md:w-5">
           <Image
             fill
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
             src={IcoPlus}
             alt="이미지 추가"
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            className="h-full w-full object-cover"
           />
         </figure>
         <span className="text-xs font-medium text-gray-400 md:text-base lg:text-lg">
@@ -118,7 +119,13 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
 
       {preview && (
         <div className="absolute inset-0 overflow-hidden rounded-xl bg-neutral-100">
-          <Image src={preview} fill alt="이미지 미리보기" className="h-full w-full object-cover" />
+          <Image
+            src={preview}
+            fill
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            alt="이미지 미리보기"
+            className="h-full w-full object-cover"
+          />
           <button
             type="button"
             onClick={handleClearClick}

src/components/common/profile/index.tsx

@@ -70,8 +70,8 @@ export function Profile({
             src={imageUrl && imageUrl.trim() ? imageUrl : defaultImage}
             alt="프로필 이미지"
             fill
-            style={{ objectFit: 'cover' }}
-            className="rounded-full"
+            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="h-full w-full rounded-full object-cover"
             priority={priority}
           />
         </div>

src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx

@@ -50,7 +50,13 @@ export default function ReviewableGatheringCard({
   return (
     <div className="flex w-full max-w-[1200px] gap-[20px] border-b-[2px] border-b-gray-200 py-[24px]">
       <span className="relative h-[166px] w-[294px] overflow-hidden rounded-[12px]">
-        <Image src={imageUrl} alt={gatheringName} fill />
+        <Image
+          src={imageUrl}
+          alt={gatheringName}
+          fill
+          sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="h-full w-full object-cover"
+        />
       </span>
       <div className="flex w-full items-end justify-between">
         <div className="flex h-full flex-col items-start justify-between">
@@ -60,7 +66,13 @@ export default function ReviewableGatheringCard({
             </div>
             <div className="flex w-fit items-center">
               <span className="relative inline-block h-[20px] w-[20px]">
-                <Image alt="참여 인원" src={person} fill />
+                <Image
+                  alt="참여 인원"
+                  src={person}
+                  fill
+                  sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  className="h-full w-full object-contain"
+                />
               </span>
               <span className="mr-[22px] text-base font-medium text-gray-700">
                 {currentCount}/{totalCount}