Portfolio

💬

회의 진행 사항

기획안 작성하기

슬로건(LUVOOK) LOVE

상윤: 저희 잠깐 숨 좀 돌릴까요? STOP

~를 공유해요
일상(책?)을 공유해요
한 장 할까요??
잠깐 쉴까요?
상윤님 아이디어를 내일 받겠습니다ㅏ.

태욱: 자신을 돌아볼까요? 니 자신을 알라

오늘 한 장
글로 배우는

수경: 러북 + 연결 →

사랑 해보셨나요

다은: 함께해요

글로 배우는 사랑..? 이러다 큰일나요.
글로 하는 여행

기획 배경 및 동기

태욱: 원하는 자신의 스타일을 찾을 수 있다? 자신이 정말 흥미로워 하는 분야를 찾게된다.

차별점: 보통 책 사이트에서는 직접 찾아야하거나 베스트셀러 카테고리에서 찾아야 하는데 문구를 보고 더 직관적으로 취향을 찾아갈 수 있다.

수경: 책을 많이 읽을 시간이 없으니까 그 책의 문구(구절)이라도 보면서 깨닫고 등등
상윤: 앞만 보고 달리는 현대 사회… 잠시 쉬었다가 갑시다. 공감가는 문구를 통해 쉽게 책에 접근
다은: 좋아하는 사람들끼리 모일 수 있다. 만날 장소를 제공한다.

같은 책 카테고리 등의 취향을 찾을 수 있다.

상윤님이 스토리보드를 써주시면..

태욱의 서재에 들어간 당신.. 오늘 어떤 책을 읽을까 고민하게 되는데..? 책 잘 안읽는데.? 어떻게 고르지?아! 러북 들어가볼까?

사용자 시나리오

로그인 화면에 접속

둘러볼게요

책장 페이지(메인 페이지)를 보게 된다.
배너에는 추천 도서와 문구 + 책장에는 인기순(좋아요)으로 정렬된 추천 책들이 보여요

책/유저 검색을 할 수 있다.

흥미가 가는 책을 클릭해서 게시글에 들어가면 게시글 정보(내용/댓글 등)를 볼 수 있다.

회원가입 할게요

문구를 입력합니다. 문구를 잘 모르면 자동 문구 추천 버튼(..는 기능추가)을 눌러서 다음 창으로 넘어갑니다.
아이디/비밀번호를 입력하고 회원가입을 합니다.

로그인 시(회원)

로그인 하면 a 부분 진행하고
게시물 추가/삭제/수정/좋아요/댓글 권한이 부여된다.
추가 기능)

회원 정보 수정/탈퇴/내 게시물 확인 등을 할 수 있다
알람 확인도 할 수 있다.

스프린트 주기 정하기

내일(6/8) 바로 시작한다면 15일

6/9일 시작하면 14일

타이트하기 잡아서 10~12일

feature(8일)

refactor(2일)

bug(2일)

enhancement(할 수 있을지) ⇒ 기능 추가/디테일하게/보완

2일

테스크 정리
데일리 스크럼 및 작업 분배
오늘 할 일 정리
작업 및 커뮤니케이션
스프린트 회고

소통 어떻게 할건지(여기 나와요..)

스크럼 시간

고정 시간 언제? 시간은 어느정도?

주 6회

10시 - 11시(최대 11시 30분) : 스크럼

1-7시 QR + 코어타임 원래 있어요

스프린트 주기 안에 해야할 feature 끝내고

issue/pr 올리기(스프린트 끝날 때)

pr 시간 2일(첫날 - 10시 스크럼, 둘째날 저녁 10시까지 PR 올리기)

리뷰는 시작해보고 생각해봐요

기능 만들고 시간을 봐야할 것 같아요

슬랙/노션

중간 이슈

슬랙으로 ~뭘 하려했는데/어느 부분에서/어떻게 했더니 안됐다/어떻게 하면 좋을지

시간을 달라 ⇒ 몇시에 볼까요? ⇒ 이슈해결

노션으로는 스크럼 정리(칸반보드 or 노션으로 스크럼할지)

기획안 제출(수경)- 먼저

프로젝트 Directory 구조

처음으로 커밋

구조를 전체적으로 develop에 올리고

eslint/prettier

저희 그때 정한대로 파일 만들기

npm/yarn

yarn

package.json


{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "craco": "^0.0.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.9.2"
  }
}

craco.config.js


const path = require('path')

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@contexts': path.resolve(__dirname, 'src/contexts'),
      '@pages': path.resolve(__dirname, 'src/pages'),
    },
  },
}

react-scripts 버전 →



/api : endpoint당 파일하나.
	ex) get-document
	http client를 따로 만드시고, 위 핸들러 파일에서 조회하는 구조를 추천드립니다.
	getRequest = () => { fetchAPI…}
	putRequest = (body) => { fetchAPI…}
/contants : 상수변수 모아두는 곳
/components : 컴포넌트 모아두는 곳
/pages : 페이지가 많다면, 페이지를 모아두는 곳
/utils : 순수함수 모아두는 곳 ( 어디서나 사용가능한 공용함수 )
/hooks : 훅 api 모아두는 곳
/contexts : 전역 관리

결론:

한 사람이 맡아서 작성해서 첫 커밋 올리기(develop 브랜치에 올리기)

오늘 안에 올리면 좋을 것 같아요

main

develop (합치는거 올리는거 다 여기서)

feature/user-login

feature/user-logout

이 브랜치 안에서 개발을 하고
approve 했다 하면

develop으로 pr 머지
머지 하고 이 브랜치 삭제

다같이 Figma 페이지 나눠서

와이어 프레임 디자인하기

이거 페이지 나눠서 각자!

대신 나중에 모바일도 고려하면서 하는데 웹 위주로
로그인/회원가입/가이드 페이지 - 수경
메인페이지(헤더/배너/책장 포함) - 태욱 태욱극장 자존심이 있지
모달 안 디자인(책/문구/댓글) + 사용자 검색 모달 - 상윤
사용자 페이지(인증된 사용자 일때 위주로) +a 가입자 화면 - 다은

Figma 작업

메인페이지 : 태욱
모달

사용자 리스트 : 상윤
게시물 : 상윤

사용자 페이지: 다은

내일 15시까지 작업하는 것으로 하겠습니다.

수경 : 3시까지 기획서 + 컴포넌트 구조 잡아서 develop에 올리기

내일 3시 스크럼 : 컴포넌트/ui/api 문서

7시 커피챗

Main color, 컨셉

차차 정하기로 어울리는 색

💡

다음 회의 안건

API 수정 요청할 부분 정리와 API 문서 우선순위 정하기

내일 스크럼

할 일 나누기

페이지 별 컴포넌트 나누고 어떻게 진행할건지

feature 별 나누기

API 명세서 정리

우선순위 정하기

Github README 꾸미기

질문 & 안건

커피챗 시간 정하기

할 일 나누기

페이지 별 컴포넌트 나누고 어떻게 진행할건지

feature 별 나누기

API 명세서 정리

우선순위 정하기

❓

질문 & 건의사항

프로젝트 기획회의 7회