GithubHelp home page GithubHelp logo

swppfall2022-team14's Introduction

Build Status Quality Gate Status

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Instruction

at \frontend

  • yarn
  • yarn start

at \backend

  • pip install -r requirement.txt
  • python manage.py runserver

swppfall2022-team14's People

Contributors

alongwithkiman avatar becatrue avatar nemga123 avatar ongdyub avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

swppfall2022-team14's Issues

[FEATURE] Item(in List) View

구현하고자 하는 기능
구현하고자 하는 기능은 무엇입니까?
List 안에 들어갈 개별 Item의 View

위의 기능의 구현 방식
ex) A에 B메소드 추가, 모델 추가 등...
Cocktail List를 map 해줄 Component 구현, 클릭 시에 Item Page로 Redirect

기타

[FEATURE] Features Demonstration - 3. ItemPage

구현하고자 하는 기능
Cocktail info
Represent ingredients I already have
Redirect to Ingredient ItemPage when click ingredient image.
Bookmark
Comment
위의 기능의 구현 방식
ex) A에 B메소드 추가, 모델 추가 등...

기타

[FEATURE] Connect rate in detail page to backend

구현하고자 하는 기능
디테일 페이지의 rate button과 백엔드를 연결하여 실제로 작동되도록 함.

위의 기능의 구현 방식
rate slice를 추가
rate button 디자인 변경
average rate 구현

기타

[FEATURE] Features Demonstration - 2. ListPage

구현하고자 하는 기능

Show cocktail list
Search again using the Navigation Bar
Redirect to ItemPage when click specific cocktail image.

위의 기능의 구현 방식

기타

[BUG] ESLint Error, cocktail store error

의도한 동작

  • eslint 에러 제거해야 함
  • cocktail store의 fetch api response 처리가 정상적으로 되지 않음.

실제 동작
실제 진행되는 동작

동작 재현 방식:

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

생각하는 원인과 수정 방법
수정 방식을 제대로 인지하지 못할지라도 간단히 "왜 이러한 버그가 발생하였고 어디의 문제일 것이다. 어떻게 수정해보면 좋겠다"로 작성

스크린샷
없을 시 항목 삭제 가능

[FEATURE] GET /api/v1/cocktails/{id}

구현하고자 하는 기능
칵테일 하나 가져오기

위의 기능의 구현 방식
어떤 값을 리턴해야하는지 serializer 쓰는 방식이나 마찬가지로 쿼리 파라미터를 이용할 것인지, 리스트를 가져오는 데이터랑은 뭐가 달라야하는지 논의 해야 할 것 같습니다.

[FEATURE] Routing

구현하고자 하는 기능
UI 구현 사항에 있는 모든 페이지의 url 구성후 라우팅

[FEATURE] POST /api/v1/cocktails

구현하고자 하는 기능
커스텀 칵테일 작성

위의 기능의 구현 방식
custom 칵테일을 작성할 때 어떤 정보가 필요한지 모델 serializor 구성 필요

[BUG] frontend package.json typo

실제 동작
package.json에 ,를 제대로 작성하지 않아서 yarn이 작동하지 않음

생각하는 원인과 수정 방법
제가 머지할때 conflict처리하면서 package.json을 건드렸는데 문제가 콤마를 빠트려 생긴듯합니다.

[FEATURE] Ingredient Store

구현하고자 하는 기능
Ingredient Store

위의 기능의 구현 방식
Ingredient reduct store 을 구현한후 ingredient와 연결까지

기타

[FEATURE] Comment store

구현하고자 하는 기능
Comment store

위의 기능의 구현 방식
Comment redux store slices 생성

[FEATURE] NavBar

구현하고자 하는 기능
Nav Bar

위의 기능의 구현 방식
새로운 Component 추가

기타

[FEATURE] Ingredient Item Detail Page

구현하고자 하는 기능

  • 재료 디테일 페이지 구현

위의 기능의 구현 방식

  • 재료 디테일 페이지 새 컴포넌트 작성

기타

  • ingredient store 쪽 typo 발견해서 수정할 예정

[FEATURE] User backend

구현하고자 하는 기능
User 백엔드 구현

위의 기능의 구현 방식
ex) A에 B메소드 추가, 모델 추가 등...

기타

[Design]Initpage Design

구현하고자 하는 기능

  • InitPage 디자인 수정

위의 기능의 구현 방식

기타

[FEATURE] MyPage

구현하고자 하는 기능

  • 마이페이지 뷰 구현

위의 기능의 구현 방식

기타

[FEATURE] rate in cocktail

구현하고자 하는 기능
현재 랜덤으로 리턴하는 칵테일 평점을 일단 유저가 없는 관계로 더미로 박아놓기

위의 기능의 구현 방식
default=0으로 새로운 float필드 구현

[FEATURE] Search Item by text

구현하고자 하는 기능
포함하는 텍스트로 Item 찾기

위의 기능의 구현 방식
Name Field에 대해서만 완전 포함 text 검색ㄱ

기타
추후 순위를 두어서 Name -> intro 에 포함되는 경우도 순서를 맞춰서 리턴

[FEATURE] PUT /api/v1/cocktails/{id}

구현하고자 하는 기능
커스텀 칵테일 게시글 수정

위의 기능의 구현 방식
마찬가지로 어떤 정보를 수정할 지 serializor 사용에 대한 논의가 필요. POST의 serializor 사용해도 될 듯.

[FEATURE] React와 Django init

구현하고자 하는 기능
개발을 위해 React와 Django를 시작

위의 기능의 구현 방식
/frontend
/backend
폴더로 서로 나눠 init

[FEATURE] Connect item detail view to backend

구현하고자 하는 기능
실제 백엔드에서 칵테일 detail을 가져오도록 구현

위의 기능의 구현 방식
store를 이용하여 GET cocktail by id 와 연결

[Design]mypage Design

구현하고자 하는 기능

  • 마이페이지 디자인 손보기

위의 기능의 구현 방식

  • css만 소폭 수정 예정

기타

[FEATURE] GET /api/v1/cocktails

구현하고자 하는 기능
칵테일 리스트 불러오기

위의 기능의 구현 방식
모델 추가, view 추가

기타
쿼리 파라미터나 body로 스탠다드 칵테일과 커스텀 칵테일 중 어떤거 가져올 건지 알 수 있는 방식이 필요할 것 같습니다. 아무래도 쿼리 파라미터가 나을 것 같습니다.

[FEATURE] Ingredient DB

구현하고자 하는 기능
Ingredient 기본 DB 구성

위의 기능의 구현 방식
초기 DB 직접 입력

기타

[FEATURE] GET /api/v1/ingredients, GET /api/v1/ingredients/{id}

구현하고자 하는 기능

  • 재료 리스트 및 하나 가져요기

위의 기능의 구현 방식

  • view 추가
  • cocktail model의 구현 방식을 참고하며 구현

기타

  • 마찬가지로 list / 한 개체 불러올 때 어떤 데이터를 주어야 할 지 논의가 필요할 것 같습니다. ( cc. #4 )
  • 재료 데이터는 칵테일에 비해 단순하여 list 불러올 때 'introduction'을 제외한 데이터 모두를 불러와도 될 것 같습니다.(name, image, abv, price)

[FEATURE] Practice 8 Apply

구현하고자 하는 기능
실습 8의 내용인 travis, sonar, lint 구현

위의 기능의 구현 방식

기타

[FEATURE]GetCocktailByIngredient

구현하고자 하는 기능

  • GetCocktailByIngredient 함수 구현
    위의 기능의 구현 방식
  • cocktail view에 추가
  • user-ingredient 모델이 아직 없어 중간발표 때 이런 기능을 구현할 예정이라고 간단히 시연하는 용도

기타

  • 현재는 모든 칵테일의 모든 cocktail-ingredient들을 불러온 뒤 request에 담겨진 ingredien list가 각 재료 리스트들을 포함하는지 확인하는 방식으로 구현할 예정
  • cost가 큰 작업일 것 같아서 추후 다른 방식을 고려해보아야 할 것 같다.

[BUG] Fix /frontend/src/InitPage

생각하는 원인과 수정 방법
import 하는 파일과 실제 파일 이름의 대소문자 차이로 오류 발생

스크린샷
image

[FEATURE] Initialize Ingredients Model and Serializer

구현하고자 하는 기능

  • Ingredients 모델 초기 설정

위의 기능의 구현 방식

기타

  • user과의 관계 등 당장 구현하기 어려운 부분은 주석처리 후 integer 할당 등으로 처리

[FEATURE] Edit custom view

구현하고자 하는 기능
생성한 커스텀 칵테일을 수정하는 뷰

위의 기능의 구현 방식
Create custom view와 유사하게 구현
store에 put cocktail 기능 구현

[FEATURE] Create custom view

구현하고자 하는 기능
커스텀 칵테일을 작성하는 뷰

위의 기능의 구현 방식
Item detail view 와 유사하게 구현

[FEATURE] Item detail view

구현하고자 하는 기능
칵테일 아이템을 클릭하면 들어가지는 화면의 칵테일에 대한 모든 것을 보여주는 뷰

위의 기능의 구현 방식
뷰 구성 및 가능하면 GET cocktail by id 와 연결

[FEATURE] cocktail type1, type2 filter

구현하고자 하는 기능

  • cocktail 모델에 type1, type2 필드 추가
  • 프론트엔드 필터 검색 연결
    위의 기능의 구현 방식
  • django choice 활용하여 필드 추가

기타

[FEATURE] Initial List View

구현하고자 하는 기능
메인 페이지의 칵테일 리스트 구성

위의 기능의 구현 방식
칵테일 리스트를 보여주는 뷰 구성하고 백엔드와 가능하면 연결까지

[BUG] InitPage List 시 cocktailLIst가 빈 배열인 경우

의도한 동작
틀은 남아있어야함

실제 동작
.map에서 오류가 나 렌더가 불가능

동작 재현 방식:

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

생각하는 원인과 수정 방법
수정 방식을 제대로 인지하지 못할지라도 간단히 "왜 이러한 버그가 발생하였고 어디의 문제일 것이다. 어떻게 수정해보면 좋겠다"로 작성

스크린샷
없을 시 항목 삭제 가능

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.