v2.1.1 (#140)

v.2.1.1

.storybook/preview-body.html

@@ -42,19 +42,19 @@
         </clipPath>
       </defs>
     </symbol>
-    <symbol id="camera2" viewBox="0 0 14 14">
-      <path
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M13.5 5a1 1 0 0 0-1-1h-2L9 2H5L3.5 4h-2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V5z"
-      />
-      <path
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M7 9.75a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5z"
-      />
+    <symbol id="camera2" viewBox="0 0 13 12">
+      <g clip-path="url(#a)">
+        <path
+          fill-rule="evenodd"
+          d="M4.443 1.457a.429.429 0 0 1 .343-.171h3.428c.135 0 .262.063.343.171L9.714 3h1.5A1.286 1.286 0 0 1 12.5 4.286v5.143a1.286 1.286 0 0 1-1.286 1.285H1.786A1.285 1.285 0 0 1 .5 9.43V4.286A1.286 1.286 0 0 1 1.786 3h1.5l1.157-1.543zM8.61 6.61a2.11 2.11 0 1 1-4.22 0 2.11 2.11 0 0 1 4.22 0z"
+          clip-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h12v12H0z" transform="translate(.5)" />
+        </clipPath>
+      </defs>
     </symbol>
     <symbol id="favorite2" viewBox="0 0 14 14">
       <path
@@ -256,11 +256,7 @@
         clip-rule="evenodd"
       />
     </symbol>
-    <symbol id="close" viewBox="0 0 20 20">
-      <path
-        d="M20 2.014L17.986 0 10 7.986 2.014 0 0 2.014 7.986 10 0 17.986 2.014 20 10 12.014 17.986 20 20 17.986 12.014 10 20 2.014z"
-      />
-    </symbol>
+
     <symbol id="triangle" viewBox="0 0 22 16">
       <path d="M0 16L11 0l11 16H0z" />
     </symbol>
@@ -375,6 +371,9 @@
         d="M11.306 2.916c1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.777-3.395 6.855-8.538 11.519l-.012.011a2.161 2.161 0 0 1-2.9.01l-.04-.036c-5.128-4.66-8.51-7.733-8.51-11.504 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09z"
       />
     </symbol>
+    <symbol id="close" viewBox="0 0 15 15">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M14.313 1.169l-13 13m0-13l13 13" />
+    </symbol>
     <symbol id="close2" viewBox="0 0 13 12">
       <path d="M11.3705 0.81424L1.15625 11.0285" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
       <path d="M1.15625 0.81424L11.3705 11.0285" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />

package.json

@@ -20,8 +20,9 @@
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-query-devtools": "^4.32.6",
     "@vanilla-extract/css": "^1.14.1",
-    "@vanilla-extract/recipes": "^0.5.2",
+    "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.2",
     "browser-image-compression": "^2.0.2",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.9",

src/components/Common/ErrorBoundary/ErrorBoundary.tsx

@@ -1,7 +1,9 @@
-import { Button } from '@fun-eat/design-system';
 import type { ComponentType, PropsWithChildren } from 'react';
 import { Component } from 'react';
 
+import { button, buttonWrapper, container } from './errorBoundary.css';
+import Text from '../Text/Text';
+
 export interface FallbackProps {
   message: string;
 }
@@ -37,12 +39,16 @@ class ErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProps>, Err
 
     if (this.state.error) {
       return (
-        <>
+        <div className={container}>
           <FallbackComponent message={this.state.error.message} />
-          <Button type="button" onClick={this.resetError}>
-            다시 시도하기
-          </Button>
-        </>
+          <div className={buttonWrapper}>
+            <button type="button" className={button} onClick={this.resetError}>
+              <Text size="caption1" weight="semiBold" color="info">
+                다시 시도하기
+              </Text>
+            </button>
+          </div>
+        </div>
       );
     }
 

src/components/Common/ErrorBoundary/errorBoundary.css.ts

@@ -0,0 +1,26 @@
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const buttonWrapper = style({
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const button = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 124,
+  height: 36,
+  padding: '8px 16px',
+  border: `1px solid ${vars.colors.border.default}`,
+  borderRadius: 44,
+});

src/components/Common/ErrorComponent/ErrorComponent.tsx

@@ -1,5 +1,20 @@
+import { container } from './errorComponent.css';
+import Text from '../Text/Text';
+
+import Error from '@/assets/error.png';
+
 const ErrorComponent = () => {
-  return <div>에러가 발생했습니다.</div>;
+  return (
+    <div className={container}>
+      <div style={{ height: 30 }} />
+      <img src={Error} alt="404 캐릭터" width={92} height={58} />
+      <div style={{ height: 12 }} />
+      <Text size="headline" weight="semiBold" color="sub">
+        에러가 발생했습니다
+      </Text>
+      <div style={{ height: 32 }} />
+    </div>
+  );
 };
 
 export default ErrorComponent;

src/components/Common/ErrorComponent/errorComponent.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

src/components/Common/FormTextarea/FormTextarea.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import FormTextarea from './FormTextarea';
+
+import RecipeFormProvider from '@/contexts/RecipeFormContext';
+import ReviewFormProvider from '@/contexts/ReviewFormContext';
+
+const meta: Meta<typeof FormTextarea> = {
+  title: 'common/FormTextarea',
+  component: FormTextarea,
+  args: {
+    content: '',
+  },
+  decorators: [
+    (Story) => (
+      <RecipeFormProvider>
+        <ReviewFormProvider>
+          <Story />
+        </ReviewFormProvider>
+      </RecipeFormProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FormTextarea>;
+
+export const Default: Story = {};

src/components/Review/ReviewRegisterForm/ReviewTextarea/ReviewTextarea.tsx → src/components/Common/FormTextarea/FormTextarea.tsx

@@ -1,32 +1,30 @@
 import { useState } from 'react';
 import type { FocusEventHandler, ChangeEventHandler } from 'react';
 
-import {
-  container,
-  currentLength,
-  errorMessage,
-  errorWrapper,
-  reviewTextarea,
-  statusWrapper,
-} from './reviewTextarea.css';
-import { itemTitle, requiredMark } from '../reviewRegisterForm.css';
+import { container, currentLength, formTextarea, statusWrapper } from './formTextarea.css';
 
 import { SvgIcon, Text } from '@/components/Common';
-import { useReviewFormActionContext } from '@/hooks/context';
+import { errorMessage, errorWrapper, itemTitle, requiredMark } from '@/styles/form.css';
 
 const MIN_LENGTH = 10;
 const MAX_LENGTH = 500;
 
-interface ReviewTextareaProps {
+interface FormActionParams<T> {
+  target: keyof T;
+  value: T[keyof T];
+}
+
+interface FormTextareaProps<T> {
   content: string;
+  onFormValue: (params: FormActionParams<T>) => void;
+  placeholder?: string;
 }
 
-const ReviewTextarea = ({ content }: ReviewTextareaProps) => {
-  const { handleReviewFormValue } = useReviewFormActionContext();
+const FormTextarea = <T,>({ content, onFormValue, placeholder }: FormTextareaProps<T>) => {
   const [isTouched, setIsTouched] = useState(false);
 
-  const handleReviewText: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
-    handleReviewFormValue({ target: 'content', value: event.currentTarget.value });
+  const handleFormText: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    onFormValue({ target: 'content', value: event.currentTarget.value } as FormActionParams<T>);
   };
 
   const handleFocus: FocusEventHandler<HTMLTextAreaElement> = () => {
@@ -49,13 +47,13 @@ const ReviewTextarea = ({ content }: ReviewTextareaProps) => {
       </h2>
 
       <textarea
-        className={reviewTextarea}
+        className={formTextarea}
         rows={5}
-        placeholder="조합된 상품, 조리 방법 등 만든 꿀조합에 대한 설명을 자유롭게 작성해주세요"
+        placeholder={placeholder}
         minLength={MIN_LENGTH}
         maxLength={MAX_LENGTH}
         value={content}
-        onChange={handleReviewText}
+        onChange={handleFormText}
         onFocus={handleFocus}
         onBlur={handleBlur}
       />
@@ -75,4 +73,4 @@ const ReviewTextarea = ({ content }: ReviewTextareaProps) => {
   );
 };
 
-export default ReviewTextarea;
+export default FormTextarea;

src/components/Review/ReviewRegisterForm/ReviewTextarea/reviewTextarea.css.ts → src/components/Common/FormTextarea/formTextarea.css.ts

@@ -1,11 +1,11 @@
 import { vars } from '@/styles/theme.css';
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 export const container = style({
   position: 'relative',
 });
 
-export const reviewTextarea = style({
+export const formTextarea = style({
   width: '100%',
   padding: '12px 16px',
   fontSize: '1.2rem',
@@ -37,18 +37,3 @@ export const currentLength = style({
   color: vars.colors.black,
   fontWeight: 500,
 });
-
-export const errorWrapperBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 4,
-});
-
-export const errorWrapper = styleVariants({
-  show: [errorWrapperBase, { opacity: 1 }],
-  hidden: [errorWrapperBase, { opacity: 0 }],
-});
-
-export const errorMessage = style({
-  color: vars.colors.error,
-});