bravo my life!

이번 스프린트에서는 마이페이지 내의 프로필 레이아웃, 프로필 수정 모달, 팔로워, 팔로잉관리 모달을 맡았다. 현재 프로필 레이아웃 완성.

중간 기록. 홈 UI 완성.

1. 개요 부모 요소에 꽉 찬 화면 기준으로 패딩이 16px 지정되어 있다. 자식 요소는 부모 요소의 패딩을 무시하고 꽉 찬 화면을 유지하고 싶다. 2.코드 상세 부모 요소 속성 무시 적용 전 코드 현재 부모 요소에 패딩이 16px로 지정되어 있어 자식요소 또한 동일한 패딩값을 가지고 있다. 더보기 // Home.tsx (부모요소) function Home() { return ( ); } //SlideSection.tsx (자식요소) const SlideSection = () => ( ... ); export default SlideSection; 부모 요소 속성 무시 적용 후 코드 부모 요소의 패딩값을 무시하고 자식요소는 꽉 찬 화면을 유지하고 있다. 더보기 //SlideSection.tsx (자식요소..

1. 개요 슬라이드 섹션에서 scrollbar의 색상과 크기를 프로젝트 디자인과 동일하게 커스텀을 하려고 한다. 2. 코드 상세 커스텀 전을 보면 스크롤바의 상태는 평범하다. 회색, 5px의 높이. 더보기 - 커스텀 전 const HomeSwiper = styled(Swiper)` top: -28px; `; const SlideSection = () => ( ); export default SlideSection; 커스텀 후를 보면 스코롤바가 노란색으로 변했고 드래그 부분과 레일 부분의 height가 달라졌다. 더보기 - 커스텀 후 const HomeSwiper = styled(Swiper)` top: -28px; .swiper-scrollbar-drag { background: #ffe000; heig..

1. 개요 코드를 좀 더 가독성이 좋게, 간결하게하기 위해 버릴건 버리자. 2. 코드상세 코드 변경 전. 더보기 코드 변경 전. /* eslint-disable no-confusing-arrow */ import { useState } from 'react'; import { IonButton, IonButtons, IonHeader, IonImg, IonToolbar, } from '@ionic/react'; import styled from 'styled-components'; import { NotiState } from '../../types/home/NotiState'; const TravelitHeader = styled(IonHeader)` width: 100%; `; const Travel..

1. 개요 boolean값으로 상태를 관리하며 어떤 아이콘을 false때는 상단에 빨간점을 표시하지 않고, true때는 상단에 빨간점을 표시하는 기능을 만들어 볼 것이다. 2. 코드 상세 //HomeHeader.tsx import { useState } from 'react'; import styled from 'styled-components'; //인터페이스를 사용하여 NotiState의 타입을 지정해준다. interface NotiState { noti: boolean; } const NotificationButtons = styled(IonButtons)` margin-right: 20px; `; //noti의 boolean 상태값에 따라 백그라운드 이미지를 바꾸어 줄 것이다. const Noti..

1. 개요 로그인 시도 후 로그인 상태 메세지를 띄울 창을 만들어 보자. toast라는 기능이고 useIonToast hook을 사용하여 구현 할 것이다. 2. 코드 상세 //login.tsx import { IonAvatar, IonContent, IonHeader, IonItem, IonList, IonPage, IonText, IonLabel, IonTitle, IonToolbar, IonItemOptions, IonItemSliding, IonItemOption, IonButton, IonIcon, IonInput, useIonToast, } from "@ionic/react"; import ExploreContainer from "../components/ExploreContainer"; imp..

1. 개요 Firebase로 로그인을 구현할 것이다. 아직 회원가입기능을 만들지 않아 오류는 발생하겠지만 진행해 보겠다. 2.코드 상세 //firebaseConfig.ts import * as firebase from "firebase/app"; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, updateProfile, signOut, } from "firebase/auth"; import { getAnalytics } from "firebase/analytics"; const config = { apiKey: "AIzaSyBmYIPAvaJgiBdJ7JrI-D2TaxhQvSrdYcc", authDomain: "io..

1. 개요 서버부분을 담당할 Firebase를 세팅해 보려고 한다. 2. Firebase 설치 터미널에 npm i firebase --save 를 입력한다. --save는 package.json의 dependency 항목에 모듈을 추가한다는 의미로 사용하는데 npm 5부터는 설치 기본 값이 --save이기 때문에 별도로 적어주지 않아도 상관없다. src폴더 내에 firebaseConfig.ts 파일을 만들고 다음과 같이 내용을 채운다. //firebaseConfig.ts import * as firebase from "firebase/app"; const config = { // .... } firebase.initializeApp(config) 3. Firebase 프로젝트 생성 파이어베이스에서 프로젝..

1. 개요 앞서 배웠던 routing을 이용해 간단한 회원가입 페이지를 만들어 보았다. 유저정보를 입력 후 회원가입 버튼을 클릭해 콘솔에 정보를 띄우자. 2. 코드 상세 //App.tsx const App: React.FC = () => ( ); export default App; //resister.tsx const Resister: React.FC = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [cpassword, setSPassword] = useState(""); function resisterUser() { console.log(`username: $..