[FEAT] 게임화면 및 대기화면 기능 구현 #54

novice0840 · 2024-07-23T10:25:14Z

Issue Number

#46

As-Is

메인 화면과 닉네임 생성 화면이 없던 상황

To-Be

메인 화면 및 방 만들기 기능
닉네임 입력 및 랜덤 닉네임 생성

Check List

테스트가 전부 통과되었나요?
모든 commit이 push 되었나요?
merge할 branch를 확인했나요?
Assignee를 지정했나요?
Label을 지정했나요?

Test Screenshot

(Optional) Additional Description

rbgksqkr

빠른 작업 처리 너무 좋습니다 포메!!! 닉네임 빼고는 참고사항이라 approve 드릴게요! 참고로 reviewer에 안달아주시면 메일이 안와요ㅜ 그리고 UI 작업이나 컴포넌트 작업을 했을 때는 화면 스크린샷을 찍어주시면 좋을 것 같아요! 수고하셨습니당

rbgksqkr · 2024-07-23T16:54:31Z

frontend/src/components/layout/Content/Content.tsx


 const Content = ({ children }: PropsWithChildren) => {
-  return <section css={contentSection}>{children}</section>;
+  return <section css={contentLayout}>{children}</section>;


L5 - 참고 의견

layout 명 고치느라 고생많았네요!!! 컨벤션 지키려고 노력하는 거 아주 좋습니당

rbgksqkr · 2024-07-23T16:57:33Z

frontend/src/pages/MainPage/MainPage.tsx

+    <div css={mainPageLayout}>
+      <div css={logoWrapper}>LO to the GO</div>
+      <h1 css={title}>땅콩</h1>
+      <div css={intro}>어색한 분위기를 주도해봐요</div>


L4 - 변경 제안

기본 텍스트에는 span 태그나 h1 다음으로 h2 를 사용하는 것도 좋아보이네요! reset css 를 적용했으니 폰트 크기 외에 태그의 웹 접근성 측면만 고려해도 괜찮을 것 같네용

이미 폰트 사이즈가 적용되어 있으니 굳이 h1을 안써도 될 것 같긴하네요

아뇨?? h1은 좋고 div를 span 아니면 h2 로 두면 좋겠다는 의견이였습니다!

아! 아랫 문장 말하는거였군요. 잘못 이해했어용

rbgksqkr · 2024-07-23T16:58:41Z

frontend/src/pages/NicknamePage/NicknamePage.styled.ts

+  display: flex;
+  align-items: center;
+  width: 26.8rem;
+  height: 4.9rem;


L5 - 참고 의견

이렇게 애매한 숫자가 나온 이유가 있을까요?? 피그마를 그대로 옮긴거라면 디지안할 때 너비랑 높이를 다 지정하면서 하진 않았어서 이런 값이 나온 것 같아요! 4px 단위로 하면 좋을 것 같습니당

rbgksqkr · 2024-07-23T16:59:14Z

frontend/src/router/index.tsx

 import RoundResultPage from '@/pages/RoundResultPage/RoundResultPage';

 export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainPage />,


L5 - 참고 의견

오호 메인페이지만 헤더가 없게 만들 수 있군요! 좋네요 ㅎㅎ

rbgksqkr · 2024-07-23T16:59:37Z

frontend/src/styles/Theme.ts

+  gray200: '#F3F1F1',
+  gray300: '#E4E4E4',
+  gray400: '#9D9B9B',
+  gray500: '#7A7A7A',


L5 - 참고 의견

테마 색상 상수화 아주 좋습니다 ㅎㅎ

rbgksqkr · 2024-07-23T17:00:26Z

frontend/src/utils/nickname.ts

@@ -0,0 +1,9 @@
+export const createRandomNickname = () => {
+  const adjectives = ['배고픈', '성실한', '욕망의', '섹시한', '멋있는', '타락한'];
+  const nouns = ['마루', '썬데이', '프린', '이든', '포메', '타칸', '커찬'];


L4 - 변경 제안

형용사랑 명사 랜덤으로 닉네임 나오는 거 재밌게 좋네요 ㅎㅎ 근데 배포될 것을 고려하면 동물 이름이나 ~땅콩 으로 고정해놓는 건 어떨까요??

L4 - 변경 제안

const adjectives = [ '춤추는', '노래하는', '웃긴', '귀여운', '사랑스러운', '재치있는', '기운찬', '활발한', '지적인', '영리한', '장난꾸러기', '유쾌한', '깔끔한', '매력적인', '화려한', '신나는', '용감한', '상냥한', '달콤한', '기발한', '짜릿한', '다정한', '평온한', '쾌활한', '따뜻한', '호기심 많은', '재빠른', '천재적인', '엉뚱한', '호탕한', '멋진', '섹시한', '발랄한', '당당한', '명랑한', '흥미로운' ];

저도 여러개 가져왔습니다 푸하하 부정적인 단어는 빼고 조금 더 다양하게 넣어보았어요. 이렇게 다양하게 되면 nonus는 땅콩으로 고정되어도 될 것 같고요. 다들 어떻게 생각하시는지 ?

rbgksqkr · 2024-07-23T17:01:11Z

frontend/src/components/common/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { buttonLayout } from './Button.styled';

 interface ButtonProps {
-  text: '선택' | '확인' | '다음';
+  text: string;


L5 - 참고 의견

저도 수정하면서 좀 고민이 되었는데 버튼 내의 텍스트는 그냥 string으로 열어둬도 괜찮을 것 같긴 하네용

useon

폼에 ~ 빠른 구현 너무 좋네요 👍🚀 몇 가지 코멘트 달았는데 확인해 주시고 함께 이야기 나눠 보아요 ~! ! ! 👏

useon · 2024-07-24T04:52:26Z

frontend/src/pages/NicknamePage/NicknamePage.tsx

+  const randomNickname = createRandomNickname();
+
+  return (
+    <Content>


L5 - 참고 의견

알아서 찰떡 같이 공통 Content layout 잘 적용하신 모습을 보니 뿌듯하네요 ✨

useon · 2024-07-24T04:57:13Z

frontend/src/pages/NicknamePage/NicknamePage.tsx

+      <div css={profile}></div>
+      <div css={nickname}>닉네임</div>
+      <div css={nicknameInputWrapper}>
+        <input css={nicknameInput} type="text" placeholder={randomNickname} />


L4 - 변경 제안

저희 근데 어차피 지금은 닉네임을 변경할 수 없으니 placeholder로 안 하고 value에 넣어도 되지 않을까 하는 생각도 있는데, 어떻게 생각하시나요 ?

value랑 placeholder 둘 다 변경이 가능해서 기능 상의 차이는 없지 않을까 생각합니다!

useon · 2024-07-24T04:59:33Z

frontend/src/router/index.tsx

+        element: <div>게임 대기 화면</div>,
+      },
+      {
+        path: 'game/:roundId',


L3 - 중요 질문

저희 path에 roundId를 보여주지 않기로 협의한 것 같아서 이야기 나눠보고 path를 수정해야할 것 같아요 ~!

아 그렇네요! roundId는 없는 게 맞을 것 같아요

useon · 2024-07-24T05:01:02Z

frontend/src/styles/Theme.ts

+  gray200: '#F3F1F1',
+  gray300: '#E4E4E4',
+  gray400: '#9D9B9B',
+  gray500: '#7A7A7A',
 } as const;


L5 - 참고 의견

찰떡같이 peanut과 맞춘 200, 300, 400, 500 형식 너무 좋네요 ^^

useon · 2024-07-24T05:06:15Z

frontend/src/utils/nickname.ts

@@ -0,0 +1,9 @@
+export const createRandomNickname = () => {
+  const adjectives = ['배고픈', '성실한', '욕망의', '섹시한', '멋있는', '타락한'];
+  const nouns = ['마루', '썬데이', '프린', '이든', '포메', '타칸', '커찬'];


L4 - 변경 제안

const adjectives = [ '춤추는', '노래하는', '웃긴', '귀여운', '사랑스러운', '재치있는', '기운찬', '활발한', '지적인', '영리한', '장난꾸러기', '유쾌한', '깔끔한', '매력적인', '화려한', '신나는', '용감한', '상냥한', '달콤한', '기발한', '짜릿한', '다정한', '평온한', '쾌활한', '따뜻한', '호기심 많은', '재빠른', '천재적인', '엉뚱한', '호탕한', '멋진', '섹시한', '발랄한', '당당한', '명랑한', '흥미로운' ];

저도 여러개 가져왔습니다 푸하하 부정적인 단어는 빼고 조금 더 다양하게 넣어보았어요. 이렇게 다양하게 되면 nonus는 땅콩으로 고정되어도 될 것 같고요. 다들 어떻게 생각하시는지 ?

novice0840 added ✨ feat 기능 추가 🫧 FE front end labels Jul 23, 2024

novice0840 added this to the FE Sprint2 milestone Jul 23, 2024

novice0840 self-assigned this Jul 23, 2024

novice0840 linked an issue Jul 23, 2024 that may be closed by this pull request

[FEAT] 게임화면 및 대기화면 기능 구현 #46

Closed

3 tasks

rbgksqkr approved these changes Jul 23, 2024

View reviewed changes

novice0840 requested a review from useon July 23, 2024 23:35

novice0840 added 7 commits July 24, 2024 14:09

feat: route 페이지 추가 #46

c382eb8

fix: css prop layout 컨벤션에 맞게 수정 #46

c179f82

fix: 공통 스타일 변경 #46

a3ed6cd

feat: main page UI #46

284ccb7

feat: nickname page UI #46

f595781

feat: 랜덤 닉네임 생성 #46

8febc71

fix: 태그명 변경 #46

f2f1669

useon reviewed Jul 24, 2024

View reviewed changes

useon approved these changes Jul 24, 2024

View reviewed changes

novice0840 force-pushed the feat/#46 branch from b2122df to f2f1669 Compare July 24, 2024 05:23

novice0840 added 3 commits July 24, 2024 14:30

fix: 랜덤 닉네임 생성 형용사 추가 #46

5dd6366

fix: 라우트 roundId 제거 #46

937783d

fix: css 최소 단위 통일화 #46

936ecaa

novice0840 merged commit 9c183a1 into develop Jul 24, 2024
1 check passed

GIVEN53 deleted the feat/#46 branch December 10, 2024 11:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT] 게임화면 및 대기화면 기능 구현 #54

[FEAT] 게임화면 및 대기화면 기능 구현 #54

novice0840 commented Jul 23, 2024 •

edited

Loading

rbgksqkr left a comment

rbgksqkr Jul 23, 2024

rbgksqkr Jul 23, 2024

novice0840 Jul 23, 2024

rbgksqkr Jul 24, 2024

novice0840 Jul 24, 2024

rbgksqkr Jul 23, 2024

rbgksqkr Jul 23, 2024

rbgksqkr Jul 23, 2024

rbgksqkr Jul 23, 2024

useon Jul 24, 2024

rbgksqkr Jul 23, 2024

useon left a comment

useon Jul 24, 2024

useon Jul 24, 2024

novice0840 Jul 24, 2024

useon Jul 24, 2024

novice0840 Jul 24, 2024

useon Jul 24, 2024

useon Jul 24, 2024

[FEAT] 게임화면 및 대기화면 기능 구현 #54

[FEAT] 게임화면 및 대기화면 기능 구현 #54

Conversation

novice0840 commented Jul 23, 2024 • edited Loading

Issue Number

As-Is

To-Be

Check List

Test Screenshot

(Optional) Additional Description

rbgksqkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L5 - 참고 의견

Choose a reason for hiding this comment

L4 - 변경 제안

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L5 - 참고 의견

Choose a reason for hiding this comment

L5 - 참고 의견

Choose a reason for hiding this comment

L5 - 참고 의견

Choose a reason for hiding this comment

L4 - 변경 제안

Choose a reason for hiding this comment

L4 - 변경 제안

Choose a reason for hiding this comment

L5 - 참고 의견

useon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L5 - 참고 의견

Choose a reason for hiding this comment

L4 - 변경 제안

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L3 - 중요 질문

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L5 - 참고 의견

Choose a reason for hiding this comment

L4 - 변경 제안

novice0840 commented Jul 23, 2024 •

edited

Loading