imnyang/2025-SSF-Frontend
1
0
Fork 0
mirror of https://github.com/sunrin-ana/2025-SSF-Frontend.git synced 2026-03-09 18:30:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: not

Browse source
This commit is contained in:
juyoungk09 2025-09-13 10:13:39 +09:00
commit 2d95e0bf94
24 changed files with 728 additions and 612 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/features/AddFriends.tsx
View file

@ -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
</div>
))}
</div>
<p class="text-red-500">{errorMessage.value}</p>
</div></div>
</div>
);

70
src/components/features/diary/UploadImages.tsx
View file

@ -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<File[]>, showPhotoUploadModal: Signal<boolean> }) => {
// export const PhotoUploadModal = component$(({ selectedImages, showPhotoUploadModal }: { selectedImages: Signal<File[]>, showPhotoUploadModal: Signal<boolean> }) => {
const fileInfo = useSignal<FileInfo | null>(null);
const fileRef = useSignal<File | null>(null);
const error = useSignal('');
const fileInputRef = useSignal<HTMLInputElement>();
// const fileInfo = useSignal<FileInfo | null>(null);
// const fileRef = useSignal<File | null>(null);
// const error = useSignal('');
// const fileInputRef = useSignal<HTMLInputElement>();
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 (
);
});
// );
// });

5
src/components/features/shop/BuyModal.tsx
View file

@ -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<boolean>, item: any, mydotory: number, itemdotory: number}) => {
export const BuyModal = component$(({ showBuyModal, item, mydotory, itemdotory}: {showBuyModal: Signal<boolean>, item: any, mydotory: Signal<number>, 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}:
<p> {item.name} </p>
<p class="font-bold text-2xl"> 정말 구매하시겠습니까?</p>
<p class="text-gray-500">구매 후 잔액: {mydotory - itemdotory}</p>
<p class="text-gray-500">구매 후 잔액: {mydotory.value - itemdotory}</p>
<div class="flex gap-2">
<button onclick$={handleBuy} class="bg-diary-color hover:bg-diary-icon-hover rounded-lg p-2">
구매하기

1
src/components/layout/Header.tsx
View file

@ -3,7 +3,6 @@ import terminate from "~/assets/images/terminate.svg";
import { useNavigate, useLocation } from "@builder.io/qwik-city";
import { Link } from "@builder.io/qwik-city";
import { deleteCookie, getCookie } from "~/utils/cookie";
import { AddFriends } from "~/components/features/AddFriends";
import axios from "axios";
export default component$(({ showAddFriends }: { showAddFriends: Signal<boolean> }) => {

0
src/components/room/DragRommGrid.tsx
View file

387
src/components/room/RoomGrid.tsx
View file

@ -1,287 +1,128 @@
import { $, component$, useSignal, useStylesScoped$, Signal, useVisibleTask$} from "@builder.io/qwik";
import { component$, useStylesScoped$, Signal } from "@builder.io/qwik";
import { typechecker } from "~/utils/func";
interface FurnitureItem {
name: string;
image_path: string;
x: number;
y: number;
furniture_name: string;
image_path: string;
x: number;
y: number;
}
export default component$(({ furniture, avatar, roomType }: { furniture: Signal<any>, avatar: Signal<any>, roomType: Signal<string> }) => {
useStylesScoped$(STYLES);
// 가구 아이템 상태 관리
const checkedAvatar = useSignal({
avatar_type: "",
top_clothe_type: "",
bottom_clothe_type: ""
});
const furnitureItems = useSignal<FurnitureItem[]>([]);
useVisibleTask$(({ track }) => {
track(() => avatar.value);
console.log(avatar.value);
checkedAvatar.value = {
...avatar.value,
avatar_type: typechecker(avatar.value.avatar_type),
top_clothe_type: typechecker(avatar.value.top_clothe_type),
bottom_clothe_type: typechecker(avatar.value.bottom_clothe_type),
};
furnitureItems.value = [furniture.value];
console.log(checkedAvatar.value);
})
// const furnitureItems = useSignal<FurnitureItem[]>([
// {
// name: '큰 식물1',
// image_path: 'public/funiture/큰 식물.png',
// x: 1,
// y: 1
// },
// {
// name: '녹색 침대1',
// image_path: 'public/funiture/녹색 침대-90.png',
// x: 3,
// y: 3
// },
// {
// name: '쓰레기통열림1',
// image_path: 'public/funiture/쓰레기통열림.png',
// x: 5,
// y: 5
// },
// {
// name: '어항2',
// image_path: 'public/funiture/어항-0.png',
// x: 7,
// y: 7
// }
// ]);
// 현재 드래그 중인 가구
// const draggedItem = useSignal<FurnitureItem | null>(null);
// // 드래그 시작 시 호출
// const handleDragStart = $((item: FurnitureItem, e: Event) => {
// e.preventDefault();
// draggedItem.value = item;
// });
// 드래그 오버 시 기본 동작 방지
const handleDragOver = $((e: Event) => {
e.preventDefault();
});
// 셀 클릭 시 호출
const handleCellClick = $((x: number, y: number, e: Event) => {
e.preventDefault();
console.log(`Cell clicked: (${x}, ${y})`);
furnitureItems.value = furnitureItems.value.map(item =>
item.name === furniture.value?.name
? { ...item, x: x, y: y }
: item
);
// draggedItem.value = null;
});
// 드롭 시 호출
// const handleDrop = $((cellX: number, cellY: number, e: Event) => {
// e.preventDefault();
// if (!draggedItem.value) return;
// // 이미 해당 위치에 다른 가구가 있는지 확인
// const isOccupied = furnitureItems.value.some(
// item => item.x === cellX && item.y === cellY
// );
// if (!isOccupied) {
// // 가구 위치 업데이트
// furnitureItems.value = furnitureItems.value.map(item =>
// item.name === draggedItem.value?.name
// ? { ...item, x: cellX, y: cellY }
// : item
// );
// }
interface SetAvatarType {
avatar_type: string;
top_clothe_type: string;
bottom_clothe_type: string;
}
export default component$(({roomSrc, furnitures, avatars}: {roomSrc: Signal<string>, furnitures: Signal<FurnitureItem[]>, avatars: Signal<SetAvatarType>}) => {
console.log(roomSrc.value);
console.log(furnitures.value);
console.log(avatars.value + " avatars");
useStylesScoped$(STYLES);
// draggedItem.value = null;
// });
// 10x10 그리드 셀 생성
const gridCells = Array.from({ length: 100 }, (_, i) => {
const row = Math.floor(i / 10) + 1; // 1-10
const col = (i % 10) + 1; // 1-10
// 해당 위치의 가구 찾기
const furniture = furnitureItems.value.find(item => item.x === col && item.y === row);
return {
x: col,
y: row,
furniture: furniture ? {
name: furniture.name,
src: furniture.image_path,
} : null
};
});
return (
return (
<div class="room-wrapper">
<img
src={`http://localhost:8000/public/room/${roomType.value}.png`}
class="room"
alt="Room background"
/>
{/* Grid overlay */}
<div class="grid-overlay ">
{gridCells.map((cell) => (
<div
key={`${cell.x}-${cell.y}`}
class="grid-cell"
// onDragOver$={handleDragOver}
// onDrop$={ e => handleDrop(cell.x, cell.y, e)}
onClick$={ e => handleCellClick(cell.x, cell.y, e)}
>
{cell.furniture && (
<img
src={`http://localhost:8000/${cell.furniture.src}`}
alt={cell.furniture.name}
// draggable
// onDragStart$={ e => handleDragStart(furnitureItems.value.find(f => f.name === cell.furniture?.name)!, e)}
/>
)}
</div>
))}
</div>
{/* 배경 */}
<img src={"http://localhost:8000/public/room/"+roomSrc.value+".png"} class="room" />
{/* Avatar */}
<div class="avatar-wrapper">
<img
src={`http://localhost:8000/${checkedAvatar.value.avatar_type}`}
alt={checkedAvatar.value.avatar_type}
/>
<img
src={`http://localhost:8000/${checkedAvatar.value.top_clothe_type}`}
alt={checkedAvatar.value.top_clothe_type}
/>
<img
src={`http://localhost:8000/${checkedAvatar.value.bottom_clothe_type}`}
alt={checkedAvatar.value.bottom_clothe_type}
/>
</div>
{/* 10x10 격자 */}
<div class="grid-overlay">
{Array.from({ length: 100 }).map((_, idx) => {
const item = furnitures.value.find((f: FurnitureItem) => f.x + f.y*10 === idx);
console.log(item);
return (
<div
key={idx+1}
>
{item && <img src={"http://localhost:8000/" + item.image_path} />}
</div>
);
})}
</div>
);
{/* 아바타 */}
<div class="avatar-wrapper">
<img src={"http://localhost:8000/"+typechecker(avatars.value.avatar_type)} />
<img src={"http://localhost:8000/"+typechecker(avatars.value.top_clothe_type)} />
<img src={"http://localhost:8000/"+typechecker(avatars.value.bottom_clothe_type)} />
</div>
</div>
);
});
const STYLES = `
.room-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.room {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.avatar-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 100px;
object-fit: contain;
image-rendering: pixelated;
}
.room-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 700px;
height: 700px;
position: relative;
}
.room {
position: absolute;
z-index: 1 !important;
width: 100%;
height: 100%;
image-rendering: pixelated;
border-radius: 0.5rem;
}
/* Grid */
.grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
z-index: 2;
}
.grid-overlay div {
box-sizing: border-box;
position: relative;
}
.grid-overlay > div {
position: relative;
height: 70px;
width: 100%;
overflow: visible;
}
.grid-overlay > div img {
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.avatar-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.grid-overlay div#oneone>img {
width: 70px;
image-rendering: pixelated;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 700px;
height: 700px;
position: relative;
}
.grid-overlay div#twoone>img {
width: 140px;
image-rendering: pixelated;
position: absolute;
transform: translate(-50%, -50%);
}
.avatar-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
image-rendering: pixelated;
z-index: 99;
}
`;
.room {
position: absolute;
z-index: 1 !important;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
.grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
z-index: 2;
pointer-events: none;
}
.grid-overlay div {
/* border: 1px solid rgba(0,0,0,0.2); */
box-sizing: border-box;
width: 70px;
height: 70px;
position: relative;
}
.grid-overlay div>img {
width: 70px;
height: 70px;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
// .grid-overlay div.oneone > img {
// width: 140px;
// image-rendering: pixelated;
// position: absolute;
// bottom: 0;
// }
// .grid-overlay div.twoone > img {
// width: 140px;
// image-rendering: pixelated;
// position: absolute;
// transform: translate(-50%, -50%);
// }
.avatar-wrapper {
width: 150px;
height: 150px;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.avatar-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
image-rendering: pixelated;
z-index: 99;
}
`;

46
src/components/room/ShowRoomGrid.tsx
View file

@ -21,10 +21,11 @@
export default component$((props: ShowRoomGridProps) => {
console.log(props.roomSrc);
console.log(props.furnitures + " furnitures");
console.log(props.furnitures);
console.log(props.avatars + " avatars");
useStylesScoped$(STYLES);
useVisibleTask$(() => {
});
return (
<div class="room-wrapper">
@ -34,23 +35,23 @@
{/* 10x10 격자 */}
<div class="grid-overlay">
{Array.from({ length: 100 }).map((_, idx) => {
const item = props.furnitures.find((f) => f.x*10 + f.y === idx);
const item = props.furnitures.find((f) => f.x + f.y*10 === idx);
console.log(item);
return (
<div
key={idx}
class={
item?.size === "one"
? "oneone"
: item?.size === "two"
? "twoone"
: undefined
}
style={
item?.size === "two"
? { gridColumn: `span 2`, gridRow: `span 1` }
: undefined
}
// class={
// item?.size === "one"
// ? "oneone"
// : item?.size === "two"
// ? "twoone"
// : undefined
// }
// style={
// item?.size === "two"
// ? { gridColumn: `span 2`, gridRow: `span 1` }
// : undefined
// }
>
{item && <img src={"http://localhost:8000/" + item.image_path} />}
</div>
@ -101,13 +102,20 @@
.grid-overlay div {
/* border: 1px solid rgba(0,0,0,0.2); */
box-sizing: border-box;
position: relative;
width: 70px;
height: 70px;
position: relative;
}
.grid-overlay div>img {
width: 70px;
height: 70px;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
// .grid-overlay div.oneone > img {
// width: 140px;
// image-rendering: pixelated;
@ -121,8 +129,8 @@
// transform: translate(-50%, -50%);
// }
.avatar-wrapper {
width: 100px;
height: 100px;
width: 150px;
height: 150px;
position: absolute;
top: 70%;
left: 50%;

7
src/routes/(auth)/auth/index.tsx
View file

@ -78,6 +78,13 @@ export default component$(() => {
username: userState.username.trim(),
password: userState.password.trim(),
})
const why = await axios.get('http://localhost:8000/api/avatar', {
headers: {
Authorization: `Bearer ${res.data.access_token}`,
},
});
console.log(why.data);
console.log('Login success');
userState.username = '';
userState.password = '';

2
src/routes/(auth)/auth/layout.tsx
View file

@ -7,7 +7,7 @@ export const onGet: RequestHandler = async ({ cookie, redirect }) => {
console.log(jwt + "이것은 auth로 들어온 token");
if (jwt) {
try {
const res = await axios.get('http://localhost:8000/api/user/profile/쌀숭이', {
const res = await axios.get('http://localhost:8000/api/user/me', {
headers: {
Authorization: `Bearer ${jwt}`,
},

2
src/routes/404.tsx
View file

@ -1,4 +1,4 @@
import { component$, Slot } from "@builder.io/qwik";
import { component$ } from "@builder.io/qwik";

10
src/routes/[username]/(store)/layout.tsx
View file

@ -5,6 +5,7 @@ import { DocumentHead } from "@builder.io/qwik-city";
import { useLocation } from "@builder.io/qwik-city";
import axios from "axios";
import { routeLoader$ } from "@builder.io/qwik-city";
// import { DotoryContext } from "~/utils/context";
export const onGet: RequestHandler = async ({ cookie, params, sharedMap}) => {
console.log(params.username + "의 상점 페이지로 들어옴");
@ -28,16 +29,15 @@ export const useDotory = routeLoader$(({sharedMap}) => {
export default component$(() => {
const location = useLocation();
const dotory = useDotory();
// console.log(location.url.pathname);
// console.log(location.params.username+"/store");
console.log(location.url.pathname);
console.log("/"+location.params.username+"/store/");
return (
<div class="w-full h-full flex flex-col">
<div class="flex justify-center flex-col gap-4 p-2 items-center w-full">
<div class="flex items-center justify-between w-full bg-diary-color rounded-lg p-2">
<div class="flex md:flex-row flex-col gap-2">
<Link href={`/${location.params.username}/store`} class={`${location.url.pathname === `/${location.params.username}/store` ? "bg-[#FAD659]" : "bg-white"} text-gray-800 px-4 py-2 rounded-lg font-medium`}>상점 <i class="bi bi-shop"></i></Link>
<Link href={`/${location.params.username}/room`} class={`${location.url.pathname === `/${location.params.username}/room` ? "bg-[#FAD659]" : "bg-white"} text-gray-800 px-4 py-2 rounded-lg font-medium`}>방</Link>
<Link href={`/${location.params.username}/store`} class={`${location.url.pathname === `/${location.params.username}/store/` ? "bg-white" : "bg-button-color-3"} text-gray-800 px-4 py-2 rounded-lg font-medium`}>상점 <i class="bi bi-shop"></i></Link>
<Link href={`/${location.params.username}/room`} class={`${location.url.pathname === `/${location.params.username}/room/` ? "bg-white" : "bg-button-color-3"} text-gray-800 px-4 py-2 rounded-lg font-medium`}>방</Link>
</div>
<div class="flex md:flex-row flex-col">
<div class="ml-auto bg-[#CC8A6A] text-default px-4 py-2 rounded-lg font-medium">도토리: {dotory.value}</div>

392
src/routes/[username]/(store)/room/index.tsx
View file

@ -1,4 +1,4 @@
import { $, component$, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
import { $, component$, useSignal, useVisibleTask$} from "@builder.io/qwik";
import { DocumentHead } from "@builder.io/qwik-city";
import RoomGrid from "~/components/room/RoomGrid";
import { typechecker } from "~/utils/func";
@ -11,22 +11,28 @@ interface Furniture {
x : number;
y : number;
}
interface Avatar {
id: number;
user_id: number;
avatar_type: {
name: string;
path: string
},
top_clothe_type: {
name: string;
path: string
},
bottom_clothe_type: {
name: string;
path: string
}
interface SendFurniture {
name: string;
image_path : string;
}
// interface Avatar {
// id: number;
// user_id: number;
// avatar_type: {
// name: string;
// path: string
// },
// top_clothe_type: {
// name: string;
// path: string
// },
// bottom_clothe_type: {
// name: string;
// path: string
// }
// }
interface SetAvatarType {
avatar_type: string;
top_clothe_type: string;
@ -37,13 +43,13 @@ interface RoomType {
image_path: string;
}
interface Room {
id: number;
user_id: number;
room_type: string;
room_name: string;
room_image_path: string;
}
// interface Room {
// id: number;
// user_id: number;
// room_type: string;
// room_name: string;
// room_image_path: string;
// }
export const useRoomLoader = routeLoader$(async ({cookie}) => {
const headers = {
Authorization: `Bearer ${cookie.get("access_token")?.value}`,
@ -64,57 +70,186 @@ export const useRoomLoader = routeLoader$(async ({cookie}) => {
})
export default component$(() => {
const data = useRoomLoader();
const selectedFurnitures = useSignal<Array<Furniture & {x?: number, y?: number}>>([]);
// const navigate = useNavigate();
const reloadPage = $(() => {
window.location.reload();
});
// 1. 소유한 가구 데이터 (layout API에서 가져옴)
const ownedFurnitures = useSignal<SendFurniture[]>([]);
// 2. 현재 배치된 가구 데이터 (room/my API에서 가져옴)
const placedFurnitures = useSignal<Furniture[]>([]);
// 3. 현재 선택된 가구 (새로 배치하려는 가구만) - 제거
// const selectedFurniture = useSignal<Furniture | null>(null);
const selectedType = useSignal<"furniture" | "avatar" | "background">("furniture");
const editingPosition = useSignal<number | null>(null);
// const editingPosition = useSignal<number | null>(null);
const selectedRoomType = useSignal("room_1");
const selectedAvatar = useSignal<SetAvatarType>({
avatar_type: "",
top_clothe_type: "",
bottom_clothe_type: ""
});
useVisibleTask$(() => {
const mergedFurnitures = useSignal<Furniture[]>([] as Furniture[]);
// 오류 상태 관리
const errorMessage = useSignal<string>("");
const successMessage = useSignal<string>("");
useVisibleTask$(async () => {
// 기본 데이터 설정
selectedRoomType.value = data.value.myData.room.room.room_type;
selectedAvatar.value.avatar_type = data.value.myData.avatar.avatar_type.name;
selectedAvatar.value.top_clothe_type = data.value.myData.avatar.top_clothe_type.name;
selectedAvatar.value.bottom_clothe_type = data.value.myData.avatar.bottom_clothe_type.name;
ownedFurnitures.value = data.value.selectionData.furniture;
placedFurnitures.value = [...data.value.myData.room.furniture];
mergedFurnitures.value = ownedFurnitures.value.map(o => {
const placed = placedFurnitures.value.find(p => p.furniture_name === o.name);
return placed
? placed
: {
furniture_name: o.name,
image_path: o.image_path,
x: -1,
y: -1,
};
});
})
const deleteFurniture = $(async (selectedFurniture : Furniture) => {
// 가구 배치 함수
const placeFurniture = $(async (furniture: Furniture, x: number, y: number) => {
try {
await axios.delete(`http://localhost:8000/api/room/furniture?x=${selectedFurniture.x}&y=${selectedFurniture.y}&furniture_name=${selectedFurniture.furniture_name}`, {headers: {Authorization: `Bearer ${getCookie("access_token")}`}});
selectedFurnitures.value = selectedFurnitures.value.filter((f : Furniture) => f.furniture_name !== selectedFurniture.furniture_name);
} catch (error : any) {console.error(error);}
})
const addFurniture = $(async (selectedFurniture : Furniture) => {
try { await axios.post("http://localhost:8000/api/room/furniture", {furniture_name: selectedFurniture.furniture_name,x: selectedFurniture.x,y: selectedFurniture.y,}, { headers: { Authorization: `Bearer ${getCookie("access_token")}`,},},)
} catch (error : any) {console.error(error);}
})
useTask$(({track}) => {
track(() => selectedFurnitures.value);
try {
for (let i = 0; i < selectedFurnitures.value.length; i++) {
if(data.value.myData.room.room.furniture.some((f : Furniture) => f.furniture_name === selectedFurnitures.value[i].furniture_name)) {deleteFurniture(selectedFurnitures.value[i]);}
else { addFurniture(selectedFurnitures.value[i]);}
await axios.post("http://localhost:8000/api/room/furniture", {
furniture_name: furniture.furniture_name,
x: x,
y: y
}, {
headers: { Authorization: `Bearer ${getCookie("access_token")}` }
});
// 성공 시 placedFurnitures에 추가
if (!mergedFurnitures.value.find(f => f.furniture_name === furniture.furniture_name)) {
mergedFurnitures.value = Array.from(new Set([
...mergedFurnitures.value,
{
furniture_name: furniture.furniture_name, // SendFurniture has 'name' property
image_path: furniture.image_path,
x: x,
y: y
}
]));
placedFurnitures.value = Array.from(new Set([...placedFurnitures.value, furniture]));
}
} catch (error : any) {console.error(error);}
})
else {
mergedFurnitures.value =Array.from(new Set([...mergedFurnitures.value]));
placedFurnitures.value = Array.from(new Set([...placedFurnitures.value]));
}
console.log('Placed fu rniture:', mergedFurnitures.value);
return true;
} catch (error: any) {
console.error('가구 배치 실패:', error);
errorMessage.value = error.response.data.detail;
setTimeout(() => { errorMessage.value = ""; }, 10000);
return false;
}
});
// 가구 제거 함수
const removeFurniture = $(async (furniture: Furniture) => {
console.log(furniture + " furniture");
try {
await axios.delete(`http://localhost:8000/api/room/furniture?x=${furniture.x}&y=${furniture.y}&furniture_name=${furniture.furniture_name}`, {
headers: { Authorization: `Bearer ${getCookie("access_token")}` }
});
placedFurnitures.value = Array.from(new Set([...placedFurnitures.value.filter(f =>
f.furniture_name !== furniture.furniture_name && (f.x !== furniture.x || f.y !== furniture.y)
)]));
mergedFurnitures.value = Array.from(new Set([...mergedFurnitures.value.map(f =>
f.furniture_name === furniture.furniture_name
? { ...f, x: -1, y: -1 }
: f
)]));
return true;
} catch (error: any) {
console.error('가구 제거 실패:', error);
errorMessage.value = `${furniture.furniture_name} 제거에 실패했습니다.`;
setTimeout(() => { errorMessage.value = ""; }, 10000);
return false;
}
});
// 가구 위치 업데이트 함수
const updateFurniturePosition = $(async (furniture:Furniture, newX: number, newY: number) => {
if ((newX < 0 || newX >= 10) || (newY < 0 || newY >= 10)) {
errorMessage.value = "위치가 이상합니다.";
console.log(newX, newY);
setTimeout(() => { errorMessage.value = ""; }, 10000);
return false;
}
try {
const foundedFurniture = mergedFurnitures.value.find(f => f.x === newX && f.y === newY)
if (foundedFurniture) {
await removeFurniture(foundedFurniture);
}
//같은 이름으 가구가 이미 있나
console.log(placedFurnitures.value, furniture + " furniture");
const foundedFurniture2 = placedFurnitures.value.find(f => f.furniture_name === furniture.furniture_name)
if (foundedFurniture2) {
await removeFurniture(foundedFurniture2);
}
// 새 위치에 가구 배치
console.log(furniture + " 가구 움직임");
await placeFurniture(furniture, newX, newY);
return true;
} catch (error: any) {
console.error('가구 위치 업데이트 실패:', error);
return false;
}
});
const handleChange = $( async () => {
try {
await axios.patch("http://localhost:8000/api/room/", {type: selectedRoomType.value}, {headers: {Authorization: `Bearer ${getCookie("access_token")}`}});
await axios.put("http://localhost:8000/api/avatar", {avatar_type: selectedAvatar.value.avatar_type,top_clothe_type: selectedAvatar.value.top_clothe_type,bottom_clothe_type: selectedAvatar.value.bottom_clothe_type,}, {headers: {Authorization: `Bearer ${getCookie("access_token")}`}});
} catch (error) {console.log(error);}
} catch (error) {console.log(error);}
})
return (
<div class="flex flex-col h-full p-4">
<h1 class="text-2xl font-bold text-[#4b3c28] mb-6">내 방 꾸미기</h1>
<div class="flex flex-row justify-between items-center mb-4">
<h1 class="text-2xl font-bold text-[#4b3c28]">내 방 꾸미기</h1>
{/* 오류 메시지 표시 */}
{errorMessage.value && (
<div class="px-2 bg-red-100 border border-red-400 text-red-700 rounded-lg">
{errorMessage.value?errorMessage.value:" "}
</div>
)}
{/* 성공 메시지 표시 */}
{successMessage.value && (
<div class=" bg-green-100 border border-green-400 text-green-700 rounded-lg">
{successMessage.value?successMessage.value:" "}
</div>
)}
</div>
<div class="flex flex-col md:flex-row gap-6 flex-1">
{/* Room Preview */}
<div class="flex-1 bg-white rounded-xl border border-gray-200 p-4">
<div class="h-full flex items-center justify-center">
<RoomGrid furniture={selectedFurnitures} avatar={selectedAvatar} roomType={selectedRoomType} />
<RoomGrid
furnitures={placedFurnitures}
avatars={selectedAvatar}
roomSrc={selectedRoomType}
/>
</div>
</div>
@ -164,82 +299,88 @@ export default component$(() => {
<div class="flex-1 overflow-y-auto p-4">
<div class="flex flex-col gap-3">
{selectedType.value === "furniture" ? (
data.value.selectionData.furniture.map((furniture: Furniture) => {
const isSelected = selectedFurnitures.value.some(f => f.furniture_name === furniture.furniture_name);
const selectedItem = selectedFurnitures.value.find(f => f.furniture_name === furniture.furniture_name);
return (
<div key={furniture.furniture_name} class="flex flex-col items-center gap-2">
<div
class={`flex flex-col items-center gap-2 rounded-t-lg ${isSelected ? 'ring-2 ring-yellow-400' : ''}`}
onClick$={() => {
if (isSelected) {
selectedFurnitures.value = selectedFurnitures.value.filter(
item => item.furniture_name !== furniture.furniture_name
);
} else {
selectedFurnitures.value = [...selectedFurnitures.value, {
...furniture,
x: 0,
y: 0
}];
<div class="space-y-4">
{/* 배치된 가구 목록 - 각각 입력창 표시 */}
<div class="space-y-3">
{mergedFurnitures.value.map((furniture: Furniture) => (
<div key={`${furniture.furniture_name}-${furniture.x}-${furniture.y}`} class="bg-white border border-text-default rounded-lg p-4">
<div class="flex items-center gap-3 mb-3">
<img
src={`http://localhost:8000/${furniture.image_path}`}
alt={furniture.furniture_name}
style={{imageRendering: "pixelated"}}
class="object-contain w-12 h-12"
/>
<div>
<h5 class="font-medium text-text-default">
{furniture.furniture_name}
</h5>
{furniture.x !== -1 && furniture.y !== -1 && (
<p class="text-sm text-diary-icon-hover">
현재 위치: ({furniture.x}, {furniture.y})
</p>
)}
</div>
{furniture.x !== -1 && furniture.y !== -1 && (
<button
onClick$={() => {removeFurniture(furniture); reloadPage();}}
class="ml-auto px-3 py-1 bg-button-color-2 text-white text-sm rounded hover:bg-button-color-2-hover"
>
제거
</button>
)
}
}}
>
<img
src={`http://localhost:8000/${furniture.image_path}`}
alt={furniture.furniture_name}
style={{imageRendering: "pixelated"}}
class="object-contain w-24 h-24"
/>
<span class="text-center font-bold rounded-b-lg w-24 h-12 bg-[#E5E2B6] flex items-center justify-center">
{furniture.furniture_name}
</span>
</div>
{isSelected && (
<div class="flex gap-2 mt-1">
<input
type="number"
min="1"
max="10"
value={selectedItem?.x || ''}
onInput$={(e) => {
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"
/>
<input
type="number"
min="1"
max="10"
value={selectedItem?.y || ''}
onInput$={(e) => {
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"
/>
</div>
)}
</div>
);
}
))
:
{/* 위치 수정 입력창 */}
<div class="flex gap-3 items-center">
<label class="text-sm font-medium text-green-900">X:</label>
<input
type="number"
min="0"
max="9"
value={furniture.x === -1 ? 1 : furniture.x}
onInput$={
(e) => {
furniture.x = parseInt((e.target as HTMLInputElement).value);
}
}
class="w-16 px-2 py-1 text-center border rounded"
/>
<label class="text-sm font-medium text-green-900">Y:</label>
<input
type="number"
min="0"
max="9"
value={furniture.y === -1 ? 1 : furniture.y}
onInput$={
(e) => {
furniture.y = parseInt((e.target as HTMLInputElement).value);
}
}
class="w-16 px-2 py-1 text-center border rounded"
/>
<button
onClick$={() => {updateFurniturePosition(furniture, furniture.x === -1 ? 1 : furniture.x, furniture.y === -1 ? 1 : furniture.y); reloadPage();}}
class="ml-auto px-3 py-1 bg-button-color-2 text-white text-sm rounded hover:bg-button-color-2-hover"
>
추가
</button>
</div>
</div>
))}
{/* 배치된 가구가 없을 때 */}
{ownedFurnitures.value.length === 0 && (
<div class="text-center py-8 text-gray-500">
<p>가구가 없습니다.</p>
<p class="text-sm">가구를 배치하려면 상점에서 가구를 구매하세요.</p>
</div>
)}
</div>
</div>
) :
selectedType.value === "avatar" ? (
<div class="flex flex-col gap-3 ">
<div>
@ -346,9 +487,14 @@ export default component$(() => {
<div class="flex gap-2">
<button
class="flex-1 bg-[#FAD659] hover:bg-[#f8ce3a] text-[#4b3c28] font-bold py-2 px-4 rounded-lg transition-colors"
onClick$={() => {handleChange() }}
onClick$={(e) => { if (selectedType.value === "furniture") {
e.preventDefault();
} else {
handleChange();
reloadPage();
}}}
>
저장하기
{selectedType.value === "furniture" ? "가구를 배치해보세요" : "아바타 & 배경 저장하기"}
</button>
{/* <button
class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg transition-colors"

175
src/routes/[username]/(store)/store/index.tsx
View file

@ -1,8 +1,8 @@
import { component$, useSignal } from "@builder.io/qwik";
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { DocumentHead, routeLoader$ } from "@builder.io/qwik-city";
import axios from "axios";
import { BuyModal } from "~/components/features/shop/BuyModal";
import RoomGrid from "~/components/room/RoomGrid";
import { BuyModal } from "~/components/features/shop/BuyModal";
// import { getCookie } from "~/utils/cookie";
interface ShopItem {
name: string;
@ -10,27 +10,27 @@ interface ShopItem {
width: number;
// Add other properties that your items might have
}
interface Avatar {
id: number;
user_id: number;
avatar_type: {
name: string;
path: string
},
top_clothe_type: {
name: string,
path: string
},
bottom_clothe_type: {
name: string,
path: string
}
}
interface ShopResponse {
storeData: ShopItem[];
avatarData: Avatar[]; // You might want to define a more specific type for avatar data
dotory: number;
}
// interface Avatar {
// id: number;
// user_id: number;
// avatar_type: {
// name: string;
// path: string
// },
// top_clothe_type: {
// name: string,
// path: string
// },
// bottom_clothe_type: {
// name: string,
// path: string
// }
// }
// interface ShopResponse {
// storeData: ShopItem[];
// avatarData: Avatar[]; // You might want to define a more specific type for avatar data
// dotory: number;
// }
export const useShopLoader = routeLoader$(async ({cookie}) => {
try {
@ -54,15 +54,15 @@ export const useShopLoader = routeLoader$(async ({cookie}) => {
Authorization: `Bearer ${cookie.get("access_token")?.value}`,
},
});
// const dotory = await axios.get(`http://localhost:8000/api/store`, {
// headers: {
// Authorization: `Bearer ${cookie.get("access_token")?.value}`,
// },
// });
const dotory = await axios.get(`http://localhost:8000/api/store`, {
headers: {
Authorization: `Bearer ${cookie.get("access_token")?.value}`,
},
});
console.log(res.data);
console.log(avatar.data);
return {storeData: res.data, avatarData: avatar.data, dotory: 80};
console.log(dotory.data);
return {storeData: res.data, avatarData: avatar.data, dotory: dotory.data};
} catch (error : any) {
console.error(error);
return { storeData: [], avatarData: null, dotory: 0};
@ -70,32 +70,77 @@ export const useShopLoader = routeLoader$(async ({cookie}) => {
});
export default component$(() => {
const data = useShopLoader();
const dotory = useSignal<number>(0);
const selectedItem = useSignal<ShopItem | null>(null);
const showBuyModal = useSignal(false);
useVisibleTask$(() => {
dotory.value = data.value.dotory.dotory as number;
});
return (
<div class="relative flex p-4 justify-between items-center w-full h-full">
{/* 좌측 */}
<div class="grid grid-cols-2 overflow-auto h-full max-h-[calc(100vh-100px)] gap-2">
<div class="grid grid-cols-2 overflow-auto h-full max-h-[calc(100vh-100px)] p-4 gap-8">
{data.value.storeData.slice(0, data.value.storeData.length / 2).map((item: ShopItem) => (
<div key={item.name} class={`flex items-center flex-col gap-2 rounded-t-lg` } onClick$={() => {if(selectedItem.value === item) selectedItem.value = null; else selectedItem.value = item;}}>
<img src={`http://localhost:8000/${item.image_path}`} alt={item.name} style={{imageRendering: "pixelated"}} class={` object-contain w-24 h-24 ${selectedItem.value === item ? "border-[2px] border-[#FAD659]" : ""}`} />
<span class="text-center font-bold rounded-b-lg w-24 h-12 bg-[#E5E2B6]">{item.name}</span>
<div
key={item.name}
class={`flex items-center flex-col gap-2 transition-all duration-200 ${
selectedItem.value === item
? 'scale-105 transform -translate-y-1'
: 'opacity-90 hover:opacity-100'
}`}
onClick$={() => {
selectedItem.value = selectedItem.value === item ? null : item;
}}
>
<div class="relative">
<img
src={`http://localhost:8000/${item.image_path}`}
alt={item.name}
style={{imageRendering: "pixelated"}}
class={`object-contain w-24 h-24 transition-all duration-200 ${
selectedItem.value === item
? 'ring-4 ring-yellow-400 ring-offset-2'
: 'border border-gray-200'
} rounded-lg`}
/>
{selectedItem.value === item && (
<div class="absolute -top-2 -right-2 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
<i class="bi bi-check-lg text-white text-sm"></i>
</div>
)}
</div>
<span class={`text-center font-bold rounded-lg w-24 py-2 transition-colors ${
selectedItem.value === item
? 'bg-yellow-400 text-gray-900'
: 'bg-[#E5E2B6] text-gray-800'
}`}>
{item.name}
</span>
</div>
))}
</div>
{/* 중앙 빈 박스 */}
<div class="w-64 bg-white border-text-default border-[2px] rounded-lg h-80 flex items-center justify-center">
{/* 중앙 미리보기 */}
<div class="w-72 bg-white border-[3px] border-[#4b3c28] rounded-xl h-80 flex items-center justify-center shadow-lg">
{selectedItem.value &&
<div class="flex flex-col gap-4 items-center">
<span class="font-bold">{selectedItem.value.name}</span>
<span>비율: {selectedItem.value.width}</span>
<img src={`http://localhost:8000/${selectedItem.value?.image_path}`} alt="avatar" style={{imageRendering: "pixelated"}} class="object-contain w-32 h-32" />
<div class="flex flex-col items-center p-4 w-full">
<div class="text-center mb-2">
<h3 class="text-lg font-bold text-[#4b3c28]">{selectedItem.value.name}</h3>
<p class="text-sm text-gray-600">비율: {selectedItem.value.width}</p>
</div>
<div class="flex-1 flex items-center justify-center my-2 w-full">
<img
src={`http://localhost:8000/${selectedItem.value?.image_path}`}
alt={selectedItem.value.name}
style={{imageRendering: "pixelated"}}
class="object-contain w-40 h-40"
/>
</div>
<button
class="bg-diary-color hover:bg-diary-icon-hover md:w-full text-black px-4 py-2 rounded-3xl font-bold transition-all duration-200 flex items-center gap-2 z-10 relative"
class="mt-2 bg-[#FAD659] hover:bg-yellow-400 w-full text-[#4b3c28] px-4 py-3 rounded-xl font-bold transition-all duration-200 flex items-center justify-center gap-2 shadow-md hover:shadow-lg"
onClick$={() => {showBuyModal.value = true}}>
구매하기
<i class="bi bi-cart text-3xl text-black"></i>
<i class="bi bi-cart-fill"></i>
<span>구매하기</span>
</button>
</div>
}
@ -103,18 +148,50 @@ export default component$(() => {
</div>
{/* 우측 */}
<div class="grid grid-cols-2 overflow-auto h-full max-h-[calc(100vh-100px)] gap-2">
<div class="grid grid-cols-2 overflow-auto h-full max-h-[calc(100vh-100px)] p-4 gap-8">
{data.value.storeData.slice(data.value.storeData.length / 2, data.value.storeData.length).map((item: ShopItem) => (
<div key={item.name} class={`flex items-center flex-col gap-2 rounded-t-lg` } onClick$={() => {if(selectedItem.value === item) selectedItem.value = null; else selectedItem.value = item;}}>
<img src={`http://localhost:8000/${item.image_path}`} alt={item.name} style={{imageRendering: "pixelated"}} class={` object-contain w-24 h-24 ${selectedItem.value === item ? "border-[2px] border-[#FAD659]" : ""}`} />
<span class="text-center font-bold rounded-b-lg w-24 h-12 bg-[#E5E2B6]">{item.name}</span>
<div
key={item.name}
class={`flex items-center flex-col gap-2 transition-all duration-200 ${
selectedItem.value === item
? 'scale-105 transform -translate-y-1'
: 'opacity-90 hover:opacity-100'
}`}
onClick$={() => {
selectedItem.value = selectedItem.value === item ? null : item;
}}
>
<div class="relative">
<img
src={`http://localhost:8000/${item.image_path}`}
alt={item.name}
style={{imageRendering: "pixelated"}}
class={`object-contain w-24 h-24 transition-all duration-200 ${
selectedItem.value === item
? 'ring-1 ring-yellow-400 ring-offset-1'
: 'border border-gray-200'
} rounded-lg`}
/>
{selectedItem.value === item && (
<div class="absolute -top-2 -right-2 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
<i class="bi bi-check-lg text-white text-sm"></i>
</div>
)}
</div>
<span class={`text-center font-bold rounded-lg w-24 py-2 transition-colors ${
selectedItem.value === item
? 'bg-yellow-400 text-gray-900'
: 'bg-[#E5E2B6] text-gray-800'
}`}>
{item.name}
</span>
</div>
))}
</div>
{showBuyModal.value &&
<div class="bg-opacity-45 z-[1000] fixed inset-0 w-full h-full bg-black"
onclick$={() => {showBuyModal.value = false}}>
<BuyModal showBuyModal={showBuyModal} item={selectedItem.value} mydotory={data.value.dotory} itemdotory={80}/>
<BuyModal showBuyModal={showBuyModal} item={selectedItem.value} mydotory={dotory} itemdotory={100}/>
</div>
}
</div>

65
src/routes/[username]/diary/[diary_id]/edit/index.tsx
View file

@ -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$(() => {
<button onClick$={() => nav(`/${location.params.username}/diary`)}>
<i class="bi bi-trash-fill text-3xl text-black"></i>
</button>
<button
class="px-2"
onClick$={() => showPhotoUploadModal.value = true}
>
<i class="bi bi-image-fill text-black text-3xl"></i>
</button>
<button onClick$={() => handleSend()}>
<i class="bi bi-send-fill text-3xl text-black"></i>
</button>
@ -142,11 +148,7 @@ export default component$(() => {
</button>
</div>
))}
<button
onClick$={() => showPhotoUploadModal.value = true}
>
<i class="bi bi-image-fill text-black text-2xl"></i>
</button>
</div>
</div>
@ -187,7 +189,19 @@ export default component$(() => {
<p class="text-xs p-2 text-gray-500 text-center border-b-2 border-black mb-6">
소중한 순간들을 기록하고 공유하세요
</p>
{/* <input
ref={fileInputRef}
type="file"
accept="image/*"
class="opacity-0"
id="fileInput"
onChange$={async (e) => {
const files = (e.target as HTMLInputElement).files;
if (files && files.length > 0) {
await handleFileSelect(files[0]);
}
}}
/> */}
<div
class={`border-2 border-dashed rounded-md h-32 flex flex-col items-center justify-center text-sm cursor-pointer transition-colors ${
fileInfo.value
@ -202,25 +216,12 @@ export default component$(() => {
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 ? (
<div class="text-center p-4">

81
src/routes/[username]/diary/[diary_id]/index.tsx
View file

@ -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$<DiaryResponse>(async ({params, cookie, status}) => {
export const useDiaryLoader = routeLoader$<DiaryResponse>(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 (
<div class="p-6">
<div class="flex border-b-2 border-text-default justify-between items-center mb-8">
<h1 class="text-2xl font-bold">{diary.title}</h1>
<div class="flex flex-row justify-between items-center">
{diary.user_id === myInfo && (
<div class="flex gap-3">
<button onClick$={handleDelete} >
<i class="bi bi-trash-fill text-3xl text-black"></i>
</button>
<Link href={`/${location.params.username}/diary/${location.params.diary_id}/edit/`}>
<i class="bi bi-send-fill text-3xl text-black"></i>
</Link>
<div class="p-6 max-w-6xl mx-auto">
<div class="border-b-2 border-text-default pb-4 mb-8">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold text-gray-800">{diary.title}</h1>
{diary.user_id === myInfo && (
<div class="flex gap-4">
<button
onClick$={handleDelete}
class="text-gray-600 hover:text-red-500 transition-colors"
aria-label="일기 삭제"
>
<i class="bi bi-trash-fill text-2xl"></i>
</button>
<Link
href={`/${location.params.username}/diary/${location.params.diary_id}/edit/`}
class="text-gray-600 hover:text-blue-500 transition-colors"
aria-label="일기 수정"
>
<i class="bi bi-send-fill text-2xl"></i>
</Link>
</div>
)}
</div>
)}
<p class="text-sm text-gray-500 mt-2">
{new Date(diary.created_at).toLocaleDateString('ko-KR', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
})}
</p>
</div>
</div>
<div class="mt-8 flex flex-col gap-4">
<div class="flex gap-4 overflow-auto border-t-[1px] border-b-[1px] border-text-default p-2">
{diaryLoader.value.diary.images.map((image, index) => (
<img key={index} src={`http://localhost:8000/${image}`} alt={`일기 ${index + 1}`} class="max-w-full h-auto max-h-64" />
))}
</div>
<p class="whitespace-pre-wrap ">{diaryLoader.value.diary.content}</p>
<div class="mt-8 space-y-8">
{diary.images.length > 0 && (
<div class="flex overflow-x-auto py-4 gap-4">
{diary.images.map((image, index) => (
<img
src={`http://localhost:8000/${image}`}
alt={`일기 이미지 ${index + 1}`}
class="w-auto h-64 object-contain border border-button-color-2 rounded-lg"
loading="lazy"
/>
))}
</div>
)}
<div class="prose max-w-none">
<p class="whitespace-pre-wrap text-gray-700 leading-relaxed text-lg">
{diary.content}
</p>
</div>
</div>
{('detail' in diaryLoader.value) && (
<div class="flex border-b-2 border-text-default justify-center items-center w-full h-full">
<p>일기가 없습니다.</p>
<div class="text-center py-12">
<p class="text-gray-500">일기를 찾을 수 없습니다.</p>
</div>
)}
</div>

20
src/routes/[username]/diary/index.tsx
View file

@ -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$(() => {
</div>
</div>
<div class="bg-white rounded-lg border-t-2 border-b-2 border-text-default overflow-hidden">
<div class="bg-white border-t-2 border-b-2 border-text-default overflow-hidden">
<div class="divide-y divide-text-default">
<div class="px-6 py-2 bg-diary-color transition-colors cursor-pointer">
<div class="flex items-center justify-between">
@ -100,8 +102,8 @@ export default component$(() => {
<span class="text-sm flex-1 text-end whitespace-nowrap overflow-hidden text-ellipsis text-black font-bold text-default">날짜</span>
</div>
</div>
{ filteredEntries.value.map((entry, index) => (
<div key={index} class="px-6 py-2 hover:bg-gray-50 transition-colors cursor-pointer">
{ filteredEntries.value.map((entry) => (
<div key={entry.id} class="px-6 py-2 hover:bg-gray-50 transition-colors cursor-pointer">
<Link href={`/${location.params.username}/diary/${entry.id}`} class="flex items-center justify-between">
<span class="text-base flex-1 text-center whitespace-nowrap overflow-hidden text-ellipsis font-medium text-default">{entry.title}</span>
<span class="text-sm flex-1 text-end whitespace-nowrap overflow-hidden text-ellipsis font-medium text-default">{new Date(entry.created_at).toLocaleString()}</span>

26
src/routes/[username]/diary/write/index.tsx
View file

@ -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"
/>
<div class="flex gap-3">
<button onClick$={() => nav(`/${location.params.username}/diary`)}>
<i class="bi bi-trash-fill text-3xl text-black"></i>
</button>
<button
class="px-2"
onClick$={() => showPhotoUploadModal.value = true}
>
<i class="bi bi-image-fill text-black text-3xl"></i>
</button>
<button onClick$={() => handleSend()}>
<i class="bi bi-send-fill text-3xl text-black"></i>
</button>
@ -104,7 +110,7 @@ export default component$(() => {
{/* Image upload and preview section */}
<div class="p-4">
<div class="flex gap-2 overflow-x-auto py-2">
<div class="flex gap-2 overflow-x-auto py-1">
{selectedImages.value.map((image, index) => (
<div key={index} class="relative">
<img
@ -114,17 +120,12 @@ export default component$(() => {
/>
<button
onClick$={() => handleRemoveImage(index)}
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center"
class="absolute -top-2 -right-2 bg-button-color-1 text-white rounded-full w-6 h-6 flex items-center justify-center"
>
×
</button>
</div>
))}
<button
onClick$={() => showPhotoUploadModal.value = true}
>
<i class="bi bi-image-fill text-black text-2xl"></i>
</button>
</div>
</div>
@ -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$(() => {
}}
/>
</div>
<div >
{selectedImages.value.map((file, index) => (
<div key={index}>
<img src={URL.createObjectURL(file)} alt={`Preview ${index}`} />
</div>
))}
</div>
{showPhotoUploadModal.value &&
<div class="fixed inset-0 bg-black bg-opacity-45 flex items-center justify-center z-50" onClick$={() => showPhotoUploadModal.value = false}>
<div class="bg-white rounded-lg w-[400px] p-6 shadow-xl relative" onClick$={(e) => e.stopPropagation()}>

21
src/routes/[username]/guestbook/index.tsx
View file

@ -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<GuestbookContent[]>([]);
const newMessage = useSignal('');
@ -69,13 +67,14 @@ export default component$(() => {
const showDeleteModal = useSignal(false);
const selectedMessage = useSignal<GuestbookContent>({} as GuestbookContent);
const updatedMessage = useSignal('');
const diaryContainer = useSignal<HTMLElement>();
const refreshMessages = $(async () => {
try {
const res = await axios.get<GuestbookContent[]>(`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 (
<div class="flex flex-col h-screen bg-gray-50">
{showDeleteModal.value && <DeleteModal messages={messages} showDeleteModal={showDeleteModal} selectedMessage={selectedMessage}/>}
<div class="flex-1 overflow-y-auto p-4 space-y-4 divide-y-2 divide-gray-200">
<div ref={diaryContainer} class="flex-1 overflow-y-auto p-4 space-y-4 divide-y-[1px] divide-gray-200">
{messages.value.map((msg) => (
<div key={msg.id} class="flex relative items-start pt-2 space-x-3">
<div class={`w-14 h-14 rounded-full text-black`}>

33
src/routes/[username]/index.tsx
View file

@ -30,15 +30,12 @@ export const useDataLoader = routeLoader$(async ({params, cookie}) => {
// console.log(userid.data.id + "<- 이것은 아이디");
const user = await axios.get<User>(`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$(() => {
<section class="mb-6">
<div class="flex justify-between">
<h2 class="text-xl font-bold mb-2">Mini Room</h2>
<Link href="/miniroom" class="text-base text-[#4b3c28] font-semibold">
<Link href="room" class="text-base text-[#4b3c28] font-semibold">
<i class="bi bi-caret-right"></i> 미니룸 이동
</Link>
</div>
@ -120,12 +119,12 @@ export default component$(() => {
<div class="flex-1 pt-7 justify-start w-full lg:w-[220px] text-base lg:mt-0">
<div class="border-t border-dashed border-[#4b3c28] pt-2 pb-2">
<div class="flex justify-between">
<span class="flex-1">다이어리 {data.value.diaries.length}개</span>
<Link href={`/${location.params.username}/diary`} class="flex-1">다이어리 {data.value.diaries.length}개</Link>
{userData.username === location.params.username && <span onclick$={() => {showMyFriendsRequest.value = true}} class="flex-1 hover:text-[#4b3c28] cursor-pointer hover:underline">친구 요청 {data.value.friendRequest.length}개</span>}
</div>
</div>
<div class="border-t border-b border-dashed border-[#4b3c28] pt-2 pb-2">
<span class="flex-1">방명록 4개</span>
<Link href={`/${location.params.username}/guestbook`} class="flex-1">방명록 {data.value.guestbooks.length}개</Link>
</div>
</div>
</section>
@ -141,9 +140,9 @@ export default component$(() => {
{data.value.friendRequest.length > 0 ? (
<div class="divide-y-2 divide-gray-200 max-h-64 w-full overflow-y-auto">
{data.value.friendRequest.map((friend, i) => (
<div key={i} class="flex items-center justify-between border-b-2 border-gray-200 py-3">
<div class="flex items-center gap-3"><span class="font-medium text-sm">{friend.friend_username}</span></div>
<button class="text-black hover:text-red-500" onclick$={() => {handleAcceptFriend(friend.id)}}><i class="bi bi-check"></i></button>
<div key={i} class="flex p-2 items-center justify-between border-b-2 border-gray-200 py-3">
<div class="flex items-center gap-3"><span class="font-medium text-lg">{friend.friend_username}</span></div>
<button class="text-black hover:text-red-500 flex items-center justify-center" onclick$={() => {handleAcceptFriend(friend.id)}}><i class="bi bi-check text-lg"></i></button>
</div>
))}
</div>

4
src/routes/[username]/layout.tsx
View file

@ -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");

0
src/types/Friends.ts → src/types/Friends.d.ts vendored
View file

0
src/types/diary.ts → src/types/diary.d.ts vendored
View file

3
src/utils/context.ts
View file

@ -2,4 +2,5 @@
import { createContextId } from '@builder.io/qwik';
export const AppStateContext = createContextId<User>('auth-state');
export const AppStateContext = createContextId<User>('auth-state');
export const DotoryContext = createContextId<number>('dotory-state');

2
tsconfig.json
View file

@ -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"]
}