Skip to content

Commit 45a94fd

Browse files
game240game240
authored
Merge pull request #302 from Podo-Store/feat/signin-modal
feat: 로그인 페이지 modal 형식으로 변경
2 parents ee8ad4f + 7ecff8c commit 45a94fd

File tree

7 files changed

+379
-109
lines changed

7 files changed

+379
-109
lines changed

‎src/App.jsx‎

Lines changed: 94 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// App.jsx
2-
import { BrowserRouter, Routes, Route } from "react-router-dom";
2+
import { Routes, Route, useLocation } from "react-router-dom";
33

44
import DefaultLayout from "./layouts/DefaultLayout";
55
import MarginLayout from "./layouts/MarginLayout";
@@ -13,6 +13,7 @@ import SignUpSuccess from "./pages/auth/SignUpSuccess";
1313
import SignIn from "./pages/auth/SignIn";
1414
import SignInV2 from "./pages/auth/SignInV2";
1515
import FindBar from "./pages/auth/FindBar";
16+
import SignInDialog from "./components/auth/SignInDialog";
1617

1718
import PostGallery from "./pages/work/postList/PostGallery";
1819

@@ -47,109 +48,107 @@ import BrowserWarning from "./components/BrowserWarning";
4748

4849
import ProtectedRoute from "./routes/ProtectedRoute";
4950

50-
import { AuthProvider } from "./contexts/AuthContext";
51-
5251
import "./App.css";
5352
import "./styles/colors.css";
5453
import "./styles/text.css";
5554
import "./styles/utilities.css";
5655

5756
function App() {
57+
const location = useLocation();
58+
const { state } = location;
59+
5860
return (
5961
<div className="App">
6062
{/* <BrowserWarning /> */}
61-
<BrowserRouter>
62-
<AuthProvider>
63-
<Routes>
64-
<Route path="/" element={<DefaultLayout />}>
65-
<Route
66-
path="admin/scriptManage"
67-
element={<AdminSwitch page={0} />}
68-
/>
69-
<Route
70-
path="admin/orderManage"
71-
element={<AdminSwitch page={1} />}
72-
/>
73-
<Route
74-
path="admin/statisticManage"
75-
element={<AdminSwitch page={2} />}
76-
/>
77-
78-
<Route index element={<MainVer2 />} />
79-
<Route path="v1" element={<MainVer1 />} />
80-
<Route path="signup" element={<SignUpDefault />} />
81-
<Route path="signup/success" element={<SignUpSuccess />} />
82-
<Route path="signin" element={<SignIn />} />
83-
<Route path="signin/v2" element={<SignInV2 />} />
84-
<Route path="signin/find/:id" element={<FindBar />} />
85-
{/* <Route path="list" element={<List />} /> */}
86-
<Route path="list" element={<PostGallery />} />
87-
<Route path="list/detail/:id" element={<Detail />} />
88-
<Route path="list/view/:id" element={<PostView />} />
89-
<Route path="list/review/:id" element={<ReviewWrite />} />
90-
<Route
91-
path="purchase/:id"
92-
element={<ProtectedRoute element={<Purchase />} />}
93-
/>
94-
<Route element={<MarginLayout />}>
95-
<Route path="policy/:id" element={<PolicyBar />} />
96-
97-
<Route
98-
path="purchase/success"
99-
element={<ProtectedRoute element={<PurchaseSuccess />} />}
100-
/>
101-
<Route
102-
path="purchase/abort"
103-
element={<ProtectedRoute element={<Abort />} />}
104-
/>
105-
<Route path="post" element={<PostWork />} />
106-
107-
<Route
108-
path="mypage/liked"
109-
element={<ProtectedRoute element={<LikedWorks />} />}
110-
/>
111-
112-
<Route
113-
path="mypage/purchased"
114-
element={<ProtectedRoute element={<PurchasedScript />} />}
115-
/>
116-
<Route
117-
path="mypage/purchased/performance-info/:id"
118-
element={<ProtectedRoute element={<PerformanceInfo />} />}
119-
/>
120-
<Route
121-
path="mypage/purchased/performance-refund/:id"
122-
element={<ProtectedRoute element={<PerformanceRefund />} />}
123-
/>
124-
<Route
125-
path="mypage/scriptmanage"
126-
element={<ProtectedRoute element={<ScriptManage />} />}
127-
/>
128-
<Route
129-
path="mypage/scriptmanage/detail/:scriptId"
130-
element={<ProtectedRoute element={<ScriptManageDetail />} />}
131-
/>
132-
<Route
133-
path="mypage/scriptmanage/askedperform/:id"
134-
element={<AskedPerformManage />}
135-
/>
136-
<Route
137-
path="mypage/infochange"
138-
element={<ProtectedRoute element={<AccountInfoChange />} />}
139-
/>
140-
141-
<Route path="*" element={<NotFound />} />
142-
143-
{/* 테스트용 routing */}
144-
<Route path="test/loading" element={<Loading />} />
145-
<Route path="test/404" element={<NotFound />} />
146-
<Route path="test/signup" element={<SignUpDefault />} />
147-
<Route path="test/delete" element={<AccountInfoChange />} />
148-
</Route>
149-
</Route>
150-
</Routes>
151-
</AuthProvider>
152-
</BrowserRouter>
63+
64+
<Routes location={state?.background ?? location}>
65+
<Route path="/" element={<DefaultLayout />}>
66+
<Route path="admin/scriptManage" element={<AdminSwitch page={0} />} />
67+
<Route path="admin/orderManage" element={<AdminSwitch page={1} />} />
68+
69+
<Route index element={<MainVer2 />} />
70+
<Route path="v1" element={<MainVer1 />} />
71+
72+
<Route path="signup" element={<SignUpDefault />} />
73+
<Route path="signup/success" element={<SignUpSuccess />} />
74+
<Route path="signin" element={<SignIn />} />
75+
<Route path="signin/v2" element={<SignInV2 />} />
76+
<Route path="signin/find/:id" element={<FindBar />} />
77+
78+
{/* <Route path="list" element={<List />} /> */}
79+
<Route path="list" element={<PostGallery />} />
80+
81+
<Route path="list/detail/:id" element={<Detail />} />
82+
<Route path="list/view/:id" element={<PostView />} />
83+
<Route path="list/review/:id" element={<ReviewWrite />} />
84+
<Route
85+
path="purchase/:id"
86+
element={<ProtectedRoute element={<Purchase />} />}
87+
/>
88+
89+
<Route element={<MarginLayout />}>
90+
<Route path="policy/:id" element={<PolicyBar />} />
91+
92+
<Route
93+
path="purchase/success"
94+
element={<ProtectedRoute element={<PurchaseSuccess />} />}
95+
/>
96+
<Route
97+
path="purchase/abort"
98+
element={<ProtectedRoute element={<Abort />} />}
99+
/>
100+
<Route path="post" element={<PostWork />} />
101+
102+
<Route
103+
path="mypage/liked"
104+
element={<ProtectedRoute element={<LikedWorks />} />}
105+
/>
106+
107+
<Route
108+
path="mypage/purchased"
109+
element={<ProtectedRoute element={<PurchasedScript />} />}
110+
/>
111+
<Route
112+
path="mypage/purchased/performance-info/:id"
113+
element={<ProtectedRoute element={<PerformanceInfo />} />}
114+
/>
115+
<Route
116+
path="mypage/purchased/performance-refund/:id"
117+
element={<ProtectedRoute element={<PerformanceRefund />} />}
118+
/>
119+
<Route
120+
path="mypage/scriptmanage"
121+
element={<ProtectedRoute element={<ScriptManage />} />}
122+
/>
123+
<Route
124+
path="mypage/scriptmanage/detail/:scriptId"
125+
element={<ProtectedRoute element={<ScriptManageDetail />} />}
126+
/>
127+
<Route
128+
path="mypage/scriptmanage/askedperform/:id"
129+
element={<AskedPerformManage />}
130+
/>
131+
<Route
132+
path="mypage/infochange"
133+
element={<ProtectedRoute element={<AccountInfoChange />} />}
134+
/>
135+
136+
<Route path="*" element={<NotFound />} />
137+
138+
{/* 테스트용 routing */}
139+
<Route path="test/loading" element={<Loading />} />
140+
<Route path="test/404" element={<NotFound />} />
141+
<Route path="test/signup" element={<SignUpDefault />} />
142+
<Route path="test/delete" element={<AccountInfoChange />} />
143+
</Route>
144+
</Route>
145+
</Routes>
146+
147+
{state?.background && (
148+
<Routes>
149+
<Route path="/signin" element={<SignInDialog />} />
150+
</Routes>
151+
)}
153152
</div>
154153
);
155154
}

‎src/components/auth/SignInDialog.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@use "./../../styles/_responsive.scss" as r;
2+
3+
.signin-dialog {
4+
width: 414px;
5+
@include r.media-mobile {
6+
width: 390px;
7+
}
8+
@include r.media-small-mobile {
9+
width: 240px;
10+
}
11+
}
12+
13+
.signin-dialog .title {
14+
margin-top: 40px;
15+
margin-bottom: 30px;
16+
}
17+
18+
.signin-dialog .content-wrap {
19+
display: flex;
20+
flex-direction: column;
21+
gap: 30px;
22+
23+
width: 100%;
24+
25+
@include r.media-small-mobile {
26+
gap: 15px;
27+
}
28+
}
29+
30+
.signin-dialog .extra-link {
31+
display: flex;
32+
justify-content: center;
33+
gap: 19px;
34+
35+
margin-top: 37.5px;
36+
margin-bottom: 41.5px;
37+
}
38+
39+
.signin-dialog .extra-link img {
40+
@include r.media-small-mobile {
41+
height: 14px;
42+
}
43+
}

0 commit comments

Comments
 (0)