코딩블로그

이 댓글 추첨 페이지는 관리자 페이지 말고 실제 티켓 예매 사이트에 있는 응원톡 부분과 관련이 있다. //src/components/CommentRandomPage/CommentRandomPage.js import React, { useEffect } from 'react'; import { randomCom } from '../../state/actions-creators/randomCom'; import { Table } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; const { Column } = Table; function CommentRandomPage() { const { randm } = useSelector(st..

이 부분은 쉽게 만들 수 있었다. 이미 3월에 만들어 놓은 css부분이 있어서 css는 그대로 적용 하였다. import React, { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Box } from './Box'; import { Table } from 'antd'; import { LandingPage } from '../../state/actions-creators/LandingPage'; function Landing_Page() { const dispatch = useDispatch(); const { data } = useSelector(state => st..

시작하기 전에 대략 티켓 페이지의 기능을 설명해보자면: 공연 날짜별로(YB,OB)별로 구분할 수 있도록 ant-design에서 segmented를 이용하였다. 티켓 페이지네이션도 ant-design에서 table 부분에서 가져왔다. 단체 협업이다 보니 swagger을 이용하여 api키값을 가져와서 정보를 불러왔다. Action 부분에서는 상태를 변경할때마다 값들의 상태, 즉 티켓 상태를 변경할 수 있도록 만들어주었다. 1.티켓 페이지에서 페이지네이션 구현하기 페이지네이션을 구현하기 전에, 가장 중요한, data값을 불러오는 부분부터 설명을 해보겠어요. 여기서 actions-creators에서 ticketPagi와 ticketPagination, changeState를 import해 온것을 볼 수 있다. ..

7월, 컴퓨터 공학 밴드 동아리 답게 9월 공연을 위해,선배들이 티켓 페이지를 계획 하셨다. 말하는 감자인 나는 운 좋게 관리자 페이지 개발하는 부분에 참여하게 되었다. 피그마를 보면서 역할 분담회의를 했었는데 솔직히 말하면 지식이 그렇게 많은 편이 아니였어서 뭐가 만들기 어렵고 쉬운지 감이 안잡혔다. 그러다가 총괄 선배가 그냥 짜줬었는데 지금 생각해보면 진짜 잘 분담 잘 해 준것 같다. 아무튼, 나는 티켓페이지, 랜딩 페이지, 댓글 추첨 페이지 부분을 참여 하였다. 자바스크립트와 리액트를 사용하여 코드를 짜보았다. 티켓 페이지 랜딩 페이지 댓글 추첨 페이지