Skip to content

Commit 6b7d0d8

Browse files
6suk6suk
authored
[💄style] Layout 컴포넌트 생성 (pie-sfac#30)
1 parent d6801fa commit 6b7d0d8

File tree

8 files changed

+189
-169
lines changed

8 files changed

+189
-169
lines changed

‎src/app/App.tsx

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useSelector } from 'react-redux';
22
import { Route, Routes } from 'react-router-dom';
33

4-
import { GlobalHeader, GlobalNavigation, PrivateRoute, PublicRoute, SubHeader } from '@/index';
4+
import { Layout, PrivateRoute, PublicRoute } from '@/index';
55
import { RootState } from '@stores/store';
66
import theme from '@styles/theme';
77
import { Suspense, lazy } from 'react';
@@ -19,23 +19,18 @@ function App() {
1919
<>
2020
<ThemeProvider theme={theme}>
2121
<Suspense fallback={<div>Loading...</div>}>
22-
<div className="container mx-auto max-w-md flex justify-center mt-10 pt-[6.5rem]">
23-
<div className="content text-center mt-10">
24-
<GlobalHeader isLogin={isLogin} />
25-
<SubHeader isLogin={isLogin} />
26-
<Routes>
27-
<Route element={<PublicRoute isLogin={isLogin} />}>
28-
<Route element={<Login />} path="login" />
29-
</Route>
30-
<Route element={<PrivateRoute isLogin={isLogin} />}>
31-
<Route element={<Home />} path="/" />
32-
<Route element={<Ticket />} path="tickets/*" />
33-
<Route element={<Me />} path="me" />
34-
</Route>
35-
</Routes>
36-
<GlobalNavigation />
37-
</div>
38-
</div>
22+
<Routes>
23+
<Route element={<Layout />}>
24+
<Route element={<PublicRoute isLogin={isLogin} />}>
25+
<Route element={<Login />} path="login" />
26+
</Route>
27+
<Route element={<PrivateRoute isLogin={isLogin} />}>
28+
<Route element={<Home />} path="/" />
29+
<Route element={<Ticket />} path="tickets/*" />
30+
<Route element={<Me />} path="me" />
31+
</Route>
32+
</Route>
33+
</Routes>
3934
</Suspense>
4035
</ThemeProvider>
4136
</>

‎src/components/common/Modal.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import x from '@assets/icons/x.svg';
22
import theme from '@styles/theme';
33
import { Dispatch, FC, SetStateAction, memo, useCallback } from 'react';
4-
import { css, keyframes, styled } from 'styled-components';
4+
import { keyframes, styled } from 'styled-components';
55

66
interface ModalProps {
77
children: React.ReactNode;
@@ -67,6 +67,7 @@ const S = {
6767
background: ${`rgba(${theme.colors.Dim}, 0.5)`};
6868
animation: ${fadeIn} 0.5s;
6969
transition: opacity 0.5s;
70+
z-index: 999;
7071
`,
7172

7273
ModalContent: styled.div`
@@ -79,6 +80,7 @@ const S = {
7980
overflow-y: auto;
8081
border-radius: 0.5rem;
8182
padding: 3rem 2.5rem 2.5rem 2.5rem;
83+
text-align: center;
8284
`,
8385

8486
ModalInnerContent: styled.div`

‎src/components/header/GlobalHeader.tsx

Lines changed: 63 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react'
2-
import { styled } from 'styled-components'
1+
import React from 'react';
2+
import { styled } from 'styled-components';
33
import { Link } from 'react-router-dom';
44
import { PropsState } from '@/app/App';
55
import { useAuth } from '@hooks/apis/useAuth';
@@ -8,9 +8,8 @@ import { me_info, Me_info_response } from '@apis/meApis';
88
import { Notifications } from '@assets/icons/indexIcons';
99
import theme from '@styles/theme';
1010

11-
12-
export const GlobalHeader: React.FC<PropsState> = (props) =>{
13-
const {isLogin} = props;
11+
export const GlobalHeader: React.FC<PropsState> = props => {
12+
const { isLogin } = props;
1413

1514
const { url } = me_info;
1615
const { data } = useSwrData(url);
@@ -21,115 +20,106 @@ export const GlobalHeader: React.FC<PropsState> = (props) =>{
2120
logout();
2221
};
2322

24-
const {
25-
name = '',
26-
} = data ?? ({} as Me_info_response);
27-
23+
const { name = '' } = data ?? ({} as Me_info_response);
2824

2925
return (
3026
<S.header>
3127
<div className="container">
32-
<h1 className='logo'>
33-
<Link to={"/"}>
28+
<h1 className="logo">
29+
<Link to={'/'}>
3430
<img src="/imgs/logo.png" alt="로고" />
35-
</Link>
36-
</h1>
37-
38-
<S.nav theme={theme}>
39-
<ul>
40-
<li className="user">
41-
{isLogin ?
42-
<>
43-
<div className="pic">
44-
<img src="/imgs/profile.png" alt="프로필 사진" />
45-
</div>
46-
<span className='userName'>
47-
{name} 님
48-
</span>
49-
<button type="button" onClick={handleLogOutClick} style={{cursor:"pointer"}} >
50-
로그아웃
51-
</button>
52-
<Notifications onClick={()=>{
53-
54-
}} style={{cursor:"pointer"}}/>
55-
</>
56-
:
57-
<div>비로그인 상태</div>}
58-
</li>
59-
</ul>
60-
</S.nav>
31+
</Link>
32+
</h1>
33+
34+
<S.nav theme={theme}>
35+
<ul>
36+
<li className="user">
37+
{isLogin ? (
38+
<>
39+
<div className="pic">
40+
<img src="/imgs/profile.png" alt="프로필 사진" />
41+
</div>
42+
<span className="userName">{name} 님</span>
43+
<button type="button" onClick={handleLogOutClick} style={{ cursor: 'pointer' }}>
44+
로그아웃
45+
</button>
46+
<Notifications onClick={() => {}} style={{ cursor: 'pointer' }} />
47+
</>
48+
) : (
49+
<div>비로그인 상태</div>
50+
)}
51+
</li>
52+
</ul>
53+
</S.nav>
6154
</div>
6255
</S.header>
63-
)
64-
}
56+
);
57+
};
6558

6659
const S = {
6760
header: styled.header`
61+
width: 100%;
62+
height: 80px;
63+
background-color: #fff;
64+
border-bottom: 2px solid #e7e7e7;
65+
position: sticky;
66+
left: 0;
67+
top: 0;
68+
z-index: 999;
69+
70+
& > .container {
6871
width: 100%;
69-
height: 80px;
70-
background-color: #fff;
71-
border-bottom: 2px solid #E7E7E7;
72-
position: fixed;
73-
left: 0;
74-
top: 0;
75-
z-index: 999;
76-
77-
& > .container{
78-
width: 100%;
79-
max-width: 1280px;
80-
height: 100%;
81-
margin: 0 auto;
82-
display: flex;
83-
align-items: center;
84-
justify-content: space-between;
72+
max-width: 1280px;
73+
height: 100%;
74+
margin: 0 auto;
75+
display: flex;
76+
align-items: center;
77+
justify-content: space-between;
8578
}
8679
`,
8780
nav: styled.nav`
88-
89-
.user{
81+
.user {
9082
height: 100%;
9183
display: flex;
9284
align-items: center;
9385
94-
.pic{
86+
.pic {
9587
display: flex;
9688
height: 100%;
9789
align-items: center;
9890
margin-right: 8px;
9991
}
10092
101-
.userName{
93+
.userName {
10294
margin-right: 14px;
10395
}
10496
105-
button{
97+
button {
10698
padding: 6px 20px;
107-
background-color: ${({theme})=> theme.colors["Gray-800"]};
108-
color: ${({theme})=> theme.colors["Pri-400"]};
99+
background-color: ${({ theme }) => theme.colors['Gray-800']};
100+
color: ${({ theme }) => theme.colors['Pri-400']};
109101
border-radius: 6px;
110102
margin-right: 40px;
111103
position: relative;
112-
transition: all .4s;
104+
transition: all 0.4s;
113105
114-
&:hover{
115-
background-color: ${({theme})=> theme.colors["Pri-400"]};
116-
color: ${({theme})=> theme.colors["Gray-800"]};
106+
&:hover {
107+
background-color: ${({ theme }) => theme.colors['Pri-400']};
108+
color: ${({ theme }) => theme.colors['Gray-800']};
117109
}
118110
119-
&::after{
111+
&::after {
120112
display: block;
121113
position: absolute;
122114
right: -26px;
123115
top: 50%;
124116
transform: translateY(-50%);
125-
content: "|";
117+
content: '|';
126118
font-size: 2rem;
127119
font-weight: 100;
128-
color: ${({theme})=> theme.colors["Gray-700"]};
120+
color: ${({ theme }) => theme.colors['Gray-700']};
129121
}
130122
}
131-
132123
}
133-
134-
`
135-
}
124+
`,
125+
};

0 commit comments

Comments
 (0)