Coder Social home page Coder Social logo

teamsindy20 / capstone-frontend Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 1.0 5.16 MB

중앙대학교 2021년 1학기 캡스톤 프로젝트 프론트엔드 (Next.js)

Home Page: https://dessert.fit

License: GNU General Public License v3.0

Shell 0.10% JavaScript 0.74% TypeScript 98.65% CSS 0.51%
graphql nextjs reactjs typescript

capstone-frontend's People

Contributors

dependabot[bot] avatar gwak2837 avatar hy57in avatar teamsindy20 avatar

Stargazers

 avatar

Forkers

hy57in

capstone-frontend's Issues

매장 소식 스크롤 안 됨

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

FeedUI

FeedUI 개선

  • 상단바 pagelayout 설정
  • 라인업/공지 등 태그별로 피드에 뜨는 게시글 종류 다르게 나오게 하기 (component 변화)
  • 피드 게시글 UI 수정
  • 찜/댓글/댓글좋아요

pages 만들기

페이지 만들기

  • 홈화면 가운데 취향선택 클릭하면 취향선택하는 페이지로 이동
  • 홈화면 오른쪽 위 알림버튼 클릭하면 알림 페이지로 이동
  • 알림 페이지에 띄울 알림card 만들기
  • 홈화면 오른쪽 위 검색버튼 클릭하면 검색 페이지로 이동
  • 장바구니 페이지 만들기
  • 로그인하면 홈화면으로 정상적으로 넘어가게

url의 매장 메뉴 id 없애기

/stores/store-name-1/menu-name-2 -> /stores/store-name-1/menu-name

한 매장에서 동일한 이름의 메뉴는 없을 것이기 때문에

장바구니 추가 기능

장바구니 추가 기능

- 메뉴카드에서 "장바구니에 바로 추가하기" 버튼 만들기

  • 그 버튼을 클릭하면 장바구니에 메뉴카드가 추가됨
  • 홈 화면에 있는 장바구니 버튼을 클릭하면 장바구니 페이지로 이동됨
  • 장바구니 페이지에는 장바구니에 담은 메뉴카드 목록이 나열됨

Home 화면

  1. 버튼 만들기
  • 카테고리별 선택
  • 테마별 선택
  1. 상단 광고 공간 만들기
  2. 맞춤추천/ 주문량/ 좋아요율/ 단골 수 정렬 필터링 기능
  3. 메뉴카드 다듬기

로그인

구현된 로그인 입력 페이지를 백엔드랑 연결

매장 홈 UI

매장 홈 UI 만들기

  1. 매장 홈 정보들
  2. 단골 클릭시 단골혜택 모달
  3. 정보 클릭시 정보 모달
  4. 소식/메뉴/리뷰 탭

image

CORS 도메인 설정

Describe the bug

CORS 오류로 인해 데이터 불러오기 실패

To Reproduce

메뉴 목록, 매장소식 목록

Expected behavior

데이터를 정상적으로 불러와야 함

Screenshots

image

Desktop (please complete the following information):

전 기종

리뷰 card

ReviewCard 만들기

  1. 사진만 모아본 것이 default
  2. 사진 클릭시 게시글 형태

image

image

회원가입

회원가입 페이지 구현 및 백엔드랑 연결

이메일 로그인 오류

Describe the bug
이메일 로그인이 제대로 되지 않는다

To Reproduce
로그인 페이지로 가서 이메일로 로그인하면 로그인이 되지 않음

Expected behavior
로그인이 되어야 함

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop, Smartphone:
전 기종

찜/단골 화면 UI 개선

찜/단골 화면

  • 컴포넌트 나눠서 찜 tab 클릭시 찜한 매장 보여주고 단골 tab 클릭시 단골 매장 보여주는 기능
  • 찜한 매장은 매뉴카드와 비슷한 형태의 매장카드
  • 단골 매장은 찜한 매장카드와 비슷하지만 사장님과 연결, 단골혜택 보는 버튼 추가

로그인 UI

개선된 UI를 바탕으로 로그인 UI 구현

  • 이메일 입력칸
  • 비밀번호 입력칸
  • 로그인 유지 체크박스
  • 로그인 버튼
  • 회원가입, 아이디찾기, 비밀번호 찾기 링크
  • 카카오톡 로그인 버튼
  • 구글 로그인 버튼
  • 네이버 로그인 버튼

소식탭 UI

소식탭 UI

  1. 매장 소식
  • 리뷰카드 수정
  • 찜한매장 먼저, 전체매장 나중에
  • 리뷰카드 누르면 상세보기 페이지로 넘어가기
  • 상세리뷰페이지에서 수정/삭제 모달

image
image
image

  1. 리뷰소식
  • 리뷰카드 나오게 하기
  • 찜한매장 리뷰 먼저, 전체매장 리뷰 나중에
    image

주문내역 UI

주문내역 UI

  • 주문내역Card 수정
  • 주문내역Card 누르면 주문상세 페이지로 넘어가기
    image

주문상세 페이지

image

주문페이지 UI

주문페이지 UI

  • 장바구니에 메뉴를 담은 후 주문하기 버튼을 누르면 이동하는 주문 페이지
  • 메뉴옵션페이지에서 장바구니 담기 버튼을 누르면 toast로 "장바구니로 바로 이동하시겠습니까?" 문구 띄우기

image

Preference page Modal 함수화

Preference page Modal

더보기(...) 버튼을 누르면 모달이 뜨는데 카테고리 별로 동일한 모달이 뜸.
모달을 함수화 해서 모달 이름을 달리 해서 카테고리 별 다른 모달이 뜰 수 있도록 해야함.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.