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 7c3440b..049ccfb 100644 --- a/src/components/features/shop/BuyModal.tsx +++ b/src/components/features/shop/BuyModal.tsx @@ -2,7 +2,7 @@ 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/0?product_name=${item.name}`, { @@ -12,6 +12,7 @@ export const BuyModal = component$(({ showBuyModal, item, mydotory, itemdotory}: }, }) 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.furniture_name} - - {furniture.furniture_name} - -
- - {isSelected && ( -
- { - const value = (e.target as HTMLInputElement).value; - const index = selectedFurnitures.value.findIndex(f => f.furniture_name === furniture.furniture_name); - if (index !== -1) { - const updated = [...selectedFurnitures.value]; - updated[index] = { ...updated[index], x: parseInt(value) || 0 }; - selectedFurnitures.value = updated; - } - }} - class="w-12 px-1 text-center border rounded" - placeholder="X" - /> - { - const value = (e.target as HTMLInputElement).value; - const index = selectedFurnitures.value.findIndex(f => f.furniture_name === furniture.furniture_name); - if (index !== -1) { - const updated = [...selectedFurnitures.value]; - updated[index] = { ...updated[index], y: parseInt(value) || 0 }; - selectedFurnitures.value = updated; - } - }} - class="w-12 px-1 text-center border rounded" - placeholder="Y" - />
- )} - - ); - } - )) - : + + {/* 위치 수정 입력창 */} +
+ + { + 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" ? (
@@ -346,9 +487,14 @@ export default component$(() => {
{/*
} @@ -103,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 ae3f9e9..328a475 100644 --- a/src/routes/[username]/diary/[diary_id]/edit/index.tsx +++ b/src/routes/[username]/diary/[diary_id]/edit/index.tsx @@ -11,12 +11,12 @@ interface FileInfo { lastModified: number; url: string; } -interface DiaryData { - content: string; - title: string; - category: string; - images: File[]; -} +// 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; @@ -45,7 +45,7 @@ export default component$(() => { content.value = diaryData.value.content; title.value = diaryData.value.title; category.value = diaryData.value.category; - selectedImages.value = diaryData.value.images; + // selectedImages.value = diaryData.value.images; }) const handleFileSelect = $(async (selectedFile: File) => { if (selectedFile && selectedFile.type.startsWith('image/')) { @@ -118,6 +118,12 @@ export default component$(() => { + @@ -142,11 +148,7 @@ export default component$(() => {
))} - +
@@ -187,7 +189,19 @@ export default component$(() => {

소중한 순간들을 기록하고 공유하세요

- + {/* { + const files = (e.target as HTMLInputElement).files; + if (files && files.length > 0) { + await handleFileSelect(files[0]); + } + }} + /> */}
{ await handleFileSelect(files[0]); } }} - onClick$={async () => { - if (fileRef.value) { - try { - - console.log('업로드됨:', { - file: fileRef.value, - fileInfo: fileInfo.value - }); - - // 업로드 후 초기화 - fileInfo.value = null; - fileRef.value = null; - showPhotoUploadModal.value = false; - } catch (err) { - console.error('업로드 실패:', err); - error.value = '파일 업로드 중 오류가 발생했습니다.'; - } - } - }} + // onClick$={(e) => { + // // input 클릭 트리거 + // e.stopPropagation(); + // console.log("click"); + // fileInputRef.value?.click(); + // }} > {fileInfo.value ? (
diff --git a/src/routes/[username]/diary/[diary_id]/index.tsx b/src/routes/[username]/diary/[diary_id]/index.tsx index 95e3e2f..dca2998 100644 --- a/src/routes/[username]/diary/[diary_id]/index.tsx +++ b/src/routes/[username]/diary/[diary_id]/index.tsx @@ -1,4 +1,4 @@ -import { component$, $, useSignal, useContext } from "@builder.io/qwik"; +import { component$, $, } from "@builder.io/qwik"; import { DocumentHead, useNavigate, routeLoader$, Link, useLocation } from "@builder.io/qwik-city"; import axios from "axios"; import { getCookie } from "~/utils/cookie"; @@ -7,7 +7,7 @@ import { getCookie } from "~/utils/cookie"; type DiaryResponse = {diary: DiaryEntry, myInfo: number } | { detail: string }; -export const useDiaryLoader = routeLoader$(async ({params, cookie, status}) => { +export const useDiaryLoader = routeLoader$(async ({params, cookie}) => { const diary_id = params.diary_id; try { console.log(diary_id); @@ -56,36 +56,63 @@ export default component$(() => { const { diary, myInfo } = diaryLoader.value; return ( -
-
-

{diary.title}

-
- {diary.user_id === myInfo && ( -
- - - - +
+
+
+

{diary.title}

+ {diary.user_id === myInfo && ( +
+ + + + +
+ )}
- )} +

+ {new Date(diary.created_at).toLocaleDateString('ko-KR', { + year: 'numeric', + month: 'long', + day: 'numeric', + weekday: 'long' + })} +

-
- -
-
- {diaryLoader.value.diary.images.map((image, index) => ( - {`일기 - ))} -
- -

{diaryLoader.value.diary.content}

+ +
+ {diary.images.length > 0 && ( +
+ {diary.images.map((image, index) => ( + {`일기 + ))} +
+ )} + +
+

+ {diary.content} +

+
{('detail' in diaryLoader.value) && ( -
-

일기가 없습니다.

+
+

일기를 찾을 수 없습니다.

)}
diff --git a/src/routes/[username]/diary/index.tsx b/src/routes/[username]/diary/index.tsx index 79f0d1d..26b4cd9 100644 --- a/src/routes/[username]/diary/index.tsx +++ b/src/routes/[username]/diary/index.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, $, useVisibleTask$, useContext } from "@builder.io/qwik"; +import { component$, useSignal, $, useContext, useVisibleTask$ } from "@builder.io/qwik"; import type { DocumentHead } from "@builder.io/qwik-city"; import { useNavigate, useLocation, Link, routeLoader$ } from "@builder.io/qwik-city"; import axios from "axios"; @@ -32,7 +32,7 @@ export default component$(() => { }); const userData = useContext(AppStateContext); const searchQuery = useSignal(''); - const selectedMonth = useSignal(new Date().getMonth()); + const selectedMonth = useSignal(new Date().getMonth() + 1); const showMonth = useSignal(false); const handleMonthChange = $(() => { showMonth.value = !showMonth.value; @@ -40,14 +40,16 @@ export default component$(() => { const handleMonthSelect = $((month : number) => { selectedMonth.value = month; console.log(selectedMonth.value); - filteredEntries.value = entries.value.filter((entry) => { + filteredEntries.value = [...entries.value.filter((entry) => { const entryMonth = new Date(entry.created_at).getMonth() + 1; - return entryMonth === selectedMonth.value; - }); + return entryMonth === month; + })]; console.log(filteredEntries.value); showMonth.value = false; }); - + useVisibleTask$(() => { + handleMonthSelect(new Date().getMonth() + 1); + }); const handleSearch = $(() => { if(searchQuery.value === '') { filteredEntries.value = [...entries.value]; @@ -92,7 +94,7 @@ export default component$(() => {
-
+
@@ -100,8 +102,8 @@ export default component$(() => { 날짜
- { filteredEntries.value.map((entry, index) => ( -
+ { filteredEntries.value.map((entry) => ( +
{entry.title} {new Date(entry.created_at).toLocaleString()} diff --git a/src/routes/[username]/diary/write/index.tsx b/src/routes/[username]/diary/write/index.tsx index 609d0c5..051a680 100644 --- a/src/routes/[username]/diary/write/index.tsx +++ b/src/routes/[username]/diary/write/index.tsx @@ -90,12 +90,18 @@ export default component$(() => { bind:value={title} type="text" placeholder="제목을 입력해주세요." - class="w-full text-2xl font-bold p-2 focus:outline-none" + class="w-full text-2xl font-bold p-2 text-black focus:outline-none" />
+ @@ -104,7 +110,7 @@ export default component$(() => { {/* Image upload and preview section */}
-
+
{selectedImages.value.map((image, index) => (
{ />
))} -
@@ -133,7 +134,7 @@ export default component$(() => { ref={textareaRef} bind:value={content} placeholder="본문을 입력해주세요" - class="w-full min-h-[70vh] p-4 bg-white border border-text-default rounded-lg focus:outline-none resize-none leading-relaxed whitespace-pre-wrap" + class="w-full min-h-[50vh] p-4 bg-white border border-text-default rounded-lg focus:outline-none resize-none leading-relaxed whitespace-pre-wrap" style={{ backgroundImage: 'linear-gradient(#f1f1f1 1px, transparent 1px)', backgroundSize: '100% 1.5rem', @@ -143,13 +144,6 @@ export default component$(() => { }} />
-
- {selectedImages.value.map((file, index) => ( -
- {`Preview -
- ))} -
{showPhotoUploadModal.value &&
showPhotoUploadModal.value = false}>
e.stopPropagation()}> diff --git a/src/routes/[username]/guestbook/index.tsx b/src/routes/[username]/guestbook/index.tsx index 2871f5e..80bdd2b 100644 --- a/src/routes/[username]/guestbook/index.tsx +++ b/src/routes/[username]/guestbook/index.tsx @@ -1,6 +1,6 @@ -import { component$, useSignal, $, useVisibleTask$} from "@builder.io/qwik"; +import { component$, useSignal, $, useVisibleTask$, useTask$} from "@builder.io/qwik"; import type { DocumentHead } from "@builder.io/qwik-city"; -import { routeLoader$, useLocation } from "@builder.io/qwik-city"; +import { routeLoader$ } from "@builder.io/qwik-city"; import { getCookie } from "~/utils/cookie"; import axios from "axios"; import DeleteModal from "~/components/features/guestbook/DeleteModal"; @@ -60,8 +60,6 @@ export const useGuestbookLoader = routeLoader$(async ({params, cookie}) => { } }); export default component$(() => { - const location = useLocation(); - const username = location.params.username; const loaderData = useGuestbookLoader(); const messages = useSignal([]); const newMessage = useSignal(''); @@ -69,13 +67,14 @@ export default component$(() => { const showDeleteModal = useSignal(false); const selectedMessage = useSignal({} as GuestbookContent); const updatedMessage = useSignal(''); + const diaryContainer = useSignal(); const refreshMessages = $(async () => { try { const res = await axios.get(`http://localhost:8000/api/guestbook/${loaderData.value.targetUser.id}`); messages.value = res.data; console.log(messages.value + " loader"); } catch (error) { - + console.error(error); console.log("방명록 가져오기 실패" +loaderData.value.targetUser.id); } }); @@ -84,6 +83,16 @@ export default component$(() => { refreshMessages(); }); + useTask$(({track}) => { + track(() => messages.value); + // setTimeout(() => { + if (diaryContainer.value) { + setTimeout(() => { + diaryContainer.value!.scrollTop = diaryContainer.value!.scrollHeight; + }, 0); + } + // }, 100); + }); const handleSubmit = $(async () => { if (!newMessage.value.trim()) return; try { @@ -127,7 +136,7 @@ export default component$(() => { return (
{showDeleteModal.value && } -
+
{messages.value.map((msg) => (
diff --git a/src/routes/[username]/index.tsx b/src/routes/[username]/index.tsx index 983a426..eb9401d 100644 --- a/src/routes/[username]/index.tsx +++ b/src/routes/[username]/index.tsx @@ -30,15 +30,12 @@ export const useDataLoader = routeLoader$(async ({params, cookie}) => { // console.log(userid.data.id + "<- 이것은 아이디"); const user = await axios.get(`http://localhost:8000/api/user/profile/${params.username}`); - const [room, avatar, friendRequest, diaries] = await Promise.all([ + const [room, avatar, friendRequest, diaries, guestbooks] = await Promise.all([ axios.get(`http://localhost:8000/api/room/layout/${user.data.id}`, { headers }), axios.get(`http://localhost:8000/api/avatar/${user.data.id}`, { headers }), axios.get(`http://localhost:8000/api/friendship/pending`, { headers }), - axios.get(`http://localhost:8000/api/diary/w/${user.data.id}?skip=0&limit=6`, { - headers: { - Authorization: `Bearer ${cookie.get("access_token")?.value}`, - }, - }), + axios.get(`http://localhost:8000/api/diary/w/${user.data.id}?skip=0&limit=6`, { headers }), + axios.get(`http://localhost:8000/api/guestbook/${user.data.id}`, { headers }), ]); // const avatar = await axios.get(`http://localhost:8000/api/avatar/${userid.data.id}`, { @@ -48,10 +45,11 @@ export const useDataLoader = routeLoader$(async ({params, cookie}) => { // }); // console.log(res.data+ "다이어리 데이터 불러오기"); // console.log("??/" + res.data.diaries); - return {diaries: diaries.data, friendRequest: friendRequest.data as FriendRequest[], userdata: {room: room.data, avatar: avatar.data} }; + // console.log(room.room.room_type); + return {diaries: diaries.data, guestbooks: guestbooks.data, friendRequest: friendRequest.data as FriendRequest[], userdata: {room: room.data, avatar: avatar.data} }; } catch (error : any) { console.error("에러 : " + error.config.url); - return {diaries: [], friendRequest: [] as FriendRequest[], userdata: {room: [], avatar: [] } }; + return {diaries: [], guestbooks: [], friendRequest: [] as FriendRequest[], userdata: {room: [], avatar: [] } }; } }); export default component$(() => { @@ -67,12 +65,13 @@ export default component$(() => { }) const handleAcceptFriend = $( async (friendship_id : number) => { try { - console.log(`http://localhost:8000/api/friendship/${friendship_id}/accept`); - const res = await axios.put(`http://localhost:8000/api/friendship/${friendship_id}/accept`, { + console.log(getCookie("access_token")); + const res = await axios.put(`http://localhost:8000/api/friendship/${friendship_id}/accept`, {}, { headers: { - Authorization: `Bearer ${getCookie("access_token")}`, + Authorization: `Bearer ${getCookie("access_token")}`, }, }) + console.log(res.data); data.value.friendRequest = data.value.friendRequest.filter((friend) => friend.id !== friendship_id); } catch (error : any) { @@ -91,7 +90,7 @@ export default component$(() => {

Mini Room

- + 미니룸 이동
@@ -120,12 +119,12 @@ export default component$(() => {
- 다이어리 {data.value.diaries.length}개 + 다이어리 {data.value.diaries.length}개 {userData.username === location.params.username && {showMyFriendsRequest.value = true}} class="flex-1 hover:text-[#4b3c28] cursor-pointer hover:underline">친구 요청 {data.value.friendRequest.length}개}
- 방명록 4개 + 방명록 {data.value.guestbooks.length}개
@@ -141,9 +140,9 @@ export default component$(() => { {data.value.friendRequest.length > 0 ? (
{data.value.friendRequest.map((friend, i) => ( -
-
{friend.friend_username}
- +
+
{friend.friend_username}
+
))}
diff --git a/src/routes/[username]/layout.tsx b/src/routes/[username]/layout.tsx index 5239f08..472f991 100644 --- a/src/routes/[username]/layout.tsx +++ b/src/routes/[username]/layout.tsx @@ -1,12 +1,10 @@ -import { component$, Slot, useServerData, useSignal } from "@builder.io/qwik"; +import { component$, Slot, useSignal } from "@builder.io/qwik"; import { type DocumentHead, RequestHandler, routeLoader$ } from "@builder.io/qwik-city"; import Header from "~/components/layout/Header"; import { AddFriends } from "~/components/features/AddFriends"; import axios from "axios"; -import jwt from "jsonwebtoken"; import { useContextProvider } from "@builder.io/qwik"; import { AppStateContext } from "~/utils/context"; -import { deleteCookie } from "~/utils/cookie"; export const onRequest: RequestHandler = async ({ cookie, sharedMap, redirect , params}) => { const token = cookie.get("access_token")?.value; console.log(token + "이것은 유저페이지로 들어온 token"); diff --git a/src/types/Friends.ts b/src/types/Friends.d.ts similarity index 100% rename from src/types/Friends.ts rename to src/types/Friends.d.ts diff --git a/src/types/diary.ts b/src/types/diary.d.ts similarity index 100% rename from src/types/diary.ts rename to src/types/diary.d.ts diff --git a/src/utils/context.ts b/src/utils/context.ts index 9ddce9b..bc75460 100644 --- a/src/utils/context.ts +++ b/src/utils/context.ts @@ -2,4 +2,5 @@ import { createContextId } from '@builder.io/qwik'; -export const AppStateContext = createContextId('auth-state'); \ No newline at end of file +export const AppStateContext = createContextId('auth-state'); +export const DotoryContext = createContextId('dotory-state'); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index bc92b46..936e3f4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,5 +22,5 @@ /* if you do not use CSS modules, remove this line and delete the typescript-plugin-css-modules module from package.json */ "plugins": [{ "name": "typescript-plugin-css-modules" }] }, - "include": ["src", "./*.d.ts", "./*.config.ts"] + "include": ["src", "src/types", "./*.d.ts", "./*.config.ts"] }