Skip to content

Commit

Permalink
ui edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shimsuyeon
Shimsuyeon committed Nov 14, 2023
1 parent 0414fb3 commit 3593d85
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 46 deletions.
24 changes: 13 additions & 11 deletions src/app/[lng]/mypage/MypageProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ interface MypageProfileProps {
id?: string;
phone?: string;
email?: string;
logout?: string;
quit?: string;
}


const Account = ({ size, color }: IconProps) => {
const sizeClass = size ? size : "h-6 w-6";

// Define a CSS class for the SVG element color, or use a default value if not provided
const colorClass = color ? `text-${color}` : "text-gray-400"; // Use your preferred color clas
const colorClass = color ? `text-${color}` : "text-gray-400";
return (
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -38,39 +39,40 @@ interface UnderLinedTextProps {

const UnderLinedText = ({ text }: UnderLinedTextProps) => {
return (
<div className="text-regular m-5 border-b border-gray-200 w-50 text-secondayText">
<div className="text-regular m-5 border-b border-gray-500 w-50 text-secondayText">
{text}
</div>
);
};

const MypageProfile = ({ name, id, phone, email }: MypageProfileProps) => {
export default async function MypageProfile({ name, id, phone, email, logout='', quit=''}: MypageProfileProps)

{

return (
<div>
<div class="flex flex-col items-center mr-20">
<div className="flex flex-col items-center mr-20">
<div className="text-4xl font-medium m-10">INFO</div>
<div class="flex flex-col items-center">
<div className="flex flex-col items-center">
<Account size="300px" color="gray-400"></Account>
<h3 className="text-3xl md:text-2.8xl font-bold p-10 flex justify-center items-center">
{name}</h3>
</div>
<div className="flex flex-col items-center">
<div class="h-8 text-secondayText text-xl border-b border-gray-300 pb-10 pl-2 pr-10 w-full mb-8">
<div className="h-8 text-secondayText text-xl border-b border-gray-300 pb-10 pl-2 pr-10 w-full mb-8">
{id}
</div>
<div class="h-8 text-secondayText text-xl border-b border-gray-300 pb-10 pl-2 pr-10 w-full mb-0">
<div className="h-8 text-secondayText text-xl border-b border-gray-300 pb-10 pl-2 pr-10 w-full mb-0">
{email}
</div>
</div>
<div className="flex flex-row items-center ">
<UnderLinedText text="๋กœ๊ทธ์•„์›ƒ"></UnderLinedText>
<UnderLinedText text="ํšŒ์›ํƒˆํ‡ด"></UnderLinedText>
<UnderLinedText text={logout}></UnderLinedText>
<UnderLinedText text={quit}></UnderLinedText>
</div>
</div>
</div>
);
};

export default MypageProfile;

67 changes: 42 additions & 25 deletions src/app/[lng]/mypage/MypageTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,62 @@
import LazyCat from "@/assets/lazy-cat.svg";
import dayjs from "dayjs";

interface Tag {
id: number;
name: string;
}
// interface Tag {
// id: number;
// name: string;
// }

interface NoticeBase {
id: number;
//id: number;
title: string;
views: number;
body: string;
deadline: string | null;
//views: number;
//body: string;
//deadline: string | null;
createdAt: string;
author: string;
tags: Tag[];
//author: string;
//tags: Tag[];
}

interface Notice extends NoticeBase {
imageUrl: string | null;
//imageUrl: string | null;
}

interface MypageTableProps {
title: string;
articles: Notice[];
link: string;
noArticle: string;
totalList: string;
}

interface UnderLinedTextProps {
text: string;
}

const MypageTable = ({ title, articles, link }: MypageTableProps) => {
const UnderLinedText = ({ text }: UnderLinedTextProps) => {
return (
<div className="m-5 border-b border-gray-200 w-50 text-white">
{text}
</div>
);
};

const MypageTable = ({
title, articles, link, noArticle, totalList }: MypageTableProps,
) => {

return (
<div className="rounded-lg shadow-md bg-white w-[700px]">
<div className="w-full border border-white border-separate border-collapse border-spacing-0 rounded-lg">
<div className="m-0 flex flex-row w-full border border-separate border-collapse border-spacing-0 rounded-tl-lg rounded-tr-lg bg-primary">
<div className="w-4/5 rounded-tl-10">
<div className="rounded-lg shadow-md bg-white w-[550px] xl:w-[600px]">
<div className="w-full border border-white border-collapse border-spacing-0 rounded-lg">
<div className="m-0 flex flex-row w-full border border-collapse border-spacing-0 rounded-tl-lg rounded-tr-lg bg-primary">
<div className="w-3/4 rounded-tl-10">
<div className="text-xl m-5 text-white font-bold">
{title}
</div>
</div>
<div className="rounded-tr-10">
<div className="flex items-center justify-center text-s text-regular text-white h-full">
์ „์ฒด๋ณด๊ธฐ
<div className="w-1/4 rounded-tr-10 text-right">
<div className="flex items-end justify-end text-s text-regular text-white h-full">
<UnderLinedText text={totalList}></UnderLinedText>
</div>
</div>
</div>
Expand All @@ -51,17 +68,17 @@ const MypageTable = ({ title, articles, link }: MypageTableProps) => {
return (
<div
key={index}
className={`flex items-center flex-row justify-between bg-colorless rounded-bl-${borderBottomRadius} rounded-br-${borderBottomRadius} border border-gray-200`}
className={`flex items-center flex-row justify-between bg-colorless rounded-bl-${borderBottomRadius} rounded-br-${borderBottomRadius} border border-gray-800`}
>
<div
className={`p-10 sm:p-20 pb-0 sm:pb-0 rounded-bl-${borderBottomRadius} leading-1.5 w-70`}
className={`pb-0 sm:pb-0 rounded-bl-${borderBottomRadius} leading-1.5`}
>
<div className="text-regular m-5 text-white">
<div className="text-regular text-black">
{articleObj.title}
</div>
</div>
<div className={`rounded-br-${borderBottomRadius} p-0 sm:p-10`}>
<div className="text-regular m-5 text-white">
<div className="text-regular m-5 text-black">
{dayjs(articleObj.createdAt).format("YYYY-MM-DD")}
</div>
</div>
Expand All @@ -72,7 +89,7 @@ const MypageTable = ({ title, articles, link }: MypageTableProps) => {
<div className="flex flex-col h-full justify-center items-center p-30 bg-colorless rounded-bl-0 rounded-br-10">
<LazyCat className="p-5 w-50 h-50" />
<div className="text-regular m-5 text-secondayText">
์•„์ง ์ €์žฅ๋œ ๊ธ€์ด ์—†์Šต๋‹ˆ๋‹ค. =ใ……=
{noArticle}
</div>
</div>
)}
Expand All @@ -81,4 +98,4 @@ const MypageTable = ({ title, articles, link }: MypageTableProps) => {
);
};

export default MypageTable;
export default MypageTable;
34 changes: 24 additions & 10 deletions src/app/[lng]/mypage/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,26 @@ import MypageProfile from "./MypageProfile";
import MypageSeperate from "./MypageSeperate";
import MypageTable from "./MypageTable";
import { useTranslation } from '@/app/i18next';
import { Locale } from '../../i18next/settings';

export default async function MyPage({
params: { lng },
}: {
params: { lng: Locale };
}) {
const { t } = await useTranslation(lng, 'translation');

const MyPage = async () => {
const isSmall = false;
const isMobile = false;

return (
<>

<div className={`mt-10 w-full flex h-1500 xl:h-1000 justify-center items-center flex-col xl:flex-row gap-20`}>
<div className="flex flex-col relative m-10">
<MypageProfile
name={"๊น€์ง€ํ˜„"} id={"201910808"}
logout={t('mypage.logout')}
quit={t('mypage.quit')}

name={"๊น€์ง€ํ˜„"}
id={"201910808"}
email={"ss@gm.gist.ac.kr"}
phone={"010-0000-0000"}/>
<div className="xl:flex hidden">
Expand All @@ -23,20 +31,26 @@ const MyPage = async () => {
<div className={`flex justify-center items-center flex-col`}>
<div className={`mb-10 p-0 xl:p-50`}>
<MypageTable
title={"๋‚ด๊ฐ€ ๊ฒŒ์‹œํ•œ ๊ณต์ง€ ๋ชฉ๋ก"}
totalList={t('mypage.totalList')}
noArticle={t('mypage.noArticle')}


title={t('mypage.myNotice')}
articles={[]}
link={""} />
</div>
<div className={`p-0 xl:p-50 `}>
<MypageTable
title={"๋ฆฌ๋งˆ์ธ๋“œ ์„ค์ •ํ•œ ๊ฒŒ์‹œ๋ฌผ ๋ชฉ๋ก"}
articles={[]}
totalList={t('mypage.totalList')}
noArticle={t('mypage.noArticle')}

title={t('mypage.remindNotice')}
articles={[{"title":"์ œ๋ชฉ1","createdAt":"2021-09-01"},{"title":"์ œ๋ชฉ2","createdAt":"2021-09-02"}]}
link={""} />
</div>
</div>
</div>
</>
);
};

export default MyPage;

9 changes: 9 additions & 0 deletions src/app/i18next/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,5 +106,14 @@
"academic": {
"label": "๐Ÿ“ฐ Academic Notices"
}
},
"mypage": {
"info": "INFO",
"myNotice": "List of My Notices",
"remindNotice": "List of Rminded Notices",
"totalList":"view all",
"logout":"logout",
"quit":"withdrawal",
"noArticle":"No article has been saved yet. =ใ……="
}
}
9 changes: 9 additions & 0 deletions src/app/i18next/locales/ko/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,5 +101,14 @@
"academic": {
"label": "๐Ÿ“ฐ ํ•™์‚ฌ๊ณต์ง€"
}
},
"mypage": {
"info": "์ •๋ณด",
"myNotice": "๋‚ด๊ฐ€ ๊ฒŒ์‹œํ•œ ๊ณต์ง€ ๋ชฉ๋ก",
"remindNotice": "๋ฆฌ๋งˆ์ธ๋“œ ์„ค์ •ํ•œ ๊ฒŒ์‹œ๋ฌผ ๋ชฉ๋ก",
"totalList":"์ „์ฒด๋ณด๊ธฐ",
"logout":"๋กœ๊ทธ์•„์›ƒ",
"quit":"ํšŒ์›ํƒˆํ‡ด",
"noArticle":"์•„์ง ์ €์žฅ๋œ ๊ธ€์ด ์—†์Šต๋‹ˆ๋‹ค. =ใ……="
}
}

0 comments on commit 3593d85

Please sign in to comment.