티스토리 뷰
오늘 To do
전체
[ ] 피그마 디자인에 맞게 UI 디테일 수정
[ ] 에스코어드림 서체 자간 적용
회원가입 페이지
회원가입 유효성검사 토스트 팝업 동시에 뜨는 오류 해결 → HelpText 디자인 변경으로
랜딩 페이지
게임룰 ↔ 로그인 / 게임 하러가기 위치 변경
게임방 페이지
키워드, 닉네임 마포배낭여행 폰트 적용
게임방 gameroom 리다이렉트
스포트라이트 색상 변경 추가 작업
커뮤니티 페이지
커뮤니티 페이지 UI - 1순위
[ ] post page UI
[ ] modify post page UI
잘못된 경로 리다이렉트
설정 모달
[ ] 설정 모달 전체 UI
[ ] 설정 - 로그아웃 UI
[ ] 설정 - 회원탈퇴 UI
Refresh Token 작업
[ ] 프론트에서 구현해야하는 Refresh Token 작업 시작
디자인 회의 때 의논한 사항
커뮤니티 페이지
자유 게시글 / 유저 피드백 2개의 카테고리
로그인하지 않아도 커뮤니티 게시글 조회는 가능
유저 피드백 : 로그인한 유저만 남길 수 있음, 우리 웹 게임에 관한 피드백
자유 게시글 : 로그인한 유저만 남길 수 있음, 주제가 자유, 댓글, 대댓글, 사진 1개?
커뮤니티 버튼 위치는 로비 설정 버튼 왼쪽으로 생각했음
랜딩 페이지
게임룰 ↔ 로그인 / 게임 하러가기 위치 변경
랜딩페이지 - 비 로그인 시 설정 버튼 안 보이도록 처리했음
정답 입력 제한시간 20초로 변경했음
게임 제한시간 30초로 변경했음
로비
유저 이름 표시할 때 문구 의논(반갑닭/환영합니닭 등)
방 제목 7글자로 제한했음
설정
게임방 페이지에서는 마이크 음량 조절 모달만 뜨고, 로비와 로그인한 후 랜딩페이지에서는 설정 팝업 전체가 보이는 게 맞는지
마이크 음량 조절은 게임방 페이지 외에서 구현이 힘들 것 같다는 점 말씀드리기
미 로그인 시 설정 볼 수 없음
→ 이번 주 안으로 마이크 bgm 음량 조절 기능 구현이 힘들 수 있음. 추가 scope 커뮤니티 페이지 만들기가 우선 순위가 더 높기 때문(유저 피드백을 받기 위해 커뮤니티가 더 급하다는 의견)
저녁 회의 의견들
게임방에서 방제목을 보여주면 좋겠다.
채팅방 공지가 잘 눈에 띄지 않는다.
→ ㅇㅇ님이 입력한 ㅁㅁㅁ는 정답이 아닙니다 공지로 보여주고 '땡' 오답 팝업도 추가
- 채팅방 공지 영역에 방제목을 보여주고 공지 내용은 채팅방 자체에 보여주자(형식은 '관리자 : 공지내용' 색상 포인트)
- 채팅방 공지도 보여주고 채팅방 자체에도 공지를 보여주자
채팅방 공지가 길어지면 두 줄로 보이며 영역을 넘어간다.
- 채팅방 공지 height 값을 늘리는 방법?
https://blogpack.tistory.com/876
체크박스와 라디오버튼 디자인 기초
체크박스와 라디오버튼은 사용자가 선택할 수 있는 대상을 표현하는 폼 요소입니다. 선택적인 값을 표시하고, 선택된 값을 서버로 전송할 수 있는 단순한 기능을 하는 요소입니다. 그리고 이 선
blogpack.tistory.com
https://leo-xee.github.io/Error/eslint-label/
Error: A form label must be associated with a control.
⚠️ 에러 내용 키워드 검색 기능을 구현하는 중에 Input과 label을 과 로 연결시켜줬음에도 불구하고 다음과 같이 ESLint 에러가 발생했다. 📌 에러 원인 ESLint의 은 접근성을 위해서 label과 input이
leo-xee.github.io
https://equality37.tistory.com/16
[Select]select tag 기본 스타일(화살표) 변경 방법 3가지.(+ IE pollyfill, 가상선택자 사용시 발생하는 이
안녕하세요! 레미입니다. select 박스 디자인을 변경하는 3가지 방법을 소개해드리려고 합니다. 구글에서 검색하면 아주 손쉽게 방법을 찾으실 수 있는데요. 제가 직접 겪은 디자인 변경 이슈 해
equality37.tistory.com
select 화살표 디자인 적용하기
일단 select의 화살표는 너무 못생겼다. 그리고 브라우저별 디자인이 제각각이 되기 때문에 디자인을 적용하고 싶은 마음이 들 수밖에 없다. 그래서 background css를 적용해서 예쁘게 바꾸어준다. 생
zinna.tistory.com
select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript)
1. Select CSS Customizing Select 태그의 외형은 주로 각 브라우저에서 정의 합니다. 보다 시피 크롬(왼쪽), IE(오른쪽) 이 똑같이 보이면서도 미세 하게 다름니다. 공통적으로 둘 다 그리 예쁘게 생기진
wazacs.tistory.com
https://doolyit.tistory.com/126
selectbox CSS 셀렉트박스 CSS 이쁘게 변경하기
HTML 문서내에 아래와 같이 셀렉트박스(selectbox ) 를 사용할 경우 첫번째 선택항목 두번째 선택항목 세번째 선택항목 별도로 CSS 를 설정하지 않을경우 아래와 같이 표기되는데요, 이를 아래와 같
doolyit.tistory.com
https://tony-study.tistory.com/19
Select 태그 알아보기
순수한 CSS만 사용해서 , 요소의 스타일을 변경해 보아요 ~ 1. CSS만 사용해서 스타일 변경해보기 ① 기본값 , 요소를 사용하면 드롭다운(dropdown) 목록을 만들 수 있습니다. 요소로 드롭다운(dropdown)
tony-study.tistory.com
[HTML] <select > <option> 셀렉트 박스 넣기
# 태그 - html/css 코드에서 사용되는 쉽고 간단한 다중 값 입력 폼 - 화살표를 통해서 선택이 가능 # 예제 React JPA 웹 스터디 1 2 3 4 5 React JPA 웹 스터디 Colored by Color Scripter cs → 웹 스터디를 기본 값
qh5944.tistory.com
https://cocoder16.tistory.com/52
div태그로 custom select 만들기
HTML5 select 태그의 styling 한계 HTML5 select 태그는 form에서 자주 쓰이는 input user interface로 여러 옵션을 주고, 그중 선택할 수 있도록 하는 UI입니다. select의 선택지는 option태그로 만들어주는데 이 optio
cocoder16.tistory.com
https://www.daleseo.com/css-selects/
CSS 드롭다운 스타일링 가이드 - (HTML <select> 요소)
Engineering Blog by Dale Seo
www.daleseo.com
https://onu0624.tistory.com/126
[React] 라디오 버튼 만들기!!
라디오 버튼을 만들기 위해서 구글링을 했을때, 여러가지 방법으로 라디오 버튼을 만들 수 있었는데 실제로 코드 작성해보면서 제일 쉽게 따라할 수 있는 방법으로 글을 쓴다. hook의 useState를 사
onu0624.tistory.com
'Edu_hanghae99 > TIL' 카테고리의 다른 글
| [TIL] 230126 (3) | 2023.01.27 |
|---|---|
| [TIL] 230125 (0) | 2023.01.25 |
| [TIL] 230123 (0) | 2023.01.24 |
| [TIL] 230121 (0) | 2023.01.21 |
| [TIL] 230119 (0) | 2023.01.19 |