[7주차] Team 엔젤브릿지 권혜인 & 이가빈 미션 제출합니다. by billy0904 · Pull Request #3 · CEOS-Developers/next-vote-20th

billy0904 · 2025-01-04T12:22:46Z

✨배포링크

https 브라우저 정책 보안 이슈로 백엔드 친구들이 api 네트워크 오류 수정 중에 있다는 점 감안해주시면 감사하겠습니다! 🙇🙇
25/01/04 23시 35분 기준 저희 서비스 정상 영업합니다~!!🥳🎉

🗳️투표 시스템

✅ 같은 파트끼리 투표 가능
✅ 자기 자신 투표 불가능
✅ 중복 투표 불가능
✅ 같은 팀 투표 불가능

따로 에러 처리는 해주지 않았지만 실사용을 고려한 리팩토링을 하게 된다면 ux 향상을 위해서 불가능한 루트에 alert 정도는 띄워보고 싶네요!

Comments

협업 일정을 타이트하게 잡아서 코드가 다소 너덜너덜(?)하지만.. 사랑하는 팀원들과 같이 결과물을 내는 과정이 즐겁기도 했습니다! 다들 바쁜 와중에도 열심히 피드백해주고 고칠 부분들은 뚝딱뚝딱 해결해주어서 이번 과제도 잘 마무리할 수 있었던 것 같습니다. 마지막 과제 다들 수고 많으셨습니다! 👍👍

…vote-20th into heain

Haein2

Gabin2

Refactor

hiwon-lee

연말연초라 정신없으셨을텐데 이번 과제도 정말 수고 많으셨습니다ㅎㅎ
앞으로 엔젤브릿지 개발도 더욱 파이팅입니다...
저도 파이팅입니다....

hiwon-lee · 2025-01-05T15:14:20Z

+  const dynamicCandidateStyle =
+    ranking === 1
+      ? { backgroundColor: "#384084", color: "#FFFFFF" }
+      : {};
+


1등일 경우에 색을 다르게 해준거 조아요~~

hiwon-lee · 2025-01-06T00:38:55Z

회원가입이니까 signup이라고 해주시면 좋을것같습니다.

hiwon-lee · 2025-01-06T00:44:42Z

+  const { data } = useQuery({
+    queryKey: ["member"],
+    queryFn: member,
+  });
+


기존 과제들에서는 거의 로컬스토리지를 사용했었는데 이렇게 tanstack를 사용하니까 더 보기좋네요

hiwon-lee · 2025-01-06T00:48:51Z

+import { style } from "@vanilla-extract/css";
+
+export const headerContainer = style([
+  pretendardSemiBold,
+  {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "2rem 4rem",
+    boxSizing: "border-box",
+
+    width: "100%",
+  }
+]);
+


styled-component와는 다르게 react에서 태그안에 스타일 넣는방식이랑 유사하네요. 태그의 인라인 스타일을 바로 추출해서 스타일 요소로 바꾸기 용이할것같습니다.

everything-flows

마지막 과제 너무 고생하셨습니다~~~

스타일링을 신기한 방법으로 하셨네요! 어떻게 작동하는건가요??

그런데 저는 결과보기 페이지에서 오류가 나는 것 같아요...!

everything-flows · 2025-01-06T07:26:56Z

+    const accessToken = (await cookieStore).get("access")?.value;
+
+    if (!accessToken) {
+      throw new Error("어세스토큰 없다");


everything-flows · 2025-01-06T07:27:21Z

+    const accessToken = (await cookieStore).get("access")?.value;
+
+    if (!accessToken) {
+      console.log("어세스토큰 없다");


everything-flows · 2025-01-06T07:30:23Z

+      {BUTTON_LIST.map((text) => {
+        if (text == "투표하기") {
+          return (
+            <Button onClick={onClick} variant="voting" key={text} text={text} />
+          );
+        } else {
+          return (
+            <Button
+              onClick={handleResult}
+              variant="result"
+              key={text}
+              text={text}
+            />
+          );
+        }
+      })}


이 부분은 BUTTON_LIST에 버튼 텍스트 말고도 onClick이나 variant 등도 함께 넣으면 코드 길이가 많이 줄어들 것 같아요!

everything-flows · 2025-01-06T07:34:20Z

+  return (
+    <div className={container}>
+      <Input
+        text="로그인"


이부분은 아이디가 맞는 것 같아요!

everything-flows · 2025-01-06T07:35:55Z

+
+export const metadata: Metadata = {
+  title: "CEOS 투표 서비스",
+  description: "엔브가 만들었어용!",


everything-flows · 2025-01-06T07:36:37Z

저는 HeaderIsOrNot이라는 이름이 처음에 봤을 때 내용을 한 눈에 알기는 어려웠어요! 그냥 Header라고만 쓰셔도 좋지 않을가.. 합니다!

jiwonnchoi

안녕하세요! 엔브팀 코드리뷰를 맡은 커피딜 최지원입니다 :)
이번 과제에서 tanstack query 사용하신 점이 정말 인상 깊었고, 폴더 구조의 방식이 저희와 달라 새롭기도 했습니다👍
한 학기동안 과제하시느라 정말 고생많으셨습니다!! ❤️‍🔥

jiwonnchoi · 2025-01-06T06:51:57Z

+  const mutation = useMutation({
+    mutationFn: signin,
+    onSuccess: async () => {
+      console.log("성공");


회원가입 뿐만 아니라 로그인이나 투표 등 모든 동작들에 대한 콘솔이 "성공" 이어서 콘솔을 지워주시거나, 남긴다면 "회원가입 성공"과 같은 식으로 구분해주면 더 좋을 것 같습니다!

jiwonnchoi · 2025-01-06T06:58:15Z

+                <ButtonContent
+                  onClick={() => dispatch({ type: "SET_TEAM", payload: value })}
+                  value={value}
+                  key={value}
+                />


소속 팀명이나 소속 파트를 선택했을 때 선택된 표시나 어떠한 차이가 나타나지 않아 클릭이 반영된 것인지 아닌지 구분이 잘 되지 않았습니다..! [selectedTeam, setSelectedTeam] 과 같이 useState를 두어 클릭 시에 setter로 선택된 팀을 지정하고 글자 색의 차이를 준다거나, 위에 보니 정의해두신 isTeam으로 선택이 되면 닫힘 효과를 주면 선택되었음을 알릴 수 있어 더 좋을 것 같습니다!

jiwonnchoi · 2025-01-06T07:02:26Z

+  pwValue: "",
+  pwcheckValue: "",


혹시 비밀번호와 비밀번호 재입력이 일치하는지 여부를 확인하는 로직이 있었는데 제가 확인하지 못한걸까요..? 🥲 테스트해보았을 땐 재입력이 일치하지 않았는데도 회원가입이 되었고, 비밀번호로 로그인이 되었습니다 (다르게 입력한 재입력 비밀번호로는 로그인되지 않았고요..!)

jiwonnchoi · 2025-01-06T07:09:11Z

저도 회원가입 로그인쪽 하면서 반복되는 부분들이 많았는데 이렇게 버튼도 세세히 컴포넌트화 하신 점 좋은 것 같아요~!

jiwonnchoi · 2025-01-06T07:25:55Z

+  const mutation = useMutation({
+    mutationFn: login,
+    onSuccess: async () => {
+      console.log("성공");
+      router.push("/");
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });


로그인 여부를 login이라는 api 함수 호출을 통해 받아오시는 것 같은데, 제가 테스트해보았을 때는 [회원가입->로그인->로그아웃->로그인] 했을 때 아이디가 틀리거나 비밀번호가 틀려도 로그인이 되면서 올바른 닉네임이 떴습니다.....!.. 액세스토큰을 지우고서 기존에 회원가입 했던 올바른 아이디/비번으로는 로그인이 되는데, 틀린 아이디/비번으로는 로그인되지 않는 것으로 보아 저장된 액세스 토큰으로 판단하는 로직이 있으신건가,,도 생각해보았는데 정확한 파악은 안 된지라 여러 방식으로 테스트하여 백엔드와 이야기해보시면 좋을 것 같습니다....!!

jiwonnchoi · 2025-01-06T07:33:13Z

+    if (accessToken) {
+      console.log("Access Token", accessToken);
+      (await cookies()).set("access", accessToken);
+    }


로그인할 때마다 성공 시 백에서 액세스 토큰을 넣어보내주는 것으로 알고 있는데 콘솔 상에서는 한 번도 찍히는 것을 보지 못해서 언제 찍히는지 궁금합니다!

jiwonnchoi · 2025-01-06T07:36:22Z

@@ -0,0 +1,24 @@
+"use server";


next js에서는 기본적으로 서버 컴포넌트를 사용하는 것으로 알고 있는데 따로 써주신 이유가 있는지 궁금합니다!

jinnyleeis · 2025-01-06T07:39:45Z

과제하느라 수고 많으셨습니다!!

혹시 이부분 확인해보셨을까요? 파트장 투표가 성공적으로 진행된 후에도 항상

이와 같은 에러가 발생하는 것 같습니다. 데이터가 로드되지 않은 상태(즉 undefined)에서 .length를 호출하는 부분이 있는 것 같은데 이러한 경우에 대비해서 예외처리 등이 잘 되어있는지 이 부분 코드도 확인해보시면 좋을 것 같습니다!!

https://duklook.tistory.com/410

그리고

회원가입시 소속 팀명 / 소속 파트 별도로 선택된 텍스트에 대해서 색깔로 표시할 수 있으면 좋을 것 같습니다! 소속 팀명 선택한 상태에서 소속 파트를 선택하니, 선택된 소속 팀명은 색이 검정색으로 바뀌는 것 같아요 이부분도 수정할 수 있으면 좋을 것 같아요

받아온 팀 투표 결과에 문제가 있는 것 같은데 이부분도 확인해보시면 좋을 것 같아요!!

마지막 과제까지 수고 많으셨어요 ㅎㅎ

s-uxun

안녕하세요, 마지막 주차 과제 코드 리뷰를 맡은 송유선입니다!
한 학기 동안의 스터디, 마지막 과제까지 너무 고생 많으셨어요! ✨
저도 한 학기 동안 엔젤브릿지 혜인언니, 가빈언니의 코드를 보면서 참 많이 배울 수 있었습니다. 앞으로 남은 프로젝트 개발도 파이팅 하시길 바라요 🔥

제가 더 많이, 잘 써드리고 싶었는데 제 로컬에서는 왜인지 모르게 빌드가 안 되더라고요 ㅜㅜ 이것저것 다시 설치해봐도 dev 실행이 안 되어서 이번 코드리뷰가 조금 짧게 되었어요.. 미안합니당....

s-uxun · 2025-01-06T08:42:54Z

+    "@tanstack/react-query": "^5.62.11",
+    "@tanstack/react-query-devtools": "^5.62.8",
+    "@tanstack/react-query-next-experimental": "^5.62.8",
+    "@vanilla-extract/css": "^1.17.0",


vanilla-extract를 사용하는 방법은 처음 봤어요..! 이게 성능 최적화 및 타입 안정성을 중시하는 프로젝트에서 좋은 선택이 될 수 있다는 것을 새롭게 배우고 갑니다! 그런데 설정 과정이 복잡하고 동적 스타일 관리가 제한적이라는 단점도 있던데, 혹시 이번 프로젝트에서 선택하신 이유가 있을까요??

s-uxun · 2025-01-06T08:44:00Z

@@ -0,0 +1,26 @@
+"use server";


혹시 use server를 명시적으로 한 번 더 작성해주신 이유가 있을까요?? 안 써도 문제 없는 것으로 알고 있긴 한데, 쓰면 더 좋은 장점이 있는지 궁금합니다!

s-uxun · 2025-01-06T08:54:57Z

+            <Button
+              onClick={handleResult}
+              variant="result"
+              key={text}
+              text={text}
+            />


로그인을 하지 않고 나서 이 로직을 통해서 결과 보기를 들어갈 경우에는 "Application error: a client-side exception has occurred (see the browser console for more information)." 와 같은 에러가 뜨고 있습니다! accessToken이 없는 상태에서 요청을 해서 그런 거 같기도 한데, 그렇다면 토큰이 있을 때만 해당 버튼을 노출시켜주시는 게 더 좋을 듯 합니다!

s-uxun · 2025-01-06T09:02:05Z

+export default function Container() {
+  const { data, isLoading, isError } = useQuery<Team[]>({
+    queryKey: ["teams"],
+    queryFn: teamlist,
+  });
+
+  const router = useRouter();
+  const [clickedTeam, setClickedTeam] = useState(0);
+
+  function handleClickTeam(teamId: number) {
+    setClickedTeam(teamId);
+  }
+
+  const mutation = useMutation({
+    mutationFn: teamvote,
+    onSuccess: async () => {
+      console.log("성공");
+      router.push("/demoresult");
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });


해당 부분을 실행했을 때, api 요청 및 응답에는 문제가 없었습니다! 다만 사용자 관점에서, 다소 의문스러운 부분이 있었어요. 제가 살펴본 결과, 현재 로그인한 유저가 자신에게 파트장 투표를 하거나, 자신의 팀에게 테모데이 투표를 하면 back에서 무효표로 처리하고 있는 것 같아요. (+1이 아니라 +0) 콘솔에서는 '성공'으로 찍히지만, 바로 다음 결과 화면에선 투표수에 변동이 없을 테니 사용자 입장에서는 오류가 났다고 느껴질 수 있을 듯 합니다. 이를 방지하려면 프론트단에서 사용자가 자신의 이름이나 팀을 선택하려고 할 경우 클릭을 막고 alert를 띄우는 등의 조치를 취해주시거나, 아니면 백과 협의해서 사용자가 자신의 이름이나 팀에 투표할 경우 에러를 반환하도록 수정한 뒤, 해당 오류 코드에 맞춰 프론트에서 안내 모달을 띄우는 방식을 추천드립니다!

hae2ni added 30 commits December 19, 2024 16:39

init: npx create-next

40b53d8

init: add vanila-extract

3f5239e

init: reactquery

c7a1383

init: page.tsx

7feb403

pack: add vanila-extract/css

e4733a4

design: SigninPageLayout

f8354a4

etc: 폴더 이동동

b01aa75

etc: 파일 이름 정리리

a641991

design: loginpagelayout

bcf9ed6

design: loginPage

29c275d

design: Demoday vote layout

9abe0f5

design: demovotepage

e1abd6c

design: demoresultlayout

fbb4404

design: add global style

4b00a5a

design: header button

05d26f3

init: add svg for nextjs

e8c9d4c

assets: add svg

d5d51b1

design: ceos

8d80379

design: buttons from header

825bf32

design: global css + header css

1e42579

design: ceos logo

255b4dc

desgin: header

662b772

Merge branch 'develop' of https://github.com/Netflix-Clone-CEOS/next-…

b887bbf

…vote-20th into heain

design: fontface

6dab773

design: demoday result

7791f38

design: demoday voting

af33c1b

design: button

ab9e009

fix: type error

9c8a1a0

design: 디자인 반영영

08d5217

design: layout 변경경

08ccbf0

hae2ni and others added 25 commits January 3, 2025 11:25

[ feat ] button 돌아가기기

66538da

[ feat ] logout 추가가

3763c36

[ fix ] 오타좀,,

0bb83d3

Merge pull request #3 from Netflix-Clone-CEOS/haein2

5a865f1

Haein2

[ feat ] fe 파트장 투표 후보 리스트 api 연결

b124ee5

[ feat ] be 파트장 투표 후보 리스트 api 연결

5bd35df

[ fix ] 백엔드 파트장 투표 버튼 수정

736ffc0

[ feat ] fe 파트장 투표 결과 api 연결

7840013

[ feat ] be 파트장 투표 결과 api 연결

0176983

[ design ] 헤더 스타일링 수정

daab06c

[ chore ] 헤더 로고 네비게이션 추가

100264a

[ feat ] 후보 상세보기 모달 자기소개 api 연결

13ce0cf

[ feat ] 파트장 투표 api 연결

ed98b2d

Merge pull request #4 from Netflix-Clone-CEOS/gabin2

7f41e05

Gabin2

[ feat ] 파트장 투표 페이지 돌아가기 버튼

f3f3fe5

[ design ] 결과보기 버튼 스타일링 수정

2807dca

[ design ] 파트장 투표 결과 페이지 스타일 수정

2e3678b

[ desgin ] 파트장 투표 후보 호버링 애니메이션 추가

2b04af3

[ design ] 데모데이 투표 호버링 및 클릭 스타일 코드 수정

994898f

[ chore ] layout.tsx 수정

786d836

Merge pull request #5 from Netflix-Clone-CEOS/refactor

f532de5

Refactor

[ fix ] 파트장 투표 페이지 빌드 에러

2d8b4ab

[ fix ] 파트장 투표 페이지 빌드 에러

01514a9

[ delete ] 안 쓰는 Buttons 컴포넌트 삭제

127bc3e

[ deploy ] 배포 브랜치 변경

cbf88a7

hiwon-lee reviewed Jan 6, 2025

View reviewed changes

everything-flows reviewed Jan 6, 2025

View reviewed changes

jiwonnchoi reviewed Jan 6, 2025

View reviewed changes

s-uxun reviewed Jan 6, 2025

View reviewed changes

Conversation

billy0904 commented Jan 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗳️투표 시스템

Comments

Uh oh!

hiwon-lee 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!

everything-flows 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!

Choose a reason for hiding this comment

Uh oh!

jiwonnchoi 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jinnyleeis commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

s-uxun 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

billy0904 commented Jan 4, 2025 •

edited

Loading

jinnyleeis commented Jan 6, 2025 •

edited

Loading