Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…ient into fix/#310/mainpage
  • Loading branch information
JeongWuk committed Dec 4, 2023
2 parents 3f1913f + 07b5491 commit f387047
Show file tree
Hide file tree
Showing 19 changed files with 164 additions and 107 deletions.
Binary file removed public/font/Pretendard-Black.woff
Binary file not shown.
Binary file removed public/font/Pretendard-ExtraBold.woff
Binary file not shown.
Binary file removed public/font/Pretendard-ExtraLight.woff
Binary file not shown.
Binary file removed public/font/Pretendard-Light.woff
Binary file not shown.
Binary file removed public/font/Pretendard-Thin.woff
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
"use client";

import { usePathname, useRouter } from "next/navigation";
import { Question, Title } from "@/components/application";
import { useSuspenseQuery } from "@tanstack/react-query";
import getApplicationDetails from "@/services/application/getApplicationDetails";
import getSteadyDetails from "@/services/steady/getSteadyDetails";
import Button, { buttonSize } from "@/components/_common/Button";
import useApplicationListQuery from "@/hooks/query/useApplicationListQuery";
import {
getApplicationDetailsKey,
getSteadyDetailsKey,
} from "@/constants/queryKeys";

const ApplicationPage = ({
params,
}: {
params: { steady_id: string; application_id: string };
}) => {
const applicationId = params.application_id;
const steadyId = params.steady_id;
const pathname = usePathname();
const pageType = pathname.split("/")[2];
const router = useRouter();
const { data: applicationData } = useSuspenseQuery({
queryKey: getApplicationDetailsKey(applicationId),
queryFn: () => getApplicationDetails(applicationId),
});

const { data: steadyDetailsData } = useSuspenseQuery({
queryKey: getSteadyDetailsKey(steadyId),
queryFn: () => getSteadyDetails(steadyId),
staleTime: 10000,
});

const { applicationListData } = useApplicationListQuery();

const application = applicationListData.pages.map(
(page) =>
page.content.find(
(item) => item.applicationId.toString() === applicationId,
)?.status,
)[0];

return (
<>
<Title
title={steadyDetailsData ? steadyDetailsData.name : "Temp"}
pageType={pageType}
>
{applicationData.surveys.map((survey, index) => (
<Question
key={index}
question={survey.question}
index={index}
>
<div className="h-100 w-full border-1">{survey.answer}</div>
</Question>
))}
</Title>
{application === "WAITING" && (
<div className="flex items-center justify-end">
<Button
className={`${buttonSize.sm} bg-st-primary text-st-white`}
onClick={() =>
router.push(`/application/edit/${steadyId}/${applicationId}`)
}
>
수정 하기
</Button>
</div>
)}
</>
);
};

export default ApplicationPage;
2 changes: 1 addition & 1 deletion src/app/(user-menu)/mypage/application/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const MyApplicationPage = () => {
useApplicationListQuery();

const handleApplicationDetail = (steadyId: number, applicationId: number) => {
router.push(`/application/edit/${steadyId}/${applicationId}`);
router.push(`/application/${steadyId}/${applicationId}`);
};

const handleDeleteApplication = async (id: string) => {
Expand Down
2 changes: 1 addition & 1 deletion src/app/(user-menu)/mypage/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ const MyProfilePage = () => {
"flex h-30 w-718 items-center justify-center gap-15 text-2xl italic text-st-gray-250",
)}
>
{`"${bio}"` ?? "한 줄 소개를 입력해주세요."}
{`"${bio ?? "한 줄 소개로 자신을 표현해보세요!"}"`}
<button onClick={() => setIsEditingBio(true)}>
<Icon
name="pencil"
Expand Down
34 changes: 14 additions & 20 deletions src/app/(user-menu)/mysteady/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import { Fragment } from "react";
import InfiniteScroll from "react-infinite-scroller";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useToast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";
import { Separator } from "@radix-ui/themes";
import { format } from "date-fns";
import type { MySteadyContentType } from "@/services/types";
import Button, { buttonSize } from "@/components/_common/Button";
import Button from "@/components/_common/Button";
import ContactTag from "@/components/_common/ContactTag";
import Dropdown from "@/components/_common/Dropdown";
import Icon from "@/components/_common/Icon";
import { AlertModal } from "@/components/_common/Modal";
import { useMySteadiesQuery } from "@/hooks/query/useMySteadiesQuery";
import { useScrollTo } from "@/hooks/useScrollTo";

Expand All @@ -39,6 +39,7 @@ const MySteadyPage = () => {
direction: "desc",
});
const ref = useScrollTo<HTMLDivElement>({ top: 0 }, [search]);
const { toast } = useToast();

const renderIcon = (steady: MySteadyContentType) => {
if (search === "finished") {
Expand Down Expand Up @@ -74,24 +75,17 @@ const MySteadyPage = () => {
}
if (!steady.isLeader && (search === "recruiting" || search === "closed")) {
return (
<AlertModal
trigger={
<Icon
name="exit"
size={20}
color="text-st-black"
/>
}
actionButton={
<Button className={`${buttonSize.sm} bg-st-red text-st-white`}>
탈퇴
</Button>
<div
onClick={() =>
toast({ description: "준비중인 기능입니다!", variant: "blue" })
}
>
<div className="flex items-center justify-center">
<div className="text-18 font-bold">정말 탈퇴하시겠습니까?</div>
</div>
</AlertModal>
<Icon
name="exit"
size={20}
color="text-st-black"
/>
</div>
);
}
};
Expand All @@ -103,7 +97,7 @@ const MySteadyPage = () => {
case "recruiting" || "closed":
return "참여중인 ";
default:
return "참여중이거나 종료된";
return "참여중이거나 종료된 ";
}
};

Expand Down Expand Up @@ -171,7 +165,7 @@ const MySteadyPage = () => {
className="flex h-1000 flex-col items-center justify-center gap-20 text-30 font-bold"
key={`${pageIndex}`}
>
<div>
<div className="max-sm:text-22 sm:text-22 md:text-25 lg:text-28 xl:text-30">
{emptySteadiesMessage()}
스테디가 없습니다.
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Error = ({
) {
toast({
description:
"토큰이 만료되거나 유효하지 않습니다. 다시 로그인해주세요.",
"로그인 정보가 만료되거나 유효하지 않습니다. 다시 로그인해주세요.",
variant: "red",
});
router.push("/logout");
Expand Down
25 changes: 0 additions & 25 deletions src/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -67,21 +67,6 @@
}

@layer base {
@font-face {
font-family: Pretendard;
font-weight: 100;
src: url("../../public/font/Pretendard-Thin.woff") format("woff");
}
@font-face {
font-family: Pretendard;
font-weight: 200;
src: url("../../public/font/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
font-family: Pretendard;
font-weight: 300;
src: url("../../public/font/Pretendard-Light.woff") format("woff");
}
@font-face {
font-family: Pretendard;
font-weight: 400;
Expand All @@ -102,16 +87,6 @@
font-weight: 700;
src: url("../../public/font/Pretendard-Bold.woff") format("woff");
}
@font-face {
font-family: Pretendard;
font-weight: 800;
src: url("../../public/font/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
font-family: Pretendard;
font-weight: 900;
src: url("../../public/font/Pretendard-Black.woff") format("woff");
}

* {
font-family: "Pretendard";
Expand Down
2 changes: 0 additions & 2 deletions src/components/TabBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { usePathname } from "next/navigation";
const TabBar = () => {
const path = usePathname();

console.log(path);

return (
<div className="flex h-41 justify-between gap-20 border-b-3 border-st-gray-100 sm:h-47 md:hidden">
<Link href={"/mypage"}>
Expand Down
43 changes: 43 additions & 0 deletions src/components/_common/AppBar/AuthAppBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { useSuspenseQuery } from "@tanstack/react-query";
import getMyProfile from "@/services/user/getMyProfile";
import { MyProfileKey } from "@/constants/queryKeys";
import { appBarTextStyles } from ".";
import Dropdown from "../Dropdown";
import NotificationPopup from "../NotificationPopup";

const AuthAppBar = () => {
const { data: myProfileData } = useSuspenseQuery({
queryKey: MyProfileKey,
queryFn: () => getMyProfile(),
});

return (
<div className="flex w-150 items-center justify-between sm:w-170 md:w-250">
<Link href={"/mysteady"}>
<div className={cn(appBarTextStyles, "w-50 md:w-80")}>내 스테디</div>
</Link>
<NotificationPopup />
<Dropdown
options={[
{ label: "마이페이지", linkTo: "/mypage" },
{ label: "로그아웃", linkTo: "/logout" },
]}
>
<div className="flex h-30 w-30 items-center justify-center md:h-45 md:w-45">
<Image
className="aspect-square rounded-full border-1"
src={myProfileData.profileImage}
alt="유저 로고"
width={45}
height={45}
/>
</div>
</Dropdown>
</div>
);
};

export default AuthAppBar;
55 changes: 9 additions & 46 deletions src/components/_common/AppBar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import HeaderLogo from "@/images/headerLogo.svg";
import Logo from "@/images/logo.svg";
import { cn } from "@/lib/utils";
import useAuthStore from "@/stores/isAuth";
import getMyProfile from "@/services/user/getMyProfile";
import Dropdown from "@/components/_common/Dropdown";
import NotificationPopup from "@/components/_common/NotificationPopup";
import LoginModal from "../Modal/LoginModal";
import AuthAppBar from "./AuthAppBar";

interface AppBarProps {
className?: string;
Expand All @@ -20,15 +16,6 @@ export const appBarTextStyles = "text-12 md:text-lg font-bold";

const AppBar = ({ className }: AppBarProps) => {
const { isAuth } = useAuthStore();
const [userProfileImageSrc, setUserProfileImageSrc] = useState(Logo);

useEffect(() => {
if (isAuth) {
getMyProfile().then((res) => {
setUserProfileImageSrc(res.profileImage);
});
}
}, []);

return (
<div
Expand All @@ -46,39 +33,15 @@ const AppBar = ({ className }: AppBarProps) => {
/>
</div>
</Link>
{isAuth && (
<div className="flex w-150 items-center justify-between sm:w-170 md:w-250">
<Link href={"/mysteady"}>
<div className={cn(appBarTextStyles, "w-50 md:w-80")}>
내 스테디
</div>
</Link>
<NotificationPopup />
<Dropdown
options={[
{ label: "마이페이지", linkTo: "/mypage" },
{ label: "로그아웃", linkTo: "/logout" },
]}
>
<div className="flex h-30 w-30 items-center justify-center md:h-45 md:w-45">
<Image
className="rounded-full border-1"
src={userProfileImageSrc}
alt="스테디 로고"
width={45}
height={45}
/>
</div>
</Dropdown>
</div>
)}
<LoginModal
trigger={
!isAuth && (
{isAuth ? (
<AuthAppBar />
) : (
<LoginModal
trigger={
<div className={`${appBarTextStyles} cursor-pointer`}>로그인</div>
)
}
/>
}
/>
)}
</div>
);
};
Expand Down
15 changes: 7 additions & 8 deletions src/components/_common/Dropdown/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,16 @@ const Dropdown = ({ children, options }: DropdownProps) => {
</DropdownMenu.Trigger>
<DropdownMenu.Content onInteractOutside={() => setOpen(false)}>
{options.map((option, idx) => (
<DropdownMenu.Item
<Link
href={option.linkTo}
onClick={() => setOpen(false)}
key={idx}
className={"hover:bg-st-primary"}
className={"p-0 hover:bg-st-primary"}
>
<Link
href={option.linkTo}
onClick={() => setOpen(false)}
>
<DropdownMenu.Item className={"cursor-pointer hover:bg-st-primary"}>
{option.label}
</Link>
</DropdownMenu.Item>
</DropdownMenu.Item>
</Link>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
Expand Down
2 changes: 1 addition & 1 deletion src/components/_common/Input/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const Input = ({
className="h-60 w-full rounded-12 p-5 text-xl font-bold outline-none"
type="text"
defaultValue={initialValue}
placeholder="한 줄 소개로 자신을 표현해 주세요!"
placeholder="한 줄 소개로 자신을 표현해보세요!"
onChange={(event) => {
onValueChange?.(event.target.value);
}}
Expand Down
2 changes: 1 addition & 1 deletion src/components/_common/NotificationPopup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const NotificationPopup = () => {
if (notificationsError) {
if (notificationsError.response?.data.code === "A002") {
toast({
description: "토큰이 존재하지 않습니다. 다시 로그인해주세요.",
description: "로그인 정보가 존재하지 않습니다. 다시 로그인해주세요.",
variant: "red",
});
setIsAuth(false);
Expand Down
Loading

0 comments on commit f387047

Please sign in to comment.