6월 11일

💬 Team issues

작업 진행 현황 🛠

👍 구현 완료 : 윤형님(사이드바 레이아웃)

• 윤형 - 모달창(계정관리, 회원관리), 기타설정 부분
• 지원 - 관리페이지 레이아웃
• 현중 - 회원가입 & 로그인 (API 기능 구현)

SVG 사용하는 코드 💻

import Mysvg from '@assets/images/mysvg.svg';

const Mycomponent = (): JSX.Element => {
  return (
    ...
      	<Mysvg />
	...
    
};

📒 참고 레퍼런스 : https://velog.io/@leejaehyuck9/TSNext.js%EC%97%90%EC%84%9C-SVG-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

폴더구조 참고해주세요 ⚙️

컴포넌트 폴더 하위 폴더로 작업중인 페이지 ex) Admin 생성 후 알맞는 네이밍의 폴더 생성 후 코드 구현해주시면 됩니다. 추후 pages 폴더로 컴포넌트 붙이시면 됩니다!

// pages/register/index.tsx
import React from 'react';
import Header from '@components/Form/Header';
import InputGroup from '@components/Form/InputGroup';
import Styled from '../../components/Form/styles';
import Footer from '@components/Form/Footer';

const RegisterPage = () => {
  return (
    <Styled.Container>
      <Styled.Wrapper>
        <Header />

        <InputGroup />

        <Footer />
      </Styled.Wrapper>
    </Styled.Container>
  );
};

export default RegisterPage;

admin page 브랜치 생성하실 때 📝

• feature/admin-sidebar
• feature/admin-modal 이런식으로 admin-{네이밍} 해주시면 될 것 같아요 :)

추후 feature/admin 브랜치로 pr 올려주시면 됩니다!

Styled 코드 작성 컨벤션 (카톡으로 투표 부탁드립니다) 🤓

1. 하나의 객체 생성 후 안에 생성해서 사용하는 코드

const TestPage = () => {
  return (
    <Styled.Container>
      <Styled.Wrapper>

      </Styled.Wrapper>
    </Styled.Container>
  );
};

const Styled = {
  Container: styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
  `,
  Wrapper: styled.div`
    margin: 50px;
    flex: 0 0 300px;
    text-align: center;
  `,
}

2. const로 하나씩 선언해서 사용하는 스타일 코드

const TestPage = () => {
  return (
    <Container>
      <Wrapper>

      </Wrapper>
    </Container>
  );
};

const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
  `;

const Wrapper = styled.div`
    margin: 50px;
    flex: 0 0 300px;
    text-align: center;
  `;