카우치 코딩 6주 포트폴리오 - 3주차

riverkim·2022년 4월 30일

6WeeksToyCrew 6주포트폴리오 6주협업프로젝트 CouchCoding 카우치코딩 팀프로젝트 협업프로젝트

3주차 - 레이아웃 및 스타일링

프론트 멘토님과의 본격적인 코칭이 시작되면서 여러가지 새로운것을 배우게 되었는데 우리팀은 우선 페이지 기획서에 있는 레이아웃을 전부 Pseudo (의사흐름) 로 태그로 정리해 보라는 과제를 받았다. 또 git Projects를 활용한 칸반보드를 어떻게 사용해야 하는지 좀 더 자세히 설명해 주셨다. 그리고 페이지 기획서로 만들었던 부분을 카우치코딩에서 figma로 디자인된 파일로 만들어줘서 본격적인 레이아웃 및 스타일링 작업에 들어가게 되었다.

Pseudo 태그 정리와 레이아웃 & 스타일링

Pseudo 태그 정리

본격적인 작업에 들어가기 전에 레이아웃을 전부 Pseudo 태그로 정리해 보는 시간을 가졌다. 프론트팀원과 같이 회의하면서 내용을 정리햇는데 처음 메인페이지가 시간이 가장 오래 걸렸던것 같다. 처음에는 왜 하는건지 잘 이해를 못했는데 하고보니 어떤 식으로 컴포넌트를 구성해야 하는지, 어떻게 데이터를 받아와야 하는지, 어떤 기능을 구현해야 하는지 등 이 페이지에 들어갈 데이터와 기능에 대해서 한번더 생각 해 볼 수 있었다.

<PAGE>
  <nav>
    <GoToHomeButton />
    <AccountInfo>
      <MyProfile />
      <LOGIN /> or
      <LOGOUT /> // 로그인 여부에 따라서 버튼 모양 변경
    </AccountInfo>
  </nav>
  <Main>
    <Search>
      <SearchTitle>공원, 어디로갈까?</SearchTitle>
      <SearchForm>
        <SearchInput /> // 검색창
        <SearchBtn /> // 검색버튼
      </SearchForm>
      <SearchFilter>
        <FilterArea>// 지역 필터
          <Area /> // 지역이름
          <AreaMore /> // 지역 더보기
        </FilterArea> // 지역별 필터
        <FilterSort> // 정렬
          <SortStar /> // 별점순
          <SortDistance /> // 거리순
        </FilterSort>
      </SearchFilter>
    </Search>
    <BestSlide>
      <BestText /> // Best 폰트
      <Carousel>
        <MoveImageToLeft /> // 이전 사진 (좌로 이동) + 1번 째 항목에서 이동 -> 맨 뒷 항목으로 이동
        <parks /> // 공원 목록
        <MoveImageToRight /> // 다음 사진 (우로 이동) + 마지막에서 이동 -> 첫 항목으로
      </Carousel>
    </BestSlide>
    <ParkList>
      <ParkBlock> //공원 단위(map)
        <ParkImage /> //공원 이미지
        <ParkLike /> // 공원 좋아요
        <ParkETC>
          <ParkTitle /> // 공원 이름
          <ParkRate /> // 공원 평점
        </ParkETC>
      </ParkBlock>
    </ParkList>
  </Main>
</PAGE>

레이아웃 & 스타일링

figma 로 나온 디자인에 맞춰 스타일링 작업을 진행했다. figma에서 만들어진 디자인을 anima 플러그인을 사용해서 export한 후 코드를 추출해서 사용하는것 같은데 코드가 더 복잡해 지는것 같아서 figma에 있는 디자인을 참고해서 직접 스타일링 작업을 진행 했다.

ANTD에서 가져다 사용할 수 있는 건 사용하고 나머지는 styled component를 사용해서 커스텀해서 만들었다.

개발진행

firebase 연동해서 로그인 후 token 받아오기

프로젝트에서 가장 먼저 진행되어야 하는 부분이 로그인 부분이라고 해서 firebase로그인 연동을 가장 먼저 진행하게 되었다. 유튜브과 카우치 코딩 블로그에 있는 글을 참고하여 firebase 연동을 진행했다. 따로 회원가입을 받는게 아니라 google OAuth를 통해서 로그인을 구현 했다.

firebase.js

인증키 같은 부분을 .env파일에 두고 호출 할 수 있도록 하였고, google OAuth를 통해서 로그인과 로그아웃을 진행했다.

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

export const signInWithGoogle = () => {
  const provider = new GoogleAuthProvider();
  signInWithPopup(auth, provider)
    .then(result => {
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;
      console.log(token, 'firebase token');
      const { user } = result;
      console.log(user, 'firebase user');
    })
    .catch(error => {
      const errorCode = error.code;
      const errorMessage = error.message;
      const { email } = error;
      const credential = GoogleAuthProvider.credentialFromError(error);
    });
};
export const signOutWithGoogle = () => {
  localStorage.removeItem('user');
  auth.signOut();
};

firebase에 사용자 정보가 만들어 진 것을 확인 할 수 있엇다.

json-server mock DB 만들기

API가 바로 만들어지는게 아니기 때문에 프론트에서 마냥 그 시간동안 대기하고 있는게 아니라 미리 작업 할 수 있는 부분을 진행하려고 mock DB를 생성하고 json-server를 통해서 가짜 서버를 만들어서 작업을 진행 했다. 공공데이터 포털에서 공원 정보를 가져와서 db.json 으로 만들었다.