Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ Feat/#481] 그룹 생성페이지 플로우 반응형 전환 #483

Merged
merged 10 commits into from
Dec 12, 2024

Conversation

ljh0608
Copy link
Member

@ljh0608 ljh0608 commented Dec 1, 2024

✨ 해당 이슈 번호 ✨

#481

todo

  • 그룹 생성페이지 - 그룹 정보입력 반응형 구현
  • 그룹 생성페이지 - 리더 정보 입력 반응형 구현
  • 그룹 생성페이지 - 그룹 생성 축하페이지 반응형 구현

📌 내가 알게 된 부분

📌 질문할 부분

  • 헤더와 모달부분은 업무 분배에 따라 아직 적용되기 전 상태입니다!

📌스크린샷(선택)

image
image

@ljh0608 ljh0608 added ✨ Feature 새로운 기능 추가 (새로운 구현) 💄 Design 스타일 수정 재훈 labels Dec 1, 2024
@ljh0608 ljh0608 self-assigned this Dec 1, 2024
Copy link

vercel bot commented Dec 1, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mile-client ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 12, 2024 4:01am

@github-actions github-actions bot added the size/m size/m label Dec 1, 2024
@ljh0608 ljh0608 changed the title [ Feat/#481/responsive ] 그룹 생성페이지 플로우 반응형 전환 [ Feat/#481] 그룹 생성페이지 플로우 반응형 전환 Dec 2, 2024
Copy link
Member

@namdaeun namdaeun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반응형 전환 고생하셨습니다 !!
스타일 코드 중 사용하지 않는 주석들만 지워주면 더 좋을 것 같아요 🚀

@@ -255,6 +257,11 @@ const BtnWrapper = styled.div`
flex-direction: column;
gap: 1.2rem;
width: 82.6rem;

@media ${MOBILE_MEDIA_QUERY} {
flex-direction: row-reverse;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P5) 오호 이 속성 사용하는 건 처음 보는데 이런식으로 배치를 적용해줄 수 있겠군요 👍🏻

@@ -192,7 +187,7 @@ const CreateGroupInfo = ({
<Spacing marginBottom="2.4" />
<picture>
<source srcSet={createGroupWebp} />
<img src={createGroupIlust} />
<GroupImage src={createGroupIlust} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1) alt 속성으로 어떤 이미지인지에 대한 설명도 추가해주면 좋을 것 같아요 !

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영했습니다!

isValid={leaderPenName.length <= 8}
onChange={(e) => handleLeaderNameInput(e)}
maxLength={9}
/>{' '}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3) {' '} 코드 불필요하면 지워줍시다 !

Copy link
Contributor

@moondda moondda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Copy link
Contributor

@se0jinYoon se0jinYoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굿굿 코멘트 몇개만 확인해주세요!
반응형인만큼 스크린샷 영상으로 올리면 좋을 것 같아요! 수고하셨습니다~~

@@ -403,13 +431,16 @@ const GroupInfoWrppaer = styled.section`
`;

const TextAreaLength = styled.p<{ isValid: boolean }>`
position: relative;
position: absolute;
right: 45px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1) 이거 px로 되어있는 이유가 뭔가요?

bottom: 4rem;
left: 70.6rem;

/* left: 70.6rem; */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1) 지욷기~

Comment on lines 1 to 8
export const InputInfoMsg = {
groupNameLength: '10자 이내로 작성해주세요.',
groupNameNotAvailable: '이미 사용중인 모임명입니다.',
groupNameNotCheck: '중복확인을 해주세요.',
groupNameAvailable: '사용 가능한 모임명입니다.',
groupNameEmpty: '글모임 이름을 입력해주세요.',
emptyText: '',
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p5) const니까 대문자로 export해도 좋을 것 같아용

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영완료했습니다!

padding: 6.4rem 0;
width: 100%;

/* height: calc(100% - 44px); */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1) 여기저기 주석 지워주세용~

@ljh0608 ljh0608 merged commit 83fa2de into develop Dec 12, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💄 Design 스타일 수정 ✨ Feature 새로운 기능 추가 (새로운 구현) size/m size/m 재훈
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants