기존

가상 서버와 연결

변경

실제 서버와 연결
로그인을 제외한 부분 (+ 인가 필요한 리뷰 작성)

as-is

이모지 및 텍스트 기호 사용

to-be

fontawesome으로 변경

as-is

없음

to-be

가게 이름 , 별점, 거리 등이 들어간 가게 title 컴포넌트 구현

as-is

• 버튼
  position absolute, background 색 기본으로 되어 있는 상태

to-be

• 버튼 position, style 수정

as-is

없음

to-be

리스트 아이템 컴포넌트 구현

기존

제목은 임시, 내용도 고정된 가게 목록이 보이고 있음

변경

카테고리 버튼의 이름과 동일한 제목
내용은 카테고리에 맞는 가게 목록 나열

as-is

Header에서 sessionStorage에 로그인 여부를 확인해서 유저 프로필, 로그아웃 표시

to-be

userProfile 클릭시 , 화면 이동
해당 화면에 로그아웃 링크와 캠퍼스 선택하는 페이지로 이동하는 링크 표시되어 있음

기존

import 순서 무작위

변경

import 순서 정리

as-is

SectionHeader, Category, StoreList 컴포넌트 구현됨

to-be

Figma 디자인에 맞춰서 Category Page 컴포넌트 구현

as-is

헤더에 로고가 그려져 있는 상태

to-be

헤더 로고에 홈 페이지로 가는 링크 등록

as-is

Store Detail Page내에서 + 버튼이 구현되어 있음

to-be

블링이 만든 리뷰 추가 컴포넌트와 + 버튼 연결하기

as-is

없음

to-be

섹션별 헤더 컴포넌트 구현

as-is

가게 리스트 아이템 컴포넌트만 있음

to-be

가게 목록 컴포넌트 구현

as-is

설정 사항 없음

to-be

themeprovider 설정 및 기본 테마 색상 설정

기존

컴포넌트 마다 별점 등의 컴포넌트를 반복할 때 array를 만든 뒤 map하는 로직이 반복됨

변경

컴포넌트 혹은 유틸함수로 분리해서 추상화

as-is

가게 상세 정보 페이지에서
가게 기본 이미지가 없는 상태

to-be

가게 상세 정보 페이지에서 default 이미지 태태 storybook img url 로 교체하기

as-is

페이지 컴포넌트마다 width: 375px을 주고 있음

to-be

댓글로 논의

as-is

페이지마다 중복되는 별 모양이 많음

to-be

별 컴포넌트를 분리해서 각 페이지에 적용

as-is

모든 컴포넌트가 components 폴더 아래에 있음

to-be

회의 후 결정
이슈 아래 댓글로 남겨주세요

as-is

가게 상세 페이지 중, 가게 타이틀, 리뷰 Item들 구현

to-be

가게 상세 페이지에서 가게 타이틀, 리뷰 Item들 합치기

글 추가 아이콘 만들기

as-is

없음

to-be

Figma로 카테고리 아이콘 디자인
svg

기존

mock data만 있음
api 명세와 맞지 않음

변경

api 명세에 맞춰 mock server 구현

기존

상단바 구성에 로고 + 검색 버튼 + 프로필/로그인 버튼으로 되어있음
요소를 추가적으로 배치할 공간 부족

변경

로고 + 검색 + 햄버거 메뉴로 변경 및 햄버거 메뉴 클릭 시 측면 메뉴 서랍 오픈 구현
메뉴 서랍으로 로그인 및 로그아웃 이동
메뉴 서랍에 캠퍼스 변경 버튼 추가

as-is

없음

to-be

상단 Navbar UI 컴포넌트 구현

as is

별점 컴포넌트가 MUI에 있음

to be

이 라이브러리를 활용할 지 모르니 일단 직접 구현

as-is

css style에 px, em, rem이 섞여 있음

to-be

댓글로 논의

as-is

실제 프로덕션 코드 부재

to-be

라우터 구현 및 실제 페이지 옮기기

• 전체 너비 통일 적용

as-is

가게 상세 페이지 중, 가게 타이틀 부분 구현

to-be

각각의 리뷰들을 표현할 Item 구현 필요

기존

로그인 링크 연결 안됨

변경

로그인 링크 연결

as-is

없음

to-be

chip 컴포넌트 구현

as-is

카테고리 아이템 컴포넌트만 구현되어 있음

to-be

그리드 카테고리 컴포넌트 만들기

as-is

카테고리 상세 페이지 제목이 '양식'으로 고정되어 있음

to-be

prop으로 상세 페이지 제목을 받아와서 재사용성 높이기

기존

CRA 기본에서 변경 안 됨

변경

서비스에 맞춰 변경

as-is

헤더 부분에 userProfile이 기본으로 보여지고 있음

to-be

sessionStorage에 accessToken이 있으면, userProfile
없으면, 로그인 링크가 보이도록 수정

as-is

• 컴포넌트 미구현

to-be

바텀시트 컴포넌트

• 버튼 클릭 시 하단에서 표시되는 바텀 시트 컴포넌트 구현
• 바텀시트 외 영역 클릭 시 바텀 시트 닫기

리뷰 입력 폼

• 식당 명은 프롭으로 전달
• 메뉴 입력란, 총평 입력란, 별점 추가 컴포넌트
• 확인 제출 버튼

as-is

Store Detail Page 구현

to-be

width 값과 위치등 조정 필요함

기존

각자의 컴포넌트에 각자 로직과 스타일 적용

변경

공통 로직과 스타일을 분리

기존

상수 파일 부재

변경

상수화 할 수 있는 요소 있는 지 확인 후 분리
없으면 그대로 진행
(router path?)

as-is

mock data 구현되어 있는 상태

to-be

react-query로 비동기 통신 관리하기

as-is

페이징 기능 미구현

to-be

무한 스크롤 기능을 추가, 카테고리 디테일 페이지에 가게 로드 시 적용

as-is

없음

to-be

카테고리 컴포넌트 구현

실시간 반영 리팩토링

as-is

페이지 미구현

to-be

• 캠퍼스 선택 버튼 컴포넌트 구현 (카테고리 버튼 재활용?)
• 페이지 컴포넌트 구현

기존

• 별점 네이밍 혼재 (starCount, starRating, rating)

변경

• 네이밍 통일
• +ɑ

as-is

SectionHeader, Chip, StoreList 컴포넌트만 구현됨

to-be

Category Detail Page 컴포넌트 구현

기존

모든 컴포넌트가 component/ 하위에 있음

변경

페이지 구분에 따라서 구분 적용

기존

컴포넌트 파일에 스타일드 컴포넌트 정의 통합

변경

컴포넌트와 동일 레벨에 별도의 파일로 분리

기존

상대 경로로 구성

변경

절대 경로 적용

기존

스토리북 기본 세팅에 router가 없어서 오류가 발생

변경

오류 수정, preview에 라우터 추가

as-is

기본 이미지 없음

to-be

기본 이미지 asset에 추가