[Feat/#283] 방 생성 정보입력 페이지 프로그레스바 구현 #292
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
simeunseo
approved these changes
Jul 29, 2024
| @@ -42,7 +45,16 @@ function CreateMeeting() { | |||
| } | |||
|
|
|||
| export default CreateMeeting; | |||
|
|
|||
| const StepBar = styled.div<{ step: number }>` | |||
| width: ${({ step }) => `calc(100%* ${step}/6)`}; | |||
There was a problem hiding this comment.
선호시간대 입력 뷰 없애면, step의 범위는 0~5(6단계)인데 프로그레스바는 1/6만큼 채워져있는 상태에서 시작해야해서, 1/6, 2/6, 3/6, 4/6, 5/6, 6/6 이렇게 변화해야하니 아래와 같이 해야하지 않나 싶은데,, 한번 확인해주세요!
Suggested change
| width: ${({ step }) => `calc(100%* ${step}/6)`}; | |
| width: ${({ step }) => `calc(100%* ${step + 1}/6)`}; |
There was a problem hiding this comment.
<StepBar step={step + 1} />
이렇게 넣어주고 있어 구현상 문제는 없습니다!
simeunseo
reviewed
Jul 29, 2024
| @@ -42,7 +45,16 @@ function CreateMeeting() { | |||
| } | |||
|
|
|||
| export default CreateMeeting; | |||
|
|
|||
| const StepBar = styled.div<{ step: number }>` | |||
There was a problem hiding this comment.
StepBar의 width가 변경될 때 transition이 있으면 훨씬 좋을 것 같은데요!
transition: width 0.3s;정도 추가해주는 것 어떻게 생각하시나요?
그러면 이렇게 부드러워집니당
그리고 이 결과물을 디자인쪽에 보여주면서 어떤지, 조정이 필요할지 물어보면 좋을거같아욥
2024-07-29.7.41.01.mov
There was a problem hiding this comment.
이방향성이 더 좋은 것 같아 이렇게 진행하겠습니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🌀 해당 이슈 번호
🔹 어떤 것을 변경했나요?
🔹 어떻게 구현했나요?
step에 따라 bar의 색상을 변경해서 구현
🔹 PR 포인트를 알려주세요!
커밋이 한개인게 포인트...
🔹 스크린샷을 남겨주세요!