Skip to content

Commit

Permalink
feat: 나눔글 작성 API 연동
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyeseon-han
hyeseon-han committed Feb 28, 2024
1 parent 6f6a232 commit 34a2bd5
Showing 1 changed file with 146 additions and 45 deletions.
191 changes: 146 additions & 45 deletions src/pages/add-share/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,45 @@
import { CameraIcon, CircleCloseIcon } from '@/assets/icons';
import { Button, Input } from '@/components/atoms';
import { CameraIcon, CircleCloseIcon, SearchIcon } from '@/assets/icons';
import { Header, InputLabelContainer, InputSectionContainer } from '@/components/organisms';
import React, { useCallback, useState } from 'react';

import type { ChangeEvent } from 'react';
import { Counter } from '@/components/molecules';
import {
Header,
InputLabelContainer,
InputSectionContainer,
} from '@/components/organisms';
import useCount from '@/hooks/useCount';
import { type NextPage } from 'next';
import Image from 'next/image';
import React, { type ChangeEvent, useState } from 'react';
import type { IngredientDetailType } from '@/types/fridge';
import type { NextPage } from 'next';
import { SelectIngredientTemplate } from '@/components/templates';
import dayjs from 'dayjs';
import useCount from '@/hooks/useCount';
import { usePostShare } from '@/hooks/queries/share';
import usePostUpload from '@/hooks/queries/share/usePostUpload';

interface AddShareData {
title: string;
content: string;
shareTime: string;
shareDate: string;
location: string;
}
const AddSharePage: NextPage = () => {
const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount();
const [selectedImage, setSelectedImage] = useState<File | null>();
const [selectIngredientVisible, setSelectIngrediendtVisible] = useState<boolean>(false);
const [selectedIngredientInfo, setSelectedIngredientInfo] = useState<IngredientDetailType>();
const [data, setData] = useState<AddShareData>({
title: '',
shareDate: '',
shareTime: '12:00:00',
location: '',
content: '',
});
const imageUpload = usePostUpload({
onSuccess: (res) => {
onSubmit(res);
},
});

const addShare = usePostShare();

const onChangeFile = (e: ChangeEvent<HTMLInputElement>) => {
const targetFiles = (e.target as HTMLInputElement).files as FileList;
Expand All @@ -26,74 +52,155 @@ const AddSharePage: NextPage = () => {
setSelectedImage(null);
};

const onUploadImage = useCallback(() => {
if (!selectedImage) {
return;
}

const formData = new FormData();
formData.append('image', selectedImage);

imageUpload.mutate(formData);
}, [selectedImage]);

const onChangeValue = useCallback(
(e: React.ChangeEvent<any>) => {
const { value, name } = e.target;
console.log(e.target);
setData({
...data,
[name]: value,
});
},
[data],
);

const onSubmit = useCallback(
(image: string) => {
console.log(data);
const body = {
title: data.title,
ingredientDetailId: selectedIngredientInfo?.ingredientDetailId as number,
content: data.content,
shareTime: data.shareTime,
shareDate: data.shareDate,
limitPerson: currentCount,
location: data.location,
status: 'SHARE_START',
thumbnailImage: image,
};

addShare.mutate(body);
},
[data],
);

if (selectIngredientVisible) {
return (
<SelectIngredientTemplate
setSelectedIngredientInfo={setSelectedIngredientInfo}
onCloseSelectIngredient={() => {
setSelectIngrediendtVisible(false);
}}
/>
);
}

return (
<div className={'pt-[52px] min-h-screen bg-white'}>
<Header headerTitle={'나눔글 작성'} backgroundColor="white" />
<div className="pt-[16px] px-[20px]">
<InputSectionContainer title={'제목'}>
<Input placeholder="제목" className="w-full mt-[14px]" />
<Input
placeholder="제목"
className="w-full mt-[14px]"
name="title"
value={data?.title}
onChange={onChangeValue}
/>
</InputSectionContainer>

<InputSectionContainer
title={'식자재 정보'}
className="mt-[38px] mb-[14px]"
>
<InputSectionContainer title={'식자재 정보'} className="mt-[38px] mb-[14px]">
<InputLabelContainer label="종류">
<Input
placeholder="냉장고에서 식자재 가져오기"
className="w-full mt-[14px] text-right"
className="flex flex-1 mt-[14px] text-right"
name="ingredientDetailId"
value={selectedIngredientInfo?.name ?? ''}
onChange={onChangeValue}
/>
<button
onClick={() => {
setSelectIngrediendtVisible(true);
}}
className="p-[10px] mt-[14px] ml-[4px] border border-primary1 rounded-[6px]"
>
<SearchIcon width={20} height={20} stroke="#52C5A6" />
</button>
</InputLabelContainer>
<InputLabelContainer label="소비기한">
<Input placeholder="2024.00.00" className="w-full text-right" />
<Input
placeholder="2024.00.00"
className="w-full text-right"
value={
selectedIngredientInfo?.expirationDate
? dayjs(selectedIngredientInfo?.expirationDate).format('YYYY.MM.DD')
: ''
}
/>
</InputLabelContainer>
</InputSectionContainer>

<InputSectionContainer
title={'약속 정보'}
className="mt-[40px] mb-[14px]"
>
<InputSectionContainer title={'약속 정보'} className="mt-[40px] mb-[14px]">
<InputLabelContainer label="날짜">
<Input
placeholder="냉장고에서 식자재 가져오기"
className="w-full mt-[14px] text-right"
type="date"
name="shareDate"
value={data?.shareDate}
onChange={onChangeValue}
/>
</InputLabelContainer>
<InputLabelContainer label="시간">
<Input placeholder="2024.00.00" className="w-full text-right" />
<Input
placeholder="14:00"
className="w-full text-right"
name="shareTime"
value={data?.shareTime}
onChange={onChangeValue}
/>
</InputLabelContainer>
<InputLabelContainer label="장소">
<Input placeholder="2024.00.00" className="w-full text-right" />
<Input
placeholder="ex) 공덕역 4번 출구"
className="w-full text-right"
name="location"
value={data?.location}
onChange={onChangeValue}
/>
</InputLabelContainer>
</InputSectionContainer>

<InputSectionContainer
title={'모집인원'}
className="flex justify-between items-center mt-[40px] mb-[14px]"
>
<InputSectionContainer title={'모집인원'} className="flex justify-between items-center mt-[40px] mb-[14px]">
<Counter
currentCount={currentCount}
handleIncreaseCount={handleIncreaseCount}
handleDecreaseCount={handleDecreaseCount}
/>
</InputSectionContainer>

<InputSectionContainer
title={'상세 설명'}
className="mt-[40px] mb-[14px]"
>
<InputSectionContainer title={'상세 설명'} className="mt-[40px] mb-[14px]">
<textarea
placeholder="나눔할 식자재에 대한 내용을 작성해 주세요."
className="w-full h-[138px] mt-[14px] px-[20px] py-[14px] border border-gray3 outline-none rounded-[6px] text-gray4 body1-medium"
className="w-full h-[138px] mt-[14px] px-[20px] py-[14px] border border-gray3 outline-none rounded-[6px] body1-medium"
maxLength={60}
></textarea>
name="content"
value={data?.content}
onChange={onChangeValue}
/>
</InputSectionContainer>

<InputSectionContainer
title={'사진 등록'}
className="mt-[40px] mb-[14px]"
>
<InputSectionContainer title={'사진 등록'} className="mt-[40px] mb-[14px]">
<div className="flex mt-[12px]">
<label
htmlFor="file"
Expand Down Expand Up @@ -123,10 +230,7 @@ const AddSharePage: NextPage = () => {
className="rounded-lg aspect-square"
/>

<button
className="absolute top-[-8px] right-[-9px]"
onClick={onRemoveImage}
>
<button className="absolute top-[-8px] right-[-9px]" onClick={onRemoveImage}>
<CircleCloseIcon />
</button>
</div>
Expand All @@ -135,10 +239,7 @@ const AddSharePage: NextPage = () => {
</InputSectionContainer>

<div>
<Button
text="작성 완료"
className="w-full my-[30px] bg-primary2 text-white"
/>
<Button text="작성 완료" className="w-full my-[30px] bg-primary2 text-white" onClick={onUploadImage} />
</div>
</div>
</div>
Expand Down

0 comments on commit 34a2bd5

Please sign in to comment.