[FEATURE] 에디터 이미지 추가

src/app/(main)/project/[id]/_components/ProjectImage.tsx

@@ -0,0 +1,22 @@
+import { ResponseProject } from '@/types/project';
+import Image from 'next/image';
+
+const ProjectImage = ({ images }: ResponseProject) => {
+  if (!images || images.length === 0) return null;
+  return (
+    <div className="tablet:grid-cols-2 grid grid-cols-1 gap-5">
+      {images.map((img, index) => (
+        <Image
+          key={img.objectKey}
+          src={img.imageUrl}
+          alt={`Project Image ${index + 1}`}
+          className="h-auto rounded-lg"
+          width={500}
+          height={300}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ProjectImage;

src/app/(main)/project/[id]/_components/ProjectInfo.tsx

@@ -5,6 +5,7 @@ import ProjectTitle from './ProjectTitle';
 import InfoCard from './InfoCard';
 import Profile1 from '@/components/profile/Profile1';
 import { useGetProject } from '@/hooks/queries/useProject';
+import ProjectImage from './ProjectImage';
 
 const ProjectInfo = ({ id }: { id: string }) => {
   const { data } = useGetProject(
@@ -29,6 +30,7 @@ const ProjectInfo = ({ id }: { id: string }) => {
         <div className="prose desktop:bg-none bg-gray-0 desktop:p-10 max-w-none rounded-2xl border border-gray-300 px-5 py-6 text-gray-700">
           <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
         </div>
+        <ProjectImage {...data} />
         <Profile1 profileId={data.writerProfileId} />
       </div>
     </div>

src/app/(main)/project/_components/ProjectList.tsx

@@ -107,7 +107,7 @@ const ProjectListPage = () => {
       <div className="tablet:pt-5 w-full pt-5 pb-3">
         <ButtonContainer filters={filters} onChange={handleFilterChange} />
       </div>
-      <div className="tablet:grid tablet:py-5 tablet:gap-4 tablet:grid-cols-3 flex flex-col gap-2">
+      <div className="tablet:grid tablet:py-5 tablet:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 flex flex-col gap-2">
         <div className="tablet:contents hidden">
           {tabletCards.length > 0
             ? tabletCards.map((card: ResponseProject) => (
@@ -128,7 +128,9 @@ const ProjectListPage = () => {
                 />
               ))
             : !isLoading && (
-                <p className="col-span-3 py-10 text-center text-gray-500">프로젝트가 없습니다.</p>
+                <p className="tablet:col-span-2 desktop:col-span-3 py-10 text-center text-gray-500">
+                  프로젝트가 없습니다.
+                </p>
               )}
         </div>
         <div className="tablet:hidden mb-28 flex flex-col gap-2">

src/app/(main)/teampsylog/_components/BottomComment.tsx

@@ -27,32 +27,28 @@ const BottomComment = ({ isOpen, onClose, children }: BottomSheetProps) => {
   return (
     <>
       <div
-        className="desktop:hidden fixed inset-0 z-40 bg-black/70"
+        className={`desktop:hidden fixed inset-0 z-40 bg-black/70 ${shouldShow ? 'block' : 'hidden'}`}
         onClick={handleClose}
         style={{
           opacity: isDragging ? Math.max(0, 1 - dragCurrentY / 300) : isOpen && !isClosing ? 1 : 0,
-          visibility: shouldShow ? 'visible' : 'hidden',
-          pointerEvents: shouldShow ? 'auto' : 'none',
-          transition: isDragging ? 'none' : 'opacity 0.3s, visibility 0.3s',
+          transition: isDragging ? 'none' : 'opacity 0.3s',
         }}
       />
       {/* 바텀 시트 */}
       <div
-        className="desktop:hidden fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-gray-200"
+        className={`desktop:hidden fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-gray-200 ${shouldShow ? 'flex' : 'hidden'}`}
         style={{
           height: '70vh',
           maxHeight: '70vh',
-          overscrollBehavior: 'contain',
-          display: 'flex',
           flexDirection: 'column',
           transform: isDragging
             ? `translateY(${dragCurrentY}px)`
             : isOpen && !isClosing
               ? 'translateY(0)'
               : 'translateY(100%)',
           transition: isDragging ? 'none' : 'transform 0.3s ease-out',
-          visibility: shouldShow ? 'visible' : 'hidden',
           pointerEvents: shouldShow ? 'auto' : 'none',
+          overscrollBehavior: 'contain',
         }}
       >
         <div

src/app/(main)/teampsylog/_components/KeywordGuideOverlay.tsx

@@ -63,7 +63,7 @@ const KeywordGuideOverlay = ({ onClose }: Props) => {
           <Button onClick={onClose} className="bg-primary-900 body-3 text-gray-0 px-6 py-3">
             튜토리얼 마치기
           </Button>
-          <label className="pointer-events-auto flex cursor-pointer items-center gap-2">
+          {/* <label className="pointer-events-auto flex cursor-pointer items-center gap-2">
             <input
               type="checkbox"
               checked={checked}
@@ -78,7 +78,7 @@ const KeywordGuideOverlay = ({ onClose }: Props) => {
               aria-hidden="true"
             />
             <span className="body-5 text-gray-0">다시보지않기</span>
-          </label>
+          </label> */}
         </div>
       </div>
       {/* mobile */}

src/components/recruit/RecruitForm.tsx

@@ -13,6 +13,7 @@ import Button from '@/components/common/Button';
 import { Project } from '@/types/project';
 import { useRecruitForm } from './useRecruitForm';
 import { RecruitFormType } from '@/libs/schemas/projectSchema';
+import { FormProvider } from 'react-hook-form';
 
 type RecruitFormProps = {
   mode?: 'create' | 'edit';
@@ -31,22 +32,21 @@ const RecruitForm = ({
   onNext,
   initialFormData,
 }: RecruitFormProps) => {
-  const {
-    handleSubmit,
-    control,
-    watch,
-    reset,
-    formState: { isValid, errors },
-    onSubmit,
-    onError,
-  } = useRecruitForm({
+  const { formMethods, onSubmit, onError } = useRecruitForm({
     mode,
     initialData,
     postId,
     showProfileList,
     onNext,
     initialFormData,
   });
+  const {
+    handleSubmit,
+    control,
+    watch,
+    reset,
+    formState: { isValid, errors },
+  } = formMethods;
 
   useEffect(() => {
     if (initialFormData && mode === 'create' && !showProfileList) {
@@ -70,43 +70,45 @@ const RecruitForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit, onError)} className="flex flex-col gap-4">
-      <div className="desktop:gap-4 flex flex-col gap-3">
-        <TitleInput control={control} name="title" />
-        <div className="bg-gray-0 desktop:p-8 flex flex-col gap-8 rounded-2xl border-1 border-gray-300 p-6">
-          {/* 모집분야/인원 */}
-          <RecruitPosition control={control} />
-          {/* 진행방법 */}
-          <ProcessMethod control={control} />
-          {/* 프로젝트 기간 및 연락처 */}
-          <div className="desktop:gap-6 flex flex-col gap-8">
-            <ProjectDate title="프로젝트 시작 예정일" name="startDate" control={control} />
-            <ProjectDuration control={control} />
-            <ProjectDate
-              title="공고 마감일"
-              name="deadline"
-              control={control}
-              error={
-                !isEndDateInvalid(deadline, startDate)
-                  ? '마감일은 시작일 이후일 수 없습니다'
-                  : errors.deadline?.message
-              }
-            />
-            <TextInput title="연락 방법" name="contactWay" control={control} />
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleSubmit(onSubmit, onError)} className="flex flex-col gap-4">
+        <div className="desktop:gap-4 flex flex-col gap-3">
+          <TitleInput control={control} name="title" />
+          <div className="bg-gray-0 desktop:p-8 flex flex-col gap-8 rounded-2xl border-1 border-gray-300 p-6">
+            {/* 모집분야/인원 */}
+            <RecruitPosition control={control} />
+            {/* 진행방법 */}
+            <ProcessMethod control={control} />
+            {/* 프로젝트 기간 및 연락처 */}
+            <div className="desktop:gap-6 flex flex-col gap-8">
+              <ProjectDate title="프로젝트 시작 예정일" name="startDate" control={control} />
+              <ProjectDuration control={control} />
+              <ProjectDate
+                title="공고 마감일"
+                name="deadline"
+                control={control}
+                error={
+                  !isEndDateInvalid(deadline, startDate)
+                    ? '마감일은 시작일 이후일 수 없습니다'
+                    : errors.deadline?.message
+                }
+              />
+              <TextInput title="연락 방법" name="contactWay" control={control} />
+            </div>
           </div>
+          <TextContent control={control} name="content" initialImages={initialData?.images} />
+          {mode === 'create' && showProfileList && <ProfileSlider control={control} />}
+        </div>
+        <div className="mt-6 mb-10 flex justify-end">
+          <Button
+            type="submit"
+            label={mode === 'edit' ? '수정하기' : showProfileList ? '업로드하기' : '다음으로'}
+            disabled={!isValid}
+            className="desktop:w-fit w-full"
+          />
         </div>
-        <TextContent control={control} name="content" />
-        {mode === 'create' && showProfileList && <ProfileSlider control={control} />}
-      </div>
-      <div className="mt-6 mb-10 flex justify-end">
-        <Button
-          type="submit"
-          label={mode === 'edit' ? '수정하기' : showProfileList ? '업로드하기' : '다음으로'}
-          disabled={!isValid}
-          className="desktop:w-fit w-full"
-        />
-      </div>
-    </form>
+      </form>
+    </FormProvider>
   );
 };