diff --git a/src/components/features/AddFriends.tsx b/src/components/features/AddFriends.tsx index a797ec2..2a1be29 100644 --- a/src/components/features/AddFriends.tsx +++ b/src/components/features/AddFriends.tsx @@ -19,6 +19,7 @@ export const AddFriends = component$(({ showAddFriends }: { showAddFriends: Sign console.log(error); } }) + const errorMessage = useSignal(''); const handleAddFriend = $((username: string) => { try { axios.post(`http://localhost:8000/api/friendship/request`, { @@ -29,10 +30,12 @@ export const AddFriends = component$(({ showAddFriends }: { showAddFriends: Sign }, }) .then((res) => { - + console.log(res.data); + myfriends.value = [...myfriends.value.filter((friend) => friend.username !== username) ]; }) } catch (error : any) { console.log(error.response?.data?.detail); + errorMessage.value = error.response?.data?.ms; } }) const handleSearch = $((query: string) => { @@ -48,6 +51,7 @@ export const AddFriends = component$(({ showAddFriends }: { showAddFriends: Sign }) const handleDeleteFriend = $((friendship_id : number) => { try { + console.log(friendship_id + getCookie("access_token")!); axios.delete(`http://localhost:8000/api/friendship/${friendship_id}`, { headers: { Authorization: `Bearer ${getCookie("access_token")}`, @@ -55,10 +59,11 @@ export const AddFriends = component$(({ showAddFriends }: { showAddFriends: Sign }) .then((res) => { console.log(res.data); - myfriends.value = myfriends.value.filter((friend) => friend.id !== friendship_id); + myfriends.value = [...myfriends.value.filter((friend) => friend.id !== friendship_id) ]; }) } catch (error : any) { console.log(error.response?.data?.detail); + errorMessage.value = error.response?.data?.detail; } }) return ( @@ -115,6 +120,7 @@ export const AddFriends = component$(({ showAddFriends }: { showAddFriends: Sign ))} +

{errorMessage.value}

); diff --git a/src/components/features/diary/UploadImages.tsx b/src/components/features/diary/UploadImages.tsx index 8d3a4de..c31ce08 100644 --- a/src/components/features/diary/UploadImages.tsx +++ b/src/components/features/diary/UploadImages.tsx @@ -1,43 +1,43 @@ -// src/components/PhotoUploadModal.tsx +// // src/components/PhotoUploadModal.tsx -import { component$, useSignal, Signal, $ } from '@builder.io/qwik'; +// import { component$, useSignal, Signal, $ } from '@builder.io/qwik'; -type FileInfo = { - name: string; - size: number; - type: string; - lastModified: number; - url?: string; -}; +// type FileInfo = { +// name: string; +// size: number; +// type: string; +// lastModified: number; +// url?: string; +// }; -export const PhotoUploadModal = component$(({ selectedImages, showPhotoUploadModal }: { selectedImages: Signal, showPhotoUploadModal: Signal }) => { +// export const PhotoUploadModal = component$(({ selectedImages, showPhotoUploadModal }: { selectedImages: Signal, showPhotoUploadModal: Signal }) => { - const fileInfo = useSignal(null); - const fileRef = useSignal(null); - const error = useSignal(''); - const fileInputRef = useSignal(); +// const fileInfo = useSignal(null); +// const fileRef = useSignal(null); +// const error = useSignal(''); +// const fileInputRef = useSignal(); - const handleFileSelect = $(async (selectedFile: File) => { - if (selectedFile && selectedFile.type.startsWith('image/')) { - fileInfo.value = { - name: selectedFile.name, - size: selectedFile.size, - type: selectedFile.type, - lastModified: selectedFile.lastModified, - url: URL.createObjectURL(selectedFile) - }; - fileRef.value = selectedFile; - error.value = ''; - } else { - error.value = '이미지 파일만 업로드 가능합니다.'; - fileInfo.value = null; - fileRef.value = null; - } - }); +// const handleFileSelect = $(async (selectedFile: File) => { +// if (selectedFile && selectedFile.type.startsWith('image/')) { +// fileInfo.value = { +// name: selectedFile.name, +// size: selectedFile.size, +// type: selectedFile.type, +// lastModified: selectedFile.lastModified, +// url: URL.createObjectURL(selectedFile) +// }; +// fileRef.value = selectedFile; +// error.value = ''; +// } else { +// error.value = '이미지 파일만 업로드 가능합니다.'; +// fileInfo.value = null; +// fileRef.value = null; +// } +// }); - if (!showPhotoUploadModal.value) return null; +// if (!showPhotoUploadModal.value) return null; - return ( +// return ( - ); -}); +// ); +// }); diff --git a/src/components/features/shop/BuyModal.tsx b/src/components/features/shop/BuyModal.tsx index 7397821..049ccfb 100644 --- a/src/components/features/shop/BuyModal.tsx +++ b/src/components/features/shop/BuyModal.tsx @@ -2,16 +2,17 @@ import { component$, Signal, $ } from "@builder.io/qwik"; import axios from "axios"; import { getCookie } from "~/utils/cookie"; -export const BuyModal = component$(({ showBuyModal, item, mydotory, itemdotory}: {showBuyModal: Signal, item: any, mydotory: number, itemdotory: number}) => { +export const BuyModal = component$(({ showBuyModal, item, mydotory, itemdotory}: {showBuyModal: Signal, item: any, mydotory: Signal, itemdotory: number}) => { const handleBuy = $(async() => { try { - const res = await axios.post(`http://localhost:8000/api/store/${item.id}?product_name=${item.name}`, { + const res = await axios.post(`http://localhost:8000/api/store/0?product_name=${item.name}`, { }, { headers: { Authorization: `Bearer ${getCookie("access_token")}`, }, }) console.log(res.data); + mydotory.value -= itemdotory; showBuyModal.value = false; } catch (error) { console.log(error); @@ -26,7 +27,7 @@ export const BuyModal = component$(({ showBuyModal, item, mydotory, itemdotory}:

{item.name}

정말 구매하시겠습니까?

-

구매 후 잔액: {mydotory - itemdotory}

+

구매 후 잔액: {mydotory.value - itemdotory}

+ ) + } +
+ + {/* 위치 수정 입력창 */} +
+ + { + furniture.x = parseInt((e.target as HTMLInputElement).value); + } + } + class="w-16 px-2 py-1 text-center border rounded" + /> + + { + furniture.y = parseInt((e.target as HTMLInputElement).value); + } + } + class="w-16 px-2 py-1 text-center border rounded" + /> + + +
+ + ))} + + {/* 배치된 가구가 없을 때 */} + {ownedFurnitures.value.length === 0 && ( +
+

가구가 없습니다.

+

가구를 배치하려면 상점에서 가구를 구매하세요.

+
+ )} - ))) - : + + ) : selectedType.value === "avatar" ? (
@@ -364,9 +487,14 @@ export default component$(() => {
{/*
} @@ -92,18 +148,50 @@ export default component$(() => {
{/* 우측 */} -
+
{data.value.storeData.slice(data.value.storeData.length / 2, data.value.storeData.length).map((item: ShopItem) => ( -
{if(selectedItem.value === item) selectedItem.value = null; else selectedItem.value = item;}}> - {item.name} - {item.name} +
{ + selectedItem.value = selectedItem.value === item ? null : item; + }} + > +
+ {item.name} + {selectedItem.value === item && ( +
+ +
+ )} +
+ + {item.name} +
))}
{showBuyModal.value &&
{showBuyModal.value = false}}> - +
}
diff --git a/src/routes/[username]/diary/[diary_id]/edit/index.tsx b/src/routes/[username]/diary/[diary_id]/edit/index.tsx index 907845d..328a475 100644 --- a/src/routes/[username]/diary/[diary_id]/edit/index.tsx +++ b/src/routes/[username]/diary/[diary_id]/edit/index.tsx @@ -1,44 +1,273 @@ -import { component$, useSignal } from "@builder.io/qwik"; -import { DocumentHead , RequestHandler, routeLoader$} from "@builder.io/qwik-city"; -import { useNavigate } from "@builder.io/qwik-city"; +import { $, component$, useSignal, useVisibleTask$, NoSerialize, useTask$ } from "@builder.io/qwik"; +import { routeLoader$, useLocation, useNavigate } from "@builder.io/qwik-city"; import axios from "axios"; -const diaryLoader = routeLoader$<{ message: string }>(async ({params, cookie, redirect}) => { - - try { - console.log(params.username + "의 방명록 가져오기"); - const myInfo = await axios.get(`http://localhost:8000/api/user/me`, { - headers: { - Authorization: `Bearer ${cookie.get("access_token")?.value}`, - }, - }); - if(myInfo.data.username !== params.username) { - return redirect(302, `/diary/${params.diary_id}`); - } - const res = await axios.get(`http://localhost:8000/api/diary/${params.diary_id}`); - console.log(res.data); - return res.data; - } catch (error : any) { - console.error(error); - return error.response?.data?.detail || 'Diary not found'; +import { noSerialize } from "@builder.io/qwik"; +// import { PhotoUploadModal } from "~/components/features/diary/UploadImages"; +import { getCookie } from "~/utils/cookie"; +interface FileInfo { + name: string; + size: number; + type: string; + lastModified: number; + url: string; +} +// interface DiaryData { +// content: string; +// title: string; +// category: string; +// images: File[]; +// } +export const diaryDataLoader = routeLoader$(async ({params, cookie}) => { + const access_token = cookie.get("access_token"); + const diary_id = params.diary_id; + const diaryData = await axios.get(`http://localhost:8000/api/diary/${diary_id}`, { + headers: { + Authorization: `Bearer ${access_token?.value}`, + }, + }); + return diaryData.data; +}) +export default component$(() => { + const diaryData = diaryDataLoader(); + const content = useSignal(''); + const title = useSignal(''); + const category = useSignal(''); + const selectedImages = useSignal([] ); + const textareaRef = useSignal(); + const nav = useNavigate(); + const location = useLocation(); + const showPhotoUploadModal = useSignal(false); + const fileInfo = useSignal(null); + const fileRef = useSignal | null>(null); + const error = useSignal(''); + // const fileInputRef = useSignal(); + useTask$(() => { + content.value = diaryData.value.content; + title.value = diaryData.value.title; + category.value = diaryData.value.category; + // selectedImages.value = diaryData.value.images; + }) + const handleFileSelect = $(async (selectedFile: File) => { + if (selectedFile && selectedFile.type.startsWith('image/')) { + fileInfo.value = { + name: selectedFile.name, + size: selectedFile.size, + type: selectedFile.type, + lastModified: selectedFile.lastModified, + url: URL.createObjectURL(selectedFile) + }; + fileRef.value = noSerialize(selectedFile); + error.value = ''; + console.log(fileInfo.value); + } else { + error.value = '이미지 파일만 업로드 가능합니다.'; + fileInfo.value = null; + fileRef.value = null; } }); -export default component$(() => { - const navigate = useNavigate(); - const diaryData = diaryLoader(); - - return ( -
-

일기 수정

-
- ); -}); -export const head: DocumentHead = { - title: "일기수정하기", - meta: [ - { - name: "description", - content: "유저가 쓴 일기의 상세정보", + const handleRemoveImage = $((index: number) => { + selectedImages.value = selectedImages.value.filter((_, i) => i !== index); + }); + + const handleSend = $(async () => { + try { + const formData = new FormData(); + formData.append('title', title.value); + formData.append('content', content.value); + formData.append('category', category.value); + + // Append each image file + selectedImages.value.forEach((file) => { + formData.append('file', file); + }); + + await axios.put(`http://localhost:8000/api/diary/${location.params.diary_id}`, formData, { + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: `Bearer ${getCookie("access_token")}`, }, - ], -}; \ No newline at end of file + }); + + nav(`/${location.params.username}/diary`); + } catch (error: any) { + console.error('Error creating diary:', error); + } + }); + useVisibleTask$(({ track }) => { + track(() => content.value); + if (textareaRef.value) { + textareaRef.value.style.height = 'auto'; + textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`; + } + }); + + return ( +
+
+

일기 쓰기

+
+
+ +
+ + + +
+
+ + {/* Image upload and preview section */} +
+
+ {selectedImages.value.map((image, index) => ( +
+ {`Preview + +
+ ))} + +
+ +
+
+