- {studyCards.length === 0 ? (
+ {likedStudies.length === 0 ? (
) : (
-
+ 찜한 스터디가 없습니다. @@ -28,12 +62,12 @@ export default function MyStudyLiked() {
-
- {studyCards.map((card) => (
+ {likedStudies.map((card) => (
- {/* (
-
- {item.label}
-
- ))}
- />
- {postFrom.key === "community" && ( */}
+
- {/* )} */}
{posts.length > 0 ? (
-
- (false);
+ const { Modal, open } = useModal({
+ children: (
+
);
}
diff --git a/src/app/(route)/my/profile/_components/EditProfile/FormEditProfile.tsx b/src/app/(route)/my/profile/_components/EditProfile/FormEditProfile.tsx
new file mode 100644
index 0000000..2940079
--- /dev/null
+++ b/src/app/(route)/my/profile/_components/EditProfile/FormEditProfile.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { ChangeEvent, FormEvent } from "react";
+import Input from "@/common/Molecules/Form/Input";
+import ProfileInputArea from "../ProfileInputArea";
+import Button from "@/common/Atoms/Form/Button";
+import {
+ CATEGORIES,
+ CATEGORIES_ALL_OPTIONS,
+} from "@/constants/categories/job_category";
+import { useRouter } from "next/navigation";
+import { updateProfile } from "@/lib/actions/profileAction";
+import { ProfileSchema } from "@/types/model/User";
+import { Session } from "next-auth";
+import handleAlert from "@/common/Molecules/handleAlert";
+
+export default function FormEditProfile({
+ session,
+ profile,
+}: {
+ session: Session | null;
+ profile: ProfileSchema;
+}) {
+ const router = useRouter();
+
+ async function handleSubmit(e: FormEvent) {
+ e.preventDefault();
+
+ const formData = new FormData(e.currentTarget);
+ const id = session?.user.id;
+
+ if (!id) {
+ handleAlert("error", "사용자 ID가 없습니다.");
+ return;
+ }
+
+ const my_category = [];
+ for (const [key, value] of formData) {
+ if (key === "myCategory") {
+ my_category.push(
+ CATEGORIES_ALL_OPTIONS.find((opt) => opt.value === value)
+ );
+ }
+ }
+
+ formData.set("myCategory", JSON.stringify(my_category));
+
+ try {
+ const result = await updateProfile(id, formData);
+
+ if (result.state) {
+ handleAlert("success", result.message);
+
+ if (!profile._id) {
+ router.replace("/my/profile");
+ }
+ } else {
+ handleAlert("error", result.message);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return (
+
+ );
+}
diff --git a/src/app/(route)/my/profile/_components/EditProfileImage/FormEditProfileImageWithPreview.tsx b/src/app/(route)/my/profile/_components/EditProfileImage/FormEditProfileImageWithPreview.tsx
new file mode 100644
index 0000000..f1fb4af
--- /dev/null
+++ b/src/app/(route)/my/profile/_components/EditProfileImage/FormEditProfileImageWithPreview.tsx
@@ -0,0 +1,146 @@
+"use client";
+import { ChangeEvent, useEffect, useState } from "react";
+import ProfileInputArea from "../ProfileInputArea";
+import useModal from "@/hooks/useModal";
+import ProfileImagePreviewModal from "./ProfileImagePreviewModal";
+import handleAlert from "@/common/Molecules/handleAlert";
+import ProfileImg from "@/common/Atoms/Image/ProfileImg";
+import { DummyProfileImg } from "@public/images";
+import ImageInputWithButton from "@/common/Molecules/Form/ImageInputWithButton";
+import Button from "@/common/Atoms/Form/Button";
+import {
+ updateUserData,
+ supabaseUploadImage,
+} from "@/lib/actions/profileAction";
+import { resizeFile } from "@/utils/resizeFile";
+
+export type ProfileImageFormProps = {
+ id: string;
+ initProfileUrl: string;
+};
+
+export default function FormEditProfileImageWithPreview({
+ id,
+ initProfileUrl,
+}: ProfileImageFormProps) {
+ const [imageUrl, setImageUrl] = useState(initProfileUrl);
+ const modalClose = () => {
+ setImageUrl(initProfileUrl);
+ };
+
+ const { Modal, open, close } = useModal({
+ defaultValue: false,
+ onClose: modalClose,
+ children: (
+ ) {
+ const files = e.target.files;
+
+ if (files && files.length > 0) {
+ const file = files[0];
+
+ const previewUrl = URL.createObjectURL(file);
+ setImageUrl(previewUrl);
+
+ const resizeImage = await resizeFile(file);
+
+ const formData = new FormData();
+ formData.append("file", resizeImage);
+
+ const upload = await supabaseUploadImage(formData);
+
+ if (upload.state && upload.result) {
+ setImageUrl(upload.result);
+ } else {
+ handleAlert("error", upload.message);
+ }
+ }
+ }
+
+ async function onSave() {
+ try {
+ const result = await updateUserData(id, { profile_img: imageUrl });
+
+ if (result.state) {
+ close();
+ handleAlert("success", result.message);
+ } else {
+ handleAlert("error", result.message);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ async function onDelete() {
+ if (!imageUrl) {
+ handleAlert("error", "저장된 프로필 이미지가 없습니다.");
+ return;
+ }
+
+ try {
+ const result = await updateUserData(id, { profile_img: "" });
+ setImageUrl("");
+
+ if (result.state) {
+ handleAlert("success", result.message);
+ } else {
+ handleAlert("error", result.message);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/app/(route)/my/profile/_components/ProfileImagePreviewModal.tsx b/src/app/(route)/my/profile/_components/EditProfileImage/ProfileImagePreviewModal.tsx
similarity index 87%
rename from src/app/(route)/my/profile/_components/ProfileImagePreviewModal.tsx
rename to src/app/(route)/my/profile/_components/EditProfileImage/ProfileImagePreviewModal.tsx
index 150b70b..378f314 100644
--- a/src/app/(route)/my/profile/_components/ProfileImagePreviewModal.tsx
+++ b/src/app/(route)/my/profile/_components/EditProfileImage/ProfileImagePreviewModal.tsx
@@ -6,7 +6,7 @@ import { ChangeEventHandler } from "react";
type PropsToPreviewModal = {
imageUrl: string;
getImage: ChangeEventHandler;
- onSave: () => void;
+ onSave: () => Promise;
};
export default function ProfileImagePreviewModal(props: PropsToPreviewModal) {
const { imageUrl, getImage, onSave } = props;
@@ -17,16 +17,16 @@ export default function ProfileImagePreviewModal(props: PropsToPreviewModal) {
type="image"
alt="preview"
src={imageUrl}
- className="w-20 h-20 rounded-full my-4 aspect-square"
+ className="w-20 h-20 rounded-full my-4 object-cover"
/>
diff --git a/src/app/(route)/my/profile/_components/FormEditProfile.tsx b/src/app/(route)/my/profile/_components/FormEditProfile.tsx
deleted file mode 100644
index 5716960..0000000
--- a/src/app/(route)/my/profile/_components/FormEditProfile.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { ActionMeta } from "react-select";
-import {
- ChangeEvent,
- Dispatch,
- FormEvent,
- SetStateAction,
- useEffect,
-} from "react";
-import Input from "@/common/Molecules/Form/Input";
-import ProfileImageInput from "./ProfileImageInput";
-import ProfileInputArea from "./ProfileInputArea";
-import Button from "@/common/Atoms/Form/Button";
-import { CATEGORIES } from "@/constants/categories/job_category";
-import { Session } from "next-auth";
-
-import { TProfileData } from "./ProfileForms";
-import { profileAction } from "@/lib/action";
-import handleAlert from "@/app/(auth)/_components/ErrorAlert";
-
-export default function FormEditProfile({
- userId,
- profile,
- sessionProvider,
-}: {
- userId: string;
- profile: TProfileData;
- sessionProvider: string;
-}) {
- // const changeData = (
- // e: ChangeEvent | ChangeEvent
- // ) => {
- // console.log(e.target.name);
- // const name = e.target.name;
- // const value = e.target.value;
- // setData((p) => ({ ...p, [name]: value }));
- // };
- // const changeMultiSelect: (
- // newValue: unknown,
- // actionMeta: ActionMeta
- // ) => void = (newValue) => {
- // // console.log({ newValue });
- // if (Array.isArray(newValue)) setData((p) => ({ ...p, interest: newValue }));
- // };
-
- async function save(e: FormEvent) {
- e.preventDefault();
-
- // const userId = profile?.userId._id as string;
- const formData = new FormData(e.currentTarget);
-
- try {
- await profileAction(userId, formData);
- handleAlert("success", "프로필 정보가 저장되었습니다.");
- } catch (error: any) {
- handleAlert("error", error.message);
- }
- }
-
- return (
-
- );
-}
diff --git a/src/app/(route)/my/profile/_components/FormUpdatePassword.tsx b/src/app/(route)/my/profile/_components/FormUpdatePassword.tsx
deleted file mode 100644
index cb1a984..0000000
--- a/src/app/(route)/my/profile/_components/FormUpdatePassword.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Input from "@/common/Molecules/Form/Input";
-import Button from "@/common/Atoms/Form/Button";
-import ProfileInputArea from "./ProfileInputArea";
-
-export default function FormUpdatePassword() {
- return (
-
- );
-}
diff --git a/src/app/(route)/my/profile/_components/ProfileForms.tsx b/src/app/(route)/my/profile/_components/ProfileForms.tsx
index bcfa0c4..b1153a6 100644
--- a/src/app/(route)/my/profile/_components/ProfileForms.tsx
+++ b/src/app/(route)/my/profile/_components/ProfileForms.tsx
@@ -1,96 +1,53 @@
-"use client";
-import ProfileInputArea from "./ProfileInputArea";
-import ProfileImageInput from "./ProfileImageInput";
-import FormEditProfile from "./FormEditProfile";
-import { getUser } from "@/dummies/user";
-import { useEffect, useState } from "react";
+import { getSession } from "@/auth";
+import { notFound } from "next/navigation";
+import FormEditProfileImageWithPreview from "./EditProfileImage/FormEditProfileImageWithPreview";
+import FormEditProfile from "./EditProfile/FormEditProfile";
import SectionTitle from "@/common/Atoms/Text/SectionTitle";
-import FormUpdatePassword from "./FormUpdatePassword";
-import FormUpdatePhoneNumber from "./FormUpdatePhoneNumber";
+import FormUpdatePassword from "./UpdatePassword/FormUpdatePassword";
+import FormUpdatePhoneNumber from "./UpdatePhoneNumber/FormUpdatePhoneNumber";
import DeleteAccountConfirm from "./DeleteAccountConfirm";
-import ProfilePreview from "./ProfilePreview";
-import { Session } from "next-auth";
-import { CategoryOption } from "@/types/model/Category";
-import { ProfileSchema } from "@/types/model/Profile";
-import { CATEGORIES_ALL_OPTIONS } from "@/constants/categories/job_category";
+import { getUserData } from "@/lib/actions/userAction";
+import { ProfileSchema } from "@/types/model/User";
-export type TProfileData = {
- profileUrl: string;
- positionTag: string;
- introduce: string;
- email: string;
- interest: Array;
-};
+export default async function ProfileForms() {
+ const session = await getSession();
-export default function ProfileForms({
- userId,
- profile,
- sessionProvider,
-}: {
- userId: string;
- profile: ProfileSchema | null;
- sessionProvider: string;
-}) {
- // const user = getUser();
- const interestCategory: CategoryOption[] =
- profile?.my_category && profile.my_category.length > 0
- ? profile?.my_category.map(
- (value) =>
- CATEGORIES_ALL_OPTIONS.find(
- (opt) => opt.value === value
- ) as CategoryOption
- )
- : [];
- const profileData = {
- profileUrl: profile?.userId.profile_img || "",
- positionTag: profile?.position_tag || "",
- introduce: profile?.introduce || "",
- email: profile?.userId.email || "",
- interest: interestCategory || [],
- };
- console.log({ profile, profileData });
+ if (session === null) {
+ return notFound();
+ }
- // const [data, setData] = useState(defaultData);
- // const setProfileImage = (image: string) => {
- // setData((prev) => ({ ...prev, profileUrl: image }));
- // };
+ const userId = session.user.id;
+ const sessionProvider = session.account.provider;
+ const userData = await getUserData(userId);
+ // const userProfile = await getProfile(userId);
+ let profile: ProfileSchema = userData.data;
+ let clientProfile = JSON.parse(JSON.stringify(profile));
return (
- <>
-
프로필 수정
-
+
) : (
+
+ ),
+ key: "confirm-unregister",
+ });
+
+ async function unregister() {
+ try {
+ const result = await unregisterAction(email);
+
+ if (result.state) {
+ signOut({ callbackUrl: "/" });
+ handleAlert("success", result.message);
+ } else {
+ handleAlert("error", result.message);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
return (
정말로 데이터를 삭제할까요?
++ 계정을 삭제하면 작성한 게시물들의 작성자가 익명 처리되며 자동으로 + 삭제되지 않습니다. +
+
+
+
+
@@ -21,16 +58,19 @@ export default function DeleteAccountConfirm() {
버튼을 클릭하면 계정이 영구적으로 삭제되는 것을 이해했습니다.
계정을 삭제한 후에 해당 계정을 복구할 수 없습니다. +
+ 작성한 게시물의 작성자가 익명 처리됩니다.
+ {Modal}
계정을 삭제한 후에 해당 계정을 복구할 수 없습니다. +
+ 작성한 게시물의 작성자가 익명 처리됩니다.
+
+ {Modal}
+
+ getImage(e)}
+ >
+ 이미지 변경하기
+
+
+
+ + *권장 이미지 - 확장자: png, jpg, jpeg / 용량: 1MB 이하 권장 +
+- *권장 이미지 - 확장자: png, jpg, jpeg / 용량: 1MB 이하 + *권장 이미지 - 확장자: png, jpg, jpeg / 용량: 1MB 이하 권장
- ) {
- const files = e.target.files;
-
- if (files && files.length > 0) {
- const file = files[0];
- const fileReader = new FileReader();
-
- fileReader.onload = () => {
- const encoding = fileReader.result as string;
- setImageUrl(encoding);
- };
-
- fileReader.readAsDataURL(file);
- }
- }
-
- // console.log(imageUrl);
-
- function onSave() {
- // TODO: DB에 저장
- close();
- }
-
- function onDelete() {
- setImageUrl("");
- }
-
- return (
- <>
- (newPwInit);
+ function onChangeNewPw(e: ChangeEvent) {
+ const { name, value } = e.currentTarget;
+ setNewPw((prev) => ({ ...prev, [name]: value }));
+ }
+ async function handleSubmit(e: FormEvent) {
+ e.preventDefault();
+ if (newPw.newPassword.length < 12 && newPw.newPasswordCheck.length < 12) {
+ handleAlert("error", "비밀번호가 너무 짧습니다.");
+ return;
+ }
+
+ if (String(newPw.newPassword) !== String(newPw.newPasswordCheck)) {
+ handleAlert(
+ "error",
+ "변경하려는 비밀번호가 '비밀번호 확인'과 일치하지 않습니다. 다시 한 번 확인해주세요."
+ );
+ return;
+ }
+
+ const formData = new FormData(e.currentTarget);
+
+ try {
+ const result = await changePassword(formData);
+
+ if (result?.state) {
+ handleAlert("success", result.message);
+ } else {
+ handleAlert("error", result.message);
+ }
+ formReset();
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ function formReset() {
+ setPwShow(false);
+ setNewPw(newPwInit);
+ }
+ return (
+
+ );
+}
diff --git a/src/app/(route)/my/profile/_components/FormUpdatePhoneNumber.tsx b/src/app/(route)/my/profile/_components/UpdatePhoneNumber/FormUpdatePhoneNumber.tsx
similarity index 79%
rename from src/app/(route)/my/profile/_components/FormUpdatePhoneNumber.tsx
rename to src/app/(route)/my/profile/_components/UpdatePhoneNumber/FormUpdatePhoneNumber.tsx
index ecdce80..d6bbc17 100644
--- a/src/app/(route)/my/profile/_components/FormUpdatePhoneNumber.tsx
+++ b/src/app/(route)/my/profile/_components/UpdatePhoneNumber/FormUpdatePhoneNumber.tsx
@@ -1,5 +1,5 @@
import Input from "@/common/Molecules/Form/Input";
-import ProfileInputArea from "./ProfileInputArea";
+import ProfileInputArea from "../ProfileInputArea";
import Button from "@/common/Atoms/Form/Button";
export default function FormUpdatePhoneNumber({
@@ -16,13 +16,13 @@ export default function FormUpdatePhoneNumber({
placeholder="핸드폰 번호를 입력하세요"
className="w-full"
defaultValue={defaultValue}
+ readOnly
/>
-
+ */}
diff --git a/src/app/(route)/my/profile/page.tsx b/src/app/(route)/my/profile/page.tsx
index aa7e64a..f15ae96 100644
--- a/src/app/(route)/my/profile/page.tsx
+++ b/src/app/(route)/my/profile/page.tsx
@@ -1,44 +1,13 @@
import SectionTitle from "@/common/Atoms/Text/SectionTitle";
import ProfileForms from "./_components/ProfileForms";
-import { getSession } from "@/auth";
-import { Profile } from "@/lib/schema";
-import connectDB from "@/lib/db";
-import { ProfileSchema } from "@/types/model/Profile";
-import NotFound from "@/app/not-found";
-
-async function getProfile(userId: string) {
- await connectDB();
-
- const profile = await Profile.findOne({ userId }).populate("userId");
- return profile;
-}
export default async function MyProfilePage() {
- const session = await getSession();
-
- if (session === null) {
- return
-
-
-
-
- 비밀번호 수정
-
-
- 연락처 수정
-
-
-
- {/* {profile?.userId.name}
-
-
*/}
+
+
);
}
diff --git a/src/app/(route)/my/profile/_components/ProfileImageInput.tsx b/src/app/(route)/my/profile/_components/ProfileImageInput.tsx
deleted file mode 100644
index a0cfbaa..0000000
--- a/src/app/(route)/my/profile/_components/ProfileImageInput.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client";
-import { ChangeEvent, useEffect, useState } from "react";
-
-import useModal from "@/hooks/useModal";
-import ProfileImagePreviewModal from "./ProfileImagePreviewModal";
-import Button from "@/common/Atoms/Form/Button";
-import ImageInputWithButton from "@/common/Molecules/Form/ImageInputWithButton";
-
-export default function ProfileImageInput() {
- const [imageUrl, setImageUrl] = useState("");
- const { Modal, open, close } = useModal({
- children: (
-
+ 비밀번호 수정
+
+ 연락처 수정
+
+
-
+ {session.user.name}
+
-
- {Modal}
-
- );
-}
diff --git a/src/app/(route)/my/profile/_components/ProfilePreview.tsx b/src/app/(route)/my/profile/_components/ProfilePreview.tsx
deleted file mode 100644
index a9f0a39..0000000
--- a/src/app/(route)/my/profile/_components/ProfilePreview.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import ProfileImg from "@/common/Atoms/Image/ProfileImg";
-import Keyword from "@/common/Atoms/Text/Keyword";
-import { DummyProfileImg } from "@public/images";
-import { TProfileData } from "./ProfileForms";
-
-type TProfilePreviewProps = {
- name: string | null | undefined;
- data: TProfileData;
-};
-
-export default function ProfilePreview({ name, data }: TProfilePreviewProps) {
- return (
- <>
- {/* TODO: 프로필 미리보기 */}
-
- getImage(e)}
- >
- 이미지 변경하기
-
-
-
- - *권장 이미지 - 확장자: png, jpg, jpeg / 용량: 1MB 이하 -
-
-
-
- );
-}
diff --git a/src/app/(route)/my/profile/_components/UpdatePassword/FormUpdatePassword.tsx b/src/app/(route)/my/profile/_components/UpdatePassword/FormUpdatePassword.tsx
new file mode 100644
index 0000000..42ee35c
--- /dev/null
+++ b/src/app/(route)/my/profile/_components/UpdatePassword/FormUpdatePassword.tsx
@@ -0,0 +1,126 @@
+"use client";
+import { ChangeEvent, FormEvent, useRef, useState } from "react";
+import Image from "next/image";
+import { PasswordHide, PasswordShow } from "@public/icons";
+import ProfileInputArea from "../ProfileInputArea";
+import Button from "@/common/Atoms/Form/Button";
+import Input from "@/common/Molecules/Form/Input";
+import handleAlert from "@/common/Molecules/handleAlert";
+import { changePassword } from "@/lib/actions/authAction";
+
+type TNewPw = {
+ currentPassword: string;
+ newPassword: string;
+ newPasswordCheck: string;
+};
+
+const newPwInit = {
+ currentPassword: "",
+ newPassword: "",
+ newPasswordCheck: "",
+};
+
+export default function FormUpdatePassword() {
+ const [pwShow, setPwShow] = useState(false);
+ const [newPw, setNewPw] = useState- {data.positionTag ? data.positionTag + " " : ""} - {name} -
-- {data.email} - - {data.introduce || 나를 소개할 말을 추가해주세요} - -
-
- {data.interest.map((interestIn) => (
-
- #{interestIn.label}
-
- ))}
-
-
-
-
- {session?.user.name}님, 오늘 하루도 달려봐요!
+
-
+ {/*
+
+ 참여 신청한 스터디
-
+
참여 중인 스터디
-
-
+ {/*
종료된 스터디
+ */}
내가 만든 스터디
-
);
}
+
+function Empty({ text }: { text: string }) {
+ return (
+
-
-
-
- 오늘의 미션
-- 아직 완료하지 못한 미션이 있어요! -
-- 오늘까지 꼭 완료해주세요 -
-
-
- - {mission.total - mission.done} - / {mission.total}개 -
-
-
-
- 지금까지
-
- {user.badges}개의 뱃지를 모았어요
-
X{user.badges}
--
+
-
- {studyCard.slice(0, 1).map((card) => (
-
-
+
-
- {studyCard.slice(1, 3).map((card) => (
-
-
- {studyCard.slice(3, 5).map((card) => (
-
-
+
{text}
+ )
+}
\ No newline at end of file
diff --git a/src/app/(route)/post/[postId]/page.tsx b/src/app/(route)/post/[postId]/page.tsx
index 65040bf..1edb542 100644
--- a/src/app/(route)/post/[postId]/page.tsx
+++ b/src/app/(route)/post/[postId]/page.tsx
@@ -1,22 +1,60 @@
-import Link from "next/link";
-import { getPost } from "@/dummies/posts";
-import Button from "@/common/Atoms/Form/Button";
-import LinkButton from "@/common/Atoms/LinkButton";
import Profile from "@/common/Molecules/Profile";
import ContentArea from "@/common/Organisms/ContentArea";
-import CommentArea from "@/common/Templates/CommentArea";
-import ShareIconButton from "../../_components/ShareIconButton";
import { getSession } from "@/auth";
import ReturnToListButton from "../_components/ReturnToListButton";
import LinkedStudyCard from "../_components/LinkedStudyCard";
+import CommentArea from "@/common/Templates/CommentArea";
+import ShareIconButton from "../../_components/ShareIconButton";
+import LikeIconButton from "../../_components/LikeIconButton";
+import { PostDataFull, PostDataListItem } from "@/types/model/PostItem";
+import { getCreatedBefore } from "@/utils/getCreatedBefore";
+import { Post } from "@/lib/schema";
+import { notFound } from "next/navigation";
+import DeletePostButton from "../../_components/DeletePostButton";
+import Link from "next/link";
+import { revalidateTag } from "next/cache";
+import { NULL_USER_FOR_PROFILE } from "@/constants/null_user";
+import { cfetch } from "@/utils/customFetch";
+
+async function increaseViewCount(postId: string) {
+ try {
+ const update = await Post.findOneAndUpdate(
+ { postId },
+ { $inc: { view: 1 } },
+ { new: true }
+ );
+ revalidateTag("community");
+ return { state: true, data: update };
+ } catch (error: any) {
+ return { state: false, message: "Fail to update view count" };
+ }
+}
export default async function PostDetail({
params: { postId },
}: {
params: { postId: string };
}) {
+ await increaseViewCount(postId);
+
+ // TODO: 로그인한 사용자 정보 상태값으로 대체 필요
const session = await getSession();
- const post = getPost(postId);
+
+ const postDetail = await cfetch("/api/community/" + postId, {
+ next: { tags: ["community", postId] },
+ })
+ .then((res) => res.json())
+ .then(({ data }) => data)
+ .catch((err) => {
+ console.error(err.message);
+ return { state: false };
+ });
+
+ if (postDetail.state === false) {
+ return notFound();
+ }
+ const post = postDetail.data as PostDataListItem;
+
return (
{post.contents.title}
-
- 1일 전
- {/* 본인이 작성한 글이라면 수정하기 버튼 show */}
- {session?.user.id === post.writer.userId && (
-
+ {getCreatedBefore(post.createdAt)}
+ {session?.user.id !== undefined &&
+ String(session?.user.id) === String(post.writer?._id) && (
+ <>
+
+ 수정하기
+
+
-
+
);
}
diff --git a/src/app/(route)/post/_components/LinkedStudyCard.tsx b/src/app/(route)/post/_components/LinkedStudyCard.tsx
index b289b97..f482456 100644
--- a/src/app/(route)/post/_components/LinkedStudyCard.tsx
+++ b/src/app/(route)/post/_components/LinkedStudyCard.tsx
@@ -1,48 +1,60 @@
import Image from "next/image";
+import Link from "next/link";
import { DummyProfileImg } from "@public/images";
-import { getWriter } from "@/dummies/user";
import Thumbnail from "@/common/Atoms/Image/Thumbnail";
-import { TStudyCard } from "@/types/model/StudyCard";
-import { getStudyCards } from "@/dummies/studies";
+import { StudyDataListItem, StudySchema } from "@/types/model/StudyCard";
+import { getStudy } from "@/lib/actions/studyAction";
-export default function LinkedStudyCard({ studyId }: { studyId: string }) {
- const studies: TStudyCard[] = getStudyCards();
- const study = studies[0];
- const writer = getWriter(study.user.userId);
+export default async function LinkedStudyCard({
+ studyId,
+}: {
+ studyId: string;
+}) {
+ if (!studyId) return null;
+
+ const result = await getStudy(studyId);
+
+ if (result.state === false) return null;
+
+ const study: StudyDataListItem = result.data;
+ const writer = study.writer;
return (
-
-
비슷한 스터디들
(false);
return (
@@ -39,7 +35,6 @@ export default function AccordionComponent({
{title}
- {/*
diff --git a/src/app/(route)/study/_components/AccordionList.tsx b/src/app/(route)/study/_components/AccordionList.tsx
index 96e30c1..34d3218 100644
--- a/src/app/(route)/study/_components/AccordionList.tsx
+++ b/src/app/(route)/study/_components/AccordionList.tsx
@@ -1,23 +1,19 @@
-import { TAccordionList } from "./AccordionComponent";
-
export default function AccordionList({
lists,
isOpen,
}: {
- lists: TAccordionList[];
+ lists: string[];
isOpen: boolean;
}) {
return (
-
-
-
diff --git a/src/app/(route)/study/[studyPostId]/page.tsx b/src/app/(route)/study/[studyPostId]/page.tsx
index 5d243f2..e2b87fe 100644
--- a/src/app/(route)/study/[studyPostId]/page.tsx
+++ b/src/app/(route)/study/[studyPostId]/page.tsx
@@ -4,21 +4,66 @@ import StudyCardList from "@/common/Templates/CardList";
import BackButton from "../../_components/BackButton";
import StudyDetail from "./_components/StudyDetail";
-import { getStudyCards } from "@/dummies/studies";
+import { getStudy } from "@/lib/actions/studyAction";
+import { StudyDataFull } from "@/types/model/StudyCard";
+import { Study } from "@/lib/schema";
+import { revalidateTag } from "next/cache";
+import { cfetch } from "@/utils/customFetch";
+import { notFound } from "next/navigation";
+
+async function increaseViewCount(studyId: string) {
+ try {
+ const update = await Study.findOneAndUpdate(
+ { studyId },
+ { $inc: { view: 1 } },
+ { new: true }
+ );
+ revalidateTag("study");
+ return { state: true, data: update };
+ } catch (error: any) {
+ return { state: false, message: "Fail to update view count" };
+ }
+}
+
+export default async function StudyDetailPage({
+ params: { studyPostId },
+}: {
+ params: { studyPostId: string };
+}) {
+ // studyDetail api
+ await increaseViewCount(studyPostId);
+
+ const studyDetail = await cfetch(`api/study/${studyPostId}`, {
+ next: { tags: ["study", studyPostId] },
+ })
+ .then((res) => res.json())
+ .then(({ data }) => data)
+ .catch((err) => {
+ console.error(err.message);
+ return { state: false };
+ });
+
+ if (studyDetail.state === false) return notFound();
+
+ const study = studyDetail.data as StudyDataFull;
+
+ // studylist
+ const result = await getStudy();
+ let studyCardLists: StudyDataFull;
+ studyCardLists = result.data;
+
+ const studyCards = JSON.parse(JSON.stringify(studyCardLists));
-export default function StudyPostComponent() {
- const studyCards = getStudyCards();
return (
-
- {study.jobCategory.label} 스터디
-
-
-
diff --git a/src/app/(route)/post/_components/ReturnToListButton.tsx b/src/app/(route)/post/_components/ReturnToListButton.tsx
index 848c54b..478f16d 100644
--- a/src/app/(route)/post/_components/ReturnToListButton.tsx
+++ b/src/app/(route)/post/_components/ReturnToListButton.tsx
@@ -27,7 +27,7 @@ export default function ReturnToListButton() {
strokeLinejoin="round"
/>
- 목록으로 돌아가기
+ 뒤로 돌아가기
);
}
diff --git a/src/app/(route)/post/page.tsx b/src/app/(route)/post/page.tsx
index 9b92b28..5812321 100644
--- a/src/app/(route)/post/page.tsx
+++ b/src/app/(route)/post/page.tsx
@@ -1,5 +1,4 @@
import Link from "next/link";
-
import NotFound from "@/app/not-found";
import LinkButton from "@/common/Atoms/LinkButton";
import SidebarAsideContentArea from "@/common/Layout/Sidebar/SidebarAsideContentArea";
@@ -11,10 +10,9 @@ import { WriteIcon } from "@/common/Atoms/Image/Icon";
import PostListWithPagination from "@/common/Templates/PostListWithPagination";
import SearchInput from "../_components/SearchInput";
import NonePostItem from "./_components/NonePostItem";
-
-import { Post } from "@/lib/schema";
-import connectDB from "@/lib/db";
-import { getPosts } from "@/dummies/posts";
+import { PostDataFull } from "@/types/model/PostItem";
+import { cfetch } from "@/utils/customFetch";
+import { ONE_MIN_IN_MS } from "@/constants/times_unit";
type TQuery = { category?: string; sort?: string };
@@ -30,33 +28,38 @@ export default async function CommunityPostList({
if (filteredMenu === undefined || sortedBy === undefined) {
return
@@ -65,13 +68,12 @@ export default async function CommunityPostList({
-
- - {study.title} -
+ +
+
+
);
}
diff --git a/src/app/(route)/post/_components/NonePostItem.tsx b/src/app/(route)/post/_components/NonePostItem.tsx
index 2d10a7a..8e8671e 100644
--- a/src/app/(route)/post/_components/NonePostItem.tsx
+++ b/src/app/(route)/post/_components/NonePostItem.tsx
@@ -3,7 +3,7 @@ import NoneContentItemBase from "@/app/_components/NoneContentItemBase";
export default function NonePostItem() {
return (
+
-
-
-
-
+ {study.studyInfo.title}
+
+
+
+
+ {study.studyInfo.jobCategory.label} 스터디
-
+
+
+
+
조건에 맞는 글이 존재하지 않습니다.
+
+
);
}
diff --git a/src/app/(route)/study/[studyPostId]/_components/StudyDetailThumbnail.tsx b/src/app/(route)/study/[studyPostId]/_components/StudyDetailThumbnail.tsx
index d8ec932..8f7c7c4 100644
--- a/src/app/(route)/study/[studyPostId]/_components/StudyDetailThumbnail.tsx
+++ b/src/app/(route)/study/[studyPostId]/_components/StudyDetailThumbnail.tsx
@@ -3,34 +3,29 @@ import Keyword from "@/common/Atoms/Text/Keyword";
import ThumbnailInfoList from "./ThumbnailInfoLabel";
import Link from "next/link";
import ShareIconButton from "@/app/(route)/_components/ShareIconButton";
-import { DetailFullHeartIcon } from "@public/icons";
import dayjs from "dayjs";
import SaveHeartButton from "@/common/Molecules/Form/SaveHeartButton";
+import { DefaultThumbnailImg } from "@public/images";
+import ApplyButton from "./ApplyButton";
export type TThumbnailInfo = {
- thumbnailUrl: string;
- title: string;
- jobCategory: {
- label: string;
- value: string;
- };
- targetCategory: {
- label: string;
- value: string;
- };
expense: number;
- recruitmentPeople: string;
- recruitmentPeriod: string[];
- studyPeriod: string[];
- onoff: string;
- place: string;
- heartStatus: boolean;
- heartCount: number;
+ jobCategory: { label: string; value: string };
+ location: { label: string; value: string };
+ place: string | null;
+ recruitmentPeople: number;
+ recruitmentPeriod: [string, string];
+ studyPeriod: [string, string];
+ targetCategory: { label: string; value: string };
+ thumbnailUrl: string | null;
+ title: string;
};
export default function StudyDetailThumbnail({
- thumbnailInfo,
+ studyInfo,
+ heart,
}: {
- thumbnailInfo: TThumbnailInfo;
+ studyInfo: TThumbnailInfo;
+ heart: number;
}) {
const {
thumbnailUrl,
@@ -41,10 +36,9 @@ export default function StudyDetailThumbnail({
recruitmentPeople,
recruitmentPeriod,
studyPeriod,
- onoff,
- heartStatus,
- heartCount,
- } = thumbnailInfo;
+ place,
+ location,
+ } = studyInfo;
const nowDay = dayjs(new Date()).format("YYYY.MM.DD");
const recruitmentDay = dayjs(recruitmentPeriod[1]);
@@ -57,62 +51,7 @@ export default function StudyDetailThumbnail({
width={582}
height={438}
className="w-[36.375rem] h-[27.375rem] rounded-3xl"
- src={thumbnailUrl}
- alt="썸네일 이미지"
- />
- {filteredMenu.label} 글
- {/*
+
(
@@ -102,7 +104,9 @@ export default async function CommunityPostList({
) : (
- = {
+ control: (baseStyles, state) => ({
+ ...baseStyles,
+ minHeight: "56px",
+ height: "fit-content",
+ padding: "9px 4px 9px 8px",
+ borderRadius: "10px",
+ borderColor: state.isFocused ? "#2a7ffe" : "#dbdbdd",
+ ":hover": {
+ borderColor: "var(--color-label-alt)",
+ color: baseStyles.color,
+ },
+ }),
+ option: (styles, { data }) => ({
+ ...styles,
+ ...card(
+ data.studyInfo.thumbnailUrl || DEFAULT_THUMBNAIL_URL,
+ `${data.writer.position_tag} ${data.writer.name}`
+ ),
+ }),
+ singleValue: (styles, { data }) => ({
+ ...styles,
+ ...card(
+ data.studyInfo.thumbnailUrl || DEFAULT_THUMBNAIL_URL,
+ `${data.writer.position_tag} ${data.writer.name}`
+ ),
+ }),
+};
+
+export type StudyCardSelectOption = StudyDataListItem & {
+ value: string;
+ label: string;
+};
+
+const loadOptions = (inputValue: string) =>
+ cfetch("/api/study", { next: { tags: ["study"] } })
+ .then((res) => res.json())
+ .then(({ data }) => {
+ return data.map((study: any) => ({
+ ...study,
+ value: study.studyId,
+ label: study.title,
+ }));
+ })
+ .catch((error) => {
+ console.error(error.message);
+ return [];
+ });
+
+type CustomizedStudySelectProps = {
+ options: StudyCardSelectOption[];
+ name: string;
+ className?: string;
+ defaultValue?: string;
+};
+export default function CustomizedStudySelect(
+ props: CustomizedStudySelectProps
+) {
+ const { options, name, className = "", defaultValue } = props;
+ const thisId = useId();
+ const [selected, setSelected] =
+ useState>(undefined);
+
+ useEffect(() => {
+ // console.log("options", options);
+ const defaultOption = defaultValue
+ ? options.find((opt) => opt.value === defaultValue)
+ : undefined;
+ setSelected(defaultOption);
+ }, [options]);
+
+ const onChange = (select: SingleValue) =>
+ setSelected(select);
+
+ return (
+
-
+
)}
diff --git a/src/app/(route)/post/write/[postId]/page.tsx b/src/app/(route)/post/write/[postId]/page.tsx
new file mode 100644
index 0000000..7fa07e9
--- /dev/null
+++ b/src/app/(route)/post/write/[postId]/page.tsx
@@ -0,0 +1,33 @@
+import { getSession } from "@/auth";
+import { getCommunity } from "@/lib/actions/communityAction";
+import { PostDataFull } from "@/types/model/PostItem";
+import { notFound, redirect } from "next/navigation";
+import PostForm from "../_components/PostForm";
+
+export default async function page({
+ params: { postId },
+}: {
+ params: { postId: string };
+}) {
+ const session = await getSession();
+ const result = await getCommunity(postId);
+
+ if (!session) {
+ redirect("/login");
+ }
+
+ if (
+ result.state === false ||
+ String(session.user.id) !== String(result.data.writer._id)
+ ) {
+ return notFound();
+ }
+
+ return (
+ <>
+
-
- {resultDay < 0 ? "모집중" : "모집마감"}
-
-
- {dayjs(recruitmentDay).format("MM/DD")} 마감
-
-
-
-
- {jobCategory.label}
-
-
- {title}
-
-
-
- -
-
- {targetCategory.label} -
- {recruitmentPeople} -
- {expense} -
- - {studyPeriod[0]} ~ {studyPeriod[1]} - -
- {onoff} -
-
- 스터디룸 살펴보기
-
-
-
-
-
-
-
@@ -137,12 +76,12 @@ export default function StudyDetailThumbnail({
@@ -153,12 +92,10 @@ export default function StudyDetailThumbnail({
>
스터디룸 살펴보기
-
+ - {targetCategory.label} -
- {recruitmentPeople} -
- {expense} +
- {recruitmentPeople}명 +
- {expense.toLocaleString("ko-KR")}원
- {studyPeriod[0]} ~ {studyPeriod[1]} -
- {onoff} +
- {location.label}
-
- {lists.map((list) => {
+ {lists.map((list, i) => {
return (
-
- +
-
- {list.listId}
+ {i + 1}
-
- {list.content} -
+{list}
);
})}
diff --git a/src/app/(route)/study/_components/AccordionTitle.tsx b/src/app/(route)/study/_components/AccordionTitle.tsx
deleted file mode 100644
index 7c7f2b3..0000000
--- a/src/app/(route)/study/_components/AccordionTitle.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { ArrowIcon } from "@public/icons";
-import Image from "next/image";
-
-export default function AccordionTitle({ title }: { title: string }) {
- return (
-
- );
-}
diff --git a/src/app/(route)/study/_components/LargeStudyItem.tsx b/src/app/(route)/study/_components/LargeStudyItem.tsx
index c6e2ca9..68aec67 100644
--- a/src/app/(route)/study/_components/LargeStudyItem.tsx
+++ b/src/app/(route)/study/_components/LargeStudyItem.tsx
@@ -1,26 +1,27 @@
-import { faker } from "@faker-js/faker";
import Image from "next/image";
-import { BadgeIcon, PostCardHeart } from "@public/icons";
+import { BadgeIcon } from "@public/icons";
import Link from "next/link";
import Keyword from "@/common/Atoms/Text/Keyword";
import dayjs from "dayjs";
-import { TStudyCard } from "@/types/model/StudyCard";
+import { StudyDataFull, StudySchema } from "@/types/model/StudyCard";
+import { DummyProfileImg } from "@public/images";
+import Thumbnail from "@/common/Atoms/Image/Thumbnail";
+import Profile from "@/common/Molecules/Profile";
+import { NULL_USER_FOR_PROFILE } from "@/constants/null_user";
-export default function LargeStudyItem({ card }: { card: TStudyCard }) {
+export default function LargeStudyItem({ card }: { card: StudyDataFull }) {
const nowDay = dayjs(new Date()).format("YYYY.MM.DD");
- const recruitmentDay = dayjs(card.recruitmentPeriod[1]);
+ const recruitmentDay = dayjs(card.studyInfo.recruitmentPeriod[1]);
const resultDay = dayjs(nowDay).diff(recruitmentDay, "days");
return (
- {
- onChangeQuery(value);
- setSelected(value);
+ setSelected((prev) => {
+ if (prev === value) {
+ onChangeQuery("");
+ return "";
+ }
+ onChangeQuery(value);
+ return value;
+ });
};
return (
diff --git a/src/app/(route)/study/_components/WideStudyItem.tsx b/src/app/(route)/study/_components/WideStudyItem.tsx
index c11a01e..0a80925 100644
--- a/src/app/(route)/study/_components/WideStudyItem.tsx
+++ b/src/app/(route)/study/_components/WideStudyItem.tsx
@@ -1,23 +1,23 @@
-import Image from "next/image";
-import { BadgeIcon } from "@public/icons";
import Link from "next/link";
import Keyword from "@/common/Atoms/Text/Keyword";
import dayjs from "dayjs";
-import { TStudyCard } from "@/types/model/StudyCard";
+import { StudyDataFull } from "@/types/model/StudyCard";
+import Thumbnail from "@/common/Atoms/Image/Thumbnail";
+import Profile from "@/common/Molecules/Profile";
+import { NULL_USER_FOR_PROFILE } from "@/constants/null_user";
-export default function WideStudyItem({ card }: { card: TStudyCard }) {
+export default function WideStudyItem({ card }: { card: StudyDataFull }) {
const nowDay = dayjs(new Date()).format("YYYY.MM.DD");
- const recruitmentDay = dayjs(card.recruitmentPeriod[1]);
+ const recruitmentDay = dayjs(card.studyInfo.recruitmentPeriod[1]);
const resultDay = dayjs(nowDay).diff(recruitmentDay, "days");
return (
- @@ -30,33 +30,33 @@ export default function WideStudyItem({ card }: { card: TStudyCard }) {-
- - {card.user.name} - - {card.user.role === "pro" ? ( - - ) : null} - {card.jobCategory.value} + {card.studyInfo.jobCategory.label}- {card.title} + {card.studyInfo.title}
); diff --git a/src/app/page.tsx b/src/app/page.tsx index a03c170..c6ebf46 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,6 +7,8 @@ import RecommendProStudies from "./_components/RecommendProStudies"; import RecommendLatestStudies from "./_components/RecommendLatestStudies"; import MainStatusBoard from "./_components/MainStatusBoard"; import { getSession } from "@/auth"; +import { Suspense } from "react"; +import Skeleton from "@/common/Atoms/Skeleton"; export default async function Home() { const session = await getSession(); @@ -17,10 +19,17 @@ export default async function Home() {- 모집 {card.recruitmentPeople}명 + 모집 {card.studyInfo.recruitmentPeople}명 ; + +export default function StudyForm({ + defaultValue, +}: { + defaultValue?: StudyValue; +}) { + const router = useRouter(); + + // Input 타입이 Number일 경우 (maxlength적용, 숫자만입력되게 적용) + const onNumberInputFilter = (e: FormEvent ) => { + e.currentTarget.value = e.currentTarget.value + .replace(/[^0-9.]/g, "") + .replace(/(\..*)\./g, "$1"); + if (e.currentTarget.value.length > e.currentTarget.maxLength) + e.currentTarget.value = e.currentTarget.value.slice( + 0, + e.currentTarget.maxLength + ); + }; + + const [imageUrl, setImageUrl] = useState (""); + + // 스터디 카테고리 + const [jobCategory, setJobCategory] = useState (null); + const handleJobCategoryChange = (newValue: CategoryOption | null) => { + if (newValue) { + setJobCategory(newValue); + } + }; + const jobCategoryOption: CategoryOption[] = CATEGORIES.map((m) => ({ + value: m.value, + label: m.label, + })); + + const [targetCategory, setTargetCategory] = useState ( + null + ); + const handleTargetCategoryChange = (newValue: CategoryOption | null) => { + if (newValue) { + setTargetCategory(newValue); + } + }; + const targetCategoryOption = GOALS.map((m) => ({ + value: m.value, + label: m.label, + })); + + // 모집기간 + const [recruitmentPeriod, setRecruitmentPeriod] = useState< + [Date, Date] | null + >(null); + const handleRecruitmentDateChange = (dates: [Date, Date]) => { + setRecruitmentPeriod(dates); + }; + const formRecruitmentDates = recruitmentPeriod?.map((date) => + date + .toLocaleDateString("ko-KR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }) + .replace(/\./g, "") + .replace(/ /g, ".") + ); + + // 스터디기간 + const [studyPreiod, setStudyPeriod] = useState<[Date, Date] | null>(null); + const handleStudyDateChange = (dates: [Date, Date]) => { + setStudyPeriod(dates); + }; + + const formStudyDates = studyPreiod?.map((date) => + date + .toLocaleDateString("ko-KR", { + year: "numeric", + month: "2-digit", + day: "2-digit", + }) + .replace(/\./g, "") + .replace(/ /g, ".") + ); + + // 참가비용 + const [freeChecked, setFreeChecked] = useState (false); + const [free, setFree] = useState (0); + useEffect(() => { + if (freeChecked === true) setFree(0); + }, [freeChecked]); + + const FreeCheckedHandler = () => + setFreeChecked((freeChecked) => !freeChecked); + + // 스터디방식 + const locationCategoryOption = ONOFF.map((l) => ({ + value: l.value, + label: l.label, + })); + const [locationCategory, setLocationCategory] = + useState (locationCategoryOption[0]); + const handleLocationCategoryChange = (newValue: CategoryOption | null) => { + if (newValue) { + setLocationCategory(newValue); + } + }; + const [placeChecked, setPlaceChecked] = useState (false); + const [place, setPlace] = useState (""); + useEffect(() => { + if (placeChecked === true) setPlace(""); + }, [placeChecked]); + const PlaceCheckedHandler = () => + setPlaceChecked((placeChecked) => !placeChecked); + + const [content, setContent] = useState (""); + + // 규칙 & 커리큘럼 + const [ruleList, setRuleList] = useState ) => { + e.preventDefault(); + setRuleList([...ruleList, ""]); + }; + const handleInputChange = ( + index: number, + event: ChangeEvent + ) => { + event.preventDefault(); + const newList = [...ruleList]; + newList[index] = event.target.value; + setRuleList(newList); + }; + const onHandleInputRuleRemove = ( + index: number, + e: MouseEvent + ) => { + e.preventDefault(); + if (ruleList.length > 1) { + const newRuleList = ruleList.filter((_, i) => i !== index); + setRuleList(newRuleList); + } else { + alert("하나의 입력창이 있어야합니다."); + } + }; + + const [curriculumList, setCurriculumList] = useState ) => { + e.preventDefault(); + setCurriculumList([...curriculumList, ""]); + }; + const curriculumHandleInputChange = ( + index: number, + event: ChangeEvent + ) => { + event.preventDefault(); + const newList = [...curriculumList]; + newList[index] = event.target.value; + setCurriculumList(newList); + }; + const onHandleInputCurriculumRemove = ( + index: number, + e: MouseEvent + ) => { + e.preventDefault(); + if (curriculumList.length > 1) { + const newCurriculumList = curriculumList.filter((_, i) => i !== index); + setCurriculumList(newCurriculumList); + } else { + alert("하나의 입력창이 있어야합니다."); + } + }; + + // action + async function action(e: FormEvent ) { + e.preventDefault(); + + const formData = new FormData(e.currentTarget); + + if (imageUrl) { + formData.append("thumbnailUrl", imageUrl); + } + + if (jobCategory) { + formData.append("jobCategory", JSON.stringify(jobCategory)); + } + if (targetCategory) { + formData.append("targetCategory", JSON.stringify(targetCategory)); + } + + if (locationCategory) { + formData.append("location", JSON.stringify(locationCategory)); + } + + if (studyPreiod) { + formData.append("studyPeriod", JSON.stringify(formStudyDates)); + } + + if (recruitmentPeriod) { + formData.append( + "recruitmentPeriod", + JSON.stringify(formRecruitmentDates) + ); + } + // 참가 비용 + // formData.append("expense", freeChecked ? "0" : free.toString()); + + // 스터디 방식 및 장소 + // formData.append("location", locationCategory?.value || ""); + // if (locationCategory?.value === "offline" && !placeChecked) { + // formData.append("place", place); + // } + + if (content) { + formData.append("content", content); + } + // 스터디 규칙 추가 + if (ruleList) { + formData.append("rules", JSON.stringify(ruleList)); + } + + // 세부 커리큘럼 추가 + if (curriculumList) { + formData.append("curriculums", JSON.stringify(curriculumList)); + } + + try { + const result = defaultValue?.studyId + ? await cfetch("/api/study/" + defaultValue.studyId, { + method: "PATCH", + body: formData, + }) + .then((res) => res.json()) + .then(({ data }) => data) + .catch((err) => { + console.error(err); + return err; + }) + : await cfetch("/api/study", { + method: "POST", + body: formData, + }) + .then((res) => res.json()) + .then(({ data }) => { + return data; + }) + .catch((err) => { + console.log("err", err); + return err; + }); + console.log("resulte", result); + + if (result?.state) { + handleAlert("success", result.message); + router.replace("/study"); + router.refresh(); + } else { + handleAlert("error", result.message); + } + } catch (error) { + if (error instanceof Error) { + handleAlert("error", error.message); + console.log("error", error.message); + } + } + } + + return ( + + ); +} diff --git a/src/app/(route)/study/create/_components/ThumbnailInput.tsx b/src/app/(route)/study/create/_components/ThumbnailInput.tsx new file mode 100644 index 0000000..499d201 --- /dev/null +++ b/src/app/(route)/study/create/_components/ThumbnailInput.tsx @@ -0,0 +1,119 @@ +import GridField from "@/common/Atoms/Form/Field"; +import { LabelText } from "@/common/Atoms/Form/Label"; +import { AdditionIcon } from "@/common/Atoms/Image/Icon"; +import handleAlert from "@/common/Molecules/handleAlert"; +import { supabaseThumbnailImage } from "@/lib/actions/studyAction"; +import { resizeFile } from "@/utils/resizeFile"; +import { DefaultThumbnailImg } from "@public/images"; +import Image from "next/image"; +import { ChangeEvent, useRef, useState } from "react"; + +export default function ThumbnailInput({ + imageUrl, + setImageUrl, +}: { + imageUrl: string; + setImageUrl: React.Dispatch (""); + const fileInput = useRef (null); + + async function getImage(e: ChangeEvent ) { + const files = e.target.files; + + if (files && files.length > 0) { + const file = files[0]; + + const previewUrl = URL.createObjectURL(file); + setImageUrl(previewUrl); + + const resizeImage = await resizeFile(file); + const formDate = new FormData(); + formDate.append("file", resizeImage); + + const upload = await supabaseThumbnailImage(formDate); + console.log(upload); + if (upload.state && upload.result) { + setImageUrl(upload.result); + } else { + handleAlert("error", upload.message); + } + } + } + // const onUloadImage = (e: any) => { + // const files = e.target.files; + + // if (files && files.length > 0) { + // const file = files[0]; + // const fileReader = new FileReader(); + + // fileReader.onloadend = () => { + // const encoding = fileReader.result as string; + // setPreview(encoding); + // return encoding; + // }; + + // fileReader.readAsDataURL(file); + // } + // }; + + const onClickImageButton = () => { + fileInput.current?.click(); + }; + + return ( + + + ); +} diff --git a/src/app/(route)/study/create/page.tsx b/src/app/(route)/study/create/page.tsx index c040561..d63e7c5 100644 --- a/src/app/(route)/study/create/page.tsx +++ b/src/app/(route)/study/create/page.tsx @@ -1,228 +1,27 @@ -import Input from "@/common/Molecules/Form/Input"; -import ButtonCheck from "@/common/Molecules/Form/ButtonCheck"; - -import TextEditor from "@/common/Atoms/Form/TextEditor"; -import GridField from "@/common/Atoms/Form/Field"; -import { LabelText } from "@/common/Atoms/Form/Label"; - -import { AdditionIcon } from "@/common/Atoms/Image/Icon"; - import SectionTitle from "@/common/Atoms/Text/SectionTitle"; -import LinkButton from "@/common/Atoms/LinkButton"; -import Button from "@/common/Atoms/Form/Button"; -import Thumbnail from "@/common/Atoms/Image/Thumbnail"; -import { DefaultThumbnailImg } from "@public/images"; -import Image from "next/image"; -import ImageInputWithButton from "@/common/Molecules/Form/ImageInputWithButton"; -import { studyAction } from "@/lib/action"; -import { FormEvent } from "react"; -import handleAlert from "@/app/(auth)/_components/ErrorAlert"; +import StudyForm from "./_components/StudyForm"; +import { getSession } from "@/auth"; +import { redirect } from "next/navigation"; -export default function page() { - async function study(e: FormEvent썸네일 이미지 +++++ + *썸네일 사이즈는 280x180 px를 권장합니다. + ++ {imageUrl ? ( +++ ) : ( + <> + getImage(e)} + hidden + /> + + + )} + +++ +++ 기본 제공 이미지 + ) { - e.preventDefault(); +export default async function page() { + const session = await getSession(); - const formData = new FormData(e.currentTarget); - - try { - await studyAction(formData); - handleAlert("success", "스터디가 개설 되었습니다."); - } catch (error: any) { - handleAlert("error", error.message); - } + if (!session) { + return redirect("/login"); } - return ( <> 스터디 개설하기 - +++개설자의 역량을 펼쳐주세요 + + 당신이 가진 직무 역량과 팁을 공유해주세요 + +); } diff --git a/src/app/(route)/study/page.tsx b/src/app/(route)/study/page.tsx index fd38093..d12c8dd 100644 --- a/src/app/(route)/study/page.tsx +++ b/src/app/(route)/study/page.tsx @@ -3,7 +3,6 @@ import StudyCardList from "@/common/Templates/CardList"; import LargeStudyList from "./_components/LargeStudyList"; import WideStudyList from "./_components/WideStudyList"; -import { getStudyCards } from "@/dummies/studies"; import { GOALS } from "@/constants/categories/study_goal"; import { ONOFF } from "@/constants/categories/study_type"; @@ -15,8 +14,8 @@ import { onOffIconsName, } from "@/app/_components/CategoryTab/TabIcons"; import { getSession } from "@/auth"; -import { StudyList } from "@/lib/schema"; -import connectDB from "@/lib/db"; +import { getStudy } from "@/lib/actions/studyAction"; +import { StudyDataFull } from "@/types/model/StudyCard"; export type TQuery = { job_c?: string; @@ -31,13 +30,15 @@ export default async function StudyComponent({ searchParams: TQuery; }) { const session = await getSession(); - const studyCards = getStudyCards(); + const result = await getStudy(); + let studyCardLists: StudyDataFull[]; - await connectDB(); - - const studyList = await StudyList.find(); - - console.log("스터디 리스트 가져오기" + studyList); + if (!result.state) { + studyCardLists = []; + } else { + studyCardLists = result.data; + } + const studyCards = JSON.parse(JSON.stringify(studyCardLists)); return ( <> diff --git a/src/app/(route)/study/search/page.tsx b/src/app/(route)/study/search/page.tsx index c6e21a1..33c1c80 100644 --- a/src/app/(route)/study/search/page.tsx +++ b/src/app/(route)/study/search/page.tsx @@ -11,15 +11,24 @@ import { GOALS } from "@/constants/categories/study_goal"; import { ONOFF } from "@/constants/categories/study_type"; import { TQuery } from "../page"; -import { getStudyCards } from "@/dummies/studies"; import StudyCardFilter from "../_components/StudyCardFilter"; +import { StudyDataFull } from "@/types/model/StudyCard"; +import { getStudy } from "@/lib/actions/studyAction"; -export default function StudySearchPage({ +export default async function StudySearchPage({ searchParams, }: { searchParams: TQuery; }) { - const studyCards = getStudyCards(); + const result = await getStudy(); + let studyCardLists: StudyDataFull[]; + + if (!result.state) { + studyCardLists = []; + } else { + studyCardLists = result.data; + } + const studyCards = JSON.parse(JSON.stringify(studyCardLists)); return ( <> diff --git a/src/app/(studyroom)/_components/NotPrepare.tsx b/src/app/(studyroom)/_components/NotPrepare.tsx new file mode 100644 index 0000000..cea3297 --- /dev/null +++ b/src/app/(studyroom)/_components/NotPrepare.tsx @@ -0,0 +1,40 @@ +"use client"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +export default function NotPrepare() { + const router = useRouter(); + return ( + ++ ); +} diff --git a/src/app/(studyroom)/_studyroom/[studyroomId]/page.tsx b/src/app/(studyroom)/_studyroom/[studyroomId]/page.tsx deleted file mode 100644 index 3945562..0000000 --- a/src/app/(studyroom)/_studyroom/[studyroomId]/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function StudyroomDashboard() { - return ( - <> -아직 준비되지 않은 페이지에요.
++++ +++ 돌아가서 다른 스터디를 탐색하는 건 어떨까요? +
++ + 홈으로 이동 + + ++StudyroomDashboard Component
- - ); -} diff --git a/src/app/(studyroom)/_studyroom/[studyroomId]/setting/page.tsx b/src/app/(studyroom)/_studyroom/[studyroomId]/setting/page.tsx deleted file mode 100644 index 8653be4..0000000 --- a/src/app/(studyroom)/_studyroom/[studyroomId]/setting/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function StudyroomSetting() { - return ( - <> -className Component
- - ); -} diff --git a/src/app/(studyroom)/_studyroom/create/page.tsx b/src/app/(studyroom)/_studyroom/create/page.tsx deleted file mode 100644 index 69cd90c..0000000 --- a/src/app/(studyroom)/_studyroom/create/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function StudyroomCreate() { - return ( - <> -StudyroomCreate Component
- - ); -} diff --git a/src/app/(studyroom)/_studyroom/page.tsx b/src/app/(studyroom)/_studyroom/page.tsx deleted file mode 100644 index 23421c0..0000000 --- a/src/app/(studyroom)/_studyroom/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Studyroom() { - return ( - <> -Studyroom Component
- - ); -} diff --git a/src/app/(studyroom)/studyroom/[studyroomId]/page.tsx b/src/app/(studyroom)/studyroom/[studyroomId]/page.tsx new file mode 100644 index 0000000..f0ec1f2 --- /dev/null +++ b/src/app/(studyroom)/studyroom/[studyroomId]/page.tsx @@ -0,0 +1,5 @@ +import NotPrepare from "../../_components/NotPrepare"; + +export default function StudyroomDashboard() { + return; +} diff --git a/src/app/(studyroom)/studyroom/[studyroomId]/setting/page.tsx b/src/app/(studyroom)/studyroom/[studyroomId]/setting/page.tsx new file mode 100644 index 0000000..38563c7 --- /dev/null +++ b/src/app/(studyroom)/studyroom/[studyroomId]/setting/page.tsx @@ -0,0 +1,5 @@ +import NotPrepare from "@/app/(studyroom)/_components/NotPrepare"; + +export default function StudyroomSetting() { + return ; +} diff --git a/src/app/(studyroom)/studyroom/layout.tsx b/src/app/(studyroom)/studyroom/layout.tsx new file mode 100644 index 0000000..b63f9fd --- /dev/null +++ b/src/app/(studyroom)/studyroom/layout.tsx @@ -0,0 +1,14 @@ +import { Footer, Header, Container } from "@/common/Layout"; +import { TProps } from "@/types/component/props"; + +export default function StudyroomLayout({ children }: TProps) { + return ( + <> + + + + + + ); +} diff --git a/src/app/(studyroom)/studyroom/page.tsx b/src/app/(studyroom)/studyroom/page.tsx new file mode 100644 index 0000000..065416a --- /dev/null +++ b/src/app/(studyroom)/studyroom/page.tsx @@ -0,0 +1,5 @@ +import { notFound } from "next/navigation"; + +export default function Studyroom() { + return notFound(); +} diff --git a/src/app/_components/AlertList.tsx b/src/app/_components/AlertList.tsx new file mode 100644 index 0000000..66888f9 --- /dev/null +++ b/src/app/_components/AlertList.tsx @@ -0,0 +1,28 @@ +"use client"; + +import Link from "next/link"; +import { TUserAlert } from "@/common/Layout/ProfileMenu/ResponsiveMenu"; +import { Dispatch, SetStateAction } from "react"; + +type AlertListProps = { + list: TUserAlert; +}; + +export default function AlertList({ list }: AlertListProps) { + return ( + <> +{children} +-
+ <>
+
-
+
+
{list.contents.title}
++ 작성한 커뮤니티 글에 새로운 댓글이 있습니다. +
+ +
+
+
(initSelected); + const [studies, setStudies] = useState + {GOALS_TAB.map(({ label, value, iconName }) => { + const active = selected === value; + return ( ++ {studies.length > 0 ? ( ++ ) => { + e.preventDefault(); + console.log(":selected:", value); + setSelected(value); + const newSelected: StudyDataFull[] = data.filter( + (s) => s.studyInfo.targetCategory.value === value + ); + setStudies(newSelected); + }} + > + + ); + })} ++ + ) : ( + + )} + + ); +} + +function StudyCardSkeleton() { + return ; +} + +function Skeletons() { + return ( + ++ ); +} diff --git a/src/app/_components/CategoryTab/MainTabButtonGroup.tsx b/src/app/_components/CategoryTab/MainTabButtonGroup.tsx new file mode 100644 index 0000000..3c121e3 --- /dev/null +++ b/src/app/_components/CategoryTab/MainTabButtonGroup.tsx @@ -0,0 +1,48 @@ +"use client"; +import { GOALS } from "@/constants/categories/study_goal"; +import { CategoryTabIcon, categoryIconsName } from "./TabIcons"; +import mainTabSelectedStore from "@/store/mainTabStore"; +import { TabButton } from "./TabButton"; +import { MouseEvent } from "react"; + +const GOALS_TAB = GOALS.map((goal, index) => ({ + ...goal, + iconName: categoryIconsName[index], +})); + +export default function MainTabButtonGroup() { + const { mainTab, setMainTab } = mainTabSelectedStore(); + function changeTab(value: string) { + // 다시 클릭 시 빈 값으로 돌아갈 필요 없음 + setMainTab(value); + } + function clickHandler( + e: MouseEvent+ + + + + {GOALS_TAB.map(({ label, value, iconName }) => { + const active = mainTab === value; + return ( ++ + ); +} diff --git a/src/app/_components/CategoryTab/TabButtonsOfGoalSection.tsx b/src/app/_components/CategoryTab/TabButtonsOfGoalSection.tsx index 7689e79..029d0d1 100644 --- a/src/app/_components/CategoryTab/TabButtonsOfGoalSection.tsx +++ b/src/app/_components/CategoryTab/TabButtonsOfGoalSection.tsx @@ -1,66 +1,28 @@ -"use client"; -import { GOALS } from "@/constants/categories/study_goal"; +import MainTabButtonGroup from "./MainTabButtonGroup"; +import MainSectionOfGoals from "./MainSectionOfGoals"; +import { cfetch } from "@/utils/customFetch"; +import { StudyDataFull } from "@/types/model/StudyCard"; -import { useEffect, useState } from "react"; -import { TabButton } from "./TabButton"; -import StudyCardList from "@/common/Templates/CardList"; -import { CategoryTabIcon, categoryIconsName } from "./TabIcons"; -import { TStudyCard } from "@/types/model/StudyCard"; -import { getStudyCards } from "@/dummies/studies"; -import NoneContentItemBase from "../NoneContentItemBase"; +export default async function TabButtonsOfGoalSection() { + const response = await cfetch("/api/study", { + next: { tags: ["study"] }, + }) + .then((res) => res.json()) + .then(({ data }) => { + return data; + }) + .catch((err) => err); -const GOALS_TAB = GOALS.map((goal, index) => ({ - ...goal, - iconName: categoryIconsName[index], -})); + if (!response?.data) { + throw new Error("스터디 정보 가져오기 실패"); + } -export default function TabButtonsOfGoalSection() { - const initGoal = GOALS[0].value; - const init = getStudyCards(); - const initStudies = init.filter((s) => s.targetCategory.value === initGoal); - const [selected, setSelected] = useState(initGoal); - const [proStudies, setStudies] = useStateclickHandler(e, value)} + > + + ); + })} ++ - {GOALS_TAB.map(({ label, value, iconName }) => { - const active = selected === value; - return ( -- {proStudies.length > 0 ? ( -setSelected(value)} - > - - ); - })} -- - ) : ( - -- )} + {/*- - - - */} + ); } - -function StudyCardSkelton() { - return ( - - ); -} diff --git a/src/app/_components/CategoryTab/TabIcons.tsx b/src/app/_components/CategoryTab/TabIcons.tsx index 171748c..93070ce 100644 --- a/src/app/_components/CategoryTab/TabIcons.tsx +++ b/src/app/_components/CategoryTab/TabIcons.tsx @@ -50,40 +50,4 @@ export function CategoryTabIcon({ throw new Error( "CategoryIcon 컴포넌트는 Notebook(Icon), Keyboard(Icon), Bulb(Icon), FileEdit(Icon), Building(Icon), BellRing(Icon), MonitorPlay(Icon), Puzzle(Icon), Online(Icon), Offline(Icon) 중 하나를 name으로 가져야합니다" ); - - switch (name) { - case "Notebook": - case "NotebookIcon": - return ; - case "Keyboard": - case "KeyboardIcon": - return ; - case "Bulb": - case "BulbIcon": - return ; - case "FileEdit": - case "FileEditIcon": - return ; - case "Building": - case "BuildingIcon": - return ; - case "BellRing": - case "BellRingIcon": - return ; - case "MonitorPlay": - case "MonitorPlayIcon": - return ; - case "Puzzle": - case "PuzzleIcon": - return ; - case "Offline": - case "OfflineIcon": - return ; - case "Online": - case "OnlineIcon": - return ; - } - throw new Error( - "CategoryIcon 컴포넌트는 Notebook(Icon), Keyboard(Icon), Bulb(Icon), FileEdit(Icon), Building(Icon), BellRing(Icon), MonitorPlay(Icon), Puzzle(Icon), Online(Icon), Offline(Icon) 중 하나를 name으로 가져야합니다" - ); } diff --git a/src/app/_components/MainStatusBoard.tsx b/src/app/_components/MainStatusBoard.tsx index e2a895a..2062120 100644 --- a/src/app/_components/MainStatusBoard.tsx +++ b/src/app/_components/MainStatusBoard.tsx @@ -1,8 +1,13 @@ import SectionTitle from "@/common/Atoms/Text/SectionTitle"; -import { getUser } from "@/dummies/user"; import UserCurrentStudySection from "./UserCurrentStudySection"; -export default function MainStatusBoard({ name }: { name: string | null }) { +export default function MainStatusBoard({ + name, + userId, +}: { + name: string; + userId: string; +}) { const NOW_DATE = new Intl.DateTimeFormat("ko-KR", { weekday: "long", month: "long", @@ -14,7 +19,7 @@ export default function MainStatusBoard({ name }: { name: string | null }) { {name}님의 {NOW_DATE} 스터디 현황 -+ ); } diff --git a/src/app/_components/NoneContentItemBase.tsx b/src/app/_components/NoneContentItemBase.tsx index 55ebe3d..a7da26e 100644 --- a/src/app/_components/NoneContentItemBase.tsx +++ b/src/app/_components/NoneContentItemBase.tsx @@ -1,8 +1,17 @@ import { TProps } from "@/types/component/props"; +import clsx from "clsx"; -export default function NoneContentItemBase({ children }: TProps) { +export default function NoneContentItemBase({ + className, + children, +}: { className?: string } & TProps) { return ( - +{children}); diff --git a/src/app/_components/RecommendLatestStudies.tsx b/src/app/_components/RecommendLatestStudies.tsx index f56735d..919fe46 100644 --- a/src/app/_components/RecommendLatestStudies.tsx +++ b/src/app/_components/RecommendLatestStudies.tsx @@ -1,7 +1,22 @@ import StudyCardList from "@/common/Templates/CardList"; -import { getStudyCards } from "@/dummies/studies"; +import { StudyDataFull } from "@/types/model/StudyCard"; +import { cfetch } from "@/utils/customFetch"; -export default function RecommendLatestStudies() { - const proStudies = getStudyCards(); - return; +export default async function RecommendLatestStudies() { + const response = await cfetch("/api/study-matching/latest", { + next: { tags: ["study"] }, + }) + .then((res) => res.json()) + .then((data) => { + return data; + }) + .catch((err) => err); + + if (!response?.data) { + throw new Error("최신 스터디 정보 가져오기 실패"); + } + + const latest: StudyDataFull[] = response.data; + + return ; } diff --git a/src/app/_components/RecommendProStudies.tsx b/src/app/_components/RecommendProStudies.tsx index 59341b8..fa4aec7 100644 --- a/src/app/_components/RecommendProStudies.tsx +++ b/src/app/_components/RecommendProStudies.tsx @@ -1,7 +1,23 @@ +import { CommentBodyLayout } from "@/common/Organisms/Comment/CommentBodyLayout"; import StudyCardList from "@/common/Templates/CardList"; -import { getStudyCards } from "@/dummies/studies"; +import { StudyDataFull } from "@/types/model/StudyCard"; +import { cfetch } from "@/utils/customFetch"; -export default function RecommendProStudies() { - const proStudies = getStudyCards(); - return ; +export default async function RecommendProStudies() { + const response = await cfetch("/api/study-matching/favor", { + next: { tags: ["study"] }, + }) + .then((res) => res.json()) + .then((data) => { + return data; + }) + .catch((err) => err); + + if (!response?.data) { + throw new Error("추천 스터디 정보 가져오기 실패"); + } + + const recommend: StudyDataFull[] = response.data; + + return ; } diff --git a/src/app/_components/SetCategoryFavor.tsx b/src/app/_components/SetCategoryFavor.tsx new file mode 100644 index 0000000..f22310b --- /dev/null +++ b/src/app/_components/SetCategoryFavor.tsx @@ -0,0 +1,141 @@ +"use client"; +import { FormEvent, MouseEventHandler, useRef, useState } from "react"; +import { useRouter } from "next/navigation"; +import clsx from "clsx"; +import Button from "@/common/Atoms/Form/Button"; +import { + CATEGORIES, + CATEGORIES_ALL_OPTIONS, +} from "@/constants/categories/job_category"; +import Input from "@/common/Molecules/Form/Input"; +import { RefreshIcon } from "@/common/Atoms/Image/Icon"; +import { saveMyCategory } from "@/lib/actions/profileAction"; +import handleAlert from "@/common/Molecules/handleAlert"; + +export default function SetCategoryFavor() { + const router = useRouter(); + const categoryGroup = CATEGORIES.map(({ value, label }) => ({ + value, + label, + })); + const [shown, setShown] = useState (0); + const categoryRef = useRef (null); + + const skipThis: MouseEventHandler = (e) => { + e.preventDefault(); + handleAlert("success", "회원가입이 완료되어 로그인 되었습니다."); + router.replace("/"); + }; + + async function saveCategory(e: FormEvent ) { + e.preventDefault(); + const checkedData = new FormData(e.currentTarget); + const formData = new FormData(); + const my_category = []; + + for (const [key, value] of checkedData) { + if (key !== "category_group") { + my_category.push( + CATEGORIES_ALL_OPTIONS.find((opt) => opt.value === value) + ); + } + } + + formData.append("my_category", JSON.stringify(my_category)); + + try { + const result = await saveMyCategory(formData); + if (result.state) { + router.replace("/"); + handleAlert("success", result.message); + } else { + handleAlert("error", result.message); + } + } catch (error) { + console.log(error); + } + } + + return ( + ++ ); +} diff --git a/src/app/_components/TopBannerSearchbar.tsx b/src/app/_components/TopBannerSearchbar.tsx new file mode 100644 index 0000000..b75d9d4 --- /dev/null +++ b/src/app/_components/TopBannerSearchbar.tsx @@ -0,0 +1,85 @@ +"use client"; +import Button from "@/common/Atoms/Form/Button"; +import Input from "@/common/Molecules/Form/Input"; +import handleAlert from "@/common/Molecules/handleAlert"; +import { CATEGORIES_GROUPS } from "@/constants/categories/job_category"; +import { GOALS } from "@/constants/categories/study_goal"; +import { useRouter } from "next/navigation"; +import { FormEvent } from "react"; + +export default function TopBannerSearchbar() { + const router = useRouter(); + function search(e: FormEvent++ ++ + 관심 있는 전공 · 직무 카테고리를 선택하세요 + + + 선택한 카테고리와 관련된 스터디를 우선으로 추천해 드립니다.
+
+ 선택하지 않고 건너뛰어 홈으로 이동할 수도 있습니다. + +{ + if (categoryRef?.current) { + categoryRef.current.reset(); + } + }} + > + ++ ) { + e.preventDefault(); + + const formData = new FormData(e.currentTarget); + const newSearchParams = new URLSearchParams(); + for (const [key, value] of formData) { + console.log({ key, value }); + if (value !== "") { + newSearchParams.set(key, value as string); + } + } + + const paramsString = newSearchParams.toString(); + if (!paramsString) { + handleAlert("error", "검색 조건을 하나 이상 입력해주세요."); + return; + } + router.push(`/study/search?${paramsString}`); + } + return ( + + ); +} + +function SearchIconMain() { + return ( + + ); +} diff --git a/src/app/_components/TopBannerSection.tsx b/src/app/_components/TopBannerSection.tsx index 2451cf5..c328fba 100644 --- a/src/app/_components/TopBannerSection.tsx +++ b/src/app/_components/TopBannerSection.tsx @@ -1,9 +1,6 @@ import BannerImage from "./BannerImage"; -import Input from "@/common/Molecules/Form/Input"; -import { CATEGORIES } from "@/constants/categories/job_category"; -import { GOALS } from "@/constants/categories/study_goal"; -import Button from "@/common/Atoms/Form/Button"; import { Container } from "@/common/Layout"; +import TopBannerSearchbar from "./TopBannerSearchbar"; export default function TopBanner() { return ( @@ -19,49 +16,7 @@ export default function TopBanner() { - +); diff --git a/src/app/_components/UserCurrentStudy/CurrentStatusBoxLayout.tsx b/src/app/_components/UserCurrentStudy/CurrentStatusBoxLayout.tsx new file mode 100644 index 0000000..5dc514f --- /dev/null +++ b/src/app/_components/UserCurrentStudy/CurrentStatusBoxLayout.tsx @@ -0,0 +1,15 @@ +import { TProps } from "@/types/component/props"; +import Link from "next/link"; + +export function CurrentStatusLinkBox({ + href, + children, +}: { href: string } & TProps) { + return ( + ++ {children} ++ + ); +} diff --git a/src/app/_components/UserCurrentStudy/LikeStudyStatusContent.tsx b/src/app/_components/UserCurrentStudy/LikeStudyStatusContent.tsx new file mode 100644 index 0000000..57d0bfd --- /dev/null +++ b/src/app/_components/UserCurrentStudy/LikeStudyStatusContent.tsx @@ -0,0 +1,63 @@ +import { ChevronRightIcon } from "@/common/Atoms/Image/Icon"; +import { CurrentStatusLinkBox } from "./CurrentStatusBoxLayout"; +import { StudySchema } from "@/types/model/StudyCard"; +import connectDB from "@/lib/db"; +import { StudyLike } from "@/lib/schema"; + +type State = + | { state: false; message: string } + | { state: true; data: StudySchema[] }; + +async function getLikeStudies(userId: string): Promise{ + await connectDB(); + + try { + const likedStudies = await StudyLike.find({ userId }).populate("postId"); + if (!likedStudies) { + return { state: false, message: "찜한 스터디를 찾을 수 없습니다." }; + } + + return { state: true, data: [] }; + } catch (error) { + return { + state: false, + message: "찜한 스터디 정보를 가져오는데 실패했습니다.", + }; + } +} + +export default async function LikeStudyStatusContent({ + userId, +}: { + userId: string; +}) { + const result = userId + ? await getLikeStudies(userId) + : { state: false, data: [] }; + const count = result.state ? result.data.length : 0; + const previewName = result.state + ? count > 0 + ? `${result.data[0].studyInfo.title as string}` + : "관심있는 스터디를 찜해보세요!" + : "관심있는 스터디를 찜해보세요!"; + + return ( + + + ); +} diff --git a/src/app/_components/UserCurrentStudy/MyPostsContent.tsx b/src/app/_components/UserCurrentStudy/MyPostsContent.tsx new file mode 100644 index 0000000..c595f23 --- /dev/null +++ b/src/app/_components/UserCurrentStudy/MyPostsContent.tsx @@ -0,0 +1,46 @@ +import { ChevronRightIcon } from "@/common/Atoms/Image/Icon"; +import { CurrentStatusLinkBox } from "./CurrentStatusBoxLayout"; +import { PostDataFull } from "@/types/model/PostItem"; +import connectDB from "@/lib/db"; +import { Post } from "@/lib/schema"; + +type State = + | { state: false; message: string } + | { state: true; data: PostDataFull[] }; + +async function getPostsData(userId: string): Promise+++ ++++찜한 스터디
++ {count}개 +
++ {previewName} + {count > 1 && ` 외 ${count - 1}개`} +
+{ + await connectDB(); + + try { + const posts = await Post.find({ writer: userId }).sort({ + createdAt: "desc", + }); + if (!posts) { + return { state: false, message: "해당 게시글을 찾을 수 없습니다." }; + } + return { state: true, data: posts }; + } catch (error) { + return { state: false, message: "게시글 정보를 가져오는데 실패했습니다." }; + } +} + +export default async function MyPostsContent({ userId }: { userId: string }) { + const result = userId + ? await getPostsData(userId) + : { state: false, data: [] }; + const count = result.state ? result.data.length : 0; + + return ( + + + ); +} diff --git a/src/app/_components/UserCurrentStudy/ParticipatedInStudyStatusContent.tsx b/src/app/_components/UserCurrentStudy/ParticipatedInStudyStatusContent.tsx new file mode 100644 index 0000000..2ce7f0f --- /dev/null +++ b/src/app/_components/UserCurrentStudy/ParticipatedInStudyStatusContent.tsx @@ -0,0 +1,69 @@ +import { StudyApply } from "@/lib/schema"; +import connectDB from "@/lib/db"; +import { StudySchema } from "@/types/model/StudyCard"; +import { ChevronRightIcon } from "@/common/Atoms/Image/Icon"; +import { CurrentStatusLinkBox } from "./CurrentStatusBoxLayout"; +import clsx from "clsx"; + +type State = + | { state: false; message: string } + | { state: true; data: StudySchema[] }; + +async function getMyStudies(userId: string): Promise+++ ++++작성한 글
+{count}개
+{ + await connectDB(); + + try { + const likedPosts = await StudyApply.find({ userId }).populate("postId"); + if (!likedPosts) { + return { state: false, message: "지원한 스터디를 찾을 수 없습니다." }; + } + return { state: true, data: [] }; + } catch (error) { + return { + state: false, + message: "스터디 지원 정보를 가져오는데 실패했습니다.", + }; + } +} + +export default async function ParticipatedInStudyStatusContent({ + userId, +}: { + userId: string; +}) { + const result = userId + ? await getMyStudies(userId) + : { state: false, data: [] }; + const count = result.state === true ? result.data.length : 0; + + return ( + + + ); +} diff --git a/src/app/_components/UserCurrentStudySection.tsx b/src/app/_components/UserCurrentStudySection.tsx index b88f783..d575bc1 100644 --- a/src/app/_components/UserCurrentStudySection.tsx +++ b/src/app/_components/UserCurrentStudySection.tsx @@ -1,74 +1,19 @@ -import { ChevronRightIcon } from "@/common/Atoms/Image/Icon"; -import { TProps } from "@/types/component/props"; -import Link from "next/link"; +import LikeStudyStatusContent from "./UserCurrentStudy/LikeStudyStatusContent"; +import MyPostsContent from "./UserCurrentStudy/MyPostsContent"; +import ParticipatedInStudyStatusContent from "./UserCurrentStudy/ParticipatedInStudyStatusContent"; -export default function UserCurrentStudySection() { +export default function UserCurrentStudySection({ + userId, +}: { + userId: string; +}) { return ( <>0 ? "text-main-600" : "text-[#828285]"] + )} + > + {count}개 ++0 ? "#2a7ffe" : undefined} /> + ++스터디 일정
+ {result.state && count > 0 ? ( +++ ) : ( ++ {result.data[0].studyInfo.jobCategory.label} +
+{result.data[0].studyInfo.title}
+++ )} ++ 관심있는 스터디에 지원하고 참여해보세요! +
+- -); } - -function CurrentStudyBox({ children }: TProps) { - return ( -- - - -- {/* {참여 중인 스터디 수} */} - 1개 --- --스터디 일정
---- UXUI디자인 스터디 -
-- 웹 디자인 마스터하기! -
-- - - ---- ---- {/* {찜한 스터디 명} */} -찜한 스터디
- {/* {찜한 스터디 수} */} -- 11개 -
-- AI와 함께 공부하는 스터디 외 10개 -
-- - +--- ----작성한 글
- {/* {작성한 글 수} */} -0개
-+ + - {children} -- ); -} diff --git a/src/app/api/comment/[id]/reply/[reId]/route.ts b/src/app/api/comment/[id]/reply/[reId]/route.ts new file mode 100644 index 0000000..ee35cc9 --- /dev/null +++ b/src/app/api/comment/[id]/reply/[reId]/route.ts @@ -0,0 +1,51 @@ +import { deleteReply, updateReply } from "@/lib/actions/replyAction"; +import { NextRequest } from "next/server"; + +export async function PATCH( + request: NextRequest, + { params }: { params: { id: string; reId: string } } +) { + // const { searchParams } = request.nextUrl; + // const commentId = searchParams.get("parentId"); + // const replyId = searchParams.get("replyId"); + const commentId = params.id; + const replyId = params.reId; + const formData = await request.formData(); + + if (!commentId || !replyId) { + return Response.json( + { error: "comment 또는 reply id가 없습니다." }, + { status: 400 } + ); + } + + const result = await updateReply(commentId, replyId, formData); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + return Response.json({ data: result }, { status: 200 }); +} + +export async function DELETE( + _: NextRequest, + { params }: { params: { id: string; reId: string } } +) { + // const { searchParams } = request.nextUrl; + // const commentId = searchParams.get("parentId"); + // const replyId = searchParams.get("replyId"); + const commentId = params.id; + const replyId = params.reId; + + if (!commentId || !replyId) { + return Response.json( + { error: "comment 또는 reply id가 없습니다." }, + { status: 400 } + ); + } + + const result = await deleteReply(commentId, replyId); + if (result.success === false) { + return Response.json({ error: result }, { status: 500 }); + } + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/comment/[id]/reply/route.ts b/src/app/api/comment/[id]/reply/route.ts new file mode 100644 index 0000000..b437910 --- /dev/null +++ b/src/app/api/comment/[id]/reply/route.ts @@ -0,0 +1,31 @@ +import { getSession } from "@/auth"; +import { createReply } from "@/lib/actions/replyAction"; +import { NextRequest } from "next/server"; + +export async function POST( + request: NextRequest, + { params }: { params: { id: string } } +) { + // 작성자 session id 확인 + const session = await getSession(); + const userId: string | undefined = session?.user.id; + + // const { searchParams } = request.nextUrl; + // const userId = searchParams.get("userId"); + // const commentId = searchParams.get("parentId"); + const commentId = params.id; + const formData = await request.formData(); + + if (!userId || !commentId) { + return Response.json( + { error: "user 또는 comment id가 없습니다." }, + { status: 400 } + ); + } + + const result = await createReply(userId, commentId, formData); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/comment/[id]/route.ts b/src/app/api/comment/[id]/route.ts new file mode 100644 index 0000000..7aab403 --- /dev/null +++ b/src/app/api/comment/[id]/route.ts @@ -0,0 +1,66 @@ +import { getSession } from "@/auth"; +import { deleteComment, updateComment } from "@/lib/actions/commentAction"; +import { Comment } from "@/lib/schema"; +import { revalidateTag } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function PATCH( + request: NextRequest, + { params }: { params: { id: string } } +) { + const session = await getSession(); + const userId: string | undefined = session?.user.id; + + if (userId === undefined) { + return Response.json( + { error: "로그인 정보가 존재하지 않습니다." }, + { status: 401 } + ); + } + + const commentId = params.id; + const formData = await request.formData(); + + const exist = await Comment.findOne({ commentId }); + + if (!exist._id) { + return Response.json( + { error: { state: false, message: "댓글이 존재하지 않습니다." } }, + { status: 400 } + ); + } + + const result = await updateComment(commentId, formData); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + + const postId = exist.postId; + revalidateTag(postId); + return Response.json({ data: result }, { status: 200 }); +} + +export async function DELETE( + _: NextRequest, + { params }: { params: { id: string } } +) { + const commentId = params.id; + + const exist = await Comment.findOne({ commentId }); + + if (!exist._id) { + return Response.json( + { error: { state: false, message: "댓글이 존재하지 않습니다." } }, + { status: 400 } + ); + } + + const result = await deleteComment(commentId); + if (result.success === false) { + return Response.json({ error: result }, { status: 500 }); + } + + const postId = exist.postId; + revalidateTag(postId); + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/comment/route.ts b/src/app/api/comment/route.ts new file mode 100644 index 0000000..62cf227 --- /dev/null +++ b/src/app/api/comment/route.ts @@ -0,0 +1,23 @@ +import { NextRequest } from "next/server"; +import { getSession } from "@/auth"; +import { createComment } from "@/lib/actions/commentAction"; + +export async function POST(request: NextRequest) { + const session = await getSession(); + const userId: string | undefined = session?.user.id; + const { searchParams } = request.nextUrl; + const postId = searchParams.get("parentId"); + const formData = await request.formData(); + + if (!userId || !postId) { + return Response.json({ status: 400 }); + } + + const result = await createComment(userId, postId, formData); + + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/comments/[postId]/route.ts b/src/app/api/comments/[postId]/route.ts new file mode 100644 index 0000000..3a1981a --- /dev/null +++ b/src/app/api/comments/[postId]/route.ts @@ -0,0 +1,15 @@ +import { getComments } from "@/lib/actions/commentAction"; +import { revalidateTag } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function GET( + _: NextRequest, + { params }: { params: { postId: string } } +) { + const postId = params.postId; + const result = await getComments(postId); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/community/[id]/route.ts b/src/app/api/community/[id]/route.ts new file mode 100644 index 0000000..a7bfd66 --- /dev/null +++ b/src/app/api/community/[id]/route.ts @@ -0,0 +1,70 @@ +import { + deleteCommunity, + getCommunity, + updateCommunity, +} from "@/lib/actions/communityAction"; +import { revalidatePath } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function GET( + _: NextRequest, + { params }: { params: { id: string } } +) { + try { + const postId = params.id; + + if (!postId) { + return Response.json( + { error: "community id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const data = await getCommunity(postId); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function PATCH( + request: NextRequest, + { params }: { params: { id: string } } +) { + const formData = await request.formData(); + const postId = params.id; + + if (!postId) { + return Response.json( + { error: "community id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const result = await updateCommunity(postId, formData); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + revalidatePath("/post/" + postId); + return Response.json({ data: result }, { status: 200 }); +} + +export async function DELETE( + _: NextRequest, + { params }: { params: { id: string } } +) { + const postId = params.id; + + if (!postId) { + return Response.json( + { error: "community id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const result = await deleteCommunity(postId); + if (result.success === false) { + return Response.json({ error: result }, { status: 500 }); + } + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/community/likes/[postId]/route.ts b/src/app/api/community/likes/[postId]/route.ts new file mode 100644 index 0000000..9517282 --- /dev/null +++ b/src/app/api/community/likes/[postId]/route.ts @@ -0,0 +1,82 @@ +import { getSession } from "@/auth"; +import connectDB from "@/lib/db"; +import { Post, PostLike } from "@/lib/schema"; +import { revalidatePath, revalidateTag } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function GET( + _: NextRequest, + { params }: { params: { postId: string } } +) { + const { postId } = params; + const session = await getSession(); + const userId = session?.user.id; + + if (userId === undefined || userId === null) { + return Response.json( + { + state: true, + message: "로그인한 사용자만 좋아요 상태를 확인할 수 있어요.", + data: false, + }, + { status: 200 } + ); + } + + await connectDB(); + try { + const post = await Post.findOne({ postId }); + const exist = await PostLike.exists({ userId, postId: post._id }); + let result = { state: true, data: false }; + // console.log("GET exist:", exist); + if (exist) { + result.data = true; + } + revalidatePath(`/post/${postId}`); + return Response.json({ result }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function PATCH( + _: NextRequest, + { params }: { params: { postId: string } } +) { + const { postId } = params; + const session = await getSession(); + const userId = session?.user.id; + + if (userId === undefined || userId === null) { + return Response.json( + { state: false, message: "로그인한 사용자만 좋아요를 누를 수 있어요." }, + { status: 400 } + ); + } + + await connectDB(); + try { + const post = await Post.findOne({ postId }); + const exist = await PostLike.exists({ userId, postId: post._id }); + let result = { state: false, message: "" }; + // console.log("PATCH exist:", exist); + if (exist) { + await PostLike.deleteOne({ userId, postId: post._id }); + await Post.findOneAndUpdate({ postId }, { $inc: { like: -1 } }); + result.message = "좋아요를 취소했습니다."; + } else { + await new PostLike({ userId, postId: post._id }).save(); + await Post.findOneAndUpdate({ postId }, { $inc: { like: 1 } }); + result.message = "이 글을 좋아합니다."; + } + result.state = true; + revalidatePath("/post/" + postId); + // revalidateTag(postId); + return Response.json({ result }, { status: 200 }); + } catch (error) { + return Response.json( + { error: { state: false, message: "업데이트에 실패했습니다." } }, + { status: 500 } + ); + } +} diff --git a/src/app/api/community/my/route.ts b/src/app/api/community/my/route.ts new file mode 100644 index 0000000..212b55c --- /dev/null +++ b/src/app/api/community/my/route.ts @@ -0,0 +1,32 @@ +import { getSession } from "@/auth"; +import connectDB from "@/lib/db"; +import { Post } from "@/lib/schema"; +import { noData } from "@/utils/undefinedOrNull"; +import { NextRequest } from "next/server"; + +export async function GET(_: NextRequest) { + const session = await getSession(); + const userId = session?.user.id; + + if (noData(userId)) { + return Response.json({ data: null }, { status: 400 }); + } + + await connectDB(); + + try { + const data = await Post.find({ writer: userId }) + .populate({ + path: "postId", + populate: { + path: "writer", + select: "name email role profile_img position_tag", + }, + }) + // .populate("comments") + .sort({ createdAt: "desc" }); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/community/route.ts b/src/app/api/community/route.ts new file mode 100644 index 0000000..8e25566 --- /dev/null +++ b/src/app/api/community/route.ts @@ -0,0 +1,34 @@ +import { getSession } from "@/auth"; +import { createCommunity, getCommunity } from "@/lib/actions/communityAction"; +import { NextRequest } from "next/server"; + +export async function GET() { + try { + const data = await getCommunity(); + + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function POST(request: NextRequest) { + const session = await getSession(); + const userId: string | undefined = session?.user.id; + + const formData = await request.formData(); + + if (!userId) { + return Response.json( + { error: "user id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const result = await createCommunity(userId, formData); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/api/profile/[id]/route.ts b/src/app/api/profile/[id]/route.ts new file mode 100644 index 0000000..2a165fe --- /dev/null +++ b/src/app/api/profile/[id]/route.ts @@ -0,0 +1,47 @@ +import { updateProfile } from "@/lib/actions/profileAction"; +import { getUserData } from "@/lib/actions/userAction"; +import { NextRequest } from "next/server"; + +export async function GET( + _: NextRequest, + { params }: { params: { id: string } } +) { + try { + const userId = params.id; + + if (!userId) { + return Response.json( + { error: "user id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const data = await getUserData(userId); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function PATCH( + request: NextRequest, + { params }: { params: { id: string } } +) { + try { + const formData = await request.json(); + const userId = params.id; + + if (!userId) { + return Response.json( + { error: "user id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const data = await updateProfile(userId, formData); + + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/study-matching/favor/route.ts b/src/app/api/study-matching/favor/route.ts new file mode 100644 index 0000000..86fb612 --- /dev/null +++ b/src/app/api/study-matching/favor/route.ts @@ -0,0 +1,56 @@ +import { getSession } from "@/auth"; +import connectDB from "@/lib/db"; +import { Study, User } from "@/lib/schema"; +import { noData } from "@/utils/undefinedOrNull"; +import { NextRequest } from "next/server"; + +const DEFAULT_SIZE = 8; + +export async function GET(_: NextRequest) { + const session = await getSession(); + const userId = session?.user.id; + await connectDB(); + + try { + if (noData(userId)) { + const data = await Study.find() + .populate("writer", "name email role profile_img position_tag") + .sort({ heartCount: "desc" }); + return Response.json({ data }, { status: 200 }); + } + + const favors = await User.find({ _id: userId }).select("my_category"); + const result = + favors.length > 0 + ? await Study.find({ + studyInfo: { jobCategory: { $in: favors } }, + }) + .populate("writer", "name email role profile_img position_tag") + .sort({ createdAt: "desc" }) + : await Study.find() + .populate("writer", "name email role profile_img position_tag") + .sort({ heartCount: "desc" }); + + if (favors.length > 0 && result.length < DEFAULT_SIZE) { + // const groups = favors.reduce((prev, curr) => { + // const [cate, g] = curr.split("_"); + // const group = [cate, g].join("_"); + // if (prev.includes(group)) return [...prev]; + // return [...prev, group]; + // }, []); + const notEqual = await Study.find({ + studyInfo: { jobCategory: { $nin: favors } }, + }) + .populate("writer", "name email role profile_img position_tag") + .sort({ createdAt: "desc" }); + + const vacant = DEFAULT_SIZE - result.length; + result.push(...notEqual.splice(0, vacant)); + } + + const data = result.splice(0, 8); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/study-matching/latest/route.ts b/src/app/api/study-matching/latest/route.ts new file mode 100644 index 0000000..6c49d82 --- /dev/null +++ b/src/app/api/study-matching/latest/route.ts @@ -0,0 +1,18 @@ +import connectDB from "@/lib/db"; +import { Study } from "@/lib/schema"; +import { NextRequest } from "next/server"; + +export async function GET(_: NextRequest) { + await connectDB(); + + try { + const result = await Study.find() + .populate("writer", "name email role profile_img position_tag") + .sort({ createdAt: "desc" }); + + const data = result.splice(0, 8); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/study/[id]/route.ts b/src/app/api/study/[id]/route.ts new file mode 100644 index 0000000..3bd97dd --- /dev/null +++ b/src/app/api/study/[id]/route.ts @@ -0,0 +1,66 @@ +import { deleteStudy, getStudy, updateStudy } from "@/lib/actions/studyAction"; +import { NextRequest } from "next/server"; + +export async function GET( + _: NextRequest, + { params }: { params: { id: string } } +) { + try { + const studyId = params.id; + + if (!studyId) { + return Response.json( + { error: "study id가 존재하지 않습니다." }, + { status: 400 } + ); + } + const data = await getStudy(studyId); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function PATCH( + request: NextRequest, + { params }: { params: { id: string } } +) { + try { + const formData = await request.json(); + const studyId = params.id; + + if (!studyId) { + return Response.json( + { error: "study id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const data = await updateStudy(studyId, formData); + + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function DELETE( + _: NextRequest, + { params }: { params: { id: string } } +) { + try { + const studyId = params.id; + + if (!studyId) { + return Response.json( + { error: "study id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const data = await deleteStudy(studyId); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/study/apply/[studyId]/route.ts b/src/app/api/study/apply/[studyId]/route.ts new file mode 100644 index 0000000..715fdc0 --- /dev/null +++ b/src/app/api/study/apply/[studyId]/route.ts @@ -0,0 +1,8 @@ +import { NextRequest } from "next/server"; + +export async function POST( + request: NextRequest, + { params }: { params: { studyId: string } } +) { + const studyId = params.studyId; +} diff --git a/src/app/api/study/likes/[studyId]/route.ts b/src/app/api/study/likes/[studyId]/route.ts new file mode 100644 index 0000000..421019c --- /dev/null +++ b/src/app/api/study/likes/[studyId]/route.ts @@ -0,0 +1,80 @@ +import { getSession } from "@/auth"; +import connectDB from "@/lib/db"; +import { Study, StudyLike } from "@/lib/schema"; +import { revalidatePath, revalidateTag } from "next/cache"; +import { NextRequest } from "next/server"; + +export async function GET( + _: NextRequest, + { params }: { params: { studyId: string } } +) { + const { studyId } = params; + const session = await getSession(); + const userId = session?.user.id; + + if (userId === undefined || userId === null) { + return Response.json( + { + state: true, + message: "로그인한 사용자만 좋아요 상태를 확인할 수 있어요.", + data: false, + }, + { status: 200 } + ); + } + + await connectDB(); + try { + const study = await Study.findOne({ studyId }); + const exist = await StudyLike.exists({ userId, studyId: study._id }); + let result = { state: true, data: false }; + // console.log("GET exist:", exist); + if (exist) { + result.data = true; + } + return Response.json({ result }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function PATCH( + _: NextRequest, + { params }: { params: { studyId: string } } +) { + const { studyId } = params; + const session = await getSession(); + const userId = session?.user.id; + + if (userId === undefined || userId === null) { + return Response.json( + { state: false, message: "로그인한 사용자만 좋아요를 누를 수 있어요." }, + { status: 400 } + ); + } + + await connectDB(); + try { + const study = await Study.findOne({ studyId }); + const exist = await StudyLike.exists({ userId, studyId: study._id }); + let result = { state: false, message: "" }; + // console.log("PATCH exist:", exist); + if (exist) { + await StudyLike.deleteOne({ userId, studyId: study._id }); + await Study.findOneAndUpdate({ studyId }, { $inc: { heartCount: -1 } }); + result.message = "찜을 취소했어요."; + } else { + await new StudyLike({ userId, studyId: study._id }).save(); + await Study.findOneAndUpdate({ studyId }, { $inc: { heartCount: 1 } }); + result.message = "이 스터디를 찜 했어요."; + } + result.state = true; + revalidatePath("/study/" + studyId); + return Response.json({ result }, { status: 200 }); + } catch (error) { + return Response.json( + { error: { state: false, message: "업데이트에 실패했습니다." } }, + { status: 500 } + ); + } +} diff --git a/src/app/api/study/likes/my/applied/route.ts b/src/app/api/study/likes/my/applied/route.ts new file mode 100644 index 0000000..e002396 --- /dev/null +++ b/src/app/api/study/likes/my/applied/route.ts @@ -0,0 +1,32 @@ +import { getSession } from "@/auth"; +import connectDB from "@/lib/db"; +import { StudyApply } from "@/lib/schema"; +import { noData } from "@/utils/undefinedOrNull"; +import { NextRequest } from "next/server"; + +export async function GET(_: NextRequest) { + const session = await getSession(); + const userId = session?.user.id; + + if (noData(userId)) { + return Response.json({ data: null }, { status: 400 }); + } + + await connectDB(); + + try { + const data = await StudyApply.find({ userId }) + .populate({ + path: "studyId", + populate: { + path: "writer", + select: "name email role profile_img position_tag", + }, + }) + // .populate("comments") + .sort({ createdAt: "desc" }); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/study/likes/my/route.ts b/src/app/api/study/likes/my/route.ts new file mode 100644 index 0000000..3a9d582 --- /dev/null +++ b/src/app/api/study/likes/my/route.ts @@ -0,0 +1,34 @@ +import { NextRequest } from "next/server"; +import { getSession } from "@/auth"; +import connectDB from "@/lib/db"; +import { StudyLikeModel } from "@/types/model/Likes"; +import { StudyLike } from "@/lib/schema"; +import { noData } from "@/utils/undefinedOrNull"; + +export async function GET(_: NextRequest) { + const session = await getSession(); + const userId = session?.user.id; + + if (noData(userId)) { + return Response.json({ data: null }, { status: 400 }); + } + + await connectDB(); + + try { + const data: StudyLikeModel[] = await StudyLike.find({ userId }) + .select("studyId") + .populate({ + path: "studyId", + populate: { + path: "writer", + select: "name email role profile_img position_tag", + }, + }) + // .populate("comments") + .sort({ createdAt: "desc" }); + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} diff --git a/src/app/api/study/route.ts b/src/app/api/study/route.ts new file mode 100644 index 0000000..4d20ed9 --- /dev/null +++ b/src/app/api/study/route.ts @@ -0,0 +1,32 @@ +import { getSession } from "@/auth"; +import { createStudy, getStudy } from "@/lib/actions/studyAction"; +import { NextRequest } from "next/server"; + +export async function GET() { + try { + const data = await getStudy(); + + return Response.json({ data }, { status: 200 }); + } catch (error) { + return Response.json({ error }, { status: 500 }); + } +} + +export async function POST(request: NextRequest) { + const formData = await request.formData(); + const session = await getSession(); + const userId = session?.user.id; + + if (!userId) { + return Response.json( + { error: "user id가 존재하지 않습니다." }, + { status: 400 } + ); + } + + const result = await createStudy(userId, formData); + if (result.state === false) { + return Response.json({ error: result }, { status: 500 }); + } + return Response.json({ data: result }, { status: 200 }); +} diff --git a/src/app/globals.css b/src/app/globals.css index 160e591..ec54039 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -46,6 +46,9 @@ body { .inputWrap { @apply flex flex-col gap-2 w-full text-sm; } + .gridContent { + @apply lg:w-[calc(100vw-2rem-240px-30px)] xl:w-[calc(1200px-280px-30px)]; + } } button, @@ -64,3 +67,15 @@ details > summary { .swiper-pagination-bullet-active { background-color: var(--color-label-strong); } + +/* input number 화살표 없애기 */ +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index aac3d8d..a79fe27 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,8 +2,6 @@ import type { Metadata, Viewport } from "next"; import { Noto_Sans_KR } from "next/font/google"; import "./globals.css"; import { Toaster } from "react-hot-toast"; -import AuthSession from "./_components/AuthSession"; - const notosans = Noto_Sans_KR({ weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], style: ["normal"], diff --git a/src/app/loading.tsx b/src/app/loading.tsx new file mode 100644 index 0000000..5a48284 --- /dev/null +++ b/src/app/loading.tsx @@ -0,0 +1,5 @@ +import LoadingContainer from "@/common/Layout/LoadingContainer"; + +export default function Loading() { + return; +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 619bd20..a0c7aa9 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,7 +1,10 @@ +"use client"; import Image from "next/image"; import Link from "next/link"; +import { useRouter } from "next/navigation"; export default function NotFound() { + const router = useRouter(); return ( 페이지를 찾을 수가 없어요
@@ -17,12 +20,20 @@ export default function NotFound() {페이지 주소를 다시 확인해주세요
- - 홈으로 이동 - ++ + 홈으로 이동 + + +} + {session?.user && ( + + )} - 인기 많은 프로 스터디 추천 + {session?.user + ? "관심 있을만한 스터디 추천" + : "인기 많은 스터디 추천"} + 케밋 스터디원들의 놀라운 성장 후기 diff --git a/src/app/set-category/page.tsx b/src/app/set-category/page.tsx new file mode 100644 index 0000000..cd32d7b --- /dev/null +++ b/src/app/set-category/page.tsx @@ -0,0 +1,17 @@ +import SetCategoryFavor from "@/app/_components/SetCategoryFavor"; +import { getSession } from "@/auth"; +import NotFound from "../not-found"; + +export default async function SetMyCategory() { + const session = await getSession(); + + if (!session) { + return ; + } + + return ( + ++ ); +} diff --git a/src/auth.ts b/src/auth.ts index f9dc64f..e33e9b0 100644 --- a/src/auth.ts +++ b/src/auth.ts @@ -6,6 +6,7 @@ import { compare } from "bcryptjs"; import google from "next-auth/providers/google"; import kakao from "next-auth/providers/kakao"; import github from "next-auth/providers/github"; +import { ONE_HOUR_IN_SECS } from "./constants/times_unit"; export const { handlers, signIn, signOut, auth } = NextAuth({ providers: [ @@ -16,18 +17,11 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ password: { label: "password", type: "password" }, }, async authorize(credentials) { - console.log("크레덴셜", credentials); const { email, password } = credentials; - if (!email || !password) { - throw new CredentialsSignin("정보를 다시 확인해주세요."); - } - await connectDB(); - const user = await User.findOne({ email }).select( - "+id +name +image +phone +role" - ); + const user = await User.findOne({ email }); if (!user) { throw new CredentialsSignin("가입되지 않는 회원입니다."); @@ -46,6 +40,9 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ image: user.profile_img, phone: user.phone, role: user.role, + position_tag: user.position_tag, + introduce: user.introduce, + my_category: user.my_category, }; }, }), @@ -68,33 +65,39 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ session: { strategy: "jwt", - maxAge: 24 * 60 * 60, + maxAge: 24 * ONE_HOUR_IN_SECS, }, callbacks: { async signIn({ user, account }: { user: any; account: any }) { - console.log("확인", user, account); - if (account?.provider !== "credentials") { - const { name } = user; + const { name, position_tag, introduce, my_category } = user; const { providerAccountId, provider } = account; + if (!providerAccountId) { + throw new CredentialsSignin( + "로그인에 실패했습니다. 다시 시도해주세요." + ); + } + await connectDB(); - const socialUserCheck = await User.findOne({ - providerAccountId, - provider, - }); + let socialUserCheck = await User.findOne({ providerAccountId }); if (!socialUserCheck) { const user = await new User({ name, + position_tag, + introduce, + my_category, providerAccountId, provider, }); - const dbSave = await user.save(); - console.log("소셜회원정보 저장 완료" + dbSave); + socialUserCheck = await user.save(); + console.log("소셜회원정보 저장 완료"); } + + user.id = socialUserCheck._id; } return true; @@ -109,10 +112,8 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ user: any; account: any; }) { - console.log("JWT", token, "USER", user, "ACCOUNT", account); - if (user) { - token.user = user; + token.id = user.id; token.account = account; } @@ -120,7 +121,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ }, async session({ session, token }: { session: any; token: any }) { - session.user = token.user; + session.user.id = token.id; session.account = token.account; return session; diff --git a/src/common/Atoms/Form/Button.tsx b/src/common/Atoms/Form/Button.tsx index 5b7e498..a9b61df 100644 --- a/src/common/Atoms/Form/Button.tsx +++ b/src/common/Atoms/Form/Button.tsx @@ -1,59 +1,65 @@ -import { TButtonProps, TIconButtonProps } from "@/types/component/props"; -import { getStyles } from "../atomStyle"; -import clsx from "clsx"; +import { cn } from "@/utils/cn"; +import { ComponentProps, ReactNode } from "react"; +import { ButtonVariants } from "../atomStyle"; -export default function Button(props: TIconButtonProps | TButtonProps) { - switch (props.variation) { - case "icon": { - const { - variation, - className, - size = 40, - colors = { bg: "bg-main-600" }, - children, - ...restProps - } = props; - const square = `w-[${size}px] h-[${size}px]`; - return ( - - ); - } - default: { - const { - variation, +export type TButtonProps = ComponentProps<"button"> & { + variation?: "solid" | "outline" | "text"; + color?: "default" | "main" | "sub" | "danger" | "assist"; + size?: "fit" | "full" | "form"; + startIcon?: ReactNode; + endIcon?: ReactNode; +}; + +function Button(props: TButtonProps) { + const { + variation = "solid", + color = "main", + className, + startIcon = null, + endIcon = null, + size = "fit", + children, + ...restProps + } = props; + return ( + + ); +} + +export type TIconButtonProps = ComponentProps<"button"> & { + size?: number; +}; + +function Icon(props: TIconButtonProps) { + const { className, size = 40, children, ...restProps } = props; + // const color = `${colors.bg}/0 hover:${colors.bg}/15`; + const square = `w-[${size}px] h-[${size}px]`; + return ( + - ); - } - } + "flex items-center justify-center rounded-lg", + // color, + square, + "disabled:border-label-assist disabled:text-label-assist disabled:cursor-not-allowed disabled:opacity-35" + )} + {...restProps} + > + {children} + + ); } + +export default Object.assign(Button, { + Icon, +}); diff --git a/src/common/Atoms/Form/DateRange.tsx b/src/common/Atoms/Form/DateRange.tsx index c5183d5..a793a67 100644 --- a/src/common/Atoms/Form/DateRange.tsx +++ b/src/common/Atoms/Form/DateRange.tsx @@ -4,9 +4,23 @@ import { useState } from "react"; import ReactDatePicker from "react-datepicker"; import "./customDateRange.css"; -export default function DateRangePicker({ id }: { id: string }) { +export default function DateRangePicker({ + id, + onChange, +}: { + id: string; + onChange: (dates: [Date, Date]) => void; +}) { const [startDate, setStartDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date()); + const handleStartDateChange = (date: Date) => { + setStartDate(date); + onChange([date, endDate]); + }; + const handleEndDateChange = (date: Date) => { + setEndDate(date); + onChange([startDate, date]); + }; return (+ setStartDate(date!)} + onChange={(date) => handleStartDateChange(date!)} selectsStart startDate={startDate} endDate={endDate} @@ -27,7 +41,7 @@ export default function DateRangePicker({ id }: { id: string }) { id={`${id}-end`} name={`${id}-end`} selected={endDate} - onChange={(date) => setEndDate(date!)} + onChange={(date) => handleEndDateChange(date!)} selectsEnd startDate={startDate} endDate={endDate} diff --git a/src/common/Atoms/Form/Field.tsx b/src/common/Atoms/Form/Field.tsx index e02e94b..7e7fe8a 100644 --- a/src/common/Atoms/Form/Field.tsx +++ b/src/common/Atoms/Form/Field.tsx @@ -2,7 +2,7 @@ import { TProps } from "@/types/component/props"; export default function GridField({ children }: TProps) { return ( - +diff --git a/src/common/Layout/LoadingContainer.tsx b/src/common/Layout/LoadingContainer.tsx new file mode 100644 index 0000000..2c99892 --- /dev/null +++ b/src/common/Layout/LoadingContainer.tsx @@ -0,0 +1,36 @@ +import clsx from "clsx"; +import { ComponentProps } from "react"; + +export default function LoadingContainer({ + fullScreen = true, + className, +}: { + fullScreen?: boolean; + className?: ComponentProps<"div">["className"]; +}) { + return ( + <> +{children}); diff --git a/src/common/Atoms/Form/InputElement.tsx b/src/common/Atoms/Form/InputElement.tsx index ac4e98c..999aa0d 100644 --- a/src/common/Atoms/Form/InputElement.tsx +++ b/src/common/Atoms/Form/InputElement.tsx @@ -49,7 +49,11 @@ export function Textarea(props: React.ComponentProps<"textarea">) { return ( <> diff --git a/src/common/Atoms/Form/QuillNoSSR.tsx b/src/common/Atoms/Form/QuillNoSSR.tsx index c5f8679..303b571 100644 --- a/src/common/Atoms/Form/QuillNoSSR.tsx +++ b/src/common/Atoms/Form/QuillNoSSR.tsx @@ -14,12 +14,12 @@ const QuillNoSSR = dynamic( async () => { const { default: QuillComponent } = await import("react-quill"); const icons = QuillComponent.Quill.import("ui/icons"); - icons[ - "image" - ] = ` -`; + // icons[ + // "image" + // ] = ` + // `; icons[ "link" ] = `+ + + ++ + ); +} diff --git a/src/common/Layout/ProfileMenu/CreateStudyLink.tsx b/src/common/Layout/ProfileMenu/CreateStudyLink.tsx index 2c88344..9d5f2ac 100644 --- a/src/common/Layout/ProfileMenu/CreateStudyLink.tsx +++ b/src/common/Layout/ProfileMenu/CreateStudyLink.tsx @@ -5,7 +5,7 @@ import { CreateStudyIcon } from "@public/icons"; export default function CreateStudyLink() { return (diff --git a/src/common/Layout/ProfileMenu/DefaultProfileMenuItems.tsx b/src/common/Layout/ProfileMenu/DefaultProfileMenuItems.tsx index c1f1bb3..b454c70 100644 --- a/src/common/Layout/ProfileMenu/DefaultProfileMenuItems.tsx +++ b/src/common/Layout/ProfileMenu/DefaultProfileMenuItems.tsx @@ -26,24 +26,24 @@ export default function DefaultProfileMenuItems() { href="/my/profile" /> } + icon={ } label="내 스터디" href="/my/study" /> } + icon={ } label="찜 스터디" href="/my/like-study" /> } + icon={ } label="내가 쓴 글" href="/my/post" /> } + icon={ } label="로그아웃" /> 스터디 만들기 --++ ); +} diff --git a/src/common/Molecules/Form/ButtonCheck.tsx b/src/common/Molecules/Form/ButtonCheck.tsx index 5759fb6..ec94102 100644 --- a/src/common/Molecules/Form/ButtonCheck.tsx +++ b/src/common/Molecules/Form/ButtonCheck.tsx @@ -25,7 +25,7 @@ function RadioButton( /> @@ -46,7 +46,7 @@ function CheckboxButton( /> diff --git a/src/common/Molecules/Form/ImageInputWithButton.tsx b/src/common/Molecules/Form/ImageInputWithButton.tsx index 6c2fc29..e172064 100644 --- a/src/common/Molecules/Form/ImageInputWithButton.tsx +++ b/src/common/Molecules/Form/ImageInputWithButton.tsx @@ -1,7 +1,14 @@ "use client"; -import Button from "@/common/Atoms/Form/Button"; -import { TImageInputWithButtonProps } from "@/types/component/props"; -import { MouseEvent, useRef } from "react"; +import Button, { TButtonProps } from "@/common/Atoms/Form/Button"; +import { ComponentProps, MouseEvent, ReactNode, useRef } from "react"; + +export type TImageInputWithButtonProps = { + buttonProps: Omit+diff --git a/src/common/Layout/ProfileMenu/ResponsiveMenu.tsx b/src/common/Layout/ProfileMenu/ResponsiveMenu.tsx index 8942bb8..4904430 100644 --- a/src/common/Layout/ProfileMenu/ResponsiveMenu.tsx +++ b/src/common/Layout/ProfileMenu/ResponsiveMenu.tsx @@ -1,13 +1,29 @@ import { ReactNode } from "react"; import MobileMenu from "./MobileMenu"; import DesktopMenu from "./DesktopMenu"; +import { getSession } from "@/auth"; +import { getAlert } from "@/lib/actions/AlertAction"; +export type TUserAlert = { + contents: { title: string }; + postId: string; + comments: string[]; +}; export type TProfileImage = { profileImage: ReactNode }; -export default function ResponsiveMenu(props: TProfileImage) { + +export default async function ResponsiveMenu(props: TProfileImage) { + const session = await getSession(); + const userId = session?.user.id; + + if (!userId) { + return; + } + const alertList: TUserAlert[] = (await getAlert(userId)).result || []; + return ( <>{profileImage} ---
+
+ ++ {commentArr.length !== 0 && ( + + {commentArr.length} ++ )} ++++ {alertList.length ? ( + alertList.map( + (list, index) => + list.comments.length && ( ++ 알림 + ++ ) + ) + ) : ( ++ + ++ )} +새로운 알림이 없습니다.
+- + ); } diff --git a/src/common/Layout/SessionedHeader.tsx b/src/common/Layout/SessionedHeader.tsx new file mode 100644 index 0000000..1032512 --- /dev/null +++ b/src/common/Layout/SessionedHeader.tsx @@ -0,0 +1,39 @@ +import Image from "next/image"; +import ResponsiveMenu from "./ProfileMenu/ResponsiveMenu"; +import { DummyProfileImg } from "@public/images"; +import { getUserData } from "@/lib/actions/userAction"; + +export default async function SessionedHeader({ + sessionId, +}: { + sessionId: string; +}) { + const result = await getUserData(sessionId); + + if (result.state === false) { + throw new Error(result.message); + } + + const user = result.data; + + return ( + ++ } + /> ++ + + + {user.name} + (false); return ( @@ -23,7 +19,7 @@ export default function SaveHeartButton({ /> - {saveHeart ? heartCount++ : heartCount - 1} + {saveHeart ? heart++ : heart - 1} ); diff --git a/src/common/Molecules/ModalPortal/ModalPortal.tsx b/src/common/Molecules/ModalPortal/ModalPortal.tsx index 9edd4ef..990ab62 100644 --- a/src/common/Molecules/ModalPortal/ModalPortal.tsx +++ b/src/common/Molecules/ModalPortal/ModalPortal.tsx @@ -24,13 +24,9 @@ const ModalPortal = forwardRef( className="relative w-full h-full lg:max-w-full lg:max-h-full lg:w-fit lg:h-fit lg:rounded-twenty bg-white p-14 overflow-hidden z-modal" onClick={stopPropagation} > - + {children}@@ -43,16 +39,3 @@ const ModalPortal = forwardRef( ModalPortal.displayName = "ModalPortal"; export default ModalPortal; - -// export default function ModalPortal( -// props: TModalPortalProps< -// HTMLButtonElement | HTMLDivElement | HTMLDialogElement -// > -// ) { -// return ( -// <> -// {/**/} -// -// -// ); -// } diff --git a/src/common/Molecules/Notification.tsx b/src/common/Molecules/Notification.tsx index 761738b..03f8cfe 100644 --- a/src/common/Molecules/Notification.tsx +++ b/src/common/Molecules/Notification.tsx @@ -94,9 +94,7 @@ export default function Notification(props: { )} {message?.title && ( diff --git a/src/common/Molecules/Pagination.tsx b/src/common/Molecules/Pagination.tsx index 2aa2ccf..f5d9b1e 100644 --- a/src/common/Molecules/Pagination.tsx +++ b/src/common/Molecules/Pagination.tsx @@ -1,7 +1,8 @@ -import { TButtonProps, TIconButtonProps } from "@/types/component/props"; -import Button from "../Atoms/Form/Button"; -import { PaginationChevronIcon } from "../Atoms/Image/Icon"; +"use client"; import { Dispatch, SetStateAction, useId } from "react"; +import Button, { TButtonProps } from "../Atoms/Form/Button"; +import { PaginationChevronIcon } from "../Atoms/Image/Icon"; +import { TIconButtonProps } from "@/types/component/props"; type TPages = { length: number; @@ -18,8 +19,7 @@ export default function Pagination(props: TPages) { const isEnd = current === length; return (diff --git a/src/app/(auth)/_components/ErrorAlert.tsx b/src/common/Molecules/handleAlert.tsx similarity index 83% rename from src/app/(auth)/_components/ErrorAlert.tsx rename to src/common/Molecules/handleAlert.tsx index b3c426a..68b8da4 100644 --- a/src/app/(auth)/_components/ErrorAlert.tsx +++ b/src/common/Molecules/handleAlert.tsx @@ -3,7 +3,8 @@ import Notification from "@/common/Molecules/Notification"; export default function handleAlert( type: "success" | "error", - content: string + content?: string, + message?: string ) { toast.custom((t: Toast) => (-); } -function PageButton( - props: Partial{ if (!isStart) { @@ -28,7 +28,7 @@ export default function Pagination(props: TPages) { }} > +- {pageNums.map((page) => (-))} { if (!isEnd) { @@ -50,32 +49,37 @@ export default function Pagination(props: TPages) { }} > +- & { active?: boolean } -) { - const { - active = false, - variation = "text", - onClick, - children, - ...restProps - } = props; +function PageButton(props: Partial & { active?: boolean }) { + const { active = false, onClick, children, ...restProps } = props; return ( ); } + +function PageButtonIcon( + props: Partial & { active?: boolean } +) { + const { active = false, onClick, children, ...restProps } = props; + return ( + + {children} + + ); +} diff --git a/src/common/Molecules/Profile.tsx b/src/common/Molecules/Profile.tsx index c83cceb..449dd92 100644 --- a/src/common/Molecules/Profile.tsx +++ b/src/common/Molecules/Profile.tsx @@ -1,14 +1,21 @@ import Image from "next/image"; import ProfileImg from "../Atoms/Image/ProfileImg"; import { BadgeIcon } from "@public/icons"; -import { TUserBase } from "@/types/model/User"; import clsx from "clsx"; +// Profile에 user 데이터 전달 시 형식에 맞게 필요한 값만 plain object로 전달 +export type TProfileUser = { + profile_img: string; + name: string; + position_tag: string; + role: string; +}; + export default function Profile({ user, size, }: { - user: TUserBase; + user: TProfileUser; size: "default" | "large" | "small"; }) { const gap = { @@ -21,12 +28,16 @@ export default function Profile({ large: "text-H4 text-label-normal", small: "text-label-600 text-label-dimmed", }; - const src = user.profileUrl || "/images/profile/DummyProfileImg.jpg"; + + const src = user.profile_img || "/images/profile/DummyProfileImg.jpg"; + console.log("profile user", user.name); + return (diff --git a/src/common/Molecules/SidePopup.tsx b/src/common/Molecules/SidePopup.tsx index b6d66ad..c9cdfd0 100644 --- a/src/common/Molecules/SidePopup.tsx +++ b/src/common/Molecules/SidePopup.tsx @@ -24,9 +24,9 @@ const SidePopup = forwardRef( className="relative w-full h-full sm:w-[240px] sm:h-full bg-white p-4 overflow-hidden z-modal" onClick={stopPropagation} > - +- {user.position} {user.name} + {user.position_tag ? `${user.position_tag} ` : null} + {user.name} {user.role === "pro" && } {children})); diff --git a/src/common/Organisms/Comment/CommentBodyLayout.tsx b/src/common/Organisms/Comment/CommentBodyLayout.tsx new file mode 100644 index 0000000..7cef0cd --- /dev/null +++ b/src/common/Organisms/Comment/CommentBodyLayout.tsx @@ -0,0 +1,122 @@ +"use client"; +import { CommentOrReply } from "@/types/model/Comment"; +import { useState } from "react"; +import CommentInputForm from "./CommentInput"; +import useModal from "@/hooks/useModal"; +import Button from "@/common/Atoms/Form/Button"; +import { cfetch } from "@/utils/customFetch"; +import handleAlert from "@/common/Molecules/handleAlert"; +import { useRouter } from "next/navigation"; + +type TCommentBodyLayout = { + comment: CommentOrReply; + commentId: string; + canEdit: boolean; + canReply?: boolean; + sessionId: string; +}; +export function CommentBodyLayout(props: TCommentBodyLayout) { + const { comment, commentId, canEdit, canReply = true, sessionId } = props; + const router = useRouter(); + + const [content, setContent] = useState(comment.content); + const toURLs = [`/api/comment/`, commentId]; + if (comment?.replyId !== undefined) { + toURLs.push("/reply/", comment.replyId); + } + const toURLString = toURLs.join(""); + + const { Modal, open, close } = useModal({ + children: ( + ++ ), + }); + + const createdAt = new Intl.DateTimeFormat("ko-KR", { + dateStyle: "medium", + timeStyle: "medium", + }); + + function onDeleteCancel() { + close(); + } + async function onDelete() { + const result = await cfetch(toURLString, { method: "DELETE" }) + .then((res) => res.json()) + .then(({ data }) => { + close(); + // console.log(data); + return data; + }) + .catch((err) => err); + + if (result?.success === true) { + router.refresh(); + handleAlert("success", result.message); + } else { + handleAlert("error", result.message); + } + } + + const [writeReply, setWrite] = useState이 댓글을 삭제하시겠습니까?
++ {content} +++ + ++(false); + const [update, setUpdate] = useState (false); + const hadUpdated = comment.createdAt !== comment.updatedAt; + return ( + <> + {update ? ( + setContent(e.currentTarget.value)} + onCancel={() => setUpdate(false)} + onSubmit={() => setUpdate(false)} + /> + ) : ( + + {content} +
+ )} ++ + {hadUpdated + ? createdAt.format(Date.parse(comment.updatedAt)) + " (수정됨)" + : createdAt.format(Date.parse(comment.createdAt))} + + {canReply && sessionId && ( + + )} + {canEdit && ( + <> + + + + )} +
+ {canReply && writeReply && ( +setWrite(false)} + onSubmit={() => setWrite(false)} + /> + )} + {Modal} + + ); +} diff --git a/src/common/Organisms/Comment/CommentInput.tsx b/src/common/Organisms/Comment/CommentInput.tsx index 0ad1057..8bfcc1b 100644 --- a/src/common/Organisms/Comment/CommentInput.tsx +++ b/src/common/Organisms/Comment/CommentInput.tsx @@ -1,33 +1,92 @@ "use client"; -import { MouseEventHandler, useRef, useState } from "react"; +import { ChangeEvent, FocusEvent, FormEvent, useRef, useState } from "react"; import Button from "@/common/Atoms/Form/Button"; import Input from "@/common/Molecules/Form/Input"; +import { useParams, useRouter } from "next/navigation"; +import handleAlert from "@/common/Molecules/handleAlert"; +import { cfetch } from "@/utils/customFetch"; -export default function CommentInput({ - init = false, - placeholder = "댓글을 작성해보세요", - onCancel, - onSubmit, -}: { +type TCommentInput = { + to: string; + method: "POST" | "PATCH"; init?: boolean; placeholder?: string; - onCancel?: () => void; + value?: string; + onChange?: (e: FocusEvent (init); const commentRef = useRef (null); + const params = useParams<{ postId?: string; studyPostId?: string }>(); + + async function handleSubmit(e: FormEvent ) { + e.preventDefault(); + + const formData = new FormData(e.currentTarget); + const content = formData.get("content") as string; + if (content.trim() === "") { + handleAlert("error", "댓글 내용을 입력해주세요."); + return; + } + + const uris = [to]; + if (to === "/api/comment" && method === "POST") { + const parentPost = (params?.postId || params?.studyPostId) ?? ""; + uris.push(`?parentId=${parentPost}`); + } + + const result = await cfetch(uris.join(""), { + method, + body: formData, + }) + .then((res) => res.json()) + .then(({ data }) => data) + .catch((err) => { + console.error(err); + return err; + }); + // console.log("post comment", result); + if (result?.state) { + onSubmit && onSubmit(); + // setFocus(false); + router.refresh(); + handleAlert("success", result.message); + } else { + handleAlert("error", result.message); + } + } + return focus ? ( ) : ( -
+
+
- 0 ? "bg-slate-700" : "bg-status-danger"}`}
@@ -34,33 +35,35 @@ export default function LargeStudyItem({ card }: { card: TStudyCard }) {
className="absolute bottom-10 px-7 w-full"
>
-
- {card.jobCategory.value}
+ {card.studyInfo.jobCategory.label}
-
- 모집 {card.recruitmentPeople}명
+ 모집 {card.studyInfo.recruitmentPeople}명
{
- const matchesJobKey = jobKey ? card.jobCategory.label === jobKey : true;
+ const matchesJobKey = jobKey
+ ? card.studyInfo.jobCategory.value === jobKey
+ : true;
const matchesTargetKey = targetKey
- ? card.targetCategory.value === targetKey
+ ? card.studyInfo.targetCategory.value === targetKey
: true;
const matchesLocationKey = locationKey
- ? card.location.label === locationKey
+ ? card.studyInfo.location.value === locationKey
+ : true;
+ const matchesQueryKey = queryKey
+ ? includesSearchQuery(card.studyInfo.title, queryKey)
: true;
- const matchesQueryKey = queryKey ? card.title.includes(queryKey) : true;
return (
matchesJobKey && matchesTargetKey && matchesLocationKey && matchesQueryKey
@@ -37,10 +43,10 @@ export default function StudyCardFilter({
전체 검색 결과 {filteredStudyCards.length}개
-
(
+ items={categories.map((item) => (
{card.title}
++ {card.studyInfo.title} +
+ {/*
*/}
최신 순
좋아요 순
-
+