[지은1팀] 와플카드

📝 기획

The idea (제안하고자 하는 것을 한 문장으로 표현)

• 해쉬태그와 카드를 활용하여 관심사로 주변사람들과 익명으로 대화하는 서비스

Background (이 제안을 하게된 배경, condition/fact)

• 익명성 : 익명으로 소통을 나누고 싶은 욕구가 있다.

• 흥미성 : 재밌게 소통하고 싶다.

• 캐주얼함 : 부담없이 친해질 수 있는 장치가 필요하다.

• 유사성 : 나의 관심사로 얘기를 나누고 싶다.

• 접근성 : 남녀노소 사용하기 쉬운 UX/UI로 누구나 대화를 온라인에서 나눌 수 있는 기회가 필요하다.

How it works (디테일들- 누구를 대상으로 어디서 뭘 어떻게 하는가)

• 타깃 고객 및 사이즈 : KDT 프론트엔드반 프롱이들 / 약 60명(전체 수용인원)
• 소속이 있는 20대 중후반. 정예 멤버들도 사용 가능.

• 어디서 : 사용자들의 로컬 PC로 "와플카드" 웹 사이트 접속

• 무엇을 만들고 싶은가

1. 대화 카드를 만들고 싶은 유저는 카드 섹션을 만들어 대화방을 오픈한다.

2. 자신이 대화하고 싶은 키워드를 해시태그로 적어 카드를 생성한다

3. 유저 당 만들 수 있는 카드는 1개, 해시태그를 변경한다.

4. 웹 사이트에 접속하면 유저들이 만든 카드가 띄워지고, 채팅방에 참여하고 싶은 유저들은 '자신이 원하는, 흥미로운 주제가 있는, 호기심이 생기는' 카드를 클릭해 대화에 참여한다.

5. 채팅방은 비동기적인 댓글 방식으로 구현

Key benefits (기대효과 – why)

Next steps (이를 위해 누가 언제까지 뭘 해야 하는지 액션)

• React 프레임워크로 개발

• emotion + lint로 스타일 통일

• netlify로 배포

• storybook으로 UI 테스트

📄 서비스 흐름도

🎨 UX/UI 시안

Home

cardDetail - 나의 카드 or 오늘의 카드

😈 제한사항(정책)

• 카드 만들기 : 1인 1개 - 하나의 카드가 제대로 활성화(수정 가능하도록 구현)

• 다른 카드를 만들고 싶으면 freeze.

• 카드 내부의 해쉬태그 갯수: 최소 1개, 최대 5개 (갯수 조정 고려 1~3개)

• 1개의 카드에 여러 사람이 조회 가능 (1 대 다)

• 초기에 우리가 재미있는 방 몇개를 만들어 놓으면 좋을것 같음
• #자랑방 #너 뭐 잘났어? #부럽네
• #지우개방 #쏟아내고가.. #ㄴr는 ㄱr끔 눈물을 흘린ㄷr #휴지통
• #질문방 #지목해서 물어봐 #이사람외계인?
• #드립방 #아재개그 #썰

💻 기능명세

• header
• 로고(홈으로)
• [후순위] 알람
• 유저버튼
• 로그인 안되어 있을 경우 : 로그인 페이지
• 로그인 되어 있을 경우 : 마이 페이지

• body
• 버튼(전체 렌더링이 아닌 카드목록만 렌더링)
• 나의 카드
• 오늘의 카드
• 즐겨찾기
• 카드
• 롤링 효과(좌우버튼과 스크롤)
• 애니메이션 ⇒ 공부
• 즐겨찾기 토글
• 카드 선택 시
• 모달창
• 카드 태그를 flex로 배치
• 카드 디테일(콘텐츠)
• 해시태그(1 ~ 5개)
• 아이콘
• 닉네임
• 메뉴 : 뒤로가기, 즐겨찾기, 엔터버튼
• 메세지창 고민
• 카드 삭제 (방장만)
• 댓글 쓰기
• 댓글 삭제, 편집, 좋아요(CRUD)
• 카드 자체에 대한 좋아요
• 카드 주인은 따로 표시할 수 있도록(왕관)

• 카드 생성 및 수정
• 해시태그
• 카드 색상
• 아이콘
• 생성 및 수정 버튼

• 마이페이지
• 아이디, 닉네임
• 내 정보 수정
• 비밀번호 변경
• 로그아웃

• 로그인
• 아이디, 비번
• 아이디 중복 확인
• 회원가입 버튼 → 회원가입 페이지

• 회원가입
• 아이디, 닉네임, 비번, 비번확인
• 회원가입 버튼

🛠 기술스택

yarn install
입력하면 모든 패키지 설치 가능합니다

요약

• yarn, cra

• emoiton

• craco

• eslint & prettier

• storybook

• 추가예정
• react-router-dom

// package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^6.3.0",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/node-logger": "^6.3.12",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.12",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "^2.4.1"
  },
  "resolutions": {
    "babel-loader": "8.1.0"
  }
}

기본

• webpack, babel 등 기본설정으로 유지

yarn crate react-app 프로젝트명

패키지

emotion

css in js, jsx를 위한 패키지

yarn add @emotion/react
yarn add @emotion/styled
yarn add --dev @emotion/babel-plugin
yarn add -D @emotion/babel-preset-css-prop # 아래 craco 설정과 연동 

craco

create-react-app-config-override : cra의 기본환경 설정에 추가로 환경설정을 오버라이딩 하기 위한 패키지

yarn add -D @craco/craco

// craco.config.js

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
};

// package.json에서 아래와 같이 수정

...
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  ...
},
...

eslint & prettier

코드 검사 및 포매팅

# eslint, prettier 패키지 설치
yarn add -D eslint prettier

# airbnb 설정으로 할 시 설치, 우리는 패스!
npx install-peerdeps --dev eslint-config-airbnb

# react의 기본 eslint 패키지 설치, (* 위 airbnb 패키지에 포함되어 있으니 패스!)
# yarn add -D eslint-config-react-app

# prettier eslint 플러그인 및 설정 패키지 설치
yarn add -D eslint-config-prettier eslint-plugin-prettier

eslint 설정

// .eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
		// 추가 예정
  }
}

1. eslint-plugin-prettier 를 활성화

2. prettier/prettier rule을 error로 설정

3. eslint-config-prettier 를 적용

prettier 설정

// .prettierrc.js

module.exports = {
  // 코드 한줄이 maximum 80칸
  printWidth: 80,
  // 문자열은 홀따옴표(')로 formatting
  singleQuote: true,
  //코드 마지막에 세미콜론이 있게 formatting
  semi: true,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  useTabs: false,
  // 들여쓰기 너비는 2칸
  tabWidth: 2,
  // 객체나 배열을 작성 할 때, 원소 혹은 key-value의 맨 뒤에 있는 것에도 쉼표를 붙임
  trailingComma: 'all',
  // 대괄호 {} 사이 공백
  bracketSpacing: true,
  // JSX 요소 > 줄바꿈
  jsxBracketSameLine: true,
  // EOL 자동추가
  endOfLine: 'auto',
};

vscode 설정

1. vscode에서 eslint, prettier 확장 설치

2. vscode의 사용자 설정에서 아래와 같이 옵션 추가하기

// settings.json

{
	...
	"editor.defaultFormatter": "esbenp.prettier-vscode", // 에디터의 기본 포매터를 prettier로 설정
	"[javascript]": {
    "editor.formatOnSave": true // js파일 저장시 포매팅
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true // jsx파일 저장시 포매팅
  },
	...
}

// 궁금증
// 아래 설정은 추가하지 않아도 됩니다!

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // ## ES Lint 저장 시 자동 fix 설정
},
"eslint.autoFixOnSave": true, // ## document formatting 자동 fix 설정

// 이 설정들은 뭘까? => 은찬 : 저장할 때 고쳐주는 필요한 코드인 것 같아요!

Storybook

UI 컴포넌트와 페이지 빌딩 툴

npx -p @storybook/cli sb init

React + Storybook 의 종속성 문제

해결

// package.json

...
"resolutions": {
 "babel-loader": 8.1.0 // react-scripts에서 요구하는 버전
}
...