프로젝트 - 축구 팀 관리

팀 프로젝트에 참여하게 되었다나는 프론트 부분을 맡았고 프론트는 리액트를 이용해서 만들기로 하였다우선 로그인쪽을 먼저 만들어 보기로 하였고 카카오, 구글 로그인 API를 사용해서 만들 것이다열심히 해보자!

테스트를 할 수 있게 간단하게 서버를 만들고 페이지를 만들어보자그리고 카카오, 구글 API로 로그인을 할 것이기 때문에 어떻게 진행되는지 찾아보자우리는 리액트와 스프링으로 개발을 하기로 하였다https://data-jj.tistory.com/53이 블로그에 리

우선 앞에서 하다가 멈췄으니까 토큰을 이용해서 정보를 받아오자원래 이 부분은 백에서 하는 부분이지만 테스트를 위해 하는거라 블로그의 내용을 보고 그대로 따라했다public/index.html에 아래 코드를 Head 태그 안에 넣어주었다그리고 App.js를 블로그를 보고

팀 프로젝트 - 드래그 앤 드롭

지난번에 여기까지 했었고 이제 저기 안에서 여러가지 코드들을 수정해보면서 변화를 주었다우선 TutorialApp.js 에서 containerStyle안의 크기를 조절하여 대충 축구장과 비슷한 비율로 맞추었고 백그라운드 이미지를 넣어주었다그리고 실행해보았는데 이미지가 나

일단 저번에는 인가코드만 백으로 넘기는 것 까지 구현하였다근데 조금 방식이 변경되어서 액세스 코드를 넘기기로 하였다우선 RedirectURI 를 우리 사이트 회원가입 시에 필요한 추가정보 입력하는 곳으로 두었다그리고 추가정보 입력하는 곳에 들어와서 register 버튼

처음에는 바디에 토큰과 어떤 토큰인지를 알려주는 ID 값을 넣어서 포스트로 전송하였다그런데 백에서 API를 하나로 받지않고 소셜로그인 별로 분기해서 API를 만든다고 하여서따로 보내야 하고 토큰만 보내주면 된다고 GET 방식으로 쿼리 헤더데이터에 토큰을 넣어서보내달라고

이 프로젝트를 중간에 참여하다 보니 기획을 제대로 파악하지 못해서 발생한 문제같다원래는 로그인을 누르고 토큰을 백으로 전송한뒤에 백에서 토큰으로 사용자 정보를 받아오고, 받아온 정보를 가지고 기존 회원인지 신규 회원인지 리턴을 해준다그리고 신규 회원이면 추가정보를 입력

팀 프로젝트 - 로그인 방식 수정 2

로그인을 하면 세가지 결과가 리턴될 수 있다1\. 기존 회원인경우2\. 신규 회원인경우3\. 에러가 발생한 경우백에서 넘어오는 데이터를 기준으로 두고 분기하면 된다신규 회원인 경우 팀장인지 아닌지를 물어본 후팀장이라면 팀에 대한 정보, 가입하는 사람의 추가정보를 받으면

이미지 파일을 받기위해서 우선 input type="file" 으로 만들었는데 추가적으로 post시 담아주는 부분에서 정보가 필요해서 오늘도 구글링을 하였다 ( 구글 최고 )여기와 여기가 매우 잘 정리되어있어서 이 블로그를 참고했다accept='image/\*' 속성을

예전에는 어떤 추가정보를 받을지 몰라서 마케팅 수신동의, 개인정보 동의, 닉네임 이렇게만 작성해 놓았다지금은 어떤 추가정보를 받을지 정해져서 그걸로 변경하려고 한다닉네임, 활동 지역, 선호 포지션, 선출 유무이렇게 4가지를 추가 정보로 받기로 하였고, 선호 포지션을 제

예전에는 react-dnd 라는 것을 사용해서 구현을 하려고 했었다그러나 나의 실력이 부족했던 탓에 제대로 구현하는데 많은 어려움이 있었다react-dnd 에서 제공하는 체스 코드를 조금씩 뜯어고쳐서 해보려 했지만 도저히 말을 11마리로 늘리는 방법을 찾지 못하였고 거

팀 프로젝트 - 포메이션판 구현 거의 완료

전에는 각 원의 위치에 따라 포지션 명을 바꿔주도록 하였다이번에는 선수 리스트를 받아서 원을 우클릭하면 선수의 리스트를 띄워주도록 해보자이후 이름을 선택하면 이름이 원에 뜨고 리스트에서는 사라지게 구현하자우선 같이 프론트 개발을 하고있는 팀원은 TS로 개발을 하고있는데

지난번에 1번 원에서 고른 선수가 2번에서 뜨는걸로 문제가 생겼었고 거기서 멈췄다이유를 알아냈다나는 <MENU>태그와 <Draggable>태그가 한 쌍인줄 알았다그래서 2번째 원을 만들때도 메뉴,드래거블을 그대로 하나 더 복사했다근데 메뉴는 드래거블마다 한개

현재 포메이션쪽은 기능적으로 거의다 구현이 완료되었다마지막으로 끝내기 위해 백에서 받아온 데이터를 기반으로 화면이 만들어지는지를 테스트해봤다그러나 문제가 발생했다블로그에 작성했는지 모르겠지만 원래부터 이건 문제였었다map으로 메뉴리스트를 만들때 playerlist에 있

팀 프로젝트 - DB값으로 원 렌더링 완료

팀 프로젝트 - DB값으로 원 렌더링 완료

팀 프로젝트 - 3가지 추가 구현 사항

기존에는 포메이션판에 선수의 정보를 원 안에 저장하였는데 그 모양이 조금 변경되었다이런식으로 변경해야한다디자인쪽에서 받은 이미지가 없어서 대충 저런 느낌과 비슷하게 그림판에서 만들었다원래는 저 원을 나타내는 코드가 아래와 같았다원래는 이게 원을 찍어내고 있었는데 이제

지난번에 마우스를 올릴때 계속 hover가 겹쳐서 되는 오류가 있었다자세히 보니까 후손 태그들에 마우스를 댈 때마다 겹쳐지는 것을 보고 도대체 왜 이런 문제가 생기나 이해가 안됐다그래서 원래 만들어 놨던 move css를 다시 입혀봤는데 그건 또 제대로 작동을 하는것이

지난번엔 선수를 변경할 때 마다 window.confirm으로 물어보는것이었다그런데 이게 조금 바꼈다DB에 선수의 선호 포지션이 들어갈텐데 선호 포지션과 배치될 포지션이 다를 때 물어보는것이다이것만 바뀌면 간단한데 기획쪽에서 이걸 window.confirm말고 moda

지난번에 모달창을 react-modal로 구현한다고 했었다근데 react-modal은 모달창 구현은 간단하지만 대답을 듣고 그 대답에 맞는 로직을 구현하는데에는조금 어려움이 있다고 판단했다그래서 react confirm modal 이라고 검색했더니 react-confi

팀 관리 페이지에 들어가면 보이는게 3가지가 있다그중 한가지 포메이션을 만들었고, 이제 만들거는 선수리스트이다선수 리스트 구현사항은 다음과 같다전술판에 배치된 선수는 배치된 포지션과 이름이 뜬다전술판에 배치된 선수는 선수 리스트 상단에 먼저 뜬다전술판에 배치되지 않은

찾아보니 내가 원하는 정확한 설명이 되어있는 글은 없었다근데 대부분 그런식으로 가로로 배치를 할땐 css로 float아니면 flex를 사용했다그래서 처음엔 float로 했을 땐 두개가 가로로 배치되진 않았다이후에 flex로 해보니까 제대로 두개가 가로로 배치가 되었다이

지난번에는 컴포넌트 두개를 각각 배치하고 끝냈다회의가 끝난 후 리스트를 조금 간단하게 구현하기로 하였다현재 포메이션이 어떻게 배치되었는지 정보와 옆에 i버튼을 클릭하면해당 선수의 소개글, 선호 포지션 등 상세 정보를 확인하는 모달만 만들기로 하였다개발을 끝내고 글을 쓸

팀 프로젝트 - 그간 변한 점 포스팅이 없었던 이유 상태관리를 위해 리덕스 강의를 듣기로 하였고 꽤나 어려워서 듣는 기간이 길어졌다 그렇다고 개발을 하지 않지는 않았다 1일 1깃을 하기위해 유이미한 개발은 항상 있었지만 포스팅을 할 정도의 큰 변화는 아니었기에 강

매주 월요일에 진행하는 회의를 통해서 디자인, 기획 분들한테 CSS 피드백을 받았다전에 올린 포스트보면 로고와 로고옆의 글자들이 너무 크기 차이가 심해서 그부분을 변경하였고각 메뉴들의 간격과 앱바가 전체적으로 조금 더 아래로 내려왔으면 좋겠다는 의견이 있어서 그것도 수

선수가 팀장에게 팀가입을 요청하거나, 팀장이 선수에게 팀가입을 요구했을 때그에대한 대답이나 어떠한 변화가 일어났을 때 유저가 알 수 있도록 하기위해서알림을 구현하기로 하였다figma에 있는 저런 알림처럼 구현하기로 하였다아직 디자인이 나오지 않아서 주기적으로 데이터를

지난번에는 알림 아이콘도 없었고 그냥 div로 테스트만 해봤다이번에는 제대로 백에 axios로 get을 하고 테스트하기로 했다우선 현재 연동돼있는 몽고db에 새로운 컬렉션을 만들고 데이터를 넣어주었다데이터 형식은 아래와 같다from은 팀에서 선수에게 보낸건지, 선수가

원래 팀 정보 부분은 팀에대한 정보를 보여주기만 하는 것이었다근데 이것도 포메이션처럼 편집 버튼을 만들어서 수정이 가능하게 하자고 변경되었다그래서 우선 백에 필요한 정보들을 넣고 지금까지와 똑같이 useEffect로 불러주었다포메이션과 똑같이 필요한 정보들을 받아와서

포메이션 판이 사용자들의 모니터에 따라 좌표가 다르다px값으로 크기를 지정해준다면 문제는 해결된다근데 px값으로 크기를 지정해주면 모니터가 큰사람에게 기준을 맞출수도작은 사람에게 맞출수도 없다중간에게 맞추기도 애매하다원래는 사용자에 따라 다른 화면을 갖고있으니vh vw

팀명, 팀로고, 팀소개, 활동 지역을 수정가능하게 바꾸어야한다지난번엔 버튼만 만들었고 이제는 핸들러를 만들어서 수정을 해주었다이렇게 팀정보부분도 끝이 났다요즘 포메이션판 이슈도 발생하고, 컴포넌트 크기도 어떻게할지 제대로 결정이 안나서 뭔가 기술적인 개발이빠르게 진도가

원래는 각 선수요소를 클릭해서 원하는 위치에 가져다놓고 변경하고 저장하는 식으로 진행을 했다저장을 하고 시간이 지난 후 다시 들어왔을 때 저장한 위치를 그대로 사용하기 위해선 x,y좌표값을 저장시켜야 했다근데 문제가 발생했다반응형으로 만들기 위해서 vh vw로 컴포넌트

기존예제는 이런식으로 되어있었다배치된 선수와 오른쪽 후보선수를 클릭하면 변경되는 형식이었다선수들의 대한 정보도 json형식으로 미리 만들어 둔 파일이 있었다우리는 우리 DB에서 받아오는 선수들로 데이터를 띄워야하고 선수들의 이미지는 필요없다또한 오른쪽에 리스트를 띄우는

지난번보다는 조금 더 코드를 파악하여 이제 선수를 포메이션 버튼으로 움직일 수 있게됐다문제는 지금 선수 변경이 안된다원래 오른쪽으로 버튼을 눌러서 선수 리스트를 띄우고 클릭하면 변경되는 로직을 사용했다그때랑 선수 정보는 달라진게 없어서 바로 사용해도 될 것이라고 판단했

예제 코드를 파악해서 왜 기존 방법이 되지않는지를 알게됐다축구판에 선수 요소를 띄우는 방법의 차이가 있었다그래서 선수 교체를 하면 거기서 에러가 발생하는 것이었다

지난번에 얘기한 것 처럼 플래그를 이용해서 구현을 완료했다경우를 나눠서 함수를 만들었다두 선수 기존에 배치된 선수 A B와 후보가 있다오른쪽 마우스(후보 띄우기)와 왼쪽 마우스(기배치된 선수 교체)로 두가지 경우가 있다A와 B를 왼쪽 클릭해서 변경하는 경우A를 왼쪽 클

오늘 종강을 했다지금까지 시험기간이어서 많이 개발을 하지 못했지만 조금씩이라도 했다오늘 시험이 다 끝나서 해결이 안되고있던 에러를 다시 수정해봤다기배치된 선수와 모달에 있는 후보선수를 교체했을 경우 모달에 있는 후보에도 변화가 일어나야 한다기배치된 선수는 모달에 나와야

와이어플로우를 보고 CSS를 수정했다리스트는 팀원이 많아져서 칸을 넘어갔을 때를 위해 overflow를 넣었다팀정보 부분은 와이어플로우에서는 칸이 안넘어 가는데 우리가 만든거는각 항목별로 여백이 너무 컸다

팀 프로젝트 - 선수 선택되면 외곽선 구현

이게 우리 피그마에 올라와있는 샘플 디자인이다저렇게 하기위해 왼쪽에 있는 사이드 앱바를 구현했다구현은 mui에 있는 Tabs Tab Box 를 이용했다onChange를 이용해서 해당 인덱스와 값이 동일하다면 보여주고아니라면 hidden을 이용해서 숨기는 로직을 이용했다

사이드 앱바 부분의 글자 크기와 앞에 아이콘을 추가하였다mui 에서 아이콘과 탭을 가져와서 사용하고 있는데 sx부분은 모두 공통으로 들어가는데 공통으로 먹이는 법을 찾지 못해서 나중에 변경예정이다그리고 맨 뒤에 보이는 검은 배경은 최상단 App.js 에 적용시켰는데이부

포메이션 리스트를 만들어야 했는데 어떤 종류를 어디서 따야할까 하다가피파온라인4 가장 유명한 축구 온라인 게임이고 현재도 즐겨하고 있는 게임이라 많은 포메이션이 있다는걸 알아서 피파를 참고하기로 했다피파에는 이렇게 다양한 종류의 포메이션이 있다위의 포메이션들을 하나씩

브라우저 크기가 작아지면 상단 앱바에서 메뉴를 리스트로 띄우는게 아니라햄버거에 모달로 띄우는 방식이었다근데 햄버거를 클릭하면 메뉴 아이템이 나오는게 아니라 알림이 떠버렸다찾아보니 모달창을 끄고 닫는 state가 알림과 햄버거가 같은 것으로 되어 있었다그래서 서로 다른

팀 프로젝트 - 포메이션 에러 조금 수정, 선수관리 추가 기능 구현 포메이션 에러 조금 수정 선수 카드를 선택하면 나타나는 외곽선 관련해서 에러를 하나 수정했다 같은 선수를 두번 클릭하면 해당 카드의 외곽선이 사라지게 하려고 했었는데 조금 어려움이 있었다 원래는 s

등번호 관리, 신청 목록 관리, 선수 제명 아이콘 구현신청 승인, 거절 구현선택되지 않았을 땐 우측 상단에 햄버거 모양의 등번호 관리 아이콘과공책 모양의 신청목록을 관리하는 아이콘선택되면 선수를 제명하는 아이콘을 만들었다각 버튼을 클릭하면 모달이 나오지만 오늘은 신청목

등번호 변경 기능을 만들어야 한다현재 피그마에는 이런식으로 올라와있다일단 등번호 설정 이라는 큰 모달을 만들었다저 선수 모양은 아직 디자인이 나오지않아서 로고로 대체했다이제 여기서 조금 어려움을 겪었다나는 모달을 하나 더 만들어서 저 조그만 등번호 교체하는 모달을 2중

등번호 변경 방법에 있어서 지난번에는 제대로 구현하지 못하였다Setstate를 제대로 작성하지 않아서 생긴 문제였다그래서 이렇게 작성했을때는 제대로 되는줄 알았다근데 등번호가 같아도 alert창이 뜬 뒤에도 숫자가 변경되어 버렸다코드를 살펴보니 무조건 등번호가 변경되는

게시판 기능을 만들기 위해서 라이브러리를 찾아보았다대부분의 사람들이 CK에디터를 사용하는것 처럼 보였고 우리도 그것을 사용하기로 하였다CKEditor에 들어가면 리액트로 사용하는 법이 나와있는데 옛날클래스 문법을 사용하고 있어서 구글에 검색해서 사용했다에디터를 설치를

팀 별로 캘린더가 있고 그 캘린더에 일정을 추가해서 사용하는 달력을 만들어한다그래서 캘린더 api를 알아보던 중 fullCalendar랑 구글캘린더를 연동해서사용하는 예제를 발견했고 그거를 우리도 사용하기로 했다해당 예제를 보면서 우리 프로젝트에도 적용을 시켰고 제대로