Skip to content

Commit 4eab13e

Browse files
LainariLainari
authored
Merge pull request #130 from dorimu0/refact/component-nav
navbarコンポーネントの修正および最適化
2 parents 6c78a6b + faa009c commit 4eab13e

File tree

16 files changed

+295
-251
lines changed

16 files changed

+295
-251
lines changed

‎public/gif/eclipse.gif

-43.4 KB
Loading

‎public/svgs/navbar/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const icons = {
44
door: '/svgs/navbar/door.svg',
55
moreHoriz: '/svgs/navbar/moreHoriz.svg',
66
moreVert: '/svgs/navbar/moreVert.svg',
7-
mypage: '/svgs/navbar/mypage.svg',
7+
myPage: '/svgs/navbar/mypage.svg',
88
search: '/svgs/navbar/search.svg',
99
plus: '/svgs/navbar/plus.svg',
1010
};

‎src/api/apiUtils.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ async function fetchWithInterceptors(url: string, options: RequestInit) {
3838
response = await fetch(url, options);
3939
} else {
4040
console.error('トークンの有効期限が切れました。');
41-
window.location.href = '/intro';
41+
window.location.href = '/';
4242
}
4343
}
4444

@@ -53,7 +53,7 @@ const req = async (
5353
url: string,
5454
method: RequestInit['method'],
5555
server: 'gin' | 'nest',
56-
body: BodyInit | null | undefined = undefined
56+
body: BodyInit | object | undefined = undefined
5757
) => {
5858
const headers = new Headers();
5959
const token = localStorage.getItem('access_token');

‎src/app/classes/layout.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import {Navbar} from '@/src/components/navbar';
22

3-
export default function ClassesLayout({
4-
children, // will be a page or nested layout
5-
}: {
6-
children: React.ReactNode;
7-
}) {
3+
const ClassesLayout = ({children}: {children: React.ReactNode}) => {
84
return (
95
<section className="flex w-full h-screen">
106
<Navbar />
117
<div className="w-full overflow-x-auto overflow-y-auto">{children}</div>
128
</section>
139
);
14-
}
10+
};
11+
12+
export default ClassesLayout;

‎src/app/components/login/Login.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const Login = () => {
1313
}
1414
});
1515
};
16+
1617
return (
1718
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
1819
<div
@@ -32,7 +33,13 @@ const Login = () => {
3233
</div>
3334
</div>
3435
<div className="w-full flex justify-center items-center">
35-
<Image src={svgs.login} alt="logo" width={370} height={370} />
36+
<Image
37+
src={svgs.login}
38+
alt="logo"
39+
width={370}
40+
height={258}
41+
style={{width: 370, height: 258}}
42+
/>
3643
</div>
3744
</div>
3845
{/* RIGHT */}

‎src/app/googleLogin/page.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,13 @@ const Page = () => {
3737
<div className="absolute top-0 opacity-50 w-full h-[100vh] flex justify-center items-center bg-[#8c8c8c]">
3838
<div className="w-[650px] h-[500px] bg-white drop-shadow-xl rounded-lg flex justify-center items-center">
3939
<div className="text-xl text-gray-400">
40-
<Image src={gifs.eclipse} alt="loading" width={70} height={70} />
40+
<Image
41+
src={gifs.eclipse}
42+
alt="loading"
43+
width={70}
44+
height={70}
45+
priority
46+
/>
4147
</div>
4248
</div>
4349
</div>

‎src/app/page.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,13 @@ const Page = () => {
4343
학습의 편의성을 향상시키고 즐겁게 학습하는 경험을 만끽해 보세요!
4444
</div>
4545
<div>
46-
<Image src={intro.introImg} width={500} height={500} alt="mainImg" />
46+
<Image
47+
src={intro.introImg}
48+
width={500}
49+
height={500}
50+
alt="mainImg"
51+
priority
52+
/>
4753
</div>
4854
<button
4955
onClick={openModal}

‎src/components/navbar/Navbar.tsx

+31-88
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,53 @@
1-
'use client';
2-
import {useState} from 'react';
31
import Image from 'next/image';
42
import Link from 'next/link';
5-
import {useParams} from 'next/navigation';
6-
import {MaterialContainer, MaterialForm} from './material';
73
import Profile from './profile';
4+
import {MaterialContainer} from './material';
85
import icons from '@/public/svgs/navbar';
96
import '@/src/styles/variable.css';
10-
import classUserState from '@/src/recoil/atoms/classUserState';
11-
import {useRecoilValue} from 'recoil';
12-
import ROLES from '@/src/constants/roles';
137

148
const Navbar = () => {
15-
const [isOpen, setIsOpen] = useState<boolean>(false);
16-
const classUser = useRecoilValue(classUserState);
17-
189
const pages = [
19-
{name: '클래스', icon: icons.group},
20-
{name: '마이페이지', icon: icons.mypage},
21-
{name: '문제은행', icon: icons.mypage},
10+
{name: '클래스', icon: icons.group, url: '/classes'},
11+
{name: '내정보', icon: icons.myPage, url: '/info'},
12+
{name: '문제은행', icon: icons.myPage, url: '/bank'},
2213
/* Billing Page - 保留 */
2314
];
2415

25-
const params = useParams<{className: string; materialName: string}>();
26-
// const searchParams = useSearchParams();
27-
// const search = searchParams.get('id');
28-
const search = '4';
29-
3016
return (
3117
<div className="w-72 h-full bg-gray-50">
32-
<div className="relative w-72 px-6 pt-5 navbar flex flex-col">
18+
<div className="relative w-72 p-6 h-full flex flex-col">
3319
{/* Profile */}
34-
<Profile params={params} cId={search} />
35-
<div className="pt-2 border-b border-gray-300"></div>
20+
<Profile />
3621
<div className="h-8"></div>
37-
3822
{/* Pages */}
3923
<div className="w-full">
40-
<div className="text-zinc-400 mb-4">페이지</div>
41-
<ul className="w-full">
42-
{pages.map((page, index) => {
43-
return (
44-
<li className="w-full mb-3 py-1" key={index}>
45-
<Link href="/" className=" flex">
46-
<Image
47-
src={page.icon}
48-
alt="icon"
49-
width={30}
50-
height={30}
51-
className="w-8 h-8 mr-3"
52-
></Image>
53-
{page.name}
54-
</Link>
55-
</li>
56-
);
57-
})}
58-
</ul>
24+
<div>
25+
<p className="text-zinc-400 mb-4">페이지</p>
26+
<ul className="w-full">
27+
{pages.map((page, index) => {
28+
return (
29+
<li className="w-full mb-2 py-1" key={index}>
30+
<Link href={page.url} className="flex">
31+
<Image
32+
src={page.icon}
33+
alt="icon"
34+
width={30}
35+
height={30}
36+
className="w-8 h-8 mr-3"
37+
></Image>
38+
{page.name}
39+
</Link>
40+
</li>
41+
);
42+
})}
43+
</ul>
44+
</div>
5945
</div>
6046
<div className="h-8"></div>
61-
62-
{/* Subject*/}
63-
{search ? (
64-
<>
65-
<div className="w-full flex-1">
66-
<div className="flex justify-between items-center mb-4">
67-
<div className="text-zinc-400">자료</div>
68-
{/* <MaterialForm /> */}
69-
{classUser && ROLES[classUser?.role_id] === 'ADMIN' ? (
70-
<div
71-
onClick={() => setIsOpen(true)}
72-
className="bg-blue-500 w-6 h-6 flex justify-center items-center rounded-lg "
73-
>
74-
<Image
75-
src={icons.plus}
76-
width={0}
77-
height={0}
78-
alt="plus"
79-
className="m-auto w-auto h-auto max-w-5 max-h-5"
80-
/>
81-
</div>
82-
) : null}
83-
{isOpen && search ? (
84-
<MaterialForm setIsOpen={setIsOpen} cId={search} />
85-
) : null}
86-
</div>
87-
<MaterialContainer params={params} cId={search} />
88-
</div>
89-
<div className="h-16"></div>
90-
91-
{/* class exit */}
92-
<div className="flex py-2">
93-
<Image
94-
src={icons.door}
95-
alt="icon"
96-
width={30}
97-
height={30}
98-
className="w-6 h-6 mr-2"
99-
></Image>
100-
{params.materialName ? (
101-
<Link href={`/classes/${search}`}>프롬프트창 떠나기</Link>
102-
) : (
103-
<Link href="/classes">클래스 떠나기</Link>
104-
)}
105-
</div>
106-
</>
107-
) : null}
47+
{/* Material*/}
48+
<div className="flex-grow">
49+
<MaterialContainer />
50+
</div>
10851
</div>
10952
</div>
11053
);

0 commit comments

Comments
 (0)