-
Notifications
You must be signed in to change notification settings - Fork 0
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: 꿀조합 상세 페이지 디자인 마이그레이션 #71
Changes from 21 commits
6ec7c71
9aaa7cc
c33a49f
c9359d4
ff2ac0d
1fc7105
73207e0
fdd166b
f5a7463
9b5c016
826c9b9
24faade
c317c40
9e9cd24
667b0e5
d5229c1
b8274db
c716be5
5c3dcfd
5839161
ce6c61c
adcd805
a272d01
09f99d9
ad18363
00cc55a
8d5990f
feb7e1f
c8a671a
5721558
321cdd2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 우리 이 Title 컴포넌트 통일 해야할 거 같아요. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 그렇네여 안그래도 이거 한 번 정리 들어가야 할 것 같다고 생각했어요🤔 일단 이번 pr은 냅두고 작업하시면 나중에 합치는걸로 해요 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 요거 지금 제가 작업중임다 일단 머지하구 나중에 제가 갈아끼울게용~~ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,34 @@ | ||
import { Button, Heading, Link, theme } from '@fun-eat/design-system'; | ||
import { Link as RouterLink } from 'react-router-dom'; | ||
import styled from 'styled-components'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
import { SvgIcon } from '@/components/Common'; | ||
import { useRoutePage } from '@/hooks/common'; | ||
import { container, wrapper } from './sectionTitle.css'; | ||
|
||
import { SvgIcon, Text } from '@/components/Common'; | ||
import { PATH } from '@/constants/path'; | ||
import { vars } from '@/styles/theme.css'; | ||
|
||
interface SectionTitleProps { | ||
name: string; | ||
link?: string; | ||
hasSearchLink?: boolean; | ||
} | ||
|
||
const SectionTitle = ({ name, link }: SectionTitleProps) => { | ||
const { routeBack } = useRoutePage(); | ||
|
||
const SectionTitle = ({ name, hasSearchLink }: SectionTitleProps) => { | ||
return ( | ||
<SectionTitleContainer> | ||
<SectionTitleWrapper> | ||
<Button type="button" variant="transparent" onClick={routeBack} aria-label="뒤로 가기"> | ||
<SvgIcon variant="arrow" fill={theme.colors.gray5} width={15} height={15} /> | ||
</Button> | ||
{link ? ( | ||
<Link as={RouterLink} to={link} block> | ||
<ProductName size="xl">{name}</ProductName> | ||
</Link> | ||
) : ( | ||
<ProductName size="xl">{name}</ProductName> | ||
)} | ||
{link && <SvgIcon variant="link" width={20} height={20} />} | ||
</SectionTitleWrapper> | ||
</SectionTitleContainer> | ||
<div className={container}> | ||
<div className={wrapper}> | ||
<Link to=".." relative="path"> | ||
<SvgIcon variant="arrowLeft" stroke={vars.colors.black} height={24} /> | ||
</Link> | ||
<Text size="headline" weight="semiBold"> | ||
{name} | ||
</Text> | ||
</div> | ||
{hasSearchLink && ( | ||
<Link to={PATH.SEARCH}> | ||
<SvgIcon variant="search2" stroke={vars.colors.black} width={20} height={20} /> | ||
</Link> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default SectionTitle; | ||
|
||
const SectionTitleContainer = styled.div` | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
`; | ||
|
||
const SectionTitleWrapper = styled.div` | ||
display: flex; | ||
align-items: center; | ||
svg { | ||
padding-top: 2px; | ||
} | ||
`; | ||
|
||
const ProductName = styled(Heading)` | ||
margin: 0 5px 0 16px; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { style } from '@vanilla-extract/css'; | ||
|
||
export const container = style({ | ||
display: 'flex', | ||
justifyContent: 'space-between', | ||
alignItems: 'center', | ||
}); | ||
|
||
export const wrapper = style({ | ||
display: 'flex', | ||
gap: 18, | ||
alignItems: 'flex-start', | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
import cx from 'classnames'; | ||
|
||
import { text } from './text.css'; | ||
import type { TextElement, TextVariants, OverridableComponentPropsWithoutRef } from './text.types'; | ||
|
||
|
@@ -9,12 +11,13 @@ const Text = <T extends TextElement = 'p'>({ | |
weight = 'regular', | ||
color = 'default', | ||
as, | ||
className, | ||
...props | ||
}: TextProps<T>) => { | ||
const Component = as || 'p'; | ||
|
||
return ( | ||
<Component className={text({ color, size, weight })} {...props}> | ||
<Component className={cx(text({ color, size, weight }), className)} {...props}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 웅? 이거 밑에 PR에서도 본 거 같은데? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 넹넹 마자여 밑에 PR이 머지 안돼서 여기도 바꿔놨어요 |
||
{children} | ||
</Component> | ||
); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,14 @@ | ||
import { Button, Spacing, Text, Textarea, useTheme, useToastActionContext } from '@fun-eat/design-system'; | ||
import { useToastActionContext } from '@fun-eat/design-system'; | ||
import type { ChangeEventHandler, FormEventHandler, RefObject } from 'react'; | ||
import { useState } from 'react'; | ||
import styled from 'styled-components'; | ||
|
||
import { SvgIcon } from '@/components/Common'; | ||
import { commentForm, commentTextarea, container } from './commentForm.css'; | ||
|
||
import { SvgIcon, Text } from '@/components/Common'; | ||
import { useScroll } from '@/hooks/common'; | ||
import { useMemberQuery } from '@/hooks/queries/members'; | ||
import { useRecipeCommentMutation } from '@/hooks/queries/recipe'; | ||
import { vars } from '@/styles/theme.css'; | ||
|
||
interface CommentFormProps { | ||
recipeId: number; | ||
|
@@ -15,10 +18,11 @@ interface CommentFormProps { | |
const MAX_COMMENT_LENGTH = 200; | ||
|
||
const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { | ||
const { data: member } = useMemberQuery(); | ||
|
||
const [commentValue, setCommentValue] = useState(''); | ||
const { mutate } = useRecipeCommentMutation(recipeId); | ||
|
||
const theme = useTheme(); | ||
const { toast } = useToastActionContext(); | ||
|
||
const { scrollToPosition } = useScroll(); | ||
|
@@ -51,54 +55,31 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { | |
}; | ||
|
||
return ( | ||
<CommentFormContainer> | ||
<Form onSubmit={handleSubmitComment}> | ||
<CommentTextarea | ||
placeholder="댓글을 입력하세요. (200자)" | ||
<div className={container}> | ||
<img src={member?.profileImage} width={29} height={29} alt={`${member?.nickname}의 프로필 사진`} /> | ||
<form className={commentForm} onSubmit={handleSubmitComment}> | ||
<textarea | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이거 못땡기게 하는 방법 있으려나..? 찾아볼게요 높이 고정하는거 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. css resize 속성 있슴다 |
||
className={commentTextarea} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
placeholder="댓글을 남겨보세요! (200자)" | ||
value={commentValue} | ||
onChange={handleCommentInput} | ||
maxLength={MAX_COMMENT_LENGTH} | ||
rows={1} | ||
/> | ||
<SubmitButton variant="transparent" disabled={commentValue.length === 0}> | ||
<Text size="caption4" color="disabled"> | ||
{commentValue.length}/200 | ||
</Text> | ||
<button> | ||
<SvgIcon | ||
variant="plane" | ||
width={30} | ||
height={30} | ||
fill={commentValue.length === 0 ? theme.colors.gray2 : theme.colors.gray4} | ||
width={18} | ||
height={18} | ||
fill={commentValue.length === 0 ? vars.colors.gray3 : vars.colors.gray5} | ||
/> | ||
</SubmitButton> | ||
</Form> | ||
<Spacing size={8} /> | ||
<Text size="xs" color={theme.textColors.info} align="right"> | ||
{commentValue.length}자 / {MAX_COMMENT_LENGTH}자 | ||
</Text> | ||
</CommentFormContainer> | ||
</button> | ||
</form> | ||
</div> | ||
); | ||
}; | ||
|
||
export default CommentForm; | ||
|
||
const CommentFormContainer = styled.div` | ||
position: fixed; | ||
bottom: 0; | ||
width: calc(100% - 40px); | ||
max-width: 540px; | ||
padding: 16px 0; | ||
background: ${({ theme }) => theme.backgroundColors.default}; | ||
`; | ||
|
||
const Form = styled.form` | ||
display: flex; | ||
gap: 4px; | ||
justify-content: space-around; | ||
align-items: center; | ||
`; | ||
|
||
const CommentTextarea = styled(Textarea)` | ||
height: 50px; | ||
padding: 8px; | ||
`; | ||
|
||
const SubmitButton = styled(Button)` | ||
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { vars } from '@/styles/theme.css'; | ||
import { style } from '@vanilla-extract/css'; | ||
|
||
export const container = style({ | ||
display: 'flex', | ||
gap: 8, | ||
alignItems: 'center', | ||
marginBottom: 24, | ||
padding: '6px 13px 6px 6px', | ||
background: vars.colors.background.category, | ||
borderRadius: 20, | ||
}); | ||
|
||
export const commentForm = style({ | ||
display: 'flex', | ||
gap: 8, | ||
alignItems: 'center', | ||
width: '100%', | ||
}); | ||
|
||
export const commentTextarea = style({ | ||
width: '100%', | ||
height: '100%', | ||
border: 'none', | ||
outline: 'none', | ||
background: 'none', | ||
fontSize: '1.4rem', | ||
|
||
selectors: { | ||
'&:placeholder': { | ||
color: '#808080', | ||
}, | ||
}, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
얘가 지금 저랑 겹치는 아이콘인데, 저는 disk라는 이름으로 해놨거든요?
만약 제 레시피 PR이 먼저 머지되면, 타미가 땡긴후에 지우면 되고
타미 PR이 먼저 머지되면, 제가 땡긴 후에 컴포넌트도 교체할게요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오케............