Feature(#77): 마이 페이지 API 연동 관련 기본 로직 작업 #263
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
진상님이 알려주신 익스텐션이 잡아준 철자를 수정했습니다.
- local storage에 저장된 username과 email을 표시하였습니다. - username을 변경할 수 있도록 API 연결을 진행하였습니다. - 강의 다시보기 리스트와 관련된 API 연결을 진행하였습니다.
기존에는 lecture 소켓에서 화이트보드 초기 데이터를 받도록 구성했는데, 이벤트가 생성되기 전에 데이터를 받아버리는 문제가 발생하여, 연결 수립 때 화이트보드 초기 데이터를 받도록 구성했습니다.
✅ Deploy Preview for boarlog ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
정상적으로 표시합니다
Fix(#262): 발표자 연결 수립 과정에서 화이트보드 초기 데이터 받을 수 있도록 구성
…231212-update-socket
crongro
requested changes
Dec 12, 2023
frontend/src/hooks/useAuth.ts
Outdated
| localStorage.setItem("username", response.data.username); | ||
| localStorage.setItem("email", response.data.email); | ||
| .then((result) => { | ||
| localStorage.setItem("username", result.data.username); |
There was a problem hiding this comment.
많이 반복되는건 아니지만, result.data 를 반복적으로 접근하는건 객체탐색비용만 들어가서.. 해체할당문법으로 미리 변수로 담으면 더 좋죠.
data 라는 이름은 의미가 없어서 별로입니다.
| }) | ||
| .catch((error) => { | ||
| console.log(error.response?.status); | ||
| if (error.response?.status === 401) { |
Comment on lines
1
to
10
| import { useState, useEffect } from "react"; | ||
| import axios from "axios"; | ||
| import Button from "@/components/Button/Button"; | ||
| import ProfileBig from "@/assets/imgs/profileBig.png"; | ||
| import SubLogoOriginal from "@/assets/imgs/subLogoOriginal.png"; | ||
| import EnterIcon from "@/assets/svgs/enter.svg?react"; | ||
| import { useToast } from "@/components/Toast/useToast"; | ||
| import ReplayLectureCard from "./ReplayLectureCard"; | ||
| import useAuth from "@/hooks/useAuth"; | ||
| import { useNavigate } from "react-router-dom"; |
There was a problem hiding this comment.
import 되는 순서를 라이브러리끼리, 컴포넌트끼리 .. 이런식으로 묶어두면 어떨까요?
There was a problem hiding this comment.
구현만 진행하느라 정말 기초적인 부분인데 신경쓰지 못했던 것 같습니다. 감사합니다 :)
|
|
||
| useEffect(() => { | ||
| checkAuth(); | ||
| axios |
There was a problem hiding this comment.
이런 질문에 답변을 해본다면..?
fetch API로 안되는건 어떤 것이에요?
그렇다면 그것을 fetch 로 구현해야 한다면?
| .get(`${import.meta.env.VITE_API_SERVER_URL}/lecture/list`, { | ||
| headers: { Authorization: localStorage.getItem("token") } | ||
| }) | ||
| .then((result) => { |
| headers: { Authorization: localStorage.getItem("token") } | ||
| }) | ||
| .then((result) => { | ||
| setLectureList(result.data); |
There was a problem hiding this comment.
result 라는 이름, data 라는 속성 모두..구체적이지 않은 이름이네요.
| if (error.response.status === 401) { | ||
| showToast({ message: "로그인이 만료되었어요.", type: "alert" }); | ||
| navigate("/userauth"); | ||
| } else showToast({ message: "정보를 불러오는데 오류가 발생했어요.", type: "alert" }); |
There was a problem hiding this comment.
확인했습니다! 다만, 해당 코드의 경우, 브라우저의 alert 창을 띄우는 방식이 아닌 따로 개발한 Toast를 띄우는 형태인데 이 또한 좋지 않은 방향일까요?
| if (error.response.status === 401) { | ||
| showToast({ message: "로그인이 만료되었어요.", type: "alert" }); | ||
| navigate("/userauth"); | ||
| } else showToast({ message: "정보를 불러오는데 오류가 발생했어요.", type: "alert" }); |
There was a problem hiding this comment.
에러메시지를 소스코드에 직접 하드코딩하진 않고, 별도로 묶어서 관리하긴하죠.
여기 비슷한 메시지가 코드에 흩어져있으면 관리가 어려워요.
There was a problem hiding this comment.
개선 사항으로 추가하겠습니다! 감사합니다 :)
| }) | ||
| .catch((error) => { | ||
| if (error.response.status === 401) { | ||
| showToast({ message: "로그인이 만료되었어요.", type: "alert" }); |
발표자가 강의를 재입장 하는 경우 화이트보드 데이터를 가져옵니다.
Jw705
approved these changes
Dec 12, 2023
| @@ -136,7 +136,7 @@ const UserAuthSection = ({ isSignIn, setIsSignIn }: UserAuthSectionProps) => { | |||
| type="text" | |||
| className="rounded-xl border-black w-full flex-grow medium-12 p-3 focus:outline-none focus:ring-1 focus:ring-boarlog-100 focus:border-transparent" | |||
| placeholder="이메일을 입력해주세요" | |||
| maxLength={50} | |||
| maxLength={30} | |||
There was a problem hiding this comment.
EMAIL_MAX_LENGTH 처럼 상수로 따로 관리해줘도 좋을 것 같아요!
| @@ -151,7 +151,7 @@ const UserAuthSection = ({ isSignIn, setIsSignIn }: UserAuthSectionProps) => { | |||
| type="text" | |||
| className="rounded-xl border-black w-full flex-grow medium-12 p-3 focus:outline-none focus:ring-1 focus:ring-boarlog-100 focus:border-transparent" | |||
| placeholder="닉네임을 입력해주세요" | |||
| maxLength={15} | |||
| maxLength={10} | |||
There was a problem hiding this comment.
이것도 NICKNAME_MAX_LENGTH로 바꿔 볼 수 있겠네요!
There was a problem hiding this comment.
이후 상수로 관리하는 과정에서 포함해서 개선해보겠습니다!
FIX: 새로 방을 개설했을 때만, 강의 시작시간과 화이트보드 초기 데이터 반영
…231212-update-socket
Fix(#215) 발표자가 강의를 나갔다가 들어오는 경우 (새로고침 등) 강의를 계속 할 수 있게 한다.
진상님 디버깅을 위해 임시 추가합니다.
hotfix: 참여자 페이지 게스트 토큰 임시 추가
새로고침 후 재접속 해도 음성이 잘 들립니다.
디버깅용도로 사용했던 코드 변경사항을 돌려놓았습니다.
feature(#215) 강의자가 새로고침 후 재접속 해도 음성이 잘 들리도록 개선
- local storage에 저장된 username과 email을 표시하였습니다. - username을 변경할 수 있도록 API 연결을 진행하였습니다. - 강의 다시보기 리스트와 관련된 API 연결을 진행하였습니다.
- 라이브러리와 assets, component에 따라 나누어 import를 쉽게 파악할 수 있도록 구분하여 그룹핑하였습니다.
- 메모지 1개만 선택했을 때 편집 패널이 나오도록 수정
로그인 되어있지 않은 게스트 참여자는 첫 소켓에서 빈값을, 두번째 소켓에서 첫 소켓의 socketid를 보내도록 변경했습니다.
feature: 참여자가 socket id 전송하도록 개선
- 백스페이스를 누르면 객체를 지우는 이벤트가 발생. 텍스트를 편집 중인가 여부를 포함하는 상태를 하나 만들어 이를 추적해 이벤트를 등록, 제거해 해결
Fix(#272, #274, #276): 피드백에서 제보된 메모 관련 문제 해결
- 반복되는 객체 내부 요소 접근에 소모되는 코스트를 고려하여 구조분해할당으로 요소들을 접근한 이후, 이를 활용하는 방식으로 변경하였습니다.
…/LellowMellow/web13_Boarlog into feature/231211-add-api-to-mypage
- local storage에 저장된 username과 email을 표시하였습니다. - username을 변경할 수 있도록 API 연결을 진행하였습니다. - 강의 다시보기 리스트와 관련된 API 연결을 진행하였습니다.
- 라이브러리와 assets, component에 따라 나누어 import를 쉽게 파악할 수 있도록 구분하여 그룹핑하였습니다.
- 반복되는 객체 내부 요소 접근에 소모되는 코스트를 고려하여 구조분해할당으로 요소들을 접근한 이후, 이를 활용하는 방식으로 변경하였습니다.
- local storage에 저장된 username과 email을 표시하였습니다. - username을 변경할 수 있도록 API 연결을 진행하였습니다. - 강의 다시보기 리스트와 관련된 API 연결을 진행하였습니다.
- 비밀번호의 regexp를 수정하였습니다.
…/LellowMellow/web13_Boarlog into feature/231211-add-api-to-mypage
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
작업 개요
작업 사항
고민한 점들(필수 X)
마이 페이지에 접속할 때,
useAuth커스텀 훅을 활용하여 접근을 제한하였습니다. 접근하려는 사용자의 token이 유효한지를 판단하여 접근 여부를 판단하였습니다. 다시보기 강의 리스트를 불러온 이후에도 강의가 존재하지 않을 경우를 위해 특정 문구를 대신 표시하도록 처리하였습니다.스크린샷(필수 X)