merge develop to main

app/(my)/layout.tsx

@@ -14,7 +14,9 @@ export default function MyLayout({
   return (
     <div className="flex">
       <Sidebar />
-      <div className="w-full px-[150px] pt-500 pb-[100px]">{children}</div>
+      <div className="w-full px-[40px] pt-500 pb-[100px] lg:px-[150px]">
+        {children}
+      </div>
     </div>
   );
 }

app/global.css

@@ -185,7 +185,7 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
 
   --color-background-alternative: var(--color-gray-50);
   --color-background-default: var(--color-gray-0);
-  --color-background-dimmer: rgba(24, 29, 39, 80);
+  --color-background-dimmer: rgba(24, 29, 39, 0.8);
   --color-background-disabled: var(--color-gray-100);
 
   --color-background-brand-subtle: var(--color-rose-300);

app/not-found.tsx

@@ -1,10 +1,11 @@
+import Image from 'next/image';
 import Link from 'next/link';
 import Button from '@/shared/ui/button';
 
 export default function NotFound() {
   return (
     <div className="flex h-[calc(100vh-45px)] w-full flex-col items-center justify-center gap-5">
-      <img src="/images/404.png" width={256} height={221} />
+      <Image src="/images/404.png" alt="404 에러" width={256} height={221} />
       <Link href="/">
         <Button size="large" type="button" color="secondary">
           홈으로 이동

app/redirection/page.tsx

@@ -21,13 +21,13 @@ function RedirectionContent() {
         const isGuest = searchParams.get('is-guest');
         const memberId = searchParams.get('member-id');
         const authVendor = searchParams.get('auth-vendor');
+        const socialImageURL = decodeURIComponent(
+          searchParams.get('profile-image-url') || '',
+        );
 
         setCookie('accessToken', accessToken);
         setCookie('memberId', memberId);
-        setCookie(
-          'socialImageURL',
-          searchParams.get('profile-image-url') || '',
-        );
+        setCookie('socialImageURL', socialImageURL);
 
         if (isGuest === 'true') {
           router.push('/sign-up');

src/features/auth/api/auth.ts

@@ -19,13 +19,10 @@ export async function uploadProfileImage(
   filename: string,
   file: FormData,
 ) {
-  console.log('uploadProfileImage 요청직전', file);
-  // Bug : 여기서 에러발생중
   const res = await axiosInstanceForMultipart.put(
     `/files/members/${memberId}/profile/image/${filename}`,
     file,
   );
-  console.log('auth.ts - uploadProfileImage 응답', res);
 
   return res.data;
 }

src/features/auth/ui/login-modal.tsx

@@ -112,12 +112,6 @@ export default function LoginModal({
                 </span>
               </button>
             </div>
-            <div className="font-designer-14m text-text-subtle mb-250 flex items-center gap-75">
-              <input type="checkbox" id="agree" />
-              <label htmlFor="agree">
-                ZERO-ONE의 이용 약관과 개인정보 처리방침에 동의할게요.
-              </label>
-            </div>
           </Modal.Body>
         </Modal.Content>
       </Modal.Portal>

src/features/auth/ui/sign-up-image-selector.tsx

@@ -14,13 +14,13 @@ export default function SignupImageSelector({
   handleImageChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
   const setDefaultImage = () => setImage('/profile-default.svg');
-  const openFileDialog = () => fileInputRef.current?.click();
+  const openFileFolder = () => fileInputRef.current?.click();
 
   return (
     <div className="relative">
       <div className="relative h-[112px] w-[112px] overflow-hidden rounded-full">
         <Image src={image} alt="프로필" fill className="object-cover" />
-        <img src={image} alt="next최적화안쓴프로필" className='object-covoer' />
+        <img src={image} alt="next최적화안쓴프로필" className="object-covoer" />
       </div>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
@@ -44,7 +44,7 @@ export default function SignupImageSelector({
           </DropdownMenu.Item>
           <DropdownMenu.Item
             className="hover:text-text-default hover:font-designer-14b cursor-pointer px-50 py-[2px] hover:bg-gray-100"
-            onSelect={openFileDialog}
+            onSelect={openFileFolder}
           >
             앨범에서 선택
           </DropdownMenu.Item>
@@ -53,8 +53,9 @@ export default function SignupImageSelector({
       <input
         ref={fileInputRef}
         type="file"
-        accept="image/*"
+        accept="image/jpg,image/png,image/gif,image/webp"
         className="hidden"
+        multiple={false}
         onChange={handleImageChange}
       />
     </div>

src/features/auth/ui/sign-up-modal.tsx

@@ -1,16 +1,16 @@
+import { sendGTMEvent } from '@next/third-parties/google';
 import { XIcon } from 'lucide-react';
 import { useState, useRef } from 'react';
 import {
   useSignUpMutation,
   useUploadProfileImageMutation,
 } from '@/features/auth/model/use-auth-mutation';
 import SignupImageSelector from '@/features/auth/ui/sign-up-image-selector';
-import SignupNameInput from '@/features/auth/ui/sign-up-name-input';
+import { hashValue } from '@/shared/lib/hash';
 import { getCookie, setCookie } from '@/shared/tanstack-query/cookie';
 import Button from '@/shared/ui/button';
+import { BaseInput } from '@/shared/ui/input';
 import { Modal } from '@/shared/ui/modal';
-import { sendGTMEvent } from '@next/third-parties/google';
-import { hashValue } from '@/shared/lib/hash';
 
 export default function SignupModal({
   open,
@@ -20,7 +20,7 @@ export default function SignupModal({
   onClose: () => void;
 }) {
   const [name, setName] = useState('');
-  const [error, setError] = useState('');
+  const [checked, setChecked] = useState<boolean>(false);
   const [image, setImage] = useState(
     getCookie('socialImageURL') || 'profile-default.svg',
   );
@@ -29,15 +29,7 @@ export default function SignupModal({
   const signUp = useSignUpMutation();
   const uploadProfileImage = useUploadProfileImageMutation();
 
-  // 이름 유효성 검사
-  const validateName = (value: string) => {
-    if (!/^[가-힣a-zA-Z]{2,10}$/.test(value)) {
-      setError('이름에는 숫자나 특수문자를 사용할 수 없습니다.');
-    } else {
-      setError('');
-    }
-    setName(value);
-  };
+  const isValidName = /^[가-힣a-zA-Z]{2,10}$/.test(name);
 
   // 이미지 업로드
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,12 +52,11 @@ export default function SignupModal({
       {
         // 회원가입 성공 시 프로필 이미지 업로드
         onSuccess: (data) => {
-
           const memberId = data.content.generatedMemberId;
 
           if (data && memberId) {
-            setCookie('memberId', memberId)
-            
+            setCookie('memberId', memberId);
+
             // 회원가입 GA 이벤트 전송
             sendGTMEvent({
               event: 'custom_member_join',
@@ -85,7 +76,6 @@ export default function SignupModal({
                 file: formData,
               });
             }
-
 
             // 성공 후 홈페이지로 이동
             window.location.href = '/';
@@ -124,17 +114,56 @@ export default function SignupModal({
               <div className="font-designer-24b text-text-default mt-2 text-center">
                 서비스 이용을 위해 이름을 입력해주세요.
               </div>
-              <SignupNameInput
-                name={name}
-                setName={validateName}
-                error={error}
-              />
+              <div className="flex w-full flex-col items-center gap-200">
+                <div className="flex w-full flex-col gap-75">
+                  <BaseInput
+                    type="text"
+                    value={name}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      const filteredValue = value
+                        .replace(/[^a-zA-Zㄱ-힣]/g, '')
+                        .slice(0, 10)
+                        .trim();
+                      setName(filteredValue);
+                    }}
+                    placeholder="홍길동"
+                    className={`w-full`}
+                    color={
+                      isValidName || name.length === 0 ? 'default' : 'error'
+                    }
+                    maxLength={10}
+                  />
+                  <div
+                    className={`font-designer-13r ${isValidName || name.length === 0 ? 'text-text-subtlest' : 'text-text-error'}`}
+                  >
+                    {isValidName || name.length === 0
+                      ? '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )'
+                      : '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.'}
+                  </div>
+                </div>
+                <div className="flex w-full gap-75">
+                  <input
+                    type="checkbox"
+                    id="agree"
+                    checked={checked}
+                    onChange={(e) => setChecked(e.target.checked)}
+                  />
+                  <label
+                    htmlFor="agree"
+                    className="font-designer-14m text-text-subtle text-sm"
+                  >
+                    ZERO-ONE의 이용 약관과 개인정보 처리방침에 동의할게요.
+                  </label>
+                </div>
+              </div>
               <Button
                 color="primary"
                 size="large"
                 className="w-full"
                 type="submit"
                 onClick={handleSubmit}
+                disabled={!isValidName || !checked || signUp.isPending}
               >
                 가입 완료
               </Button>

src/features/my-page/consts/my-page-const.ts

@@ -29,3 +29,5 @@ export const MBTI_OPTIONS = [
   { label: 'ENFJ', value: 'ENFJ' },
   { label: 'ENTJ', value: 'ENTJ' },
 ];
+
+export const DEFAULT_PROFILE_IMAGE_URL = '/profile-default.svg';