[토너먼트] 토너먼트 인트로 화면 퍼블리싱 #54

imeureka · 2024-01-09T15:10:06Z

이슈 넘버

close [토너먼트] 인트로 화면 뷰 작업 #33

구현 사항

유저이름 recoil로 받아와서 title 설정
아이템 개수는 배열로 아이템들을 받아오면 배열 수 계산 로직해서 카운팅해서 할 예정입니다.
시작하기 버튼은 호은이의 공통하기 버튼을 적용할 예정입니다!

Need Review

container에 이제 세부 컴포넌트들을 박아넣었는데 가독성과 코드 분리를 이렇게 하면 잘 되더라고요! 그런데 page에 상단컴포넌트명 wrapper 씌우고 container 불러왔는데 명확해보이진 않는 거 같아서 컨테이너 지우고 페이지에 컨테이너를 분리해서 넣어야 하나 고민하고 있습니다!
임시로 리코일 userName 지정했습니다. 이름을 전역 관리에 대해서 계속 고민해보겠습니다. (로컬스토리지 사용..?)

📸 스크린샷

Reference

urjimyu

고생하셨습니다!! 코드 구조랑 시맨틱 태그 섬세하게 고민하면서 구현하신 게 느껴졌습니다 최고👍

urjimyu · 2024-01-10T05:15:41Z

src/components/tournament/intro/TournamentContainer.tsx

+import styled from 'styled-components';
+import { Svg3Dicons } from '../../../assets/svg';
+
+export default function TournamentConatainer() {


아주 사소하지만 Container 오타인 것 같아요~!

urjimyu · 2024-01-10T05:16:10Z

src/components/tournament/intro/TournamentContainer.tsx

+      <TournamentStartText />
+      <TournamentItemCount />
+      <TournamentImg>
+        <Svg3Dicons />
+      </TournamentImg>


너무 깔끔하고 좋아요👍👍

urjimyu · 2024-01-10T05:17:09Z

src/components/tournament/intro/tournamentStartText/TournamentStartText.tsx

+import * as S from './TournamentStartText.style';
+
+export default function TournamentStartText() {
+  const userName = useRecoilValue(userNameState);


리코일까지 작성한 거 넘 좋아요🙌

저도 같은 방식으로 추후에 구현하겠습니다. 감사합니다 ㅎㅎ

넘 좋아요 !!! 빠르게 로그인이 되어야 겠군요 : - )

urjimyu · 2024-01-10T05:17:50Z

src/components/tournament/intro/tournamentStartText/TournamentStartText.tsx

+import { userNameState } from '../../../../recoil/atoms';
+import * as S from './TournamentStartText.style';
+
+export default function TournamentStartText() {


rface 써서 화살표 함수로 바꾸면 좋을 것 같아요~!

화살표 함수 리팩토링 코드리뷰 반영해놓겠습니다 감사해요!

ExceptAnyone · 2024-01-10T05:25:55Z

src/components/tournament/intro/TournamentContainer.tsx

+const TournamentImg = styled.div`
+  width: 20rem;
+  height: 20rem;
+  margin: 0 auto;


덕분에 margin 0 auto 알아갑니다 :)

hoeun0723

고생 많으셨습니다 : ) 간단한 부분만 수정하고 merge 해도 되지 않을까 생각합니다 !

hoeun0723 · 2024-01-10T05:47:16Z

src/components/tournament/intro/tournamentStartText/TournamentStartText.tsx

+import * as S from './TournamentStartText.style';
+
+export default function TournamentStartText() {
+  const userName = useRecoilValue(userNameState);


넘 좋아요 !!! 빠르게 로그인이 되어야 겠군요 : - )

hoeun0723 · 2024-01-10T05:48:41Z

src/components/tournament/intro/TournamentContainer.tsx

+import TournamentStartText from './tournamentStartText/TournamentStartText';
+import TournamentItemCount from './tournamentItemCount/TournamentItemCount';
+import styled from 'styled-components';
+import { Svg3Dicons } from '../../../assets/svg';
+
+export default function TournamentConatainer() {
+  return (
+    <>
+      <TournamentStartText />
+      <TournamentItemCount />
+      <TournamentImg>
+        <Svg3Dicons />
+      </TournamentImg>
+      {/* 공통버튼 btn_cta_fill 들어갈 예정*/}
+    </>
+  );
+}
+
+const TournamentImg = styled.div`
+  width: 20rem;
+  height: 20rem;
+  margin: 0 auto;


이 파일에 대한 스타일 코드는 따로 하지 않은 이유가 있는지 궁금합니다 !! 추후 확장성을 위해 컨벤션을 맞추면 좋지 않을까 생각해서요! :)

hoeun0723 · 2024-01-10T05:49:23Z

src/pages/TournamentPage.tsx

+import styled from 'styled-components';
+import TournamentConatainer from '../components/tournament/intro/TournamentContainer';
+
+const TournamentPage = () => {
+  return (
+    <TournamentPageWrapper>
+      <TournamentConatainer />
+    </TournamentPageWrapper>
+  );
+};
+
+export default TournamentPage;
+
+const TournamentPageWrapper = styled.section`
+  margin: 0 2rem;
+`;


이 파일에서의 스타일 코드 분리도 컨벤션처럼 하면 어떤가 ! 합니다

특별한 이유가 있었다면 답글로 달아주세요 !! : )

아! 제가 작업할 때 밑에 적고 분리를 추후에 해서 빼먹었던 것 같네요! 빠르게 코드리뷰 반영해놓을게요 감사해요!

hoeun0723 · 2024-01-10T05:50:43Z

src/recoil/atoms.ts

+export const userNameState = atom({
+  key: '',
+  default: '시동훈',
+});


크크 추후 바꾸겠지만, key 값을 유니크하게 적어주는 것도 잊지 않으면 좋을 거 같아요 !!

github-actions · 2024-01-10T06:06:32Z

PR Preview Action v1.4.6
🚀 Deployed preview to https://SWEET-DEVELOPERS.github.io/sweet-client/pr-preview/pr-54/
on branch `gh-pages` at 2024-01-10 06:06 UTC

imeureka added 14 commits January 9, 2024 05:12

feat: 토너먼트 인트로 - 시작말 컴포넌트 구현

f6eb747

feat: 토너먼트 등록 선물 개수 컴포넌트 구현

57da97b

feat: 토너먼트 인트로 컨테이너 컴포넌트 구현

6816a53

feat: 토너먼트 인트로 시작하기 버튼 컴포넌트 구현

d450734

Merge branch 'develop' into feat/#33-tournament-intro

c578d40

chore: 아이콘 이미지 추가

af1a54c

chore: 아이콘 3d 토너먼트 추가

4820b5c

feat: router 토너먼트 페이지 추가

7ee9506

feat: 토너먼트 인트로 컨테이너 컴포넌트 구현

5167615

feat: 총 등록 아이템 컴포넌트 구현

c7f484e

docs: 폴더구조 변경

530d6c3

Merge branch 'develop' into feat/#33-tournament-intro

ca653f0

chore: 아이템 개수 변수명 변경

3ee0d32

style: gap 설정

8b6e348

imeureka added feat💡 기능 구현 style🎨 작은 사항 수정 및 style 코드 작성 토너먼트 🏆 토너먼트 페이지 labels Jan 9, 2024

imeureka requested review from hoeun0723, urjimyu and ExceptAnyone January 9, 2024 15:10

imeureka self-assigned this Jan 9, 2024

urjimyu approved these changes Jan 10, 2024

View reviewed changes

ExceptAnyone reviewed Jan 10, 2024

View reviewed changes

ExceptAnyone approved these changes Jan 10, 2024

View reviewed changes

hoeun0723 approved these changes Jan 10, 2024

View reviewed changes

Merge branch 'develop' into feat/#33-tournament-intro

7913e8c

imeureka merged commit a244f87 into develop Jan 10, 2024
1 check passed

imeureka deleted the feat/#33-tournament-intro branch February 2, 2024 05:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[토너먼트] 토너먼트 인트로 화면 퍼블리싱 #54

[토너먼트] 토너먼트 인트로 화면 퍼블리싱 #54

imeureka commented Jan 9, 2024

urjimyu left a comment

urjimyu Jan 10, 2024

urjimyu Jan 10, 2024

urjimyu Jan 10, 2024

ExceptAnyone Jan 10, 2024

hoeun0723 Jan 10, 2024

urjimyu Jan 10, 2024

imeureka Jan 10, 2024

ExceptAnyone Jan 10, 2024

hoeun0723 left a comment

hoeun0723 Jan 10, 2024

hoeun0723 Jan 10, 2024

hoeun0723 Jan 10, 2024

imeureka Jan 10, 2024

hoeun0723 Jan 10, 2024

github-actions bot commented Jan 10, 2024

[토너먼트] 토너먼트 인트로 화면 퍼블리싱 #54

[토너먼트] 토너먼트 인트로 화면 퍼블리싱 #54

Conversation

imeureka commented Jan 9, 2024

이슈 넘버

구현 사항

Need Review

📸 스크린샷

Reference

urjimyu left a comment

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

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

Choose a reason for hiding this comment

hoeun0723 left a comment

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 10, 2024