{showAddFriends.value = false; console.log(showAddFriends.value)}} class="bg-opacity-45 z-[1000] fixed inset-0 w-full h-full py-6 px-6 bg-black">
+
+ );
+});
diff --git a/src/components/features/ManageFriends.tsx b/src/components/features/ManageFriends.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/features/NoticeBoard.tsx b/src/components/features/NoticeBoard.tsx
new file mode 100644
index 0000000..1ae5e4b
--- /dev/null
+++ b/src/components/features/NoticeBoard.tsx
@@ -0,0 +1,10 @@
+import { component$ } from "@builder.io/qwik";
+
+export const NoticeBoard = component$(() => {
+ return (
+
+
+ {e.stopPropagation()}} class="max-w-[1001px] w-full bg-white rounded-lg shadow p-4">
+ {/* 헤더 */}
+
+
+
+ {/* 검색창 */}
+
+ {/* 검색 결과 */}
+ 친구 추가
+ +검색 결과 {friends.value.length}건
+
+ {friends.value.map((friend, i) => (
+
+
+
+ ))}
+
+ 
+
+
+
+ {friend.username}
+
+
+
+ {/* 이미 추가된 친구들 */}
+ 친구 목록
+ {/* */} +
+ {myfriends.value.map((friend, i) => (
+
+
+
+ ))}
+
+ {/* */}
+
+
+
+ {friend.friend_username}
+ {friend.friend_id}
+
+
+
+ );
+});
+
diff --git a/src/components/features/diary/UploadImages.tsx b/src/components/features/diary/UploadImages.tsx
new file mode 100644
index 0000000..8d3a4de
--- /dev/null
+++ b/src/components/features/diary/UploadImages.tsx
@@ -0,0 +1,43 @@
+// src/components/PhotoUploadModal.tsx
+
+import { component$, useSignal, Signal, $ } from '@builder.io/qwik';
+
+type FileInfo = {
+ name: string;
+ size: number;
+ type: string;
+ lastModified: number;
+ url?: string;
+};
+
+export const PhotoUploadModal = component$(({ selectedImages, showPhotoUploadModal }: { selectedImages: SignalUpdate
+ {showDeleteModal.value = false; selectedMessage.value = null}}>
+
+ );
+});
diff --git a/src/components/features/guestbook/UpdateMoadl.tsx b/src/components/features/guestbook/UpdateMoadl.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/features/shop/BuyModal.tsx b/src/components/features/shop/BuyModal.tsx
new file mode 100644
index 0000000..7397821
--- /dev/null
+++ b/src/components/features/shop/BuyModal.tsx
@@ -0,0 +1,44 @@
+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 e.stopPropagation()}>
+
+ 삭제하시겠습니까?
+
+
+
+
+
+
+
+ );
+});
\ No newline at end of file
diff --git a/src/components/features/shop/ItemCard.tsx b/src/components/features/shop/ItemCard.tsx
new file mode 100644
index 0000000..3cbf25c
--- /dev/null
+++ b/src/components/features/shop/ItemCard.tsx
@@ -0,0 +1,12 @@
+import { component$ } from "@builder.io/qwik";
+
+export const ItemCard = component$(({item}: {item: any}) => {
+ return (
+
+
+ {item.name}
+정말 구매하시겠습니까?
+ +구매 후 잔액: {mydotory - itemdotory}
+
+
+
+
+
+ 
+
+ );
+});
+
diff --git a/src/components/features/shop/NotEnoughFundsModa.tsx b/src/components/features/shop/NotEnoughFundsModa.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..1c71259
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,116 @@
+import { $, component$, Signal, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+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{item.name}
+{item.price}
+
+ 
+
+ {/* Grid overlay */}
+
+ );
+});
+
+const STYLES = `
+.room-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.room {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.grid-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(10, 1fr);
+ grid-template-rows: repeat(10, 1fr);
+ pointer-events: auto;
+}
+
+.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;
+ pointer-events: none;
+}
+
+.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;
+}
+
+.avatar-wrapper img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ image-rendering: pixelated;
+ z-index: 99;
+}
+`;
diff --git a/src/components/ui/button/Button.tsx b/src/components/ui/button/Button.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/global.css b/src/global.css
index e69de29..cd736fe 100644
--- a/src/global.css
+++ b/src/global.css
@@ -0,0 +1,19 @@
+@font-face {
+ font-family: "Wanted Sans";
+ src: url("./assets/fonts/WantedSans-1.0.3/webfonts/static/complete/WantedSans.css");
+}
+* {
+ font-family: "Wanted Sans";
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+
+}
+html, body {
+ /* height: 100%; */
+}
+input:-webkit-autofill {
+ -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+ -webkit-text-fill-color: #000 !important;
+ transition: background-color 5000s ease-in-out 0s;
+}
\ No newline at end of file
diff --git a/src/root.tsx b/src/root.tsx
index 07dad6c..37aa34c 100644
--- a/src/root.tsx
+++ b/src/root.tsx
@@ -1,8 +1,9 @@
import { component$, isDev } from "@builder.io/qwik";
import { QwikCityProvider, RouterOutlet } from "@builder.io/qwik-city";
import { RouterHead } from "./components/router-head/router-head";
-
+import './tailwind.css';
import "./global.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
export default component$(() => {
/**
diff --git a/src/routes/(auth)/auth/auth.css b/src/routes/(auth)/auth/auth.css
new file mode 100644
index 0000000..8c26f67
--- /dev/null
+++ b/src/routes/(auth)/auth/auth.css
@@ -0,0 +1,54 @@
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateX(-10px); }
+ to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.animate-fadeIn {
+ animation: fadeIn 0.4s ease-out forwards;
+}
+
+.animate-slideInRight {
+ animation: slideInRight 0.4s ease-out forwards;
+}
+
+.form-container {
+ @apply h-full transition-all duration-500 ease-in-out;
+}
+
+.form-initial {
+ @apply w-full max-w-4xl p-8 bg-white lg:rounded-tl-[150px] lg:rounded-br-[150px] rounded-bl-md rounded-tr-md shadow-[0_12px_4px_-2px_rgba(0,0,0,0.3)];
+}
+
+.form-expanded {
+ @apply w-full max-w-7xl flex overflow-hidden bg-white lg:rounded-tl-[150px] lg:rounded-br-[150px] rounded-bl-md rounded-tr-md shadow-[0_12px_4px_-2px_rgba(0,0,0,0.3)];
+}
+
+.greeting-side {
+ @apply flex-1 p-12 flex flex-col justify-center items-center text-center;
+}
+
+.form-side {
+ @apply p-4 flex flex-col justify-center;
+}
+
+@media (max-width: 425px) {
+ .form-expanded {
+ @apply flex-col;
+ }
+
+ .greeting-side,
+ .form-side {
+ @apply p-4;
+ }
+}
\ No newline at end of file
diff --git a/src/routes/(auth)/auth/index.tsx b/src/routes/(auth)/auth/index.tsx
new file mode 100644
index 0000000..9a4a91f
--- /dev/null
+++ b/src/routes/(auth)/auth/index.tsx
@@ -0,0 +1,180 @@
+import { $, component$, useSignal, useStore, noSerialize , type NoSerialize } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
+import "./auth.css";
+import axios from "axios";
+import { useNavigate } from "@builder.io/qwik-city";
+import { setCookie } from "~/utils/cookie";
+export default component$(() => {
+ const navigate = useNavigate();
+ const isRegistering = useSignal(false);
+ const userState = useStore({
+ username: '',
+ password: '',
+ error: '',
+ email: '',
+ profile_file: null as NoSerialize
+
+ {/* Grid overlay */}
+
+ {gridCells.map((cell) => (
+
+
+ {/* Avatar */}
+ handleDrop(cell.x, cell.y, e)}
+ onClick$={ e => handleCellClick(cell.x, cell.y, e)}
+ >
+ {cell.furniture && (
+ 
handleDragStart(furnitureItems.value.find(f => f.name === cell.furniture?.name)!, e)}
+ style={{
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ objectFit: 'contain',
+ imageRendering: 'pixelated',
+ cursor: 'move',
+ zIndex: 10
+ }}
+ />
+ )}
+
+ ))}
+
+ 
+ 
+ 
+
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "Login / Sign Up",
+ meta: [
+ {
+ name: "description",
+ content: "Login or create a new account",
+ },
+ ],
+};
\ No newline at end of file
diff --git a/src/routes/(auth)/auth/layout.tsx b/src/routes/(auth)/auth/layout.tsx
new file mode 100644
index 0000000..9212c11
--- /dev/null
+++ b/src/routes/(auth)/auth/layout.tsx
@@ -0,0 +1,42 @@
+import { component$, Slot } from "@builder.io/qwik";
+import type { DocumentHead, RequestHandler } from "@builder.io/qwik-city";
+import axios from "axios";
+
+export const onGet: RequestHandler = async ({ cookie, redirect }) => {
+ const jwt = cookie.get('access_token')?.value;
+ console.log(jwt + "이것은 auth로 들어온 token");
+ if (jwt) {
+ try {
+ const res = await axios.get('http://localhost:8000/api/user/profile/쌀숭이', {
+ headers: {
+ Authorization: `Bearer ${jwt}`,
+ },
+ });
+ console.log(res.data);
+ console.log(encodeURIComponent(res.data.username));
+ throw redirect(302, `/${encodeURIComponent(res.data.username)}/`);
+ } catch (error : any) {
+ console.error(error);
+ }
+ }
+};
+
+export default component$(() => {
+ return (
+ <>
+
+ {isRegistering.value ? (
+ // 회원가입
+
+
+
+ ) : (
+ // 로그인
+
+
+ 등록하기
+나만의 작은 세상, 지금 만들어보세요.
+ +
+
+
+
+
+ 이미 계정이 있으신가요?
+ +
+
+ )}
+ Hello, CyWorld!
+나만의 작은 세상, 지금 만들어보세요.
+
+
+
+
+
+ 계정이 없으신가요?
+ +
+ 404 Not found
+
+ );
+});
\ No newline at end of file
diff --git a/src/routes/[username]/(store)/layout.tsx b/src/routes/[username]/(store)/layout.tsx
new file mode 100644
index 0000000..ceda5ab
--- /dev/null
+++ b/src/routes/[username]/(store)/layout.tsx
@@ -0,0 +1,63 @@
+import { Link, RequestHandler } from "@builder.io/qwik-city";
+// import { onRequest } from "../layout";
+import { component$, Slot } from "@builder.io/qwik";
+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";
+export const onRequest: RequestHandler = async ({ cookie, params, sharedMap}) => {
+
+ console.log(params.username + "의 상점 페이지로 들어옴");
+
+ try {
+ const res = await axios.get(`http://localhost:8000/api/store`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ sharedMap.set("dotory", res.data ?? 0);
+ console.log(res.data ?? "no data");
+ } catch (error) {
+ console.log(error);
+ sharedMap.set("dotory", 0);
+ }
+}
+export const useDotory = routeLoader$(({sharedMap}) => {
+ return sharedMap.get("dotory") as number;
+});
+export default component$(() => {
+ const location = useLocation();
+ const dotory = useDotory();
+
+ console.log(location.url.pathname);
+ console.log("/"+location.params.username+"/store");
+ return (
+
+
+
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "Store",
+ meta: [
+ {
+ name: "description",
+ content: "Store page description",
+ },
+ ],
+};
+
diff --git a/src/routes/[username]/(store)/room/index.tsx b/src/routes/[username]/(store)/room/index.tsx
new file mode 100644
index 0000000..880930b
--- /dev/null
+++ b/src/routes/[username]/(store)/room/index.tsx
@@ -0,0 +1,393 @@
+import { $, component$, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
+import { DocumentHead } from "@builder.io/qwik-city";
+import RoomGrid from "~/components/room/RoomGrid";
+import { typechecker } from "~/utils/func";
+import { routeLoader$ } from "@builder.io/qwik-city";
+import axios from "axios";
+import { getCookie } from "~/utils/cookie";
+interface Furniture {
+ furniture_name: string;
+ image_path: string;
+ 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 SetAvatarType {
+ avatar_type: string;
+ top_clothe_type: string;
+ bottom_clothe_type: string;
+}
+interface RoomType {
+ type: string;
+ 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}) => {
+ try {
+ const myRoom = await axios.get("http://localhost:8000/api/room/layout", {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ })
+ const myAvatar = await axios.get("http://localhost:8000/api/avatar", {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ })
+ const roomType = await axios.get("http://localhost:8000/api/room/types", {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ })
+ const furniture = await axios.get("http://localhost:8000/api/room/my", {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ })
+ const avatarType = await axios.get("http://localhost:8000/api/avatar/options", {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ })
+ const roomTypeData = roomType.data;
+ const avatar : Avatar = myAvatar.data;
+ const room : Room = myRoom.data;
+ const furnitureData = furniture.data;
+ const avatarTypeData = avatarType.data;
+ console.log(myRoom.data);
+ return {myData : {room: room, avatar: avatar}, selectionData: {roomType: roomTypeData, furniture: furnitureData, avatarType: avatarTypeData}};
+ } catch (error : any) {
+ console.error(error);
+ return error.response?.data?.detail || 'Room not found';
+ }
+})
+export default component$(() => {
+ const data = useRoomLoader();
+ const selectedFurniture = useSignal
+
+
+
+
+ 상점
+ 방
+
+
+ {/*
+
+
*/}
+ 도토리: {dotory.value}
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "Room",
+ meta: [
+ {
+ name: "description",
+ content: "Room page description",
+ },
+ ],
+};
diff --git a/src/routes/[username]/(store)/store/index.tsx b/src/routes/[username]/(store)/store/index.tsx
new file mode 100644
index 0000000..5d67e34
--- /dev/null
+++ b/src/routes/[username]/(store)/store/index.tsx
@@ -0,0 +1,120 @@
+import { component$, useSignal } 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";
+
+interface ShopItem {
+ name: string;
+ image_path: string;
+ 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;
+}
+
+export const useShopLoader = routeLoader$(async ({cookie}) => {
+ try {
+ const res = await axios.get(`http://localhost:8000/api/room/catalog`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ const avatar = await axios.get(`http://localhost:8000/api/avatar`, {
+ 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: 0};
+ } catch (error : any) {
+ console.error(error);
+ return { storeData: [], avatarData: null, dotory: 0};
+ }
+});
+export default component$(() => {
+ const data = useShopLoader() as { value: ShopResponse };
+ const selectedItem = useSignal내 방 꾸미기
+
+ {/* Room Preview */}
+
+
+
+
+ {/* Controls */}
+
+
+
+ {/* Category Tabs */}
+
+
+
+
+
+
+
+ {/* Items Grid */}
+
+
+ + {selectedType.value === "furniture" ? "가구" : + selectedType.value === "avatar" ? "아바타" : "배경"} 선택 +
+ +
+
+
+ {/* Action Buttons */}
+
+ {selectedType.value === "furniture" ? (
+ data.value.selectionData.furniture.map((furniture: Furniture) => (
+
+ {if(selectedFurniture.value.includes(furniture)) selectedFurniture.value = selectedFurniture.value.filter((item: Furniture) => item !== furniture); else selectedFurniture.value.push(furniture);}}>
+ 
+ {furniture.furniture_name}
+
+ )))
+ :
+ selectedType.value === "avatar" ? (
+
+
+ ) : (
+
+
+
+ 아바타 타입
+
+ {data.value.selectionData.avatarType.avatar_types.map((type: string, index: number) => (
+
+ {
+ selectedAvatar.value = {
+ ...selectedAvatar.value,
+ avatar_type: type
+ };
+ console.log(selectedAvatar.value.avatar_type)}}
+ >
+
+ ))}
+
+ }`})
+
+ {type}
+
+
+
+ 상의
+
+ {data.value.selectionData.avatarType.top_clothe_types.map((clothe: string, index: number) => (
+
+ {
+ selectedAvatar.value = {
+ ...selectedAvatar.value,
+ top_clothe_type: clothe
+ };
+ console.log(selectedAvatar.value.top_clothe_type)}}
+
+ >
+
+ ))}
+
+ }`})
+
+ {clothe}
+
+
+ 하의
+
+ {data.value.selectionData.avatarType.bottom_clothe_types.map((bottom: string, index: number) => (
+
+ {
+ selectedAvatar.value = {
+ ...selectedAvatar.value,
+ bottom_clothe_type: bottom
+ };
+ console.log(selectedAvatar.value.bottom_clothe_type)}}
+ >
+
+ ))}
+
+ }`})
+
+ {bottom}
+
+
+ )
+ }
+ 방 배경 선택
+
+ {data.value.selectionData.roomType.map((roomType: RoomType, index: number) => (
+
+ {
+ console.log('Selected room type:', roomType);
+ selectedRoomType.value = roomType.type;
+ }}
+ >
+ 
+
+ {roomType.type}
+
+
+ ))}
+
+
+ {/* */}
+
+
+ {/* 좌측 */}
+
+ );
+});
+export const head: DocumentHead = {
+ title: "Shop",
+ meta: [
+ {
+ name: "description",
+ content: "Shop page description",
+ },
+ ],
+};
diff --git a/src/routes/[username]/diary/[diary_id]/edit/index.tsx b/src/routes/[username]/diary/[diary_id]/edit/index.tsx
new file mode 100644
index 0000000..907845d
--- /dev/null
+++ b/src/routes/[username]/diary/[diary_id]/edit/index.tsx
@@ -0,0 +1,44 @@
+import { component$, useSignal } from "@builder.io/qwik";
+import { DocumentHead , RequestHandler, routeLoader$} from "@builder.io/qwik-city";
+import { 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';
+ }
+ });
+export default component$(() => {
+ const navigate = useNavigate();
+ const diaryData = diaryLoader();
+
+ return (
+
+ {data.value.storeData.slice(0, data.value.storeData.length / 2).map((item: ShopItem) => (
+
+
+ {/* 중앙 빈 박스 */}
+ {if(selectedItem.value === item) selectedItem.value = null; else selectedItem.value = item;}}>
+
+ {item.name}
+
+ ))}
+
+ {selectedItem.value &&
+
+
+ {/* 우측 */}
+
+ {selectedItem.value.name}
+ 비율: {selectedItem.value.width}
+ 
+
+
+ }
+ {!selectedItem.value && 아이템을 선택해주세요.
} +
+ {data.value.storeData.slice(data.value.storeData.length / 2, data.value.storeData.length).map((item: ShopItem) => (
+
+ {showBuyModal.value &&
+ {if(selectedItem.value === item) selectedItem.value = null; else selectedItem.value = item;}}>
+
+ {item.name}
+
+ ))}
+ {showBuyModal.value = false}}>
+
+
+ }
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "일기수정하기",
+ meta: [
+ {
+ name: "description",
+ content: "유저가 쓴 일기의 상세정보",
+ },
+ ],
+};
\ No newline at end of file
diff --git a/src/routes/[username]/diary/[diary_id]/index.tsx b/src/routes/[username]/diary/[diary_id]/index.tsx
new file mode 100644
index 0000000..ff64bc9
--- /dev/null
+++ b/src/routes/[username]/diary/[diary_id]/index.tsx
@@ -0,0 +1,103 @@
+import { component$, $, useSignal, useContext } from "@builder.io/qwik";
+import { DocumentHead, useNavigate, routeLoader$, Link, useLocation } from "@builder.io/qwik-city";
+import axios from "axios";
+import { getCookie } from "~/utils/cookie";
+// import { AppStateContext } from "~/utils/context";
+
+
+type DiaryResponse = {diary: DiaryEntry, myInfo: number } | { detail: string };
+
+export const useDiaryLoader = routeLoader$일기 수정
+Diary not found or error: {diaryLoader.value.detail}
;
+ }
+
+ const { diary, myInfo } = diaryLoader.value;
+
+ return (
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "일기",
+ meta: [
+ {
+ name: "description",
+ content: "유저가 쓴 일기의 상세정보",
+ },
+ ],
+};
diff --git a/src/routes/[username]/diary/index.tsx b/src/routes/[username]/diary/index.tsx
new file mode 100644
index 0000000..c33ee5c
--- /dev/null
+++ b/src/routes/[username]/diary/index.tsx
@@ -0,0 +1,135 @@
+import { component$, useSignal, $, useTask$, useContext } 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";
+import { AppStateContext } from "~/utils/context";
+export const useDiaryLoader = routeLoader$( async ({cookie, params}) => {
+ try {
+ const userid = await axios.get(`http://localhost:8000/api/user/profile/${params.username}`);
+ console.log(userid.data.id + "<- 이건 아이디");
+ const res = await axios.get(`http://localhost:8000/api/diary/w/{user_id}?target_user_id=${userid.data.id}&skip=0&limit=6`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ console.log(res.data);
+ return {user:userid.data, diaries: res.data};
+ } catch (error : any) {
+ console.error(error);
+ return error.response?.data?.detail || 'Diary not found';
+ }
+});
+export default component$(() => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const entryLoader = useDiaryLoader();
+ const entries = useSignal
+
+
+ {diary.title}
+
+ {diary.user_id === myInfo && (
+
+
+
+
+
+
+
+ )}
+
+
+
+ {('detail' in diaryLoader.value) && (
+
+ {diaryLoader.value.diary.images.map((image, index) => (
+ 
+ ))}
+
+
+ {diaryLoader.value.diary.content}
+
+
+ )}
+ 일기가 없습니다.
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "나의 일기장",
+ meta: [
+ {
+ name: "description",
+ content: "나만의 일기장. 매일의 추억을 기록해보세요.",
+ },
+ ],
+};
\ No newline at end of file
diff --git a/src/routes/[username]/diary/write/index.tsx b/src/routes/[username]/diary/write/index.tsx
new file mode 100644
index 0000000..609d0c5
--- /dev/null
+++ b/src/routes/[username]/diary/write/index.tsx
@@ -0,0 +1,250 @@
+import { $, component$, useSignal, useVisibleTask$, NoSerialize } from "@builder.io/qwik";
+import { useLocation, useNavigate } from "@builder.io/qwik-city";
+import axios from "axios";
+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;
+}
+export default component$(() => {
+ const content = useSignal('');
+ const title = useSignal('');
+ const category = useSignal('');
+ const selectedImages = useSignal
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+ {entryLoader.value.user.username === userData.username && (
+
+ )}
+
+
+
+
+
+
+
+
+ { filteredEntries.value.map((entry, index) => (
+
+ 제목
+ 날짜
+
+
+
+ {entry.title}
+ {new Date(entry.created_at).toLocaleString()}
+
+
+ ))}
+ {Array.from({length: 15 - filteredEntries.value.length}, (_, index) => (
+
+ {/* */}
+
+
+ {/* */}
+
+ ))}
+
+
+
+ );
+});
diff --git a/src/routes/[username]/guestbook/index.tsx b/src/routes/[username]/guestbook/index.tsx
new file mode 100644
index 0000000..851cc44
--- /dev/null
+++ b/src/routes/[username]/guestbook/index.tsx
@@ -0,0 +1,211 @@
+import { component$, useSignal, $, useTask$} from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
+import { routeLoader$, useLocation } from "@builder.io/qwik-city";
+import { getCookie } from "~/utils/cookie";
+import axios from "axios";
+import DeleteModal from "~/components/features/guestbook/DeleteModal";
+interface GuestbookContent{
+ id: number,
+ content: string,
+ target_user_id: number,
+ user_id: number,
+ user_profile_path: string,
+ username: string,
+ created_at: string
+}
+interface GuestbookResponse {
+ messages: GuestbookContent[];
+ myInfo: {
+ id: number,
+ username: string,
+ email: string,
+ created_at: string,
+ profile_image_path: string,
+ is_active: boolean
+ };
+ targetUser: {
+ id: number,
+ username: string,
+ email: string,
+ created_at: string,
+ profile_image_path: string,
+ is_active: boolean
+ };
+}
+
+export const useGuestbookLoader = routeLoader$(async ({params, cookie}) => {
+ try {
+ console.log(params.username + "의 방명록 가져오기");
+ const userid = await axios.get(`http://localhost:8000/api/user/profile/${params.username}`);
+ const myid = await axios.get(`http://localhost:8000/api/user/me`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ const res = await axios.get
+
+ 일기 쓰기
+
+
+
+
+ {/* Image upload and preview section */}
+
+
+
+
+
+
+
+ {selectedImages.value.map((image, index) => (
+
+
+
+ })
+
+
+ ))}
+
+
+
+
+
+ {selectedImages.value.map((file, index) => (
+
+ {showPhotoUploadModal.value &&
+
+ })
+
+ ))}
+ showPhotoUploadModal.value = false}>
+
+ }
+ e.stopPropagation()}>
+
+
+
+ 사진 업로드
++ 소중한 순간들을 기록하고 공유하세요 +
+ + e.preventDefault()}
+ onDrop$={async (e) => {
+ e.preventDefault();
+ const files = e.dataTransfer?.files;
+ if (files && files.length > 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 = '파일 업로드 중 오류가 발생했습니다.';
+ }
+ }
+ }}
+ >
+ {fileInfo.value ? (
+
+
+ {error.value && (
+
+
+
+ ) : (
+ {fileInfo.value.name}
+{(fileInfo.value.size / 1024).toFixed(1)} KB
+
+
+
+ )}
+ 클릭 또는 사진을 드래그하세요
+JPG, PNG, GIF
+{error.value}
+ )} + + +
+ {showDeleteModal.value && }
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "방명록",
+ meta: [
+ {
+ name: "description",
+ content: "방명록 페이지입니다. 자유롭게 메시지를 남겨보세요!",
+ },
+ ],
+};
diff --git a/src/routes/[username]/index.tsx b/src/routes/[username]/index.tsx
new file mode 100644
index 0000000..49a59d1
--- /dev/null
+++ b/src/routes/[username]/index.tsx
@@ -0,0 +1,161 @@
+import { component$, useContext, useVisibleTask$ } from "@builder.io/qwik";
+import { type DocumentHead, routeLoader$, Link, useLocation } from "@builder.io/qwik-city";
+import axios from "axios";
+import RoomGrid from "~/components/room/RoomGrid";
+import { useContextProvider, useSignal, $ } from "@builder.io/qwik";
+import { AppStateContext } from "~/utils/context";
+import { getCookie } from "~/utils/cookie";
+interface FriendRequest {
+ id: number;
+ user_id: number;
+ friend_id: number;
+ friend_username: string;
+ status: string;
+ created_at: string;
+}
+
+export const useDataLoader = routeLoader$(async ({params, cookie}) => {
+ try {
+ // console.log(cookie.get("access_token")?.value + "이것은 토큰");
+ const userid = await axios.get(`http://localhost:8000/api/user/profile/${params.username}`);
+ // console.log(userid.data.id + "<- 이것은 아이디");
+ const res = await axios.get(`http://localhost:8000/api/diary/w/{userid.data.id}?target_user_id=${userid.data.id}&skip=0&limit=6`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ const friendRequest = await axios.get(`http://localhost:8000/api/friendship/pending`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ const room = await axios.get(`http://localhost:8000/api/room/layout`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ const avatar = await axios.get(`http://localhost:8000/api/avatar`, {
+ headers: {
+ Authorization: `Bearer ${cookie.get("access_token")?.value}`,
+ },
+ });
+ // console.log(res.data+ "다이어리 데이터 불러오기");
+ // console.log("??/" + res.data.diaries);
+ return {diaries: res.data, friendRequest: friendRequest.data as FriendRequest[], userdata: {room: room.data, avatar: avatar.data} };
+} catch (error : any) {
+ console.error(error);
+ return {diaries: [], friendRequest: [] as FriendRequest[], userdata: {room: [], avatar: [] } };
+}
+});
+export default component$(() => {
+ const data = useDataLoader();
+ const showMyFriendsRequest = useSignal
+ {messages.value.map((msg) => (
+
+
+
+ ))}
+
+ 
+
+
+
+ {msg.user_id === loaderData.value.myInfo.id &&
+
+ {msg.username} {new Date(msg.created_at).toLocaleString("ko-KR", { timeZone: "Asia/Seoul", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, })}
+
+
+ {msg.content}
+
+
+
+
+
+ }
+ {showUpdateModal.value && msg.id === selectedMessage.value.id && (
+ e.stopPropagation()} /* 외부 클릭으로 닫히는 건 부모가 처리하게 둘 수 있음 */
+ >
+
+ )}
+
+
+ (updatedMessage.value = ev.target.value)}
+ class="w-full p-2 border border-input-border-color rounded-xl"
+ />
+ 수정할 내용을 입력해주세요.
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "내 미니홈피",
+ meta: [
+ {
+ name: "description",
+ content: "나만의 공간에 오신 것을 환영합니다!",
+ },
+ ],
+};
diff --git a/src/routes/[username]/layout.tsx b/src/routes/[username]/layout.tsx
new file mode 100644
index 0000000..5239f08
--- /dev/null
+++ b/src/routes/[username]/layout.tsx
@@ -0,0 +1,72 @@
+import { component$, Slot, useServerData, 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");
+ if (!token) {
+ console.log("no token");
+ throw redirect(302, "/auth");
+ }
+ try {
+ // jwt.verify(token, process.env.JWT_SECRET!);
+ const userInfo = await axios.get(`http://localhost:8000/api/user/profile/${params.username}`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ console.log("data : " + userInfo.data);
+ console.log("token verified");
+
+ const res = await axios.get('http://localhost:8000/api/user/me', {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ sharedMap.set("user", res.data);
+
+ } catch (e : any) {
+ if(e.response.status === 404) {
+ console.log("user not found");
+ throw redirect(302, "/");
+ }
+ else {
+ console.log("token not verified");
+ cookie.delete("access_token");
+ throw redirect(302, "/auth");
+ }
+ }
+};
+export const useUser = routeLoader$(({sharedMap}) => {
+ return sharedMap.get("user");
+});
+export default component$(() => {
+ const addFriends = useSignalTitle
+ 내 페이지 +
+
+
+
+
+ {showMyFriendsRequest.value && (
+
+
+
+
+ Mini Room
+ + 미니룸 이동 + +
+
+
+ {/*
+
+
+
+
+ Update
+-
+ {data.value.diaries.map((diary : any) => (
+
- + + 게시 + {diary.title} + + + ))} +
+
+
+
+
+ 다이어리 {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개
+
+ {showMyFriendsRequest.value = false}} class="bg-opacity-45 z-[1000] fixed inset-0 w-full h-full py-6 px-6 flex justify-center items-center bg-black">
+
+ )}
+
+ {e.stopPropagation()}} class="flex w-full h-full flex-col max-w-[1000px] p-2 max-h-[400px] bg-white">
+
+
+ {data.value.friendRequest.length > 0 ? (
+
+ 친구 요청
+ {showMyFriendsRequest.value = false}}>
+ {data.value.friendRequest.map((friend, i) => (
+
+ ) : (
+
+
+ ))}
+ {friend.friend_username}
+
+
+
+ )}
+ 친구 요청이 없습니다.
+
+
+
+
+ );
+});
+
+export const head: DocumentHead = {
+ title: "2025 AnA SSF Pages",
+ meta: [
+ {
+ name: "description",
+ content: "2025 AnA SSF Pages with Qwik",
+ },
+ ],
+};
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 4fb7a52..aafb7ab 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,25 +1,34 @@
+import { routeLoader$ } from "@builder.io/qwik-city";
import { component$ } from "@builder.io/qwik";
-import type { DocumentHead } from "@builder.io/qwik-city";
-
-export default component$(() => {
- return (
- <>
- Hi 👋
-
- Can't wait to see what you build with qwik!
-
- Happy coding. -
-
- );
-});
-
-export const head: DocumentHead = {
- title: "Welcome to Qwik",
- meta: [
- {
- name: "description",
- content: "Qwik site description",
- },
- ],
-};
+import axios from "axios";
+export const useRedirectLoader = routeLoader$(async ({ cookie, redirect }) => {
+ const token = cookie.get("access_token")?.value;
+ console.log(token + "메인으로가면 생기는 토큰");
+ let res;
+ if (token) {
+ // 쿠키에서 username 추출 (JWT decode 하거나 DB 조회 가능)
+ try {
+ res = await axios.get('http://localhost:8000/api/user/me', {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ console.log(res.data.username + "데이터 받아옴");
+ } catch (error : any) {
+ console.error(error + "에러");
+ cookie.delete("access_token");
+ throw redirect(302, "/auth");
+ }
+ } else {
+ console.log("no token");
+ throw redirect(302, "/auth");
+ }
+ if (res.data.username) {
+ throw redirect(302, `/${encodeURIComponent(res.data.username)}/`);
+ }
+ });
+
+ export default component$(() => {
+ // 여긴 사실 실행 안 됨 (위에서 리다이렉트됨)
+ return - Happy coding. -
Loading...
;
+ });
\ No newline at end of file
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..d522341
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+ html {
+ @apply text-[#644B23];
+ }
+ }
\ No newline at end of file
diff --git a/src/types/Friends.ts b/src/types/Friends.ts
new file mode 100644
index 0000000..0462a65
--- /dev/null
+++ b/src/types/Friends.ts
@@ -0,0 +1,16 @@
+interface Friend {
+ id: number,
+ username: string,
+ email: string,
+ created_at: string,
+ profile_image_path: string,
+ is_active: boolean
+}
+interface User {
+ id: number,
+ username: string,
+ email: string,
+ created_at: string,
+ profile_image_path: string,
+ is_active: boolean
+}
\ No newline at end of file
diff --git a/src/types/diary.ts b/src/types/diary.ts
new file mode 100644
index 0000000..4bcc4cc
--- /dev/null
+++ b/src/types/diary.ts
@@ -0,0 +1,11 @@
+interface DiaryEntry {
+ id: number,
+ user_id: number,
+ title: string,
+ content: string,
+ images: string[],
+ category: string,
+ created_at: string,
+ is_submitted: boolean,
+ email_sent: boolean
+}
\ No newline at end of file
diff --git a/src/utils/context.ts b/src/utils/context.ts
new file mode 100644
index 0000000..9ddce9b
--- /dev/null
+++ b/src/utils/context.ts
@@ -0,0 +1,5 @@
+
+import { createContextId } from '@builder.io/qwik';
+
+
+export const AppStateContext = createContextId