From 4362bca20d6bb612b52617e7593f69d4eab021bc Mon Sep 17 00:00:00 2001
From: siwoojang <j35857834@gmail.com>
Date: Fri, 15 Dec 2023 16:18:32 +0900
Subject: [PATCH] Feat: Login/Register/About page update

---
 src/views/examples/AboutPage.jsx    | 103 ++++++++++++++--------------
 src/views/examples/LoginPage.jsx    |   2 +-
 src/views/examples/RegisterPage.jsx |  28 ++++----
 3 files changed, 69 insertions(+), 64 deletions(-)

diff --git a/src/views/examples/AboutPage.jsx b/src/views/examples/AboutPage.jsx
index 25580ba..1c9a097 100644
--- a/src/views/examples/AboutPage.jsx
+++ b/src/views/examples/AboutPage.jsx
@@ -44,54 +44,55 @@ function AboutPage() {
             <br />
             <div className="team">
               <Row>
-                <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
+              <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
                   <div className="team-player">
                     <img
                       alt="..."
                       className="rounded-circle img-fluid img-raised"
-                      src={require("assets/img/teammate_image/kimjungwoo.png")}
-                      style={{width:'100px', height: '105px'}}
+                      src={require("assets/img/teammate_image/kang.jpg")}  
+                      style={{width:'100px', height:'110px'}}
                     ></img>{/* assets에 팀원사진 넣어둬야함 */}
-                    <h4 className="title">김정우</h4>
-                    <p className="category text-info">LEADER / INFRA / BACKEND</p>
+                    <h4 className="title">강형철</h4>
+                    <p className="category text-info">FRONTEND</p>
                     <p className="description">
-                      <a href="https://github.com/kjungw1025">
-                        contact: github
+                      <a href="https://github.com/hckang17">
+                        CONTACT : GITHUB
                       </a>
                     </p>
                     <p className="description" style={{textAlign: "left"}}>
-                      단국대 소프트웨어학과 19학번 김정우입니다. <br />
-                      니모내모 서비스에서 인프라 구축과 백엔드 개발을 담당했습니다. 
-                      AWS를 기반으로 Docker와 Github Actions를 활용하여 인프라를 구축하고
-                      SpringBoot와 Flask 프레임워크를 통해 백엔드 개발을 진행했습니다. 
-                      앞으로도 해당 분야를 발전시켜 백엔드 신입 개발자로 성장하고 싶습니다.
-                      <br /><br />
+                      단국대 모바일시스템공학과 19학번 강형철입니다.
+                      이번 NIMONEMO 프로젝트에서 프론트엔드로 전반적인 부분을 개발&관리하였습니다.
+                      REACT를 기반으로 Axios API통신(HTTP), 캘린더, 마이페이지, 결과페이지의 세부기능를 주로 개발하였습니다.<br />
                     </p>
                   </div>
                 </Col>
+
                 <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
                   <div className="team-player">
                     <img
                       alt="..."
                       className="rounded-circle img-fluid img-raised"
-                      src={require("assets/img/teammate_image/kang.jpg")}  
-                      style={{width:'100px', height:'110px'}}
+                      src={require("assets/img/teammate_image/kimjungwoo.png")}
+                      style={{width:'100px', height: '105px'}}
                     ></img>{/* assets에 팀원사진 넣어둬야함 */}
-                    <h4 className="title">강형철</h4>
-                    <p className="category text-info">FRONTEND LEADER / FEATURES</p>
+                    <h4 className="title">김정우</h4>
+                    <p className="category text-info">LEADER / INFRA / BACKEND</p>
                     <p className="description">
-                      <a href="https://github.com/hckang17">
-                        contact: github
+                      <a href="https://github.com/kjungw1025">
+                      CONTACT : GITHUB
                       </a>
                     </p>
                     <p className="description" style={{textAlign: "left"}}>
-                      단국대 모바일시스템공학과 19학번 강형철입니다.
-                      이번 NIMONEMO 프로젝트에서 프론트엔드 팀장으로 전반적인 부분을 개발&관리하였습니다.
-                      REACT를 기반으로 Axios API통신(HTTP), 캘린더, 마이페이지, 결과페이지의 세부기능를 주로 개발하였습니다.<br />
+                      단국대 소프트웨어학과 19학번 김정우입니다. <br />
+                      니모내모 서비스에서 인프라 구축과 백엔드 개발을 담당했습니다. 
+                      AWS를 기반으로 Docker와 Github Actions를 활용하여 인프라를 구축하고
+                      SpringBoot와 Flask 프레임워크를 통해 백엔드 개발을 진행했습니다. 
+                      앞으로도 해당 분야를 발전시켜 백엔드 신입 개발자로 성장하고 싶습니다.
+                      <br /><br />
                     </p>
                   </div>
                 </Col>
-
+                
                 <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
                   <div className="team-player">
                     <img
@@ -104,7 +105,7 @@ function AboutPage() {
                     <p className="category text-info">AI / BACKEND </p>
                     <p>
                       <a href="https://github.com/kolo4917">
-                        contact: github
+                      CONTACT : GITHUB
                       </a>
                     </p>
                     <p className="description" style={{textAlign:'left'}}>
@@ -129,10 +130,10 @@ function AboutPage() {
                       src={require("assets/img/teammate_image/lee.jpg")}  
                     ></img>{/* assets에 팀원사진 넣어둬야함 */}
                     <h4 className="title">이영주</h4>
-                    <p className="category text-info">BACKEND FLASK</p>
+                    <p className="category text-info">BACKEND</p>
                     <p>
                       <a href="https://github.com/0-zoo">
-                        contact: github
+                      CONTACT : GITHUB
                       </a>
                     </p>
                     <p className="description" style={{textAlign: "left"}}>
@@ -144,6 +145,28 @@ function AboutPage() {
                     </p>
                   </div>
                 </Col>
+                <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
+                  <div className="team-player">
+                    <img
+                      alt="..."
+                      className="rounded-circle img-fluid img-raised"
+                      src={require("assets/img/teammate_image/jangsiwoo.png")}  
+                    ></img>{/* assets에 팀원사진 넣어둬야함 */}
+                    <h4 className="title">장시우</h4>
+                    <p className="category text-info">FRONTEND</p>
+                    <p>
+                      <a href="https://github.com/siwooJang">
+                      CONTACT : GITHUB
+                      </a> 
+                    </p>
+                    <p className="description" style={{textAlign: "left"}}>
+                      단국대 소프트웨어학과 19학번 장시우입니다. 
+                      니모내모 서비스에서 프론트엔드 및 레이아웃 구성을 담당했습니다.
+                      프로젝트 초기 구성을 만들고, 홈페이지,매거진 페이지 등과 로그인/회원가입 기능을 구현했습니다. 
+                      앞으로도 리액트를 공부해 사용자 친화적인 웹앱을 만드는 프론트엔드 개발자로 성장하겠습니다.{" "}
+                    </p>
+                  </div>
+                </Col>
                 <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
                   <div className="team-player">
                     <img
@@ -153,10 +176,10 @@ function AboutPage() {
                       style={{width:'100px', height: '110px'}}
                     ></img>{/* assets에 팀원사진 넣어둬야함 */}
                     <h4 className="title">천은유</h4>
-                    <p className="category text-info">FRONTEND / UI/UX DESIGN</p>
+                    <p className="category text-info">FRONTEND</p>
                     <p className="description">
                       <a href="https://github.com/ChunEunyu" >
-                        contact: github
+                        CONTACT : GITHUB
                       </a>
                     </p>
                     <p className="description" style={{textAlign: "left"}}>
@@ -169,29 +192,7 @@ function AboutPage() {
                   </div>
                 </Col>
 
-                <Col md="4">  {/* 여기서 부터 한 Col당 팀원 한명씩 */}
-                  <div className="team-player">
-                    <img
-                      alt="..."
-                      className="rounded-circle img-fluid img-raised"
-                      src={require("assets/img/teammate_image/jangsiwoo.png")}  
-                    ></img>{/* assets에 팀원사진 넣어둬야함 */}
-                    <h4 className="title">장시우</h4>
-                    <p className="category text-info">FRONTEND</p>
-                    <p>
-                      <a href="https://github.com/siwooJang">
-                        contact: github
-                      </a> 
-                    </p>
-                    <p className="description" style={{textAlign: "left"}}>
-                      단국대 소프트웨어학과 19학번 장시우입니다. 
-                      니모내모 서비스에서 프론트엔드 및 레이아웃 구성을 담당했습니다. 
-                      프로젝트 초기 구성을 만들고, 홈페이지,매거진 페이지를 만들고 
-                      회원가입 로직 등을 리액트로 구현했습니다.
-                      타바 후에도 서버 등 백엔드를 공부해 백엔드와 협업할 줄 아는 프론트엔드 신입 개발자로 성장하고 싶습니다.{" "}
-                    </p>
-                  </div>
-                </Col>
+
 
               </Row>
             </div>
diff --git a/src/views/examples/LoginPage.jsx b/src/views/examples/LoginPage.jsx
index eef0c05..dff35ed 100644
--- a/src/views/examples/LoginPage.jsx
+++ b/src/views/examples/LoginPage.jsx
@@ -128,7 +128,7 @@ function LoginPage() {
                     <Input
                       {...field}
                       type="password"
-                      placeholder="password"
+                      placeholder="PASSWORD"
                       style={{height:"40px", fontSize:"20px", fontWeight:"500", textAlign:"center"}}
                     />
                   )}
diff --git a/src/views/examples/RegisterPage.jsx b/src/views/examples/RegisterPage.jsx
index 2153687..8d94513 100644
--- a/src/views/examples/RegisterPage.jsx
+++ b/src/views/examples/RegisterPage.jsx
@@ -74,7 +74,7 @@ function RegisterPage() {
       console.log(formData, signupToken);
 
 
-      navigate('/login'); // Redirect to the login page after successful registration
+      navigate('/login'); // 회원가입 완료 후 로그인 페이지 페이지로 이동.
     } catch (error) {
       console.error('Error during login:', error);
     }
@@ -191,13 +191,14 @@ useEffect(() => {
                           />
                         )}
                       />
+                      <br/>
                       <Button                     
                       style={btnStyle}
                       block
                       className="btn-round"
                       color="info"
                       size="lg"
-                      type="submit"onClick={checkNicknameDuplicate}>ID 중복 확인</Button>
+                      type="submit"onClick={checkNicknameDuplicate}>ID CHECK</Button>
                       {errors.nickname && (
                         <UncontrolledTooltip placement="right" target="nicknameInput" isOpen={true}>
                           <span style={warningStyle}>{errors.nickname.message}</span>
@@ -205,6 +206,8 @@ useEffect(() => {
                       )}
                     </FormGroup>
 
+                    <br/>
+
                     <FormGroup>
                       <Controller
                         name="password"
@@ -213,7 +216,7 @@ useEffect(() => {
                         render={({ field }) => (
                           <Input {...field} 
                             type="password" 
-                            placeholder="PS" 
+                            placeholder="PASSWORD" 
                             style={{height:"40px", fontSize:"20px", fontWeight:"500", textAlign:"center"}}
                             id="passwordInput"
                           />
@@ -224,7 +227,7 @@ useEffect(() => {
                           <span style={warningStyle}>{errors.password.message}</span>
                         </UncontrolledTooltip>)}
                     </FormGroup>
-
+                    <br/>
                     {/* 비밀번호 확인 필드 */}
                     <FormGroup>
                       <Controller
@@ -238,7 +241,7 @@ useEffect(() => {
                         render={({ field }) => (
                           <Input {...field} 
                             type="password" 
-                            placeholder="PS Verification"
+                            placeholder="PASSWORD VERIFICATION"
                             style={{height:"40px", fontSize:"20px", fontWeight:"500", textAlign:"center"}}
                             id="passwordConfirm"
                           />
@@ -250,7 +253,7 @@ useEffect(() => {
                         </UncontrolledTooltip>
                       )}
                     </FormGroup>
-
+                    <br/>
                     <FormGroup>
                       <Controller
                         name="name"
@@ -260,7 +263,7 @@ useEffect(() => {
                           <Input
                             {...field}
                             type="text"
-                            placeholder="Username"
+                            placeholder="USERNAME"
                             style={{height:"40px", fontSize:"20px", fontWeight:"500", textAlign:"center"}}
                             id="nameInput"
                           />
@@ -272,7 +275,7 @@ useEffect(() => {
                         </UncontrolledTooltip>
                       )}
                     </FormGroup>
-
+                    <br/>
                     <FormGroup>
                       <Controller
                         name="phone"
@@ -282,7 +285,7 @@ useEffect(() => {
                           <Input
                             {...field}
                             type="phone"
-                            placeholder="Phone Number"
+                            placeholder="PHONE NUMBER"
                             style={{height:"40px", fontSize:"20px", fontWeight:"500", textAlign:"center"}}
                             id="phoneInput"
                             disabled={isRequestDisabled}
@@ -294,6 +297,7 @@ useEffect(() => {
                           <span style={warningStyle}>{errors.phone.message}</span>
                         </UncontrolledTooltip>
                       )}
+                      <br/>
                     </FormGroup>
                         <Button 
                           block
@@ -302,7 +306,7 @@ useEffect(() => {
                           style={btnStyle}
                           onClick={requestSmsToken}
                           disabled={isRequestDisabled}>
-                          인증번호 요청하기
+                          SMS SEND
                         </Button>
                         <Collapse isOpen={smsSent}>
                           <Input
@@ -319,7 +323,7 @@ useEffect(() => {
                             style={btnStyle}
                             onClick={verifySmsToken}
                             disabled={isInputDisabled}>
-                              SMS 인증번호 확인
+                              SMS SEND
                           </Button>
                         </Collapse>                        
                   </CardBody>
@@ -333,7 +337,7 @@ useEffect(() => {
                     type="submit"
                     disabled={!isNicknameValid} // 중복 확인이 완료되지 않았다면 버튼을 비활성화
                   >
-                    회원가입하기
+                    REGISTER
                   </Button>
                   <div style={divisionLine} />
                   <div>