Todo List

[lucy0701]

페이지

• [x] My page
• 결과 리스트
• 회원 프로필
• [ ] 관리자
• 관리자 관련 API 확인
• 관리자 페이지 : API 기준으로 생성
• 댓글 삭제 기능 등
• 테스트 생성 페이지
• MonoRepo
• [x] 쿠팡
• 배너, 로딩, 팝업시간 등

기능

• [x] Comment
• 작성, 수정, 삭제
• [x] Like
• 클릭 상태 (버튼 색상)
• 카운트
• [x] Share
• Kakao 공유기능 숙지
• [x] Logout
• [x] 더보기 - 댓글, 마이페이지

페이지 기록 관련

• [x] 로그인 후 뒤로가기 방지
• [ ] 테스트 이전 질문 - 3
• [x] 로그인 후, 기존 페이지로 돌아오기

services

• [x] api관련 코드 분리

loading

• [x] loading

Text

• [x] 문자 정렬
• [x] 댓글 시간 설정

Recoil

• [x] test score

CSS

• [x] test play : 버튼 글자 넘침
• [x] 모바일 화면 최적화

기타

• [ ] 문서화
• [x] SEO

[lucy0701]

[2024.01.17]

• [x] 퀘스트 결과 api 관련 코드 Custom hook으로 분리
• [x] comment 추가, 삭제, 수정
• [x] 업데이트시 댓글 카운트 자동 업댓
• [x] 비회원 작성시 로그인 안내 ..

[lucy0701]

추가 사항

Recoil

• 댓글 추가 시, 컴포넌트 별로 상태관리를 하여, 화면에 실시간 업데이트가 안됨
  1. 부모 컴포넌트에서 함수로 전달
• comment 컴포넌트는 테스트 메인과 결과 페이지 양쪽에서 사용
• comment 컴포넌트안에서 댓글 기능 모두 사용이 가능해야하나, 부모에게서 데이터를 계속 전달해야 함.
  2. 직접 저장된 데이터를 list에 추가하여 표시
• 직접 추가하게 될 경우, 입력 받은 데이터를 전송하고, 그 데이터를 이용해 list 배열 맨 앞쪽에 추가하여야 함. (비효율적) Recoil 도입
• 댓글 추가 외 수정, 삭제에도 사용, 추천 기능등 추가로 사용 예정
• 테스트 시작, 진행 시 데이터를 프롭으로 넘기거나 새로 불러오지 않고 사용 가능할듯
• 스코어 점수를 섹션스토리지에 저장했으나, 아톰으로 처리해도 될 듯

[lucy0701]

• [x] 테스트 결과 404 error 하..
• 로컬에선 문제 없었으나, 웹에서 테스트를 진행 할경우 요청오류 발생 404가뜸 (서버로 요청이 안감)
• sessionStorage로 데이터 불러올때 문제로 추정중
• 로그인 후 처음 할때 주로 뜸, 그뒤론 잘 페이지 잘 불러와짐

[lucy0701]

[2024.01.18]

• [x] like
• mypage 생성
• [x] 결과 목록 - 결과 페이지 연결
• [x] 유저 정보
• [x] 결과 불러올 때, get /record 경고
• prefetch={false} 추가 페이지 사전로드(prefetching)를 비활성화
• [x] 로그인 후 로그인 버튼 -> 마이페이지 버튼으로 교체 (헤드)

[lucy0701]

login 후 login icon에서 로긴한 유저의 프로필 사진으로 icon 변경, 클릭 시 mypage로 이동

• [x] 로그인 직 후 이동되는 메인페이지에서 아이콘이 바로 변경 되도록 해야함
• Recoil 로 로그인 상태 저장해서 해결

[lucy0701]

[2024.01.19]

• [x] 로그아웃
• [x] 링크 복사
• [x] 로그인 유저 테스트 결과 카운트 X
• [x] 카카오톡 공유

[lucy0701]

[2024.01.20]

• [x] 공유하기 : 브라우저에 카톡 기록이 되어있으면, 몽빗 로그인 없이도 공유하기 되어버림..수정 완
• [x] 결과 공유하기 링크 오류
• [x] 댓글, 마이페이지 더보기
• [x] 테스트 결과 텍스트 배열처리 - 출력
• [x] 댓글 입력, 공유를 위해 로긴 후 원 페이지로 이동 처리
• [x] ui 글삐져나옴, 아이콘 크기조절
• [x] 시간표기 - 댓글, 마이 페이지

[lucy0701]

[2024.01.21]

• [x] Result Loading
• [x] Coupang 광고 적용 - 배너, 결과 송출 전 5초 후 광고닫기 버튼 활성

[lucy0701]

쿠팡 - 모바일로 쿠팡 이동 후 돌아왔을 때 처리, 로컬 스토리지에 쿠팡 다녀 옴 여부 저장/처리 (해야함!)

[lucy0701]

[2024.01.22]

• [x] 모바일에서 쿠팡으로 이동 후 돌아왔을때 처리
• [x] 쿠팡 방문 기록 체크 (12시간)
• [x] ui 정리 (폰트/ 스타일)
• [x] footer 정리

[lucy0701]

코드 리뷰 [24.01.22]

• 테스트 데이터 메인, 질문, 결과 한번에 옴 (나눌 수 있는지) - 우선순위 낮음

• 테스트 질문에 플래그를 넣고, 질문을 다양하게 처리할 수 있음 ( 현재 고정) - 우선순위 낮음

• { id: '64c169df0d7bff6a03b6f6e1', index: 1, question: '친구들 많은 사람 보면 어떤 생각 들어?', answerPlus: '친구는 많을 수록 좋아!', answerMinus: '전혀 안부러워 ㅋㅋ' flag : 2, point: -2 },

• Monorepo : 터보 레포 (어드민, 웹 분리 -> 어드민: 웹 페이지, 사용자: 모바일) - 천천히 진행 (어드민 페이지 생성 시, 서버에 요청 해야함)

• 토큰 만료시 따로 안내 X, 로그인 필요한 서비스 이용때 로그인 페이지로 이동할 수 있도록 처리

• 로그인 뒤로가기 : 팝업창(히스토리X, 백 페이지 기록 X) or 로그인 페이지에서 로그인 여부 판단, 로그인 되어있을 경우 백페이지로 이동

• 팝업 창 : 인가 코드를 받아와야 하여, 결국 페이지 이동을 해야함, 그리고 JavaScript SDK v2는 보안상 '팝업 로그인'방식 지원을 안해줌. v1버전은 가능하나, 그냥 페이지 기록을 중심으로 해야할 듯

[lucy0701]

[2024.01.23]

• [x] 로그인 페이지에서 로그인 여부 판단, 로그인 되어있을 경우 백페이지로 이동 (로그인 페이지 접근 못 하도록 조치)
• [x] 세션 종료 후 로그인 페이지로 이동안되는 페이지가 있는지 체크하고, 처리
• 어제 못한 쿠팡 광고 클릭 후 처리 마무리
• record에서 결과 공유시 공유 안되는 문제 발생, testID가 record에서 전달하는 testData에서는 결과ID가 없었음. 데이터로 넘기는게 아닌 ID 자체를 전달하도록 함

[lucy0701]

[2024.01.24]

• [x] 쿠팡 12시간: 웹을 유지하고 있을때는 괜찮으나, 웹을 닫고 다시 켰을경우 다시 팝업 활성화 됨. 다시 검토 - ... 코드 하나 잘 못씀...

• [x] 메인화면 슬라이드 효과 추가

• 라이브러리 Swiper 활용

• 오류 : Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

• loop를 돌아야하는데 슬라이드 수가 부족하다고 한다. slidesPerView, slidesPerGroup 모두 1로 설정되어있고 배열은 총 9개임

• 이유: 슬라이드생성이 데이터호출보다 먼저 실행되어서 인듯 했다. 그래서 useEffect에 데이터가 불러 와지고 나서 실행 될수 있도록 getTestListData().then(() => {setDataLoaded(true);});추가 후 조건문if(isDataLoaded)를 통해 렌더링 할 수 있도록 처리함

• 해결: 예상대로 잘 됨

• 여기서 if(!isDataLoaded)를 사용하면 데이터가 불러와지는동안 Loading처리를 할수 있을 것 같다. 굳

[lucy0701]

[2024.01.25]

• [x] 한다 SEO - 등록 완료 _ 기다려봐야함 ㅠ
• [x] About page [ 몽빗 소개, 개발자 소개 ]
• 로그인 경로 TestId 초기화 (TestId가 필요없는 페이지인데 Id가지고 있었음...

[lucy0701]

• 경고 : [iFrameSizer][Host page: iFrameResizer2] IFrame has not responded within 5 seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.

• [iFrameSizer][Host page: iFrameResizer2] IFrame이 5초 이내 응답 안함 iFrameResizer.contentWindow.js가 iFrame에 로드되었는지 확인 필요. 작동 잘하면 무시해도 됨 warningTimeout 옵션을 더 높은값이나 0으로 설정..

• 왜 하나 추가할때마다 뭔가 하나씩 더 추가되는거 같지

• [Violation] Forced reflow while executing JavaScript took 31ms

• JavaScript 실행동안 강제 Reflow 발생 , 레이아웃 갱신하는데 31밀리초 소요

• Reflow : HTML요소의 레이아웃을 계산하는 프로세서, JavaScrip가 레이아웃 정보를 변경하거나 조회시 Reflow발생.

• 추측으로는... 아마 쿠팡 로딩 - 쿠팡 - 결과 페이지에서 레이아웃이 움직여서로 추측

[lucy0701]

[2024.01.26]

• 이미지 : 따로 할정도 아님! 정적페이지에 좋긴한데, 데이터랑 같이 불러오고, 로딩처리로 커버 가능!
• [x] Loding 처리
• [x] SEO - 네이버 추가 ( 구글 , 네이버 ) 기다리는 중..
• [x] 화면 최적화 - 탭에서 깨짐 처리, 가로 스크롤바 막음 (화면 움직임)

[lucy0701]

[2024.01.26]

• [x] SSR API 호출 (App page) : axios -> fetch 모두 변경
• [x] 도메인 변경 - 구글, 네이버 서치 태그 변경, 재신청 (색인, 크롤링), 애널리틱스, 코드 내부 도메인 관련 변경

[lucy0701]

코드 리뷰 [24.01.27]

오류

Error occurred prerendering page "/test/random". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: document is not defined at createTag Export encountered errors on following paths: /latest/page: /latest /list/page: /list /page: / /test/random/page: /test/random

• 총 4곳에서 에러 발생
• prerender중 document이 없다는 오류
• useEffect()로 잘 감싸줬는데도 문제 발생.

  원인

• Lottie 라이브러리..
• Node 21버전에서 생기는 오류

  해결

• Node.js 버전을 20으로 다운
• dynamic() 사용. 완전하게 클라이언트 렌더링 시킴
• 두가지 모두 사용 완료 : 현재 dynamic()으로 설정 해놓음

App Router의 SSR API 호출

• Next 13에서는 axios 보다 fetch를 권장

• fetch : 서버 사이드 렌더링은 데이터를 호출하여, 노드와 함께 HTML 요소를 구성하여 한번에 내보낸다. 즉, 데이터 조작 없다. HTTP 요청만 하면 되기 때문에 fetch로 데이터를 호출하는 것이 좋다

• axios : 클라이언트 위주의 컴포넌트 안에서 사용하는 데이터의 경우 대부분 데이터를 처리하는 작업이 이루어진다. (복잡한 요청, 부가기능 사용) 이때는 fetch보다 axios를 사용하는게 좋다.

• Next 13에서는 axios 보다 fetch를 권장이란 말은 사용을 권장하란 거지 fetch를 고집하란게 아님. 목적에 따라 데이터 조작이 필요한경우 같은 api라도 page에서 사용할 fetch와 클라이언트에서 사용할 axios를 구분하여 적절하게 사용하는 것이 좋다.

• 버그 리포트 : 정확하게 오류 지점이 나오지 않을 경우, 가장 윗단계 (넓은 범위) 부터 단계별로 하나씩 체크해야 함. 꼭 코드의 문제가 아닐수도 있다 (이번의 경우 라이브러리와 충돌) 한개가 의심된다고 확신하지 말것 ㅠ.ㅠ

[lucy0701]

묘스트

• [ ] 썸네일 : https://i.ibb.co/
• [ ] 파비콘 : https://wizlogo.com/ko/favicon-generator
• [ ] 메인 로고, 타이틀 제작
• 임시로 처리 해둠

[lucy0701]

[24.01.30]

• [x] sitemap : 전체 테스트 항목 페이지에 추가, test/main/{테스트}

• 기존에 메인, 리스트, 웹소개 페이지만 sitemap으로 추가하였으나, 각 테스트의 시작페이지들도 추가

• 테스트 id를 호출하여 페이지를 동적으로 추가할 수 있도록 구성, 새로운 테스트가 생성되더라도 호출되어 자동으로 sitempa에 추가됨

• 크롤링은 되었으나, 색인 생성 안됨.. 유효성 검사중..

• 네이버 검색 가능한데 '모스트'로 변경됨ㅋㅋㅋ 고객센터에 묘스트 검색제안 해지 요청글 남김...ㅠ

[lucy0701]

[24.01.31]

• [x] 모바일 화면 최적화
  • 최소 320px까지
• [x] 태그 수정 (header, main, footer, body)
• [x] Link -> Button 변경
• [x] 타이틀 <h1>으로 변경

코드 리뷰

• 각 용도에 맞는 태그를 활용 할 것
  • 헤드, 바디, 네비, 푸터 등
  • div, span : 의미 없는 태그
  • p : 문단이라는 의미
• Link, Button 구분
  • 두가지 혼용 X, 버튼 모양이면 버튼, 링크일 땐 링크로 사용
  • 버튼을 활용 할 땐 'router.push()'로 페이지 이동

[lucy0701]

[24.02.01]

• [x] 리스트 항목 ul / li 으로 변경하기
• [x] google 색인 오류 처리

[lucy0701]

[24.02.02]

• [x] 신규, 전체 테스트 컴포넌트 통일
• [x] 파비콘, 아이콘 추가
• [x] 댓글 너비 수정

[lucy0701]

[24.02.05]

• [x] turbo repo 마이그레이션 완

[lucy0701]

[24.02.07]

• [x] admin 배포 완료 (페이지 미생성)
• [x] vercel 전역 환경 설정 완료

[lucy0701]

[24.02.28]

• [x] 이미지 최적화 (next/Image)

[lucy0701]

[24.03.10]

• Admin : Layout
  • Antd 활용 제작중
  • sider : 링크 이동... next Link와 라이브러리 Link가 중복되어 적용 안됨. 해결책 찾는중

[lucy0701]

Back Office

• MBTI Contents 업데이트 폼 제작 중
• 몽빗 <-> 묘스트 통합 예정
  • 김씨 : 서비스
  • 박씨 : 백오피스
  • 모노레포로 변경 3월 16일 세팅

[lucy0701]

[ 24. 03. 14 ] 진행 상황 ( add content )

• 셀렉터 선택 시 test type 별로 폼 제공
• 질문 - 결과 , 페이지 분리 : 이전-다음 버튼을 통해 페이지 이동
• 리코일 : 페이지 이동하더라도 작성한 글 유지

앞으로 해야 할 것

• 몽빗과 레포 통합 (모노레포)
• 이미지 업로드 : 이미지 파일 업로드 먼저 진행 후 URL 받고 텍스트 들과 함께 서버로 데이터 전송
• 서버 데이터 연결 : add content test
• 대시보드 및 테스트 리스트 Layout
• 로그인 컴포넌트 : 모노레포로 처리 가능한가?

[lucy0701]

[ 24. 03. 15 - 17 ] add contents

• 유효성 검사
  • 저장 버튼 : 입력 값에 공백이 있거나, 이미지 파일이 없다면 버튼 비활성화
  • Recoil로 input 의 value 상태값을 가지고 있음을 활용
  • every() 메서드를 사용하여 undefined 체크후, 모두 true일때 버튼 활성화 하도록 함
• http 상태 코드
  • 400 : 잘못된 요청, 이미지 파일의 formData.append() -key 값 잘못 입력, file 로 전송해서 생김
  • 401 : 권한 (인증 or 인가) Login Token이 필요했음 (Authorization)
  • 415 : Content-Type 잘못 됨 : form의 경우 'multipart/form-data', Object의 경우 'application/json'로 명시 해줘야 했음
  • 500 : 잘못된 data 형식의 문제였음 - JSON.parse()를 통해 Object를 JSON으로 파싱하여 전송하여 해결

해결해야할 것 (우선)

• 완료 페이지 구현
• 데이터 전송 (이미지 전송 시 시간 소모가 있음)시 버튼을 한번 더 누르면 중복으로 전송 됨. 한 번 누르고 성공처리면 완료페이지 이동 + 버튼 중복 클릭 방지
• 구현 로직 리팩토링 필요 (기본 input으로 처리, 다시 라이브러리를 활용)
• 로그인 유효 확인 - 페이지별 확인
• 테스트 목록 구현 - test 용으로 올린 컨텐츠 삭제 필요

[lucy0701]

[24.03.18]

• [ ] 몽빗 통합 레포 세팅 및 마이그레이션 하기 (살려주세요)