From e3ce36603172a2a5f82beacca36dd5b0b6e2111a Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Sat, 6 Apr 2024 18:48:20 +0200 Subject: [PATCH 01/27] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-body.html | 5 +++++ src/components/Common/Svg/SvgIcon.tsx | 1 + src/components/Common/Svg/SvgSprite.tsx | 3 +++ 3 files changed, 9 insertions(+) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 0e19cf71..75390831 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -128,6 +128,11 @@ d="M20.2 4.683a1.013 1.013 0 0 1 0 1.438L9.008 17.317a1.013 1.013 0 0 1-1.437 0L1.8 11.55a1.017 1.017 0 0 1 1.437-1.437l5.045 5.045L18.758 4.683a1.013 1.013 0 0 1 1.437 0h.005z" /> + + + { + + + From 3ed017325f98c3d85c90ed9f90447635ed2e9207 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Sat, 6 Apr 2024 18:55:09 +0200 Subject: [PATCH 02/27] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=8D=94=20=EA=B0=9C=ED=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/ImageUploader/ImageUploader.tsx | 29 +++----- .../Common/ImageUploader/imageUploader.css.ts | 17 +++++ .../ReviewRegisterForm/ReviewRegisterForm.tsx | 69 +++++++------------ .../reviewRegisterForm.css.ts | 7 ++ 4 files changed, 56 insertions(+), 66 deletions(-) create mode 100644 src/components/Common/ImageUploader/imageUploader.css.ts create mode 100644 src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts diff --git a/src/components/Common/ImageUploader/ImageUploader.tsx b/src/components/Common/ImageUploader/ImageUploader.tsx index b139a1b4..6202d0e9 100644 --- a/src/components/Common/ImageUploader/ImageUploader.tsx +++ b/src/components/Common/ImageUploader/ImageUploader.tsx @@ -2,8 +2,12 @@ import { Button, useToastActionContext } from '@fun-eat/design-system'; import type { ChangeEventHandler } from 'react'; import styled from 'styled-components'; +import { uploadInput, uploadLabel } from './imageUploader.css'; +import SvgIcon from '../Svg/SvgIcon'; + import { IMAGE_MAX_SIZE } from '@/constants'; import { useEnterKeyDown } from '@/hooks/common'; +import { vars } from '@/styles/theme.css'; interface ReviewImageUploaderProps { previewImage: string; @@ -33,6 +37,7 @@ const ImageUploader = ({ previewImage, uploadImage, deleteImage }: ReviewImageUp return ( <> + {/*이미지 미리보기 디자인*/} {previewImage ? ( 업로드한 사진 @@ -41,10 +46,10 @@ const ImageUploader = ({ previewImage, uploadImage, deleteImage }: ReviewImageUp ) : ( - - + - - + )} ); @@ -52,22 +57,6 @@ const ImageUploader = ({ previewImage, uploadImage, deleteImage }: ReviewImageUp export default ImageUploader; -const ImageUploadLabel = styled.label` - display: flex; - justify-content: center; - align-items: center; - width: 92px; - height: 95px; - border: 1px solid ${({ theme }) => theme.borderColors.disabled}; - border-radius: ${({ theme }) => theme.borderRadius.xs}; - background: ${({ theme }) => theme.colors.gray1}; - cursor: pointer; - - & > input { - display: none; - } -`; - const PreviewImageWrapper = styled.div` display: flex; flex-direction: column; diff --git a/src/components/Common/ImageUploader/imageUploader.css.ts b/src/components/Common/ImageUploader/imageUploader.css.ts new file mode 100644 index 00000000..daa2d59e --- /dev/null +++ b/src/components/Common/ImageUploader/imageUploader.css.ts @@ -0,0 +1,17 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const uploadLabel = style({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: 80, + height: 80, + backgroundColor: vars.colors.background.category, + borderRadius: 6, + cursor: 'pointer', +}); + +export const uploadInput = style({ + display: 'none', +}); diff --git a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx index a2e68400..0503185f 100644 --- a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx +++ b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx @@ -1,13 +1,14 @@ -import { Button, Divider, Heading, Spacing, Text, theme, useToastActionContext } from '@fun-eat/design-system'; +import { Button, Heading, Spacing, Text, theme, useToastActionContext } from '@fun-eat/design-system'; import type { FormEventHandler, RefObject } from 'react'; import styled from 'styled-components'; +import { itemTitle } from './reviewRegisterForm.css'; import RebuyCheckbox from '../RebuyCheckbox/RebuyCheckbox'; import ReviewTagList from '../ReviewTagList/ReviewTagList'; import ReviewTextarea from '../ReviewTextarea/ReviewTextarea'; import StarRate from '../StarRate/StarRate'; -import { ImageUploader, SvgIcon } from '@/components/Common'; +import { ImageUploader } from '@/components/Common'; import { MIN_DISPLAYED_TAGS_LENGTH } from '@/constants'; import { useFormData, useImageUploader, useScroll } from '@/hooks/common'; import { useReviewFormActionContext, useReviewFormValueContext } from '@/hooks/context'; @@ -80,50 +81,26 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe }; return ( - - 리뷰 작성 - - - - - - - - - 구매한 상품 사진이 있다면 올려주세요. - - - - (사진은 5MB 이하, 1장까지 업로드 할 수 있어요.) - - - - - - - - - - - - - - - [작성시 유의사항] 신뢰성 확보에 저해되는 게시물은 삭제하거나 보이지 않게 할 수 있습니다. - - - - {isValid ? '리뷰 등록하기' : '꼭 입력해야 하는 항목이 있어요'} - - - +
+
+

+ 사진 등록 +

+ +
+ + + + + + + + + + + [작성시 유의사항] 신뢰성 확보에 저해되는 게시물은 삭제하거나 보이지 않게 할 수 있습니다. + + ); }; diff --git a/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts b/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts new file mode 100644 index 00000000..e626aa63 --- /dev/null +++ b/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts @@ -0,0 +1,7 @@ +import { style } from '@vanilla-extract/css'; + +export const itemTitle = style({ + fontSize: '1.3rem', + fontWeight: 600, + marginBottom: 8, +}); From d23ce061bbe8fedb300cde4a7e951e83da4b19b3 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Sat, 6 Apr 2024 19:05:48 +0200 Subject: [PATCH 03/27] =?UTF-8?q?feat:=20=EB=B3=84=EC=A0=90=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=ED=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReviewRegisterForm/ReviewRegisterForm.tsx | 4 +- .../StarRate/StarRate.stories.tsx | 0 .../StarRate/StarRate.tsx | 52 +++++++------------ .../StarRate/starRate.css.ts | 10 ++++ .../reviewRegisterForm.css.ts | 5 ++ 5 files changed, 37 insertions(+), 34 deletions(-) rename src/components/Review/{ => ReviewRegisterForm}/StarRate/StarRate.stories.tsx (100%) rename src/components/Review/{ => ReviewRegisterForm}/StarRate/StarRate.tsx (51%) create mode 100644 src/components/Review/ReviewRegisterForm/StarRate/starRate.css.ts diff --git a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx index 0503185f..49a269d3 100644 --- a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx +++ b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx @@ -3,10 +3,10 @@ import type { FormEventHandler, RefObject } from 'react'; import styled from 'styled-components'; import { itemTitle } from './reviewRegisterForm.css'; +import StarRate from './StarRate/StarRate'; import RebuyCheckbox from '../RebuyCheckbox/RebuyCheckbox'; import ReviewTagList from '../ReviewTagList/ReviewTagList'; import ReviewTextarea from '../ReviewTextarea/ReviewTextarea'; -import StarRate from '../StarRate/StarRate'; import { ImageUploader } from '@/components/Common'; import { MIN_DISPLAYED_TAGS_LENGTH } from '@/constants'; @@ -88,7 +88,7 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe - + diff --git a/src/components/Review/StarRate/StarRate.stories.tsx b/src/components/Review/ReviewRegisterForm/StarRate/StarRate.stories.tsx similarity index 100% rename from src/components/Review/StarRate/StarRate.stories.tsx rename to src/components/Review/ReviewRegisterForm/StarRate/StarRate.stories.tsx diff --git a/src/components/Review/StarRate/StarRate.tsx b/src/components/Review/ReviewRegisterForm/StarRate/StarRate.tsx similarity index 51% rename from src/components/Review/StarRate/StarRate.tsx rename to src/components/Review/ReviewRegisterForm/StarRate/StarRate.tsx index ad2cd4c3..47752b2f 100644 --- a/src/components/Review/StarRate/StarRate.tsx +++ b/src/components/Review/ReviewRegisterForm/StarRate/StarRate.tsx @@ -1,9 +1,10 @@ -import { Button, Heading, Spacing, theme } from '@fun-eat/design-system'; -import styled from 'styled-components'; +import { starIcon, starWrapper } from './starRate.css'; +import { itemTitle, requiredMark } from '../reviewRegisterForm.css'; import { SvgIcon } from '@/components/Common'; import { useReviewFormActionContext } from '@/hooks/context'; import { useStarRatingHover } from '@/hooks/review'; +import { vars } from '@/styles/theme.css'; const starList = Array.from({ length: 5 }, (_, index) => index + 1); @@ -20,48 +21,35 @@ const StarRate = ({ rating }: StarRateProps) => { }; return ( - - - 별점을 남겨주세요. - * - - -
+
+

+ 별점 + + * + +

+
{starList.map((star) => ( - + ))}
- +
); }; export default StarRate; - -const StarRateContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -`; - -const RequiredMark = styled.sup` - color: ${({ theme }) => theme.colors.error}; -`; - -const SvgIconWrapper = styled(SvgIcon)` - transition: all 0.3s ease-out; -`; diff --git a/src/components/Review/ReviewRegisterForm/StarRate/starRate.css.ts b/src/components/Review/ReviewRegisterForm/StarRate/starRate.css.ts new file mode 100644 index 00000000..89b2c801 --- /dev/null +++ b/src/components/Review/ReviewRegisterForm/StarRate/starRate.css.ts @@ -0,0 +1,10 @@ +import { style } from '@vanilla-extract/css'; + +export const starWrapper = style({ + display: 'flex', + gap: 8, +}); + +export const starIcon = style({ + transition: 'all 0.3s ease-out', +}); diff --git a/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts b/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts index e626aa63..21bd73ba 100644 --- a/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts +++ b/src/components/Review/ReviewRegisterForm/reviewRegisterForm.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const itemTitle = style({ @@ -5,3 +6,7 @@ export const itemTitle = style({ fontWeight: 600, marginBottom: 8, }); + +export const requiredMark = style({ + color: vars.colors.error, +}); From 5d15c1a7f6c6f61ad5f11b71b82aa6c36d6ae768 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Sat, 6 Apr 2024 19:22:36 +0200 Subject: [PATCH 04/27] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20=EA=B0=9C=ED=8E=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReviewRegisterForm/ReviewRegisterForm.tsx | 47 ++----------------- .../ReviewTextarea/ReviewTextarea.stories.tsx | 0 .../ReviewTextarea/ReviewTextarea.tsx | 40 ++++++++-------- .../ReviewTextarea/reviewTextarea.css.ts | 40 ++++++++++++++++ 4 files changed, 64 insertions(+), 63 deletions(-) rename src/components/Review/{ => ReviewRegisterForm}/ReviewTextarea/ReviewTextarea.stories.tsx (100%) rename src/components/Review/{ => ReviewRegisterForm}/ReviewTextarea/ReviewTextarea.tsx (53%) create mode 100644 src/components/Review/ReviewRegisterForm/ReviewTextarea/reviewTextarea.css.ts diff --git a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx index 49a269d3..0ee1f9f3 100644 --- a/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx +++ b/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx @@ -1,12 +1,11 @@ -import { Button, Heading, Spacing, Text, theme, useToastActionContext } from '@fun-eat/design-system'; +import { Spacing, Text, theme, useToastActionContext } from '@fun-eat/design-system'; import type { FormEventHandler, RefObject } from 'react'; -import styled from 'styled-components'; import { itemTitle } from './reviewRegisterForm.css'; +import ReviewTextarea from './ReviewTextarea/ReviewTextarea'; import StarRate from './StarRate/StarRate'; import RebuyCheckbox from '../RebuyCheckbox/RebuyCheckbox'; import ReviewTagList from '../ReviewTagList/ReviewTagList'; -import ReviewTextarea from '../ReviewTextarea/ReviewTextarea'; import { ImageUploader } from '@/components/Common'; import { MIN_DISPLAYED_TAGS_LENGTH } from '@/constants'; @@ -90,9 +89,9 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe
- + - + @@ -105,41 +104,3 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe }; export default ReviewRegisterForm; - -const ReviewRegisterFormContainer = styled.div` - position: relative; - height: 100%; -`; - -const ReviewHeading = styled(Heading)` - height: 80px; - font-size: 2.4rem; - line-height: 80px; - text-align: center; -`; - -const CloseButton = styled(Button)` - position: absolute; - top: 24px; - right: 32px; -`; - -const ProductOverviewItemWrapper = styled.div` - margin: 15px 0; -`; - -const RegisterForm = styled.form` - padding: 50px 20px; -`; - -const ReviewImageUploaderContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; - -const FormButton = styled(Button)` - color: ${({ theme, disabled }) => (disabled ? theme.colors.white : theme.colors.black)}; - background: ${({ theme, disabled }) => (disabled ? theme.colors.gray3 : theme.colors.primary)}; - cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; -`; diff --git a/src/components/Review/ReviewTextarea/ReviewTextarea.stories.tsx b/src/components/Review/ReviewRegisterForm/ReviewTextarea/ReviewTextarea.stories.tsx similarity index 100% rename from src/components/Review/ReviewTextarea/ReviewTextarea.stories.tsx rename to src/components/Review/ReviewRegisterForm/ReviewTextarea/ReviewTextarea.stories.tsx diff --git a/src/components/Review/ReviewTextarea/ReviewTextarea.tsx b/src/components/Review/ReviewRegisterForm/ReviewTextarea/ReviewTextarea.tsx similarity index 53% rename from src/components/Review/ReviewTextarea/ReviewTextarea.tsx rename to src/components/Review/ReviewRegisterForm/ReviewTextarea/ReviewTextarea.tsx index 8fc4bb06..afde056c 100644 --- a/src/components/Review/ReviewTextarea/ReviewTextarea.tsx +++ b/src/components/Review/ReviewRegisterForm/ReviewTextarea/ReviewTextarea.tsx @@ -1,7 +1,10 @@ -import { Heading, Spacing, Text, Textarea, useTheme } from '@fun-eat/design-system'; import type { ChangeEventHandler } from 'react'; import styled from 'styled-components'; +import { container, currentLength, reviewTextarea, status, statusWrapper } from './reviewTextarea.css'; +import { itemTitle, requiredMark } from '../reviewRegisterForm.css'; + +import { Text } from '@/components/Common'; import { useReviewFormActionContext } from '@/hooks/context'; const MAX_LENGTH = 200; @@ -12,32 +15,33 @@ interface ReviewTextareaProps { const ReviewTextarea = ({ content }: ReviewTextareaProps) => { const { handleReviewFormValue } = useReviewFormActionContext(); - const theme = useTheme(); const handleReviewText: ChangeEventHandler = (event) => { handleReviewFormValue({ target: 'content', value: event.currentTarget.value }); }; return ( - - - 리뷰를 남겨주세요. - * - - -