Feat: 오답 다중 등록으로 수정

apps/web/src/app/login/info/components/sections/profile-section/profile-section.tsx

@@ -38,7 +38,8 @@ const ProfileSection = ({
     handleCameraChange,
     handleAlbumChange,
   } = useImageSourcePicker({
-    onSelect: (file) => {
+    onSelect: ([file]) => {
+      if (!file) return;
       onProfileImageChange(file);
       setIsModalOpen(false);
     },

apps/web/src/app/my/edit/components/my-profile-section.tsx

@@ -50,7 +50,8 @@ const MyProfileSection = ({
     handleCameraChange,
     handleAlbumChange,
   } = useImageSourcePicker({
-    onSelect: (file) => {
+    onSelect: ([file]) => {
+      if (!file) return;
       onProfileImageChange(file);
       setIsModalOpen(false);
     },

apps/web/src/app/my/page.tsx

@@ -9,6 +9,8 @@ import { useMyProfileImageQuery } from "@/shared/apis/profile-image/hooks/use-my
 import { ROUTES } from "@/shared/constants/routes";
 import { readProfileImageUrl } from "@/app/my/utils/read-profile-image-url";
 
+const DEFAULT_USER_NAME = "사용자";
+
 type ErrorResponseShape = {
   status?: number;
   code?: string;
@@ -58,12 +60,12 @@ const MyPage = () => {
   );
 
   if (isProfileLoading) return null;
-  if (!profile) return null;
+
   return (
     <MyPageView
-      userName={profile.nickname ?? ""}
-      linkedEmail={profile.email ?? ""}
-      provider={profile.oauthProvider ?? ""}
+      userName={profile?.nickname?.trim() || DEFAULT_USER_NAME}
+      linkedEmail={profile?.email ?? ""}
+      provider={profile?.oauthProvider ?? ""}
       profileImageUrl={profileImageUrl}
       onLogout={() => router.replace(ROUTES.AUTH.LOGIN)}
       onWithdraw={() => router.replace(ROUTES.AUTH.LOGIN)}

apps/web/src/app/wrong/create/components/direct-add-button/direct-add-button.css.ts

@@ -2,14 +2,11 @@ import { style } from "@vanilla-extract/css";
 import { vars } from "@/shared/styles/theme.css";
 
 export const button = style({
-  width: "100%",
-  display: "flex",
+  display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
   gap: "0.8rem",
-  padding: "1.6rem",
-  border: `0.1rem solid ${vars.color.grayscale[100]}`,
-  borderRadius: vars.radius.r12,
+  minWidth: 0,
   cursor: "pointer",
 
   selectors: {
@@ -22,20 +19,21 @@ export const button = style({
 
 export const label = style({
   display: "block",
+  textAlign: "center",
+  whiteSpace: "nowrap",
 });
 
 export const inputWrapper = style({
-  width: "100%",
-  display: "flex",
+  display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  padding: "1.6rem",
-  border: `0.1rem solid ${vars.color.grayscale[100]}`,
-  borderRadius: vars.radius.r12,
+  gap: "0.8rem",
+  minWidth: 0,
+  cursor: "text",
 });
 
 export const input = style({
-  width: "100%",
+  width: "9ch",
   border: "none",
   outline: "none",
   background: "transparent",
@@ -44,7 +42,7 @@ export const input = style({
 
   selectors: {
     "&::placeholder": {
-      color: vars.color.grayscale[100],
+      color: vars.color.grayscale[400],
       opacity: 1,
     },
   },

apps/web/src/app/wrong/create/components/direct-add-button/direct-add-button.tsx

@@ -110,7 +110,7 @@ const DirectAddButton = (props: DirectAddButtonProps) => {
           s.inputWrapper,
           bgColor["grayscale-0"],
           color["grayscale-400"],
-          typo.body2.medium,
+          typo.body3.medium,
           props.className
         )}
         onClick={() => inputRef.current?.focus()}
@@ -119,9 +119,10 @@ const DirectAddButton = (props: DirectAddButtonProps) => {
           submit();
         }}
       >
+        <Icon name="plus-circle" size={2} aria-hidden="true" />
         <input
           ref={inputRef}
-          className={clsx(s.input, typo.body2.medium, color["grayscale-400"])}
+          className={clsx(s.input, typo.body3.medium, color["grayscale-400"])}
           value={props.value}
           onChange={(e) => props.onValueChange(e.target.value)}
           onKeyDown={handleKeyDown}
@@ -141,7 +142,7 @@ const DirectAddButton = (props: DirectAddButtonProps) => {
 
   const {
     iconName = "plus-circle",
-    iconSizeRem = 2.4,
+    iconSizeRem = 2,
     type = "button",
     onClick,
     disabled = false,
@@ -155,14 +156,14 @@ const DirectAddButton = (props: DirectAddButtonProps) => {
         s.button,
         bgColor["grayscale-0"],
         color["grayscale-400"],
-        typo.body2.medium,
+        typo.body3.medium,
         className
       )}
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel}
     >
-      <Icon name={iconName} size={iconSizeRem} />
+      <Icon name={iconName} size={iconSizeRem} aria-hidden="true" />
       <span className={s.label}>{label}</span>
     </button>
   );

apps/web/src/app/wrong/create/components/steps/step-1.tsx

@@ -7,56 +7,60 @@ import {
   type ImagePickSource,
 } from "@/app/wrong/create/hooks/step1/use-image-source-picker";
 import * as s from "@/app/wrong/create/create.css";
-import { useCreateProblemScanMutation } from "@/shared/apis/problem-scan/hooks/use-create-problem-scan-mutation";
-import type { ProblemScanCreateResponse } from "@/shared/apis/problem-scan/problem-scan-types";
+import { useCreateProblemScanGroupMutation } from "@/shared/apis/problem-scan/hooks/use-create-problem-scan-group-mutation";
+import type { ProblemScanGroupCreateResponse } from "@/shared/apis/problem-scan/problem-scan-types";
 import { validateImageFile } from "@/app/wrong/create/utils/image-file-guard";
 import { useMinLoading } from "@/app/wrong/create/utils/use-min-loading";
 import { toastError } from "@/shared/components/toast/toast";
 
 const MIN_UPLOAD_LOADING_MS = 1000;
 
 type Step1Props = {
-  onNext: (res: ProblemScanCreateResponse) => void;
-  onSelectImage?: (file: File, source: ImagePickSource) => void;
+  onNext: (res: ProblemScanGroupCreateResponse) => void;
+  onSelectImage?: (files: File[], source: ImagePickSource) => void;
   disabled?: boolean;
 };
 
 const Step1 = ({ onNext, onSelectImage, disabled = false }: Step1Props) => {
-  const createScanMutation = useCreateProblemScanMutation();
+  const createScanGroupMutation = useCreateProblemScanGroupMutation();
   const minLoading = useMinLoading(MIN_UPLOAD_LOADING_MS);
 
-  const isUploading = createScanMutation.isPending || minLoading.isHolding;
+  const isUploading = createScanGroupMutation.isPending || minLoading.isHolding;
   const isBusy = disabled || isUploading;
 
   const handlePicked = useCallback(
-    (file: File, source: ImagePickSource) => {
+    (files: File[], source: ImagePickSource) => {
       if (isBusy) return;
 
-      const error = validateImageFile(file);
-      if (error) {
-        window.alert(error);
-        return;
+      for (const file of files) {
+        const error = validateImageFile(file);
+        if (error) {
+          window.alert(error);
+          return;
+        }
       }
 
       minLoading.start();
 
-      createScanMutation.mutate(
-        { file },
+      createScanGroupMutation.mutate(
+        { files },
         {
           onSuccess: (res) => {
             minLoading.end(() => {
-              onSelectImage?.(file, source);
+              onSelectImage?.(files, source);
               onNext(res);
             });
           },
           onError: () => {
             minLoading.cancel();
-            toastError("문제 스캔 업로드에 실패했어요. 다시 시도해 주세요.");
+            toastError(
+              "문제 이미지 업로드에 실패했어요. 다시 시도해 주세요."
+            );
           },
         }
       );
     },
-    [createScanMutation, isBusy, minLoading, onNext, onSelectImage]
+    [createScanGroupMutation, isBusy, minLoading, onNext, onSelectImage]
   );
 
   const {
@@ -88,6 +92,7 @@ const Step1 = ({ onNext, onSelectImage, disabled = false }: Step1Props) => {
         ref={albumInputRef}
         type="file"
         accept="image/*"
+        multiple
         onChange={handleAlbumChange}
         disabled={isBusy}
       />