Skip to content

Commit 65ada8a

Browse files
jayrhiejayrhie
committed
도메인 설계 완료, Comment위한 Repository 및 Service 개발 완료
2 parents ae62ef1 + 37fb8ec commit 65ada8a

File tree

7 files changed

+258
-7
lines changed

7 files changed

+258
-7
lines changed

‎FE/src/containers/findinfo/EmailFindDe.jsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React from "react";
2+
import { useNavigate } from 'react-router-dom';
3+
import styled from "styled-components";
4+
5+
function EmailFindDe() {
6+
const Style={
7+
Wrapper:styled.div`
8+
box-sizing: border-box;
9+
position: absolute;
10+
width: 906px;
11+
height: 234px;
12+
top: 248px;
13+
background: #FFFFFF;
14+
border: 1px solid #D0D0D0;
15+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
16+
border-radius: 30px;
17+
`,
18+
Title:styled.div`
19+
position: absolute;
20+
width: 664px;
21+
height: 64px;
22+
top: 154px;
23+
font-family: 'Noto Sans KR';
24+
font-style: normal;
25+
font-weight: 700;
26+
font-size: 40px;
27+
line-height: 58px;
28+
text-align: center;
29+
color: #464646;
30+
`,
31+
FormStyle:styled.div`
32+
display: flex;
33+
justify-content:center;
34+
`,
35+
Question:styled.div`
36+
display: flex;
37+
justify-content: center;
38+
width:633px;
39+
height:43px;
40+
position: relative;
41+
margin-bottom: 22px;
42+
left:145px;
43+
top:63px;
44+
`,
45+
Answer:styled.input`
46+
position: absolute;
47+
width: 547px;
48+
height: 43px;
49+
background: #FFFFFF;
50+
border: 1px solid #B0B0B0;
51+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
52+
border-radius: 10px;
53+
display: flex;
54+
justify-content: right;
55+
right:0px;
56+
padding-left: 20px;
57+
::placeholder {
58+
font-family: 'Inter';
59+
font-style: normal;
60+
font-weight: 400;
61+
font-size: 15px;
62+
line-height: 18px;
63+
text-align: center;
64+
color: #B0B0B0;
65+
}
66+
`,
67+
InputName:styled.div`
68+
position: absolute;
69+
font-family: 'Noto Sans KR';
70+
font-size: 20px;
71+
line-height: 29px;
72+
width: 60px;
73+
height: 32px;
74+
left: 0px;
75+
text-align: right;
76+
`,
77+
EmailButton:styled.button`
78+
box-sizing: border-box;
79+
position: absolute;
80+
width: 906px;
81+
height: 68px;
82+
top: 512px;
83+
background: #FADA5E;
84+
border: 1px solid #D0D0D0;
85+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
86+
border-radius: 30px;
87+
color:white;
88+
`,
89+
}
90+
return (
91+
<>
92+
<Style.Title>이메일 찾기</Style.Title>
93+
<Style.FormStyle>
94+
<Style.Wrapper>
95+
<Style.Question>
96+
<Style.InputName>이름</Style.InputName>
97+
<Style.Answer placeholder="성함을 입력해주세요" />
98+
</Style.Question>
99+
<Style.Question>
100+
<Style.InputName>연락처</Style.InputName>
101+
<Style.Answer placeholder="전화번호를 입력해주세요" />
102+
</Style.Question>
103+
</Style.Wrapper>
104+
<Style.EmailButton>이메일 찾기</Style.EmailButton>
105+
</Style.FormStyle>
106+
</>
107+
)
108+
}
109+
export default EmailFindDe;

‎FE/src/containers/findinfo/PasswordFindDe.jsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
function PasswordFindDe() {
5+
const Style={
6+
Wrapper:styled.div`
7+
box-sizing: border-box;
8+
position: absolute;
9+
width: 906px;
10+
height: 381px;
11+
top: 248px;
12+
background: #FFFFFF;
13+
border: 1px solid #D0D0D0;
14+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
15+
border-radius: 30px;
16+
`,
17+
Title:styled.div`
18+
position: absolute;
19+
width: 664px;
20+
height: 64px;
21+
top: 154px;
22+
font-family: 'Noto Sans KR';
23+
font-style: normal;
24+
font-weight: 700;
25+
font-size: 40px;
26+
line-height: 58px;
27+
text-align: center;
28+
color: #464646;
29+
`,
30+
FormStyle:styled.div`
31+
display: flex;
32+
justify-content:center;
33+
`,
34+
Question:styled.div`
35+
display: flex;
36+
justify-content: center;
37+
width:633px;
38+
height:43px;
39+
position: relative;
40+
margin-bottom: 22px;
41+
left:145px;
42+
top:95px;
43+
`,
44+
Answer:styled.input`
45+
position: absolute;
46+
width: 547px;
47+
height: 43px;
48+
background: #FFFFFF;
49+
border: 1px solid #B0B0B0;
50+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
51+
border-radius: 10px;
52+
display: flex;
53+
justify-content: right;
54+
right:0px;
55+
padding-left: 20px;
56+
::placeholder {
57+
font-family: 'Inter';
58+
font-style: normal;
59+
font-weight: 400;
60+
font-size: 15px;
61+
line-height: 18px;
62+
text-align: center;
63+
color: #B0B0B0;
64+
}
65+
`,
66+
InputName:styled.div`
67+
position: absolute;
68+
font-family: 'Noto Sans KR';
69+
font-size: 20px;
70+
line-height: 29px;
71+
width: 60px;
72+
height: 32px;
73+
left: 0px;
74+
text-align: right;
75+
`,
76+
PasswordButton:styled.button`
77+
box-sizing: border-box;
78+
position: absolute;
79+
width: 906px;
80+
height: 68px;
81+
top: 657px;
82+
background: #FADA5E;
83+
border: 1px solid #D0D0D0;
84+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
85+
border-radius: 30px;
86+
color:white;
87+
`,
88+
}
89+
return (
90+
<>
91+
<Style.Title>비밀번호 찾기</Style.Title>
92+
<Style.FormStyle>
93+
<Style.Wrapper>
94+
<Style.Question>
95+
<Style.InputName>이메일</Style.InputName>
96+
<Style.Answer placeholder="이메일을 입력해주세요" />
97+
</Style.Question>
98+
<Style.Question>
99+
<Style.InputName>이름</Style.InputName>
100+
<Style.Answer placeholder="성함을 입력해주세요" />
101+
</Style.Question>
102+
<Style.Question>
103+
<Style.InputName>연락처</Style.InputName>
104+
<Style.Answer placeholder="전화번호를 입력해주세요" />
105+
</Style.Question>
106+
</Style.Wrapper>
107+
<Style.PasswordButton>비밀번호 찾기</Style.PasswordButton>
108+
</Style.FormStyle>
109+
</>
110+
)
111+
}
112+
export default PasswordFindDe;

‎FE/src/containers/login/LoginContainer.jsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,12 @@ function LoginContainer() {
7474
}
7575
};
7676

77-
const onClickID = () => {
78-
// ID 찾기 페이지로 이동
77+
const onClickEM = () => {
78+
navigate("/emailfind")
7979
};
80+
8081
const onClickPW = () => {
81-
// PW 찾기 페이지로 이동
82+
navigate("/passwordfind")
8283
};
8384

8485
const onClickRegister = () => {
@@ -99,6 +100,7 @@ function LoginContainer() {
99100
padding: "40px 0px 40px 0px",
100101
}}
101102
>
103+
102104
<span style={{ fontSize: "25px" }}>
103105
<span style={{ fontFamily: "NotoSansKR-700", fontSize: "25px" }}>
104106
로그인
@@ -175,17 +177,17 @@ function LoginContainer() {
175177
</span>
176178
<br />
177179
<span style={{ fontFamily: "NotoSansKR-300", fontSize: "10px" }}>
178-
아이디나 비밀번호가 기억나지 않나요? &nbsp; |
180+
이메일, 비밀번호가 기억나지 않나요? &nbsp; |
179181
<span
180182
style={{
181183
textDecoration: "underline",
182184
textUnderlinePosition: "under",
183185
cursor: "pointer",
184186
padding: "0px 5px 0px 5px",
185187
}}
186-
onClick={onClickID}
188+
onClick={onClickEM}
187189
>
188-
아이디 찾기
190+
이메일 찾기
189191
</span>
190192
|
191193
<span

‎FE/src/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ import PageScrap from './page/mypage/PageScrap';
2424
import PageMyFeedback from './page/mypage/PageMyFeedback';
2525
import PageFAQ from './page/mypage/PageFAQ';
2626

27+
import EmailFind from './page/findinfo/EmailFind';
28+
import PasswordFind from './page/findinfo/PasswordFind';
29+
2730
const root = ReactDOM.createRoot(document.getElementById('root'));
2831
const Style = {
2932
Wrapper: styled.div`
@@ -39,6 +42,8 @@ root.render(
3942
<Style.Wrapper>
4043
<Routes>
4144
<Route path="/login" element={ <LoginPage />} />
45+
<Route path="/emailfind" element={<EmailFind />} />
46+
<Route path="/passwordfind" element={<PasswordFind />} />
4247

4348
<Route path='/' element={ <RefIdeaPage />} />
4449
<Route path='/ref/marketing' element={ <RefMarketingPage />} />

‎FE/src/layout/Header/Header.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ const Header = () => {
144144
}
145145

146146
const signupOnClick = () => {
147-
147+
148148
}
149149

150150
const loginYN=false;

‎FE/src/page/findinfo/EmailFind.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "../../layout/Layout";
2+
import React from "react";
3+
import EmailFindDe from "../../containers/findinfo/EmailFindDe";
4+
function EmailFind() {
5+
return (
6+
<Layout>
7+
<EmailFindDe />
8+
</Layout>
9+
)
10+
}
11+
export default EmailFind;

‎FE/src/page/findinfo/PasswordFind.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Layout from "../../layout/Layout";
2+
import React from "react";
3+
import PasswordFindDe from "../../containers/findinfo/PasswordFindDe";
4+
5+
function PasswordFind() {
6+
return (
7+
<Layout>
8+
<PasswordFindDe />
9+
</Layout>
10+
)
11+
}
12+
export default PasswordFind;

0 commit comments

Comments
 (0)