[4주차 기본/심화/공유 과제] SOPT 회원 조회 페이지 #10

jllee000 · 2025-05-12T14:02:17Z

🤙🏻 구현 기능 명세

💡 기본 과제

React + TypeScript
HTTP 클라이언트 라이브러리 사용 (axios, ky, ...)
ThemeProvider, GlobalStyle 사용 (CSS 라이브러리 사용)

로그인

로그인 타이틀
아이디 입력 Input
비밀번호 입력 Input
회원가입 페이지로 이동 가능한 버튼
로그인 버튼
로그인 성공시 마이페이지로 이동 및 userId(토큰) 저장 (userId 저장 위치는 자유. localStorage, SessionStorage, Cookie, ...)

회원가입

회원가입 타이틀
아이디, 비밀번호, 닉네임 입력이 한 페이지에서 일어남(url은 그대로)
로그인 페이지로 이동 가능한 버튼

회원가입(아이디)

아이디 입력 Input
다음 버튼을 누르면 비밀번호 입력폼이 나옴
Input 비어있을 때 버튼 비활성화

회원가입(비밀번호)

비밀번호 입력 Input
비밀번호 확인 Input
둘 중 하나라도 비어있으면 버튼 비활성화
두 비밀번호가 다르면 버튼 비활성화
다음 버튼을 누르면 닉네임 입력창이 나옴

회원가입(닉네임)

닉네임 입력 Input
회원가입 버튼
Input 비어있을 때 버튼 비활성화
회원가입 실패 시 에러메시지 alert 출력
회원가입 성공 시 alert출력 및 login 페이지로 이동

마이페이지(헤더)

헤더에 '내 정보', '회원 조회', '로그아웃' 탭 존재
헤더 우측에는 본인의 닉네임 출력
로그아웃 버튼 클릭 시 userId 저장 정보 삭제하고 로그인 페이지로 이동
헤더에 내 정보, 회원 조회 버튼 클릭시 해당 페이지로 이동 (라우트)

마이페이지(내 정보)

새 닉네임 입력 Input
저장 버튼
저장 오류시 alert 출력
저장 성공시 닉네임 변경 및 alert 출력

마이페이지(회원 조희)

회원 검색 Input
확인 버튼
검색 성공시 리스트 출력
Input이 비어있는 상태로 확인 버튼 클릭하면 전체 회원 조회

🔥 심화 과제

any 사용하지 않기

회원가입 (아이디)

20글자 넘어가는 것에 대해 에러메시지 출력, 버튼 비활성화

회원가입 (비밀번호)

비밀번호 보이기 버튼 추가
20글자 넘어가는 것에 대해 에러메시지 출력, 버튼 비활성화
비밀번호 불일치 에러 메시지 출력

회원가입 (닉네임)

회원가입 성공 시 alert에 닉네임 출력 및 login 페이지로 이동

마이페이지(헤더)

화면 크기가 작아지면 메뉴들이 사라지고 메뉴바 출력
메뉴바 클릭하면 위에서 아래로 사라졌던 메뉴들 출력
메뉴바 클릭시 자연스럽게 출력되게 애니메이션 적용

공유과제

제목:

링크 첨부 :

🚀 내가 새로 알게 된 점

~ 부분 이렇게 구현했어요, 피드백 부탁해요!

🤔 구현 과정에서의 어려웠던/고민했던 부분

시간 부족으로 기능을 우선적으로 구현하느라 컴포넌트화나 api분리를 잘 못한 것 같습니다ㅠㅠ
api연결 중에 userId가 서버에서 내려주는 id값인데 로그인Id인줄 알고 한참을 막혔었는데,,역시나 명세서 제대로 꼼꼼히 읽기.!
데이터 닿을라면 response.data가 아닌 response.data.data.~로 더 들어가야 했던 부분!

⏳ 소요 시간

10h

🤳🏻 구현 결과물

KakaoTalk_20250513_231534330.mp4

karnelll

전체적으로 정말 깔끔하게 구현하신 것 같아요!!
페이지 흐름도 자연스럽고, 기능마다 UI/UX 흐름도 명확해서 보는 내내 이해가 쉬웠습니다. 스타일도 잘 정리돼 있어서 유지보수나 확장성 측면에서도 신경 쓴 게 느껴졌어요.
특히 회원가입을 step 단위로 나눈 구조나, 마이페이지에서 역할 분리한 구성은 되게 직관적이었고,
코드를 처음 보는 입장에서 동작 흐름이 눈에 잘 들어와서 좋았어요👍🔥 고생하셨습니다🙏

karnelll · 2025-05-15T06:55:43Z

week4/week4-HW/src/pages/Login/Login.jsx

+      setUserId(res.data.data.userId);
+      localStorage.setItem("userId", userId);


setUserId() 직후에 localStorage에 저장해서, 아직 이전 상태값이 들어갈 수도 있어요!! 응답 받은 userId를 변수에 따로 담아서 바로 저장해주면 더 확실할 것 같습니다!!

karnelll · 2025-05-15T06:57:38Z

week4/week4-HW/src/pages/Login/Login.jsx

+        <div css={btnStyle} onClick={handleLogin}>
+          로그인
+        </div>


로그인/회원가입 버튼이 div로 되어 있어서, disabled 같은 속성이 실제로는 적용되지 않는 것 같아 접근성이나 키보드 이동 같은 면에서도 button 태그로 바꾸면 더 좋을 것 같아요:)

<button css={btnStyle} onClick={handleLogin}>로그인</button>

karnelll · 2025-05-15T07:00:49Z

week4/week4-HW/src/pages/Signin/Signin.jsx

+            <div
+              css={btnStyle}
+              onClick={handleNextStep}
+              style={{ opacity: isUsernameValid ? 1 : 0.5 }}
+              disabled={!isUsernameValid}
+            >


이 부분도 div는 disabled를 인식하지 않아서 실제로는 동작 안 하고 있을 수도 있을 것 같아요! <button disabled={!isUsernameValid}>로 바꾸면 로직은 그대로 유지하면서 UX도 좋아질 것 같습니다 :)

karnelll · 2025-05-15T07:04:49Z

week4/week4-HW/src/components/MyPageInput.jsx

+            {nicknameList.map((nickname, index) => (
+              <li key={index}>{nickname}</li>
+            ))}


리스트 렌더링 시 key={index}를 쓰고 있는데, key={nickname}을 쓰면 React가 더 잘 추적해줄 수 있어 더 안정적이라고 합니다!! 😀

mnbvcxzyj

4주차 과제 너무너무 고생하셨습니다 ㅎㅎㅎㅎ 이런 개발 천재를 보앗나 ㅋ

어떤 고민을 하시면서 코드를 작성하셨는지 그대로 보이는 좋은 코드인 거 같아서 많이 배워가요 !!!!

mnbvcxzyj · 2025-05-15T09:33:56Z

week4/week4-HW/src/components/MyPageInput.jsx

+    } else if (name === "view") {
+      try {
+        const response = await api.get(`/api/v1/users?keyword=${inputValue}`);
+
+        const nicknameList = response.data.data.nicknameList || [];
+        if (nicknameList.length === 0) {
+          alert("닉네임이 없습니다.");
+        } else {
+          console.log("User details fetched successfully", response.data);
+          setNicknameList(nicknameList);
+        }
+      } catch (error) {
+        console.error("Error fetching user details", error);
+        alert("닉네임을 조회하는 데 실패했습니다.");
+      }


닉네임 변경이 아닌 부분은 따로 역할 분리를 하는 게 좋을 거 같아요 ! 혹시 하나로 작성하신 이유가 있을까요?

mnbvcxzyj · 2025-05-15T09:34:31Z

week4/week4-HW/src/components/MyPageInput.jsx

+      <div css={btnStyle} onClick={handleUpdateNickname}>
+        {btnTxt}
+      </div>


클릭 가능한 요소는 button 태그를 사용하는게 시맨틱 측면에서 좋을듯 합니다 !!!

mnbvcxzyj · 2025-05-15T09:36:44Z

week4/week4-HW/src/pages/MyPage/MyPage.jsx

+            headers: { userId },
+          });
+          // setUserName(res.data.data.nickname);
+          console.log(userName, "지금", res.data.data.nickname);


콘솔 훔쳐보기 ㅎ

soyyyyy

api 연동할 때 response 데이터 타입 맞추는게 항상 헷갈렸는데 그 점을 적어주셔서 공감을 많이 했습니다 ㅎㅎ step을 나누어 회원가입 로직을 구현하시고 코드의 흐름 깔끔해서 보기에 편했던 것 같고 저도 emotion을 사용했어서 그런지 기존 로직 외에 스타일도 많이 배워갈 수 있었습니다!!!
4주차도 고생하셨습니다.재👍👍 재림쌤 사랑해요❤️

soyyyyy · 2025-06-05T07:23:05Z

week4/week4-HW/.env

과제라서 상관없긴 하지만 다른 프로젝트에선 보안 등을 위해 해당 파일은 .gitignore에 추가하면 좋을 것 같습니다 ㅎㅎ!!

soyyyyy · 2025-06-05T07:23:34Z

week4/week4-HW/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">


3주차 과제 때 배웠는데 사소하지만 ko로 바꾸면 좋을 것 같습니다!

soyyyyy · 2025-06-05T07:28:24Z

week4/week4-HW/src/pages/Signin/SigninStyles.styles.jsx

+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 50px;


rem이 웹 브라우저 마다 다른 기본 폰트 사이즈에 대응할 수 있다고 해서 border-radius처럼 딱 고정하는 크기 외에 rem을 사용해보시면 어떨지 제안드려봅니다!

soyyyyy · 2025-06-05T07:29:46Z

week4/week4-HW/src/pages/MyPage/MyPage.jsx

+          const res = await api.get("/api/v1/users/me", {
+            headers: { userId },
+          });
+          // setUserName(res.data.data.nickname);


저는 나아중의 저를 위해 콘솔을 남겨뒀었는데, 테스트용 콘솔은 지우는게 성능 등의 면에서 더 좋다고 합니닷

soyyyyy · 2025-06-05T07:30:51Z

week4/week4-HW/src/pages/Login/Login.jsx

+  }, [userId]);
+  const fetchDetailData = async () => {
+    try {
+      const res = await api.post("/api/v1/auth/signin", {


api 부분 axiosInstance 등을 통해 따로 분리해서 관리하면 더 편하고 깔끔해지더라구요!! 한 번 시도해보시는 걸 추천드리옵니다

jllee000 added 11 commits May 7, 2025 11:20

feat : 4주차 과제 세팅

1a74c45

Merge remote-tracking branch 'origin/main' into week4-hw

79da03b

feat: 라우터 설정

a8d913a

feat : 로그인 페이지 뷰

8e3c3a8

feat : 로그인 로직 및 스토리지 저장

f36a829

feat : axios 세팅

cf78438

feat: 로그인 api 연동

87bd216

feat : api 연결 세팅

f9b5bc4

feat : 마이페이지 인풋 구현 및 파일 수정

78a949c

feat : 닉네임 검색 api

e3e3965

feat : 각 뷰 별로 api 연동 확인

06b3fd5

jllee000 added 심화 This issue or pull request already exists 공유 Extra attention is needed 4주차 4주차 과제 _ sopt회원 조회 페이지 만들기 labels May 13, 2025

jllee000 added 4 commits May 13, 2025 19:57

fix : api 연동 id값 로직 수정

09ce997

feat : 닉네임 수정 및 닉네임 헤더에 반영

896ff65

feat : 회원가입 페이지

dace2c7

feat : 회원가입 API 연동

1577c6f

jllee000 requested review from karnelll, mnbvcxzyj and soyyyyy May 13, 2025 14:49

karnelll approved these changes May 15, 2025

View reviewed changes

mnbvcxzyj approved these changes May 15, 2025

View reviewed changes

soyyyyy approved these changes Jun 5, 2025

View reviewed changes

		setUserId(res.data.data.userId);
		localStorage.setItem("userId", userId);

[4주차 기본/심화/공유 과제] SOPT 회원 조회 페이지 #10

Are you sure you want to change the base?

[4주차 기본/심화/공유 과제] SOPT 회원 조회 페이지 #10

Uh oh!

Conversation

jllee000 commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤙🏻 구현 기능 명세

💡 기본 과제

🔥 심화 과제

공유과제

제목:

🚀 내가 새로 알게 된 점

🤔 구현 과정에서의 어려웠던/고민했던 부분

⏳ 소요 시간

🤳🏻 구현 결과물

Uh oh!

karnelll left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mnbvcxzyj left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

soyyyyy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jllee000 commented May 12, 2025 •

edited

Loading