-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: 박스 svg icon 추가 * style: PageHeader import문 추가 * feat: RecipeFavoriteButton 컴포넌트 디자인 수정 * feat: 꿀조합 상세 페이지 디자인 수정 * feat: 댓글 리스트 스타일 마이그레이션 * feat: 댓글작성폼 스타일 마이그레이션 * fix: className 수정 * feat: 꿀조합 상세 페이지 title 스타일 수정 * feat: line height global style로 적용 * feat: plane 아이콘 교체 * style: 린트 적용 * feat: 댓글창 스타일 마이그레이션 * feat: section title 컴포넌트 디자인 마이그레이션 * feat: 꿀조합 상세페이지 Text 컴포넌트와 SectionTitle 컴포넌트로 교체 * feat: RecipeDetail 타입 변경 * feat: 사용한 상품 바텀시트 적용 * fix: 사진을 사용자의 프로필 사진으로 교체 * refactor: CommentItem의 텍스트를 Text 컴포넌트로 교체 * feat: borderRadius 삭제 * feat: svg icon 하나로 교체 * feat: favoriteButton 스타일 수정 * style: 린트 적용 * feat: 댓글 form 스타일 수정 * feat: 꿀조합 상세 디자인 변경 적용 * fix: rate->averageRating으로 이름 변경 * refactor: ProductOverviewItem -> ProductOVerviewList 컴포넌트로 교체 * feat: CommentList, CommentItem 스토리북 추가
- Loading branch information
Showing
26 changed files
with
482 additions
and
290 deletions.
There are no files selected for viewing
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
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
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
| 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; | ||
| `; |
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
| 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', | ||
| }); |
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { vars } from '@/styles/theme.css'; | ||
| import { style } from '@vanilla-extract/css'; | ||
|
|
||
| export const container = style({ | ||
| display: 'flex', | ||
| gap: 8, | ||
| alignItems: 'flex-end', | ||
| marginBottom: 24, | ||
| }); | ||
|
|
||
| export const commentForm = style({ | ||
| display: 'flex', | ||
| gap: 8, | ||
| alignItems: 'flex-end', | ||
| width: '100%', | ||
| padding: '6px 16px 9px 16px', | ||
| background: vars.colors.background.category, | ||
| borderRadius: 20, | ||
| }); | ||
|
|
||
| export const commentTextarea = style({ | ||
| width: '100%', | ||
| height: '100%', | ||
| border: 'none', | ||
| outline: 'none', | ||
| background: 'none', | ||
| fontSize: '1.4rem', | ||
| resize: 'none', | ||
|
|
||
| selectors: { | ||
| '&:placeholder': { | ||
| color: '#808080', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const profileImage = style({ | ||
| borderRadius: '50%', | ||
| }); | ||
|
|
||
| export const sendButton = style({ | ||
| display: 'inherit', | ||
| }); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import CommentItem from './CommentItem'; | ||
|
|
||
| import comments from '@/mocks/data/comments.json'; | ||
|
|
||
| const meta: Meta<typeof CommentItem> = { | ||
| title: 'recipe/CommentItem', | ||
| component: CommentItem, | ||
| args: { | ||
| recipeComment: comments.comments[0], | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = {}; |
Oops, something went wrong.