diff --git a/README.md b/README.md index cceca73..6d64c19 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,137 @@ # KUSITMS Meetup Team A - 제대로 ( web ) +[대학 제휴 사업을 활용해 대학 상권 활성화를 추구하는 서비스, 제대로] +서비스 ‘제대로’는 학생회, 대학 상권 소상공인 그리고 대학생 간의 유기적인 연결을 통해 많은 대학에서 관례적으로만 진행되고 있는 제휴 사업을 활성화하여 대학 상권의 선순환을 촉진하는 서비스이다. +본 서비스는 웹(Web)과 앱(App), 두 개의 플랫폼이 유기적으로 연결되어 있는 구조가 특징이다. 웹 서비스는 학생회를 타겟 유저로 삼아, 가게와 제휴를 맺은 이후 획득한 데이터를 쉽게 관리할 수 있는 기능을 중심적으로 제공하고 있다. 모바일 앱 서비스의 유저로는 대학생을 타겟으로 삼았으며, 언제 어디서든 소속을 인증하고 혜택 내역을 데이터로 받아볼 수 있는 기능을 중심적으로 제공한다. 이번 프로젝트는 학생회를 대상으로 한 웹(Web) 구축 기반 서비스에 초점을 두어 설명하고자 한다. +### 핵심 기능 +1) 적절한 제휴 파트너를 찾을 수 있도록 지원하는 가게찾기 기능 및 차후 운영을 위한 가게등록 기능 +2) 학생회와 가게 간 운영 및 사업 현황을 직관적으로 확인하고 상세한 모니터링을 통해 더 나은 협력으로 이어주는 대시보드. +3) 대시보드를 기반으로 매출 상승률 상위 가게를 대상으로 수수료를 청구하는 정산관리 기능 +4) 마지막으로 제휴사업의 효과적인 홍보 및 혜택 제공을 위한 팝업/쿠폰 관리 기능으로 구성된다. -## Authors +### 배포 링크 +https://jedero.site/ +💻 Technology --[@EthanLim](https://github.com/Ethan-KerryFather) --[@SujinKim1127](https://github.com/SujinKim1127) +WEB - -| FrontEnd | FrontEnd | -| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | -| 임수원 | 김수진 | -| [임수원](https://github.com/Rimoosoo) | [김수진](https://github.com/SujinKim1127) | +Next.js + +Typescript + +React Emotion + +Recoil + +MUI + + + +Server + +Server Application + +Spring Boot + +Spring Security + +Spring Data JPA + +MySQL + +Github Action + +Docker + +Docker Compose + +Co-working-tool + +개발진행상황 동기화 + +Trello + +의사소통 / 회의 + +Slack, Discord + +형상관리 + +Github -## Tech Stack -Next.js, Typescript, react-emotion, recoil, mui +🐾 기술 스택 선정 이유 +📘 Web 스택 선정 이유 -## Installation +next.js 선정이유 먼저 검색최적화가 손쉽습니다. html 틀을 받아서 먼저 렌더링 시킨 후 후에 안에 들어갈 내용이나 js코드를 주입하는 리액트와 달리 next.js는 서버에서 애초에 내용을 포함하여 빌드된 코드를 받습니다. 때문에 검색포털에서 봇이 검색엔진을 인덱싱할때 우리 사이트의 내용이 포함되어 검색 결과가 더 잘 노출됩니다. ( 하지만 구글의 검색 엔진은 리액트에도 최적화되어있다고 알려져 있습니다 ) -Install Frontend with npm +선택할 수 있는 렌더링 방식이 다양합니다. 클라이언트 사이드 렌더링, 서버사이드 렌더링, 정적 사이트 생성 등 페이지에 필요한 렌더링 방식을 선택하여 개발할 수 있습니다. 예시로 어떤 카테고리를 선택한 이후부터 새로고침 깜빡이 현상이 없는 것을 원한다면 그곳부터는 CSR로 개발이 가능합니다. -```bash - npm install -``` - -## Run Locally +더하여, 리액트의 모든 문법이 호환됩니다. 생명주기, 훅 등 모든 요소가 호환되어, 기존의 리액트에서 넘어오기 어렵지 않습니다. -Clone the project +api를 직접짤 수 있다는 장점이 있습니다. 이것을 직접 쓸지는 모르겠지만, 리액트에서 타 라이브러리를 불러와서 사용해야했던 것에 비하면 장점이라 칠 만합니다. 마지막으로 페이지 기반 라우팅또한 큰 장점 중 하나입니다. 기존에 라우터를 따로 작성해야했던 것과 달리 구조에 맞춰 파일을 생성하면 자동으로 라우팅된다는 장점이 있어 개발소요를 줄일 수 있고, 직관적인 라우팅이 가능합니다. -```bash - git clone https://github.com/KUSITMS-Team-A/Frontend-web.git -``` -Go to the project directory +📗 Server 스택 선정 이유 -```bash - cd Frontend-web -``` +Spring Boot -Install dependencies +설정이 간편합니다. 기본 설정을 제공하여 개발자가 복잡한 설정 작업 없이 필요한 부분만 설정하여 애플리케이션을 개발할 수 있습니다. 자동 구성 기능을 통해 프로젝트의 종속성을 기반으로 설정을 자동으로 조정합니다. 스프링 부트에서 지원하는 라이브러리와의 버전이 설정되어있어 라이브러리 버전을 맞추기 위한 시간을 사용하지 않아도 됩니다. -```bash - npm install -``` +내장형 데이터베이스를 지원합니다. H2, HSQLDB를 사용하여 개발 및 테스트 단계에서 데이터베이스를 사용할 수 있습니다. 데이터베이스를 확인할 수 있는 콘솔을 제공합니다. 또한 메모리 형식으로 데이터베이스를 사용하여 빠르게 테스트를 진행해볼 수 있습니다. -Start the server ( for dev ) +풍부한 커뮤니티가 구축되어 있습니다. 구글 트렌드 검색 결과 Spring Boot, Node js, Django 세 프레임워크 명에 대한 검색 결과가 51퍼센트를 차지할 만큼 한국내 인기있는 프레임워크이며 그에 따른 다양한 지식들을 쉽게 접할 수 있습니다. 또한 많은 문서 및 튜토리얼이 제공되어 학습에 용이합니다. -```bash - npm run dev -``` +서비스를 분리하고 확장하기 용이합니다. 서비스의 사이즈가 작아 현재는 모놀리식으로 구성하지만 이후 트래픽의 증가와 서비스 추가로 인한 프로그램의 복잡도가 높아졌을 때 마이크로서비스로의 전환을 고려할 수 있으며, 스프링 클라우드(Spring Cloud)와 통합하여 분산 시스템을 구축할 수 있습니다. +Spring Security + +Spring Boot과 손쉽게 통합할 수 있습니다. + +인증, 권한 부여, 세션 관리, CSRF(크로스 사이트 요청 위조) 및 보안 헤더 관리와 같은 다양한 보안 기능을 제공합니다. + +다양한 인증 및 인가 방식을 지원합니다. 폼 기반 인증, HTTP 기본 인증, OAuth, JWT(토큰 기반 인증) 등을 사용할 수 있습니다. + +다양한 사용자 정의 가능한 확장 포인트를 제공하므로 프로젝트의 고유한 보안 요구 사항을 충족시킬 수 있습니다. 다양한 인터페이스를 구현하여 사용하여 목적에 맞게 변경하여 사용할 수 있으며 다양한 필터에 필요한 작업들을 추가하여 인증, 인가에 필요한 작업을 수행할 수 있습니다. + +Spring Data JPA + +복잡한 JDBC 코드를 작성하지 않고도 데이터베이스에 쉽게 접근할 수 있도록 도와줍니다. 개발자는 JPA 엔티티 클래스를 정의하고 간단한 인터페이스를 작성하여 코드 추가 없이 CRUD(Create, Read, Update, Delete) 작업을 수행할 수 있습니다. 메소드 이름을 기반으로 쿼리를 자동으로 생성하는 기능을 제공합니다. 이를 통해 생산성을 향상할 수 있습니다. + +JPA를 사용하면 데이터베이스 테이블과 Java 객체 간의 매핑을 쉽게 수행할 수 있습니다. 이를 통해 객체지향적인 코드를 작성하면서 데이터베이스와의 일관성을 유지할 수 있습니다. + +다양한 데이터 소스 (예: MySQL, PostgreSQL, Oracle, MongoDB)와 함께 사용할 수 있으며, 데이터베이스 변경 시에도 코드를 수정하지 않고 데이터 소스를 교체할 수 있습니다. + +페이징 및 정렬을 처리하기 위한 내장 메소드와 애노테이션을 제공합니다. 이를 사용하여 대용량 데이터셋을 효과적으로 관리할 수 있습니다. + +MySQL + +MySQL은 오픈 소스 라이선스를 사용하며, 무료로 사용할 수 있습니다. + +국내 MySQL, PostgreSQL, MariaDB 세 관계형데이터베이스에 대한 검색 중 65%가 MySQL일 정도로 국내의 많은 사용자를 보유하고 있습니다. 따라서 MySQL에 대한 풍부한 해석된 문서와 활발한 개발자 커뮤니티가 존재하며, 문제 해결과 지원을 얻기 쉽습니다. + + +main : develop 에서 테스트를 마친 후 운영 서버에 배포되는 브랜치 +develop : 기능 구현 후 개발 서버에 배포되는 브랜치 +feature : 각각의 기능을 개발 및 수정하는 브랜치 +hotfix : 오류 등 main에 병합된 이후 수정이 필요한 경우 사용하는 브랜치 + + + +## Authors + + + +-[@EthanLim](https://github.com/Ethan-KerryFather) +-[@SujinKim1127](https://github.com/SujinKim1127) + + +| FrontEnd | FrontEnd | +| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | +| 임수원 | 김수진 | +| [임수원](https://github.com/Rimoosoo) | [김수진](https://github.com/SujinKim1127) | diff --git a/pages/student/coupon/index.tsx b/pages/student/coupon/index.tsx index d847cc8..5dc56ac 100644 --- a/pages/student/coupon/index.tsx +++ b/pages/student/coupon/index.tsx @@ -1,5 +1,7 @@ import { useRouter } from "next/router"; + import React, { useState } from "react"; + import * as styles from "@/components/styles/popup/style"; import { css } from "@emotion/css"; import { useCouponData } from "@/components/hooks/useCouponData"; @@ -73,6 +75,7 @@ const CouponAdminPage: React.FC = () => { ); }) + ) : (