Merge pull request #314 from prgrms-web-devcourse-final-project/feature/

#235

 feat: PostRegisterPage 컴포넌트 개발 (4차)

src/components/organisms/PostImageManager/index.tsx

@@ -18,7 +18,7 @@ interface IPostImageManagerProps {
 export const PostImageManager = ({
   imageInfos,
   setImageInfos,
-  disabled = false
+  disabled = false,
 }: IPostImageManagerProps) => {
   // TODO: 임시로 넣은 gpt의 가로 스크롤 이벤트 코드 나중에 수정 필요 (코드 이해 및 애니메이션 추가)
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -55,7 +55,7 @@ export const PostImageManager = ({
         const base64Url = e.target?.result as string;
         const newImgData: IImageInfo = {
           base64Url,
-          file: resizedFile as File // 변환 파일
+          file: resizedFile as File, // 변환 파일
         };
         setImageInfos((prev) => [...prev, newImgData]);
       };
@@ -102,15 +102,15 @@ export const PostImageManager = ({
       onMouseLeave={handleMouseUp}
     >
       <UploadedImageCounter
-        text="사진 등록"
+        text='사진 등록'
         currentCount={imageInfos.length}
         onChange={onChange}
       />
       <PostImageListWrapper>
         {imageInfos.map((info, index) => (
           <Fragment key={index}>
             <PostImageItem
-              imgUrl={info.base64Url as string}
+              imgUrl={info.url || (info.base64Url as string)}
               isThumbnail={index === 0}
               onClick={() => handleRemoveImage(index)}
             />

src/components/organisms/PostRegisterForm/index.tsx

@@ -10,7 +10,7 @@ import { PostImageManager } from "components/organisms";
 import { PostRegisterFormWrapper, DivWrapper } from "./styled";
 import type { IProductForm, IImageInfo } from "types";
 import { CATEGORY_OPTIONS, EXPIRED_TIMES } from "constants/options";
-import { isISOFormat } from "utils";
+import { isISOFormat, formatToDateTime } from "utils";
 import { ThemeType } from "styles/theme";
 
 interface IPostRegisterFormProps {
@@ -53,7 +53,7 @@ export const PostRegisterForm = ({
   return (
     <PostRegisterFormWrapper onSubmit={handleSubmit(onSubmit)}>
       <Controller
-        name="imgUrls"
+        name='imgUrls'
         control={control}
         rules={{
           validate: {
@@ -75,14 +75,14 @@ export const PostRegisterForm = ({
                     theme.colors.black}`,
                 }}
               >
-                <Text variant="explan_regular" content={error?.message || ""} />{" "}
+                <Text variant='explan_regular' content={error?.message || ""} />
               </div>
             )}
           </DivWrapper>
         )}
       />
       <Controller
-        name="category"
+        name='category'
         control={control}
         rules={{
           required: "카테고리는 필수 입력 항목입니다.",
@@ -94,12 +94,12 @@ export const PostRegisterForm = ({
         }) => (
           <DivWrapper>
             <LabeledSelect
-              id="product-category"
-              label="카테고리"
+              id='product-category'
+              label='카테고리'
               options={CATEGORY_OPTIONS}
               value={CATEGORY_OPTIONS.find((option) => option.value === value)}
               onChange={(option) => onChange(option)}
-              placeholder="카테고리를 검색해보세요!"
+              placeholder='카테고리를 검색해보세요!'
             />
             {invalid && (
               <div
@@ -109,7 +109,7 @@ export const PostRegisterForm = ({
                 }}
               >
                 <Text
-                  variant="explan_regular"
+                  variant='explan_regular'
                   content={formState.errors.category?.message || ""}
                 />
               </div>
@@ -118,26 +118,26 @@ export const PostRegisterForm = ({
         )}
       />
       <Controller
-        name="title"
+        name='title'
         control={control}
         rules={{
           required: "제목은 필수 입력 항목입니다.",
         }}
         render={({ field: { value }, fieldState: { invalid }, formState }) => (
           <DivWrapper>
             <LabeledInput
-              id="product-title"
-              label="제목"
+              id='product-title'
+              label='제목'
               value={value || ""}
               setValue={(value) => {
                 setValue("title", value);
               }}
-              placeholder="제목을 입력해주세요."
+              placeholder='제목을 입력해주세요.'
             />
             {invalid && (
               <div style={{ color: "#FF2E4D" }}>
                 <Text
-                  variant="explan_regular"
+                  variant='explan_regular'
                   content={formState.errors.title?.message || ""}
                 />
               </div>
@@ -146,16 +146,16 @@ export const PostRegisterForm = ({
         )}
       />
       <Controller
-        name="content"
+        name='content'
         control={control}
         rules={{
           required: "설명은 필수 입력 항목입니다.",
         }}
         render={({ field: { value }, fieldState: { invalid }, formState }) => (
           <DivWrapper>
             <LabeledTextarea
-              id="product-content"
-              label="설명"
+              id='product-content'
+              label='설명'
               value={value || ""}
               setValue={(value) => {
                 setValue("content", value);
@@ -167,7 +167,7 @@ export const PostRegisterForm = ({
             {invalid && (
               <div style={{ color: "#FF2E4D" }}>
                 <Text
-                  variant="explan_regular"
+                  variant='explan_regular'
                   content={formState.errors.content?.message || ""}
                 />
               </div>
@@ -176,28 +176,28 @@ export const PostRegisterForm = ({
         )}
       />
       <Controller
-        name="minimumPrice"
+        name='minimumPrice'
         control={control}
         rules={{
           required: "최종 입찰가는 필수 입력 항목입니다.",
         }}
         render={({ field: { value }, fieldState: { invalid }, formState }) => (
           <DivWrapper>
             <LabeledInput
-              type="number"
-              id="product-minimumPrice"
-              label="최종 입찰가"
+              type='number'
+              id='product-minimumPrice'
+              label='최종 입찰가'
               value={value || ""}
               setValue={(value) => {
                 console.log("price", value);
                 setValue("minimumPrice", value);
               }}
-              placeholder="최종 입찰가를 입력해주세요."
+              placeholder='최종 입찰가를 입력해주세요.'
             />
             {invalid && (
               <div style={{ color: "#FF2E4D" }}>
                 <Text
-                  variant="explan_regular"
+                  variant='explan_regular'
                   content={formState.errors.minimumPrice?.message || ""}
                 />
               </div>
@@ -206,7 +206,7 @@ export const PostRegisterForm = ({
         )}
       />
       <Controller
-        name="expiredTime"
+        name='expiredTime'
         control={control}
         rules={{
           required: "경매 마감 일시는 필수 입력 항목입니다.",
@@ -216,48 +216,53 @@ export const PostRegisterForm = ({
           fieldState: { invalid },
           formState,
         }) => {
+          console.log("expiredTime", postForm?.expiredTime);
           const expiredTimeDisabled = isISOFormat(
             postForm?.expiredTime as string
           );
+
+          const formattedTime = expiredTimeDisabled
+            ? formatToDateTime(postForm?.expiredTime as string)
+            : "";
 
           return (
             <DivWrapper>
               <LabeledSelect
-                id="product-expiredTime"
-                label="경매 마감 일시"
+                id='product-expiredTime'
+                label='경매 마감 일시'
                 options={
                   expiredTimeDisabled
                     ? [
                         {
-                          value: postForm!.expiredTime as string,
-                          label: postForm!.expiredTime as string,
+                          value: formattedTime,
+                          label: formattedTime,
                         },
                       ]
                     : EXPIRED_TIMES
                 }
                 value={
                   expiredTimeDisabled
                     ? {
-                        value: postForm!.expiredTime as string,
-                        label: postForm!.expiredTime as string,
+                        value: formattedTime,
+                        label: formattedTime,
                       }
                     : EXPIRED_TIMES.find((option) => option.value === value)
                 }
                 onChange={(option) => onChange(option)}
-                placeholder="경매 마감 일시를 선택해주세요."
+                placeholder='경매 마감 일시를 선택해주세요.'
               />
               {!productId && (
                 <div style={{ color: "#707192" }}>
                   <Text
-                    variant="explan_regular"
-                    content="포스팅이 등록될 때 경매 마감 시간이 카운트됩니다."
+                    variant='explan_regular'
+                    content='포스팅이 등록될 때 경매 마감 시간이 카운트됩니다.'
                   />
                 </div>
               )}
               {invalid && (
                 <div style={{ color: "#FF2E4D" }}>
                   <Text
-                    variant="explan_regular"
+                    variant='explan_regular'
                     content={formState.errors.expiredTime?.message || ""}
                   />
                 </div>
@@ -267,27 +272,27 @@ export const PostRegisterForm = ({
         }}
       />
       <Controller
-        name="location"
+        name='location'
         control={control}
         rules={{
           required: "거래 희망 장소는 필수 입력 항목입니다.",
         }}
         render={({ field: { value }, fieldState: { invalid }, formState }) => (
           <DivWrapper>
             <LabeledInput
-              id="product-location"
-              label="거래 희망 장소"
+              id='product-location'
+              label='거래 희망 장소'
               value={value || ""}
               onClick={() => {
                 const formData = getValues();
                 onClick(formData);
               }}
-              placeholder="거래 희망 장소를 입력해주세요."
+              placeholder='거래 희망 장소를 입력해주세요.'
             />
             {invalid && (
               <div style={{ color: "#FF2E4D" }}>
                 <Text
-                  variant="explan_regular"
+                  variant='explan_regular'
                   content={formState.errors.location?.message || ""}
                 />
               </div>
@@ -296,7 +301,7 @@ export const PostRegisterForm = ({
         )}
       />
       <TextButton
-        size="l"
+        size='l'
         text={`${productId ? "수정" : "등록"} 완료`}
         onClick={() => handleSubmit(onSubmit)}
       />

src/components/templates/SelectLocationTemplate/index.tsx

@@ -7,6 +7,8 @@ import { ICoord, ILocation } from "types";
 interface ISelectLocationTemplateProps {
   /** 거래희망장소 좌표 (위도, 경도) */
   coord?: ICoord;
+  /** 거래희망장소명 */
+  location?: string;
   /** 거래희망장소 선택 완료 버튼 클릭 이벤트 */
   onLocationSelect: (selectedLocation: ILocation) => void;
   /** 바텀 시트 open 여부 */
@@ -23,6 +25,7 @@ interface ISelectLocationTemplateProps {
 
 export const SelectLocationTemplate = ({
   coord,
+  location,
   onLocationSelect,
   isOpenBottomSheet,
   closeBottomSheet,
@@ -31,7 +34,7 @@ export const SelectLocationTemplate = ({
   isError
 }: ISelectLocationTemplateProps) => {
   // TODO: 템플릿은 스켈레톤이기 때문에 페이지로 useState를 빼는 게 나을까?
-  const [place, setPlace] = useState("");
+  const [place, setPlace] = useState(location || "");
 
   const memoizedLocationPicker = useMemo(
     () => (

src/pages/DetailPage/index.tsx

@@ -145,7 +145,7 @@ export const DetailPage = () => {
 
   if (!product) {
     // 에러페이지로 이동
-    return <Navigate to="/error" replace />;
+    return <Navigate to='/error' replace />;
   }
 
   return (
@@ -177,14 +177,14 @@ export const DetailPage = () => {
           <KebabMenu>
             {product.isSeller && (
               <>
-                <KebabMenu.Button content="수정하기" onClick={handleEdit} />
-                <KebabMenu.Button content="삭제하기" onClick={handleDelete} />
+                <KebabMenu.Button content='수정하기' onClick={handleEdit} />
+                <KebabMenu.Button content='삭제하기' onClick={handleDelete} />
               </>
             )}
             {!product.isSeller && (
               <>
-                <KebabMenu.Button content="차단하기" onClick={handleBlock} />
-                <KebabMenu.Button content="신고하기" onClick={handleReport} />
+                <KebabMenu.Button content='차단하기' onClick={handleBlock} />
+                <KebabMenu.Button content='신고하기' onClick={handleReport} />
               </>
             )}
           </KebabMenu>