5. Disney plus clone 하기 - 스토리북에 공통 이미지 컴퍼넌트 추가하기

1. Issue 생성하기

• Github 저장소에서 생성한 disney_plus_clone 시작 화면에서 Issues를 선택합니다.

새로운 Issue 생성하기

• New issue 버튼을 눌러서 새로운 이슈를 생성합니다.

새로운 Issue 생성하기

• Title에 "스토리북에 공통 이미지 컴포넌트 추가"라고 작성하고 Assignees에 코드를 작성할 사람을 선택한 후 Submit new issue 버튼을 클릭합니다.

새로운 Issiue 생성하기

 

2. branch 생성하기

• VS Code 터미널을 실행한 후 아래의 코드를 작성하여 새로운 branch를 생성합니다.

git checkout -b feat/4

• 왼쪽 하단에서 현재 branch가 feat/4인지 확인합니다.

 

3. 스토리북에 공통 이미지 컴포넌트 추가

• coponents 폴더 안에 shared 폴더를 생성한 후 StillImage.stories.js, StillImage.js 파일을 생성합니다.
• 새로 생성한 파일들에 아래 내용을 추가합니다.

// StillImage.js
const StillImage = () =>{
  return <div></div>
}

export default StillImage

// StillImage.stories.js
Import StillImage from "./StillImage"

export default {
  title: "Example/StillImage",
  component: StillImage
}

const Template = args => <StillImage {...args} />

export const commone_still_image = Template.bind({})

const still image.args = {
  StillImageUrl: ''
}

• 지금까지 작성한 부분을 아래 코드로 Github에 업로드합니다

git add .
git commit -m "docs: StillImage.stories.js, StillImage.js 파일 생성"

• 터미널에 아래의 명령어를 입력해서 스타일 컴포넌트(styled-components)를 설치합니다.

npm install styled-components

• 지금까지 작성한 부분ㅇ르 아래 코드로 Github에 업로드합니다.

git add .
git commit -m "feat: styled-components 설치"

• 새로 생성한 파일에 아래 내용을 추가합니다.

// StillImageStyle.js
import styled from "styled-components"

export const StillImageBox = styled.div`
  width: 23.481%; height: 86.718%;
  box-sizing: border-box; overflow: hidden;
  margin:0; padding:0;
`

export default StillImg = styled.img`
  max-width: 100%; height: auto;
  background-repeat: no-repaet; background-position: center; background-size: 100% 100%;
`

• 지금까지 작성한 부분을 아래 코드로 Github에 업로드 합니다.

git add .
git commit -m "feat: StillImage 공통 스타일 작성"

• StillImage.js, SillImage.stories.js 파일에 아래 내용을 추가합니다.

// StillImage.js
import { StillImageBox, StillImg } from "./StillImageStyle"

const StillImage = () => {
  return <StillImageBox>
    <StillImg />
  </StillImageBox>
}

export default StillImage

// StillImage.stories.js
import stillImage from "./StillImage"

export default {
  title: "Example/tillImage",
  component: StillImage
}

const Template = args => <StillImage {...args} />

export const common_still_image = Template.bind({})

commpon_still_image.args = {
  background: 'https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/84A597261952771566AA11482D89DB0472703DFF4322A39DA9EE1D2A8B993E41/scale?width=2880&aspectRatio=1.78&format=jpeg',
  title: '모아나'
}

• 지금까지 작성한 부분을 아래 코드로 Github에 업로드 합니다.

git add .
git commit -m "feat: StillImage, StillImage.stories.js 기본틀"
git push origin feat/4

 

4. Pull Request로 코드 병합하기

• Github 화면에서 pull requests를 선택합니다.

새로운 Pull request 생성하기

• Compare & pull request를 선택합니다.

새로운 Pull request 생성하기

• base: master, compare: feat/4, Title에 "스토리북에 공통이미지 컴포넌트 만들기" Reviewers에 코드리뷰를 할 사람을 선택하고, Assignees에 코드를 작성한 사람을 선택한 후 Create pull request버튼을 눌러 새로운 Pull request를 생성합니다.

새로운 Pull request 생성하기

• 코드리뷰 후 파일을 수정합니다.

// StillImageStyle.js 파일 삭제
// StillImage.js
import styled from "styled-components"

const StillImageBox = styled.div`
  width: 23.481%; height: 86.718%;
  box-sizing: border-box; overflow: hidden;
  margin: 0; padding: 0;
`

const StillImg = styled.img`
  max-width: 100%; height: auto;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
`

const StillImage = ({ src }) => {
  return <StillImageBox>
    <StillImg src={src} />
  </StillImageBox>
}

export default StillImage

• 코드리뷰가 끝나면 Merge pull request를 클릭하고 Comnfirm merge를 클릭하여 pull request를 닫습니다.

• Delete branch 버튼을 클릭하여 feat/4 브랜치를 삭제합니다.

• 이슈를 생성한 곳으로 돌아가서 현재 이슈를 Close issue 버튼을 클릭하여 닫습니다.

• VS Code 터미널에 아래 코드를 입력하여 master 브랜치를 최신화 합니다.

git checkout master
git pull origin master