Merge branch 'feauture/diary-edit-weather' of https://github.com/Dong…

…grina/Frontend into feature/story

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+    env: {
+      browser: true,
+      es6: true,
+      node: true,
+    },
+    extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+    parser: '@typescript-eslint/parser', // ESLint 파서를 지정합니다.
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true, // JSX를 파싱할 수 있습니다.
+      },
+      ecmaVersion: 12, // Modern ECMAScript를 파싱할 수 있습니다.
+      sourceType: 'module', // import, export를 사용할 수 있습니다.
+    },
+    plugins: ['@typescript-eslint', 'prettier'],
+
+    rules: {
+      // ESLint 규칙을 지정합니다. extends에서 지정된 규칙을 덮어 쓸수도 있습니다.
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'prettier/prettier': [
+        'error',
+        {
+          endOfLine: 'auto',
+        },
+      ],
+    },
+    settings: {
+      react: {
+        version: 'detect', // 현재 사용하고 있는 react 버전을 eslint-plugin-react가 자동으로 감지합니다.
+      },
+    },
+  };

components/calendar-monthly/pet-checkbox.tsx

@@ -9,10 +9,11 @@ interface PetRadio {
   register:
     | UseFormRegister<IFormInput & FieldValues>
     | UseFormRegister<GrowthDetailsData & FieldValues>
-    | UseFormRegister<DiaryDetail & FieldValues>;
+    | UseFormRegister<{ [key: string]: string[] } & FieldValues>;
   petName: string;
   petImage: string;
   defaultPet?: string;
+  petId: number;
 }
 
 /**
@@ -21,15 +22,16 @@ interface PetRadio {
  * @param {string} petImage - 반려동물 이미지 url
  * @param {string} defaultPet - 수정 페이지에서 체크되어 있어야 하는 반려동물 이름
  */
-export default function PetCheckbox({ register, petName, petImage, defaultPet = '' }: PetRadio) {
+export default function PetCheckbox({ petId, register, petName, petImage, defaultPet = '' }: PetRadio) {
   return (
     <label className={styles.petLabel}>
       <div className={styles.petImageContainer}>
         <input
-          {...register(petName, { validate: (selected: string) => !!selected || '*반려동물을 선택해주세요.' })}
-          value={petName}
+          {...register('pets', { validate: (selected: string) => [selected] || '*반려동물을 선택해주세요.' })}
+          value={petId}
           className={styles.petInput}
           type="checkbox"
+          name="pets"
           defaultChecked={defaultPet === petName}
         />
         <Image className={styles.petImage} src={petImage} alt="반려동물 프로필 사진" fill />

components/diaries/diary-create/diary-create.tsx

@@ -12,8 +12,9 @@ import PetSelect from '@/components/diaries/pet-select';
 import PetCheckbox from '@/components/diaries/pet-checkbox';
 import ImageSkeleton from '@/components/skeleton/image/';
 import { useRouter } from 'next/router';
+import WeatherItem from '../jihye/diary-edit-weather';
 
-interface DiaryData {
+export interface DiaryData {
   content: string;
   weather: string;
   isShare: boolean;
@@ -92,6 +93,7 @@ const DiaryCreate: React.FC = () => {
   };
 
   const onSubmit: SubmitHandler<DiaryData & FieldValues> = async (data) => {
+    console.log(data);
     const completeData = { ...data, images: imageIds };
     try {
       const response = await postDiaries(completeData);
@@ -160,7 +162,7 @@ const DiaryCreate: React.FC = () => {
 
         <hr className={styles.division} />
 
-        <div className={styles.weatherContainer}>
+        {/* <div className={styles.weatherContainer}>
           <div className={styles.weather}>
             <img src="/images/diaries/bar.svg" alt="Weather bar" />
             날씨
@@ -177,7 +179,8 @@ const DiaryCreate: React.FC = () => {
               </button>
             ))}
           </div>
-        </div>
+        </div> */}
+        <WeatherItem setValue={setValue} />
 
         <div className={styles.imagesContainer}>
           {Array.from({ length: 5 }).map((_, index) => (

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

@@ -1,3 +1,8 @@
+.wrapper {
+  border-top: 5px solid #f5f5f5;
+  padding: 0 24px;
+}
+
 .memo {
   font-size: 14px;
   display: block;

components/diaries/edit/memo/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './diary-edit-memo.module.scss';
+import { useFormContext } from 'react-hook-form';
+
+export default function MemoItem() {
+  const { register } = useFormContext<{ memo: string }>();
+
+  return (
+    <div className={styles.wrapper}>
+      <textarea
+        {...register('memo')}
+        className={styles.memo}
+        id="content.memo"
+        placeholder={`메모\n어떤 일정인지 자세하게 기록하실 수 있어요!`}
+      />
+    </div>
+  );
+}

components/diaries/edit/diary-edit-pets.tsx → components/diaries/edit/pets/diary-edit-pet-list.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import styles from './diary-edit-pets.module.scss';
 import usePetsQuery from '@/hooks/queries/calendar/use-pets-query';
-import DiaryEditPetsItem from '@/components/diaries/edit/diary-edit-pets-item';
+import DiaryEditPetsItem from '@/components/diaries/edit/pets/diary-edit-pets-item';
+import styles from './diary-edit-pet-list.module.scss';
 
-export default function DiaryEditPets() {
+export default function DiaryEditPetList() {
   const petsQuery = usePetsQuery();
 
   return (

components/diaries/edit/diary-edit-pets-item.tsx → components/diaries/edit/pets/diary-edit-pets-item.tsx

@@ -4,21 +4,27 @@ import { DiaryDetail } from '@/types/diary/details';
 import { useFormContext } from 'react-hook-form';
 import PetCheckbox from '@/components/calendar-monthly/pet-checkbox';
 
-export interface DiaryEditPetsItemProps {
+export interface DiaryEditPetItemProps {
   pet: Pet;
   defaultPet?: boolean;
 }
 
-export default function DiaryEditPetsItem({ pet, defaultPet }: DiaryEditPetsItemProps) {
-  const { register } = useFormContext<DiaryDetail>();
+export default function DiaryEditPetItem({ pet, defaultPet }: DiaryEditPetItemProps) {
+  const { register } = useFormContext<{ [key: string]: string[] }>();
 
   return defaultPet ? (
     <li>
-      <PetCheckbox petImage={pet.imageUrl} petName={pet.name} defaultPet={pet.name} register={register} />
+      <PetCheckbox
+        petImage={pet.imageUrl}
+        petName={pet.name}
+        defaultPet={pet.name}
+        register={register}
+        petId={pet.petId}
+      />
     </li>
   ) : (
     <li>
-      <PetCheckbox petImage={pet.imageUrl} petName={pet.name} register={register} />
+      <PetCheckbox petImage={pet.imageUrl} petName={pet.name} register={register} petId={pet.petId} />
     </li>
   );
 }

components/diaries/edit/diary-edit-header.tsx → components/diaries/edit/pets/diary-edit-pets.tsx

@@ -1,9 +1,9 @@
-import styles from './diary-edit-header.module.scss';
-import DiaryEditPets from '@/components/diaries/edit/diary-edit-pets';
 import { useFormContext } from 'react-hook-form';
+import DiaryEditPetList from '@/components/diaries/edit/pets/diary-edit-pet-list';
 import usePetsQuery from '@/hooks/queries/calendar/use-pets-query';
+import styles from './diary-edit-pets.module.scss';
 
-export default function DiaryEditHeader() {
+export default function DiaryEditPets() {
   const petsQuery = usePetsQuery();
   const { setValue } = useFormContext();
 
@@ -17,7 +17,7 @@ export default function DiaryEditHeader() {
         <h2>반려동물 선택</h2>
         <button onClick={handleAllSelectedPet}>전체 선택</button>
       </div>
-      <DiaryEditPets />
+      <DiaryEditPetList />
     </div>
   );
 }

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

@@ -0,0 +1,22 @@
+.weatherContainer {
+  padding: 0 24px;
+  margin-bottom: 30px;
+  .label {
+    padding-left: 10px;
+    border-left: 2px solid var(--text-color-gray);
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+
+  .weatherIcons {
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      height: 40px;
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+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 { UseFormSetValue } from 'react-hook-form';
+import { DiaryData } from '../../diary-create/diary-create';
+
+type WeatherType = (typeof WEATHER_TYPES)[number];
+
+interface WeatherItemProps {
+  setValue: UseFormSetValue<DiaryData>;
+}
+
+export default function WeatherItem({ setValue }: WeatherItemProps) {
+  const [selectedWeather, setSelectedWeather] = useState<string | null>(null);
+
+  const handleClick = (weather: WeatherType) => {
+    setSelectedWeather(weather.id);
+    setValue('weather', weather.id);
+  };
+  return (
+    <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.id ? styles.selected : ''}
+          >
+            <Image
+              src={selectedWeather === weather.id ? weather.selectedIcon : weather.icon}
+              alt={weather.label}
+              width={40}
+              height={40}
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

lib/constants/diaries-constants.ts

@@ -31,4 +31,4 @@ export const WEATHER_TYPES = [
     icon: '/images/diaries/weather7.svg',
     selectedIcon: '/images/diaries/weather7-click.svg',
   },
-];
+] as const;

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

@@ -1,24 +1,39 @@
 import React from 'react';
-import DiaryEditHeader from '@/components/diaries/edit/diary-edit-header';
+import DiaryEditPets from '@/components/diaries/edit/pets/diary-edit-pets';
 import { useFetchDiaryById } from '@/hooks/queries/diary/queries';
 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';
 
 export default function DiaryEditPage() {
   const diaryId = +useRouterId('diaryId')!;
   const diaryQuery = useFetchDiaryById(diaryId);
-  const methods = useForm<{ [key: string]: string }>();
+  const methods = useForm<{
+    pets: string | string[];
+    memo: string;
+  }>();
 
   if (diaryQuery.isLoading) return '';
 
+  const onSubmit = (data: any) => {
+    console.log(data);
+  };
+
+  console.log(diaryQuery.data);
+
   return (
     <main style={{ paddingTop: '54px' }}>
-      <Suspensive isLoading={diaryQuery.isLoading}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
         <FormProvider {...methods}>
-          <DiaryEditHeader />
+          <Suspensive isLoading={diaryQuery.isLoading}>
+            <DiaryEditPets />
+          </Suspensive>
+          <MemoItem />
         </FormProvider>
-      </Suspensive>
+
+        <button type="submit">check</button>
+      </form>
     </main>
   );
 }

types/diary/details.ts

@@ -1,3 +1,20 @@
+export interface DiaryDetails {
+  data: DiaryDetailsData;
+}
+
+export interface DiaryDetailsData {
+  createdDate: Date;
+  authorImage: string;
+  author: string;
+  petProfile: string;
+  content: string;
+  weather: string;
+  favoriteState: boolean;
+  favoriteCount: number;
+  comments: DiaryComment[];
+  isMyDiary: boolean;
+}
+
 export interface DiaryComment {
   commentId: number;
   authorProfile: string;