Design: 프로필 설정 ver3.0 디자인 설정

8-Sprinters · Nov 17, 2024 · 34779d2 · 34779d2
1 parent e53b6c3
commit 34779d2
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 72 deletions.
diff --git a/src/app/account/profile/_components/ProfileForm.css.ts b/src/app/account/profile/_components/ProfileForm.css.ts
@@ -1,44 +1,67 @@
 import { style, createVar } from '@vanilla-extract/css';
-import { vars } from '@/styles/__theme.css';
-import { labelSmall, bodyMedium, caption } from '@/styles/__font.css';
+import { vars } from '@/styles/theme.css';
+import * as fonts from '@/styles/font.css';
 
 export const form = style({
   maxWidth: 400,
   width: '100%',
 
   display: 'flex',
   flexDirection: 'column',
-  gap: '12px',
+  gap: '3.2rem',
+});
+
+export const field = style({
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 export const inputContainer = style({
   width: '100%',
-  padding: '10px 12px',
+  padding: '1.2rem 1.4rem',
 
   display: 'flex',
   flexDirection: 'column',
   gap: '8px',
 
-  border: `1px solid ${vars.color.gray5}`,
-  borderRadius: 10,
+  borderRadius: '1.2rem',
+  backgroundColor: vars.color.white,
 });
 
-export const label = style([labelSmall, { color: vars.color.gray7 }]);
+export const label = style([
+  fonts.BodyBold,
+  {
+    marginBottom: '1.2rem',
+  },
+]);
 
-export const inputText = style([bodyMedium]);
+export const inputText = style([
+  fonts.BodyRegular,
+  {
+    color: vars.color.bluegray10,
+    '::placeholder': {
+      color: vars.color.bluegray6,
+    },
+  },
+]);
 
 export const textarea = style([
-  bodyMedium,
+  fonts.BodyRegular,
   {
     border: 'none',
     resize: 'none',
+
+    color: vars.color.bluegray10,
+    '::placeholder': {
+      color: vars.color.bluegray6,
+    },
   },
 ]);
 
 export const textLength = style([
-  bodyMedium,
+  fonts.BodyRegular,
   {
-    color: vars.color.gray7,
+    color: vars.color.bluegray6,
     textAlign: 'end',
   },
 ]);
@@ -54,7 +77,7 @@ const option = style({
   justifyContent: 'center',
   alignItems: 'center',
 
-  backgroundColor: vars.color.gray5 /**TODO: white로 대체예정*/,
+  backgroundColor: vars.color.bggray,
   backgroundImage: imageUrl,
   backgroundSize: 'cover',
 
@@ -124,22 +147,22 @@ export const profileOption = style([
 
 export const validationMessage = style({
   marginTop: '0.6rem',
-  marginLeft: '0.9rem',
+  marginLeft: '0.6rem',
 
   display: 'flex',
   alignItems: 'center',
   gap: '0.45rem',
 });
 
 export const errorText = style([
-  caption,
+  fonts.Label,
   {
     color: vars.color.red,
   },
 ]);
 
 export const successText = style([
-  caption,
+  fonts.Label,
   {
     color: vars.color.blue,
   },

diff --git a/src/app/account/profile/_components/ProfileForm.tsx b/src/app/account/profile/_components/ProfileForm.tsx
@@ -151,9 +151,9 @@ export default function ProfileForm({
       ) : (
         <div className={styles.form}>
           {/* 닉네임 */}
-          <div>
+          <div className={styles.field}>
+            <label className={styles.label}>{accountLocale[language].nickname}</label>
             <div className={styles.inputContainer}>
-              <label className={styles.label}>{accountLocale[language].nickname}</label>
               <input
                 className={styles.inputText}
                 placeholder={profilePlaceholder[language].nickname}
@@ -181,9 +181,9 @@ export default function ProfileForm({
             )}
           </div>
 
-          <div>
+          <div className={styles.field}>
+            <label className={styles.label}>{accountLocale[language].introduce}</label>
             <div className={styles.inputContainer}>
-              <label className={styles.label}>{accountLocale[language].introduce}</label>
               <textarea
                 className={styles.textarea}
                 placeholder={profilePlaceholder[language].description}
@@ -200,62 +200,67 @@ export default function ProfileForm({
             )}
           </div>
 
-          <div className={styles.inputContainer}>
-            <p className={styles.label}>{accountLocale[language].backgroundImage}</p>
-            <div className={styles.backgroundOptionContainer}>
-              <label className={styles.backgroundOption} htmlFor="backgroundImage">
-                <Camera />
-              </label>
-              <input
-                type="file"
-                id="backgroundImage"
-                className={styles.inputFile}
-                accept=".jpg, .jpeg, .png"
-                {...newBackgroundImageRegister}
-                onChange={(e) => handleBackgroundFileInput(e)}
-              />
-              {defaultBackgroundImages?.map((image) => (
-                <button
-                  key={image.name}
-                  type="button"
-                  className={`${styles.backgroundOption} ${selectedBackground === image.imageUrl ? styles.selectedOption : ''}`}
-                  style={assignInlineVars({
-                    [styles.imageUrl]: `url(${image?.imageUrl})`,
-                  })}
-                  onClick={() => {
-                    handleDefaultImageClick('background', image.imageUrl);
-                  }}
+          <div className={styles.field}>
+            <span className={styles.label}>{accountLocale[language].backgroundImage}</span>
+            <div className={styles.inputContainer}>
+              <div className={styles.backgroundOptionContainer}>
+                <label className={styles.backgroundOption} htmlFor="backgroundImage">
+                  <Camera />
+                </label>
+                <input
+                  type="file"
+                  id="backgroundImage"
+                  className={styles.inputFile}
+                  accept=".jpg, .jpeg, .png"
+                  {...newBackgroundImageRegister}
+                  onChange={(e) => handleBackgroundFileInput(e)}
                 />
-              ))}
+                {defaultBackgroundImages?.map((image) => (
+                  <button
+                    key={image.name}
+                    type="button"
+                    className={`${styles.backgroundOption} ${selectedBackground === image.imageUrl ? styles.selectedOption : ''}`}
+                    style={assignInlineVars({
+                      [styles.imageUrl]: `url(${image?.imageUrl})`,
+                    })}
+                    onClick={() => {
+                      handleDefaultImageClick('background', image.imageUrl);
+                    }}
+                  />
+                ))}
+              </div>
             </div>
           </div>
-          <div className={styles.inputContainer}>
-            <p className={styles.label}>{accountLocale[language].profileImageAlt}</p>
-            <div className={styles.profileOptionContainer}>
-              <label className={styles.profileOption} htmlFor="profileImage">
-                <Camera />
-              </label>
-              <input
-                type="file"
-                id="profileImage"
-                className={styles.inputFile}
-                accept=".jpg, .jpeg, .png"
-                {...newProfileImageRegister}
-                onChange={(e) => handleProfileFileInput(e)}
-              />
-              {defaultProfileImages?.map((image) => (
-                <button
-                  key={image.name}
-                  type="button"
-                  className={`${styles.profileOption} ${selectedProfile === image.imageUrl ? styles.selectedOption : ''}`}
-                  style={assignInlineVars({
-                    [styles.imageUrl]: `url(${image?.imageUrl})`,
-                  })}
-                  onClick={() => {
-                    handleDefaultImageClick('profile', image.imageUrl);
-                  }}
+
+          <div className={styles.field}>
+            <span className={styles.label}>{accountLocale[language].profileImageAlt}</span>
+            <div className={styles.inputContainer}>
+              <div className={styles.profileOptionContainer}>
+                <label className={styles.profileOption} htmlFor="profileImage">
+                  <Camera />
+                </label>
+                <input
+                  type="file"
+                  id="profileImage"
+                  className={styles.inputFile}
+                  accept=".jpg, .jpeg, .png"
+                  {...newProfileImageRegister}
+                  onChange={(e) => handleProfileFileInput(e)}
                 />
-              ))}
+                {defaultProfileImages?.map((image) => (
+                  <button
+                    key={image.name}
+                    type="button"
+                    className={`${styles.profileOption} ${selectedProfile === image.imageUrl ? styles.selectedOption : ''}`}
+                    style={assignInlineVars({
+                      [styles.imageUrl]: `url(${image?.imageUrl})`,
+                    })}
+                    onClick={() => {
+                      handleDefaultImageClick('profile', image.imageUrl);
+                    }}
+                  />
+                ))}
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/app/account/profile/page.tsx b/src/app/account/profile/page.tsx
@@ -19,7 +19,6 @@ import BlueButton from '@/components/BlueButton/BlueButton';
 import ProfileForm from './_components/ProfileForm';
 import * as styles from './page.css';
 import ImagePreview from './_components/ImagePreview';
-import ProfileSkeleton from './_components/ProfileSkeleton';
 import { useLanguage } from '@/store/useLanguage';
 import { accountLocale } from '@/app/account/locale';
 

diff --git a/src/lib/constants/formInputValidationRules.ts b/src/lib/constants/formInputValidationRules.ts
@@ -1,3 +1,5 @@
+import { m } from 'framer-motion';
+
 //item
 export const itemTitleRules = {
   required: '아이템을 입력해주세요.',
@@ -55,3 +57,8 @@ export const nicknameDuplicateRules = {
   type: 'duplicated',
   message: '이미 사용중인 닉네임이에요.',
 };
+
+export const nicknameUnavailableRules = {
+  type: 'unavailable',
+  message: '사용할 수 없는 닉네임이에요.',
+};