[Fix] 컴포넌트 스타일 수정 (#102)

* fix: 폴더명 Images를 images로 변경 * fix(apps/web): 간단한 레이아웃 수정 * fix(apps/web): NavBar 레이아웃 수정 * fix(packages/ui, apps/web): TextField 레이아웃 깨짐 수정 * fix(packages/ui): Checkbox width 수정 * docs(packages/ui): TextField JSDoc 수정
YAPP-Github · Feb 4, 2025 · 7853875 · 7853875
1 parent 6fc3aa3
commit 7853875
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 14 deletions.
diff --git a/apps/web/src/app/create/_components/AnimatedContainer/AnimatedContainer.css.ts b/apps/web/src/app/create/_components/AnimatedContainer/AnimatedContainer.css.ts
@@ -2,9 +2,9 @@ import { vars } from '@repo/theme';
 import { style } from '@vanilla-extract/css';
 
 export const containerStyle = style({
-  maxWidth: '92rem',
   margin: '0 auto',
-  width: '100%',
+  minWidth: '86rem',
+  maxWidth: '92rem',
   padding: `${vars.space[32]} ${vars.space[32]} 12rem ${vars.space[32]}`,
 
   borderRadius: '2.4rem 2.4rem 0 0',

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -365,18 +365,37 @@ export default function Home() {
               showCounter
               {...register('aiUpgrade')}
             />
-            <TextField.Submit type="submit" />
           </TextField>
 
           <TextField id="ai-field" variant="button" isError>
             <TextField.Label>AI 업그레이드</TextField.Label>
             <TextField.Input
               placeholder="AI에게 요청하여 글 업그레이드하기"
               maxLength={5000}
+              sumbitButton={<TextField.Submit type="submit" />}
+              showCounter
+              {...register('aiUpgrade')}
+            />
+          </TextField>
+
+          <TextField id="ai-field" variant="button">
+            <TextField.Label>AI 업그레이드</TextField.Label>
+            <TextField.Input
+              placeholder="AI에게 요청하여 글 업그레이드하기"
+              maxLength={5000}
+              sumbitButton={<TextField.Submit type="submit" />}
+              {...register('aiUpgrade')}
+            />
+          </TextField>
+
+          <TextField id="ai-field" variant="button">
+            <TextField.Input
+              placeholder="AI에게 요청하여 글 업그레이드하기"
+              maxLength={5000}
+              sumbitButton={<TextField.Submit type="submit" />}
               showCounter
               {...register('aiUpgrade')}
             />
-            <TextField.Submit type="submit" />
           </TextField>
         </div>
       </form>

diff --git a/apps/web/src/assets/Images/instead.webp b/apps/web/src/assets/Images/instead.webp
diff --git a/apps/web/src/components/common/NavBar/NavBar.css.ts b/apps/web/src/components/common/NavBar/NavBar.css.ts
@@ -3,7 +3,7 @@ import { vars } from '@repo/theme';
 
 export const navBar = style({
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'flex-start',
   alignItems: 'center',
   position: 'fixed',
   top: 0,
@@ -19,3 +19,11 @@ export const scrolled = style({
   background: 'rgba(255, 255, 255, 0.01)',
   backdropFilter: 'blur(50px)',
 });
+
+export const bothAddons = style({
+  justifyContent: 'space-between',
+});
+
+export const rightAddonOnly = style({
+  justifyContent: 'flex-end',
+});
diff --git a/apps/web/src/components/common/NavBar/NavBar.tsx b/apps/web/src/components/common/NavBar/NavBar.tsx
@@ -4,14 +4,22 @@ import { ReactNode } from 'react';
 import * as styles from './NavBar.css';
 
 export type NavBarProps = {
-  leftAddon: ReactNode;
-  rightAddon: ReactNode;
+  leftAddon?: ReactNode;
+  rightAddon?: ReactNode;
   isScrolled: boolean;
 };
 
 export function NavBar({ leftAddon, rightAddon, isScrolled }: NavBarProps) {
+  const getNavBarClassName = () => {
+    const classes = [styles.navBar];
+    if (isScrolled) classes.push(styles.scrolled);
+    if (leftAddon && rightAddon) classes.push(styles.bothAddons);
+    else if (rightAddon && !leftAddon) classes.push(styles.rightAddonOnly);
+    return classes.join(' ');
+  };
+
   return (
-    <div className={`${styles.navBar} ${isScrolled ? styles.scrolled : ''}`}>
+    <div className={getNavBarClassName()}>
       {leftAddon}
       {rightAddon}
     </div>

diff --git a/packages/ui/src/components/Checkbox/Checkbox.css.ts b/packages/ui/src/components/Checkbox/Checkbox.css.ts
@@ -7,6 +7,7 @@ export const container = recipe({
     alignItems: 'center',
     gap: tokens.spacing[4],
     cursor: 'pointer',
+    width: 'fit-content',
   },
   variants: {
     disabled: {

diff --git a/packages/ui/src/components/TextField/TextField.css.ts b/packages/ui/src/components/TextField/TextField.css.ts
@@ -12,9 +12,12 @@ export const textFieldWrapperStyle = style({
 
 export const textFieldContainerStyle = recipe({
   base: {
+    position: 'relative',
     padding: vars.space[16],
     backgroundColor: vars.colors.grey50,
     borderRadius: '1.2rem',
+    display: 'flex',
+    alignItems: 'center',
   },
   variants: {
     variant: {
@@ -84,14 +87,9 @@ export const textFieldStyle = recipe({
 export const submitButtonStyle = recipe({
   base: {
     position: 'absolute',
-    top: '50%',
-    transform: 'translateY(-50%)',
     right: '1.2rem',
     width: '3.2rem',
     height: '3.2rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     border: 'none',
     background: 'transparent',
     padding: 0,

diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx
@@ -11,11 +11,12 @@ import { TextFieldSubmit } from './TextFieldSubmit';
  *   <TextField.Label>메시지</TextField.Label>
  *   <TextField.Input
  *     placeholder="메시지를 입력하세요"
+ *     showCounter
+ *     sumbitButton={<TextField.Submit type="submit" />}
  *     {...register('message', {
  *       value: '초기값'
  *     })}
  *   />
- *   <TextField.Submit type="submit" />
  * </TextField>
  *
  * // 2. onChange 이벤트가 필요한 제어 컴포넌트

diff --git a/packages/ui/src/components/TextField/TextFieldInput.tsx b/packages/ui/src/components/TextField/TextFieldInput.tsx
@@ -6,17 +6,20 @@ import {
   useRef,
   useEffect,
   useContext,
+  ReactNode,
 } from 'react';
 import { TextFieldContext } from './context';
 import { textFieldContainerStyle, textFieldStyle } from './TextField.css';
 import { TextFieldCounter } from './TextFieldCounter';
 import { isNil, mergeRefs } from '../../utils';
+import { TextFieldSubmit } from './TextFieldSubmit';
 
 export type TextFieldInputProps = {
   maxLength?: number;
   showCounter?: boolean;
   value?: string;
   defaultValue?: string;
+  sumbitButton?: ReactNode;
 } & Omit<
   ComponentPropsWithoutRef<'textarea'>,
   'maxLength' | 'value' | 'defaultValue'
@@ -32,6 +35,7 @@ export const TextFieldInput = forwardRef<
       showCounter = false,
       value: controlledValue,
       defaultValue,
+      sumbitButton,
       className = '',
       onChange,
       ...props
@@ -88,6 +92,7 @@ export const TextFieldInput = forwardRef<
             data-multiline={isMultiline}
             {...props}
           />
+          {sumbitButton}
         </div>
         {showCounter && (
           <TextFieldCounter current={value.length} max={maxLength} />