Skip to content

Commit

Permalink
Update notices page
Browse files Browse the repository at this point in the history
  • Loading branch information
@taedonn
taedonn committed Nov 8, 2023
1 parent 26f2c3a commit 107d79c
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 22 deletions.
25 changes: 24 additions & 1 deletion src/pages/api/notices.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export async function FetchNotice(noticeId: number) {
// 공지 전체 불러오기
export async function FetchAllNotices() {
const notices = await prisma.fontsNotice.findMany({
where: { notice_show_type: true }
where: { notice_show_type: true },
orderBy: { notice_id: "desc" }
});

return notices;
Expand Down Expand Up @@ -130,6 +131,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
err: err
});
}
} else if (req.query.action === "search") {
try {
const notices = await prisma.fontsNotice.findMany({
where: {
OR: [
{ notice_title: {contains: req.query.text as string} },
{ notice_content: {contains: req.query.text as string} },
]
},
orderBy: { notice_id: "desc" }
});

return res.status(200).json({
msg: "공지 찾기 성공",
notices: notices,
})
} catch (err) {
return res.status(500).json({
msg: '공지 찾기 실패',
err: err,
})
}
}
}
}
84 changes: 64 additions & 20 deletions src/pages/notices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { NextSeo } from 'next-seo';
import { CheckIfSessionExists } from './api/user/checkifsessionexists';
import { FetchUserInfo } from './api/user/fetchuserinfo';
import { FetchAllNotices } from './api/notices';
import axios from 'axios';

// components
import Header from "@/components/header";
Expand All @@ -31,14 +32,20 @@ const Notices = ({params}: any) => {
// 빈 함수
const emptyFn = () => { return; }

// 공지 - 전체
// 공지 - 목록
const [notices, setNotices] = useState(params.notices);

// 공지 - 전체
const [all, setAll] = useState(params.notices);

// 공지 - 서비스
const services = params.notices.filter((notice: Notice) => notice.notice_type === "service");
const [services, setServices] = useState(params.notices.filter((notice: Notice) => notice.notice_type === "service"));

// 공지 - 폰트
const fonts = params.notices.filter((notice: Notice) => notice.notice_type === "font");
const [fonts, setFonts] = useState(params.notices.filter((notice: Notice) => notice.notice_type === "font"));

// 공지 타입 저장
const [type, setType] = useState<string>("all");

/** 날짜 포맷 */
const dateFormat = (date: string) => {
Expand All @@ -48,9 +55,40 @@ const Notices = ({params}: any) => {

/** 서비스 유형 선택 시 */
const handleTypeOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.id === "all") { setNotices(params.notices); }
else if (e.target.id === "service") { setNotices(services); }
else { setNotices(fonts); }
if (e.target.id === "all") {
setNotices(all);
setType("all");
}
else if (e.target.id === "service") {
setNotices(services);
setType("service");
}
else {
setNotices(fonts);
setType("font");
}
}

/** 엔터키 입력 */
const handleKeyUp = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
await axios.get("/api/notices", {
params: {
action: "search",
text: e.currentTarget.value,
}
})
.then(res => {
setAll(res.data.notices);
setServices(res.data.notices.filter((notice: Notice) => notice.notice_type === "service"));
setFonts(res.data.notices.filter((notice: Notice) => notice.notice_type === "font"));

if (type === "all") { setNotices(res.data.notices); }
else if (type === "service") { setNotices(res.data.notices.filter((notice: Notice) => notice.notice_type === "service")); }
else { setNotices(res.data.notices.filter((notice: Notice) => notice.notice_type === "font")); }
})
.catch(err => console.log(err));
}
}

return (
Expand Down Expand Up @@ -85,19 +123,19 @@ const Notices = ({params}: any) => {

{/* 메인 */}
<div className='w-[100%] flex flex-col justify-center items-center py-[60px]'>
<div className='w-[720px] tmd:w-[100%] flex flex-col justify-center items-start'>
<div className='notices w-[720px] tmd:w-[100%] flex flex-col justify-center items-start'>
<div className='flex items-center mb-[16px]'>
<h2 className='text-[22px] text-theme-3 dark:text-theme-9 font-medium'>공지사항</h2>
<h3 className='text-[14px] ml-[14px] text-theme-5 dark:text-theme-7'>폰트 업데이트 & 소식</h3>
</div>
<div className='relative mb-[36px]'>
<svg className='w-[14px] absolute left-[18px] top-[50%] translate-y-[-50%] fill-theme-5 dark:fill-theme-7' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
<input type="text" id="search" placeholder="검색어 입력" className="w-[300px] h-[40px] text-[14px] pl-[40px] pr-[20px] border rounded-full border-theme-7 dark:border-theme-5 text-theme-5 dark:text-theme-7 placeholder:text-theme-5 dark:placeholder:text-theme-7 bg-transparent"/>
<input onKeyUp={handleKeyUp} type="text" id="search" placeholder="검색어 입력" className="w-[300px] h-[40px] text-[14px] pl-[40px] pr-[20px] border rounded-full border-theme-7 dark:border-theme-5 text-theme-5 dark:text-theme-7 placeholder:text-theme-5 dark:placeholder:text-theme-7 bg-transparent"/>
</div>
<div className='flex items-center gap-[6px] mb-[16px]'>
<div>
<input onChange={handleTypeOnChange} type="radio" id="all" name="type" className="hidden peer" defaultChecked/>
<label htmlFor='all' className='w-[80px] h-[32px] text-[14px] pt-px flex justify-center items-center cursor-pointer border rounded-full border-theme-7 dark:border-theme-5 peer-checked:border-theme-yellow peer-checked:dark:border-theme-blue-1 text-theme-5 dark:text-theme-7 peer-checked:text-theme-3 peer-checked:dark:text-theme-blue-2 peer-checked:bg-theme-yellow peer-checked:dark:bg-theme-blue-1'>전체<div className='text-[13px] ml-[2px]'>({params.notices.length})</div></label>
<label htmlFor='all' className='w-[80px] h-[32px] text-[14px] pt-px flex justify-center items-center cursor-pointer border rounded-full border-theme-7 dark:border-theme-5 peer-checked:border-theme-yellow peer-checked:dark:border-theme-blue-1 text-theme-5 dark:text-theme-7 peer-checked:text-theme-3 peer-checked:dark:text-theme-blue-2 peer-checked:bg-theme-yellow peer-checked:dark:bg-theme-blue-1'>전체<div className='text-[13px] ml-[2px]'>({all.length})</div></label>
</div>
<div>
<input onChange={handleTypeOnChange} type="radio" id="service" name="type" className="hidden peer"/>
Expand All @@ -109,20 +147,26 @@ const Notices = ({params}: any) => {
</div>
</div>
{
notices && notices.map((notice: Notice , idx: number) => {
return <div key={idx} className='w-[100%] flex flex-col'>
<div className='w-[100%] h-[56px] text-[14px] flex justify-between items-center border-t border-b text-theme-3 dark:text-theme-9 border-theme-7 dark:border-theme-5'>
<div className='flex items-center'>
<div className='w-[100px] flex justify-center items-center'><div className='px-[4px] border-b-[2px] dark:border-theme-blue-1'>{notice.notice_type === "service" ? "서비스" : "폰트"}</div></div>
<div className='ml-[12px]'><div className='font-size'>{notice.notice_title}</div></div>
</div>
<div className='flex items-center mr-[20px]'>
<div className='w-[80px] text-theme-5 dark:text-theme-7'>{dateFormat(notice.notice_created_at)}</div>
<svg className='w-[8px] ml-[20px] fill-theme-5 dark:fill-theme-7' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
notices && notices.length > 0
? notices.map((notice: Notice) => {
return <div key={notice.notice_id.toString()} className='notice w-[100%] flex flex-col'>
<input type='checkbox' id={`notice-${notice.notice_id}`} className='hidden peer/expand'/>
<label htmlFor={`notice-${notice.notice_id}`} className='cursor-pointer hover:bg-theme-7/20 hover:dark:bg-theme-5/20'>
<div className='w-[100%] h-[56px] text-[14px] flex justify-between items-center border-t text-theme-3 dark:text-theme-9 border-theme-7 dark:border-theme-5'>
<div className='flex items-center'>
<div className='w-[100px] flex justify-center items-center'><div className='px-[4px] border-b-[2px] dark:border-theme-blue-1'>{notice.notice_type === "service" ? "서비스" : "폰트"}</div></div>
<div className='ml-[12px]'><div className='font-size'>{notice.notice_title}</div></div>
</div>
<div className='flex items-center mr-[20px]'>
<div className='w-[80px] text-theme-5 dark:text-theme-7'>{dateFormat(notice.notice_created_at)}</div>
<svg className='w-[8px] ml-[20px] fill-theme-5 dark:fill-theme-7 duration-100' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
</div>
</div>
</div>
</label>
<pre className='h-0 peer-checked/expand:h-[auto] px-[32px] peer-checked/expand:py-[20px] text-[14px] duration-100 flex items-center overflow-hidden peer-checked/expand:border-t border-theme-7 dark:border-theme-5 text-theme-3 dark:text-theme-9 bg-theme-7/20 dark:bg-theme-5/20'>{notice.notice_content}</pre>
</div>
})
: <div className='w-[100%] h-[68px] text-[14px] flex justify-center items-center text-center border-t border-theme-7 dark:border-theme-5 text-theme-3 dark:text-theme-9'>공지사항을 찾을 수 없습니다.</div>
}
</div>
</div>
Expand Down
20 changes: 19 additions & 1 deletion src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,4 +615,22 @@ html.dark #__next .MuiPagination-ul .Mui-selected {
#__next .MuiSwitch-thumb { color: #FFFFFF; }
#__next .Mui-checked .MuiSwitch-thumb { color: #40E0D0; }
#__next .MuiSwitch-track { background-color: #FFFFFF80; }
#__next .Mui-checked + .MuiSwitch-track { background-color: #40E0D080; }
#__next .Mui-checked + .MuiSwitch-track { background-color: #40E0D080; }

/* 공지사항 */
.notices .notice:last-of-type label > div {
border-bottom: 1px solid #B1B2B6;
}
html.dark .notices .notice:last-of-type label > div {
border-bottom: 1px solid #646568;
}
.notices .notice:last-of-type input:checked ~ pre {
border-top: none;
border-bottom: 1px solid #B1B2B6;
}
html.dark .notices .notice:last-of-type input:checked ~ pre {
border-bottom: 1px solid #646568;
}
.notice input:checked + label svg {
transform: rotate(90deg);
}

1 comment on commit 107d79c

@vercel
Copy link

@vercel vercel bot commented on 107d79c Nov 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fonts-archive – ./

fonts-archive-git-main-taedonn.vercel.app
fonts-archive-taedonn.vercel.app
fonts.taedonn.com

Please sign in to comment.