Feat: 작업중.

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

@@ -0,0 +1,63 @@
+.storyshareContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30px 24px;
+  margin-bottom: 30px;
+}
+
+.storyshare {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-color-gray);
+  border-left: 2px solid var(--text-color-gray);
+  padding-left: 10px;
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 37.69px;
+  height: 20px;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggleSlide {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--disabled-color);
+  transition: 0.4s;
+  border-radius: 27px;
+}
+
+.toggleSlide:before {
+  position: absolute;
+  content: '';
+  height: 16.92px;
+  width: 16.92px;
+  left: 2px;
+  bottom: 1.54px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .toggleSlide {
+  background-color: var(--main-color);
+}
+
+input:checked + .toggleSlide:before {
+  transform: translateX(16.92px);
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './diary-edit-share.module.scss';
+import { useFormContext } from 'react-hook-form';
+
+export default function DiaryEditShare() {
+  const { register } = useFormContext();
+
+  return (
+    <div className={styles.storyshareContainer}>
+      <div className={styles.storyshare}>스토리에 공유하기</div>
+      <label className={styles.toggle}>
+        <input type="checkbox" {...register('isShare')} />
+        <span className={styles.toggleSlide}></span>
+      </label>
+    </div>
+  );
+}

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

@@ -6,11 +6,13 @@
   padding-top: 30px;
   border-top: 1px solid #d5d9dc;
   margin-bottom: 30px;
+
   .label {
     padding-left: 10px;
     border-left: 2px solid var(--text-color-gray);
     font-size: 14px;
     margin-bottom: 12px;
+    color: var(--text-color-gray);
   }
 
   .weatherIcons {

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

@@ -11,18 +11,21 @@ interface WeatherItem {
 }
 
 export default function WeatherItem(props: WeatherItem) {
-  const { setValue } = useFormContext();
-  const [selectedWeather, setSelectedWeather] = useState<string | null>(props.defaultWeather || '맑음');
+  const { setValue, watch } = useFormContext<{ weather: string }>();
+  // const [selectedWeather, setSelectedWeather] = useState<string | null>(props.defaultWeather || '맑음');
 
-  if (props.defaultWeather) {
-    setValue('weather', props.defaultWeather);
-  }
+  // if (props.defaultWeather) {
+  //   setValue('weather', props.defaultWeather);
+  // }
 
   const handleClick = (weather: WeatherType) => {
-    setSelectedWeather(weather.label);
     setValue('weather', weather.label);
   };
 
+  const selectedWeather = watch('weather');
+
+  console.log(selectedWeather);
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.weatherContainer}>

pages/diaries/[diaryId]/edit/index.module.scss

@@ -0,0 +1,4 @@
+.button {
+  margin: 0 24px;
+  height: 46px;
+}

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

@@ -7,39 +7,71 @@ 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';
+import DiaryEditShare from '@/components/diaries/edit/diary-edit-share/diary-edit-share';
+import Button from '@/components/common/button/button';
+import styles from './index.module.scss';
+import diaryApiInstance from '@/api/diaries';
 
 export default function DiaryEditPage() {
   const diaryId = +useRouterId('diaryId')!;
   const diaryQuery = useFetchDiaryById(diaryId);
+
   const methods = useForm<{
-    pets: string | string[];
+    pets: string[];
     memo: string;
     weather: string;
     images: number[];
-  }>();
+    isShare: boolean;
+  }>({
+    defaultValues: async () => {
+      const data = await diaryApiInstance.fetchDiary(diaryId);
+      return {
+        pets: [],
+        memo: '',
+        images: [],
+        isShare: false,
+        weather: data.weather,
+        resetOptions: {
+          keepDirtyValues: true,
+        },
+      };
+    },
+  });
 
   if (diaryQuery.isLoading) return '';
 
   const onSubmit = (data: any) => {
     console.log(data);
   };
 
-  console.log(diaryQuery.data);
+  // console.log(methods.watch('weather'));
+
+  // const handleSubmit = () => {
+  //   console.log('?');
+  //   methods.handleSubmit(onSubmit);
+  // };
+
+  // console.log(diaryQuery.data);
 
   return (
     <main style={{ paddingTop: '54px' }}>
-      <form onSubmit={methods.handleSubmit(onSubmit)}>
-        <FormProvider {...methods}>
-          <Suspensive isLoading={diaryQuery.isLoading}>
-            <DiaryEditPets />
-          </Suspensive>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <DiaryEditPets />
           <MemoItem />
           <WeatherItem defaultWeather={diaryQuery.data?.weather} />
           <DiaryEditImage />
-        </FormProvider>
+          <DiaryEditShare />
 
-        <button type="submit">check</button>
-      </form>
+          <div className={styles.button}>
+            <Button className="primary" type="submit" round>
+              등록하기
+            </Button>
+          </div>
+        </form>
+      </FormProvider>
     </main>
   );
 }
+
+export const getServersideProps = () => {};