Feat: 수정

components/diaries/edit/diary-edit-image/diary-edit-image.module.scss

@@ -0,0 +1,27 @@
+.image-area {
+  padding-left: 24px;
+}
+
+.image-item {
+  position: relative;
+  width: 110px;
+  height: 110px;
+  border-radius: 10px;
+  background-color: #d9d9d9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  input {
+    display: none;
+  }
+
+  label {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 10;
+    cursor: pointer;
+  }
+}

components/diaries/edit/diary-edit-image/diary-edit-image.tsx

@@ -0,0 +1,63 @@
+import Image from 'next/image';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import styles from './diary-edit-image.module.scss';
+import { useRef, useState } from 'react';
+import { diaryImageUpload } from '@/api/image-api';
+import { useFormContext } from 'react-hook-form';
+
+export default function DiaryEditImage() {
+  // const [imageId, setImageId] = useState<number | null>(null);
+
+  return (
+    <Swiper spaceBetween={10} slidesPerView="auto" tag="div" wrapperTag="ul" className={styles['image-area']}>
+      {Array(5)
+        .fill(0)
+        .map((_, index) => (
+          <SwiperSlide tag="li" className={styles['image-item']} key={index}>
+            <DiaryEditImageItem index={index} />
+          </SwiperSlide>
+        ))}
+    </Swiper>
+  );
+}
+
+export function DiaryEditImageItem({ index }: { index: number }) {
+  const [previewUrl, setPreviewUrl] = useState('');
+  const uploadRef = useRef<HTMLInputElement>(null);
+  const { setValue, getValues } = useFormContext();
+
+  const handlePreview = async () => {
+    const file = uploadRef.current && uploadRef.current.files![0];
+    const fileReader = new FileReader();
+
+    try {
+      const result = (await diaryImageUpload({ images: file! })).data;
+      const values = getValues('images');
+      values ? setValue('images', [...values, result.data[0]]) : setValue('images', [result.data[0]]);
+      console.log(getValues('images'));
+      // setImageId(result.data[0]);
+      // profileMutation.mutateAsync({ imageId: result.data[0], nickname });
+    } catch (error) {
+      throw new Error('이미지 요청하는데 에러가 났어요.');
+    }
+
+    fileReader.readAsDataURL(file!);
+    fileReader.onloadend = () => {
+      setPreviewUrl(fileReader.result as string);
+    };
+  };
+  return (
+    <>
+      <label htmlFor={`image-${index}`}></label>
+      <input type="file" id={`image-${index}`} onChange={handlePreview} ref={uploadRef} />
+      <Image
+        src={previewUrl || `/images/diaries/imageupload-default.svg`}
+        alt=""
+        fill
+        objectFit="cover"
+        objectPosition="center"
+      />
+    </>
+  );
+}

components/diaries/jihye/diary-edit-weather/diary-edit-weather.module.scss → components/diaries/edit/diary-edit-weather/diary-edit-weather.module.scss

@@ -1,5 +1,10 @@
-.weatherContainer {
+.wrapper {
   padding: 0 24px;
+}
+
+.weatherContainer {
+  padding-top: 30px;
+  border-top: 1px solid #d5d9dc;
   margin-bottom: 30px;
   .label {
     padding-left: 10px;

components/diaries/edit/diary-edit-weather/index.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import styles from './diary-edit-weather.module.scss';
+import { WEATHER_TYPES } from '@/lib/constants/diaries-constants';
+import Image from 'next/image';
+import { useFormContext } from 'react-hook-form';
+
+type WeatherType = (typeof WEATHER_TYPES)[number];
+
+interface WeatherItem {
+  defaultWeather?: string;
+}
+
+export default function WeatherItem(props: WeatherItem) {
+  const { setValue } = useFormContext();
+  const [selectedWeather, setSelectedWeather] = useState<string | null>(props.defaultWeather || '맑음');
+
+  if (props.defaultWeather) {
+    setValue('weather', props.defaultWeather);
+  }
+
+  const handleClick = (weather: WeatherType) => {
+    setSelectedWeather(weather.label);
+    setValue('weather', weather.label);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.weatherContainer}>
+        <div className={styles.label}>날씨</div>
+        <div className={styles.weatherIcons}>
+          {WEATHER_TYPES.map((weather) => (
+            <button
+              key={weather.id}
+              type="button"
+              onClick={() => handleClick(weather)}
+              className={selectedWeather === weather.label ? styles.selected : ''}
+            >
+              <Image
+                src={selectedWeather === weather.label ? weather.selectedIcon : weather.icon}
+                alt={weather.label}
+                width={40}
+                height={40}
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

pages/diaries/[diaryId]/edit/index.tsx

@@ -5,13 +5,17 @@ import useRouterId from '@/hooks/utils/use-router-id';
 import { FormProvider, useForm } from 'react-hook-form';
 import Suspensive from '@/components/suspensive/suspensive';
 import MemoItem from '@/components/diaries/edit/memo';
+import WeatherItem from '@/components/diaries/edit/diary-edit-weather';
+import DiaryEditImage from '@/components/diaries/edit/diary-edit-image/diary-edit-image';
 
 export default function DiaryEditPage() {
   const diaryId = +useRouterId('diaryId')!;
   const diaryQuery = useFetchDiaryById(diaryId);
   const methods = useForm<{
     pets: string | string[];
     memo: string;
+    weather: string;
+    images: number[];
   }>();
 
   if (diaryQuery.isLoading) return '';
@@ -30,6 +34,8 @@ export default function DiaryEditPage() {
             <DiaryEditPets />
           </Suspensive>
           <MemoItem />
+          <WeatherItem defaultWeather={diaryQuery.data?.weather} />
+          <DiaryEditImage />
         </FormProvider>
 
         <button type="submit">check</button>