Create Signin page & Common Component

[Kimsj912]

변경사항

1. 버튼이 있는 FormScrollView (Create, Edit, Form 등 에서 사용) 제작 완료

• 자세한 예시는 Signup 페이지 참고

   <FormScrollView buttonTitle={'하단 버튼명'} buttonType={'Round'} onPress={버튼 클릭시 실행할 함수}>
      /**들어갈 컴포넌트들 추가**/
   </FormScrollView>

2. Button Component 생성

• 사용되는 버튼이 몇개 없어서 type으로 골라 사용할 수 있도록 제작하였습니다.
• props로 파라미터로 정의된 요소 외에도 적용 가능합니다.

  // 네모난 버튼의 경우
  <Button type={'Square'} title={'버튼에 보일 글씨'} onPress={()=>console.log("console.log대신 실행할 함수로 변경")} / >

  // 동그란 버튼의 경우
   <Button type={'Round'} title={'버튼에 보일 글씨'} onPress={()=>console.log("console.log대신에 실행할 함수로 변경")} />

3. Header 컴포넌트 생성

• src/App.js의 pageHeaderList에 추가할 페이지 입력하면 자동으로 등록할 수 있습니다.
• 디자인에 맞춰 none, basic, home으로 타입을 구성하였습니다.
• pageHeaderList 내의 객체 name은 절대 중복되면 안됩니다.
• component에 컴포넌트를 넣기 전에 해당 컴포넌트를 import했는지 체크한번씩 해보기!

// none = 헤더없음 / basic = 뒤로가기버튼 + 페이지명 / home= 로고 + 채팅 + 프로필
// name은 절대 중복되면 안됨.
// none은 name과 component만 들어가고, basic은 name, component, title이 들어가고, home은 name, component만 들어감.
const pageHeaderList = [
  {type: 'none', name: 'Signin', component: Signin},
  {type: 'basic', name:'Signup', component: Signup, title:'회원 가입'},
  {type: 'home', name:'SharingInfo', component:SharingInfoList},
}

4. Input 컴포넌트 생성

• input에 대한 라벨과 TextInput의 스타일까지 정의된 컴포넌트를 만들었습니다.

        <Input 
          title={'이메일'} 
          placeholder={'이메일을 입력해주세요'} 
          onChangeSetText={setEmail} 
        />
        <Input 
          title={'비밀번호'} 
          placeholder={'비밀번호를 입력해주세요'} 
          onChangeSetText={setPassword} 
          secureTextEntry = {true}
        />

5. 페이지 내에서 부분에 대한 대표정보인 TitleText를 제작하였습니다.

  <TitleText title={'가입정보'} />

6. SignIn Page 심플한 로직까지 완료

• 이메일과 비밀번호를 눌러 로그인할 수 있는 로그인 페이지를 만들었습니다.
• 유저 로그인이 되면 이후에 재로그인없이 바로 서비스의 메인페이지인 SharingInfoList 페이지로 연결됩니다.
  

7. Signup Page 화면 완료

• 구글 Auth를 사용할 수 없어 이메일과 비밀번호를 받는 부분을 추가하였습니다 (이후 Figma 변경 예정)
• 아직 Validate 설정을 안해 이메일과 비밀번호를 입력하고 시작하기 버튼을 누르면 firebase에 자동추가될 수도 있으니 주의하시길 바랍니다.
• 앞서 말한 컴포넌트들을 모두 확인해 볼 수 있습니다.
  

주의사항

1. firebase 라이브러리 버전 다운그레이드 (yarn or npm install 필요)

[zayoonez]

확인했습니다!

[Kimsj912]

확인했습니다!

👍