[Feat] Calculator UX 수정

app/src/@shared/ui-kit/Writable/WritableNum.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+
+export const WritableNum = forwardRef(
+  (
+    props: React.InputHTMLAttributes<HTMLInputElement>,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+    const { value, ...restProps } = props;
+
+    return (
+      <StyledWritable
+        {...restProps}
+        value={value?.toString()}
+        type="number"
+        ref={ref}
+        autoComplete="off"
+      />
+    );
+  },
+);
+
+WritableNum.displayName = 'WritableNum';
+
+const StyledWritable = styled.input`
+  all: unset;
+  width: 100%;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.mono.gray500};
+  }
+`;

app/src/@shared/ui-kit/Writable/index.ts

@@ -1 +1,2 @@
 export * from './Writable';
+export * from './WritableNum';

app/src/Calculator/atoms/subjectListAtom.ts

@@ -16,6 +16,6 @@ export const emptySubject = (index: number) => {
   };
 };
 
-export const subjectListAtomInitialValue: Subject[] = [emptySubject(0)];
+export const subjectListAtomInitialValue: Subject[] = [];
 
 export const subjectListAtom = atom<Subject[]>(subjectListAtomInitialValue);

app/src/Calculator/components/CalculatorBasicInfoInputGroup/index.tsx

@@ -1,11 +1,18 @@
 import { useAtom, useAtomValue } from 'jotai';
 import { useEffect } from 'react';
+import styled from '@emotion/styled';
 
 import { calculatorUserInfoAtom } from '@/Calculator/atoms/calculatorUserInfoAtom';
 import { subjectListAtom } from '@/Calculator/atoms/subjectListAtom';
 import { useSubjectList } from '@/Calculator/hooks/useSubjectList';
 import { InfoTooltip } from '@shared/components/InfoTooltip';
-import { Body1MediumText, HStack, Input, Text, VStack } from '@shared/ui-kit';
+import {
+  Body1MediumText,
+  HStack,
+  Text,
+  VStack,
+  WritableNum,
+} from '@shared/ui-kit';
 
 export const CalculatorBasicInfoInputGroup = () => {
   const [calculatorUserInfo, setCalculatorUserInfo] = useAtom(
@@ -38,31 +45,33 @@ export const CalculatorBasicInfoInputGroup = () => {
           <Body1MediumText>현재 레벨</Body1MediumText>
           <InfoTooltip text="레벨이 8.41을 넘으면, 블랙홀 기간이 늘지 않아요." />
         </HStack>
-        <Input
-          name="currentLevel"
-          type="number"
-          min="0"
-          max="30"
-          step="0.01"
-          value={currentLevel.toString()}
-          onChange={handleChange}
-          style={{ width: '5rem' }}
-        />
+        <InputLayout>
+          <WritableNum
+            name="currentLevel"
+            min="0"
+            max="30"
+            step="0.01"
+            value={currentLevel}
+            onChange={handleChange}
+            style={{ width: '5rem' }}
+          />
+        </InputLayout>
       </HStack>
       <HStack spacing="2rem">
         <HStack w="13rem" justify="start" spacing="1rem">
           <Body1MediumText>현재 블랙홀</Body1MediumText>
           <InfoTooltip text="현재 블랙홀 + 본 과정 시작 날짜가 670일이 넘으면, 블랙홀 기간이 늘지 않아요." />
         </HStack>
         <HStack spacing="0.3rem">
-          <Input
-            name="currentBlackhole"
-            type="number"
-            min="0"
-            value={currentBlackhole.toString()}
-            onChange={handleChange}
-            style={{ width: '5rem' }}
-          />
+          <InputLayout>
+            <WritableNum
+              name="currentBlackhole"
+              min="0"
+              value={currentBlackhole}
+              onChange={handleChange}
+              style={{ width: '5rem' }}
+            />
+          </InputLayout>
           <Text>일</Text>
         </HStack>
       </HStack>
@@ -72,17 +81,31 @@ export const CalculatorBasicInfoInputGroup = () => {
           <InfoTooltip text="휴학일이 포함된 경우, 휴학 기간을 뺄 수 있어요." />
         </HStack>
         <HStack spacing="0.3rem">
-          <Input
-            name="daysFromStart"
-            type="number"
-            min="0"
-            value={daysFromStart.toString()}
-            onChange={handleChange}
-            style={{ width: '5rem' }}
-          />
+          <InputLayout>
+            <WritableNum
+              name="daysFromStart"
+              min="0"
+              value={daysFromStart}
+              onChange={handleChange}
+              style={{ width: '5rem' }}
+            />
+          </InputLayout>
           <Text>일</Text>
         </HStack>
       </HStack>
     </VStack>
   );
 };
+
+const InputLayout = styled.div`
+  padding: 1rem 2rem;
+  border-radius: ${({ theme }) => theme.radius.md};
+  transition: all 0.2s;
+  border: 1px solid ${({ theme }) => theme.colors.mono.gray200};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.mono.gray300};
+  }
+  color: ${({ theme }) => theme.colors.mono.black};
+  background: ${({ theme }) => theme.colors.background.box.default};
+`;

app/src/Calculator/components/CalculatorInput/CalculatorInputContent.tsx

@@ -1,9 +1,11 @@
 import { useAtomValue } from 'jotai';
 
-import { subjectListAtom } from '@/Calculator/atoms/subjectListAtom';
+import {
+  emptySubject,
+  subjectListAtom,
+} from '@/Calculator/atoms/subjectListAtom';
 import { useSubjectList } from '@/Calculator/hooks/useSubjectList';
 import type { Subject } from '@/Calculator/types/Subject';
-import { Body1MediumText, VStack } from '@shared/ui-kit';
 import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType';
 
 import { CalculatorInputContentCardView } from '../CalculatorInputContentCardView';
@@ -18,6 +20,16 @@ export const CalculatorInputContent = () => {
     updateSubjectList(subjectList);
   };
 
+  const handleSubjectDelete = (index: number) => {
+    if (subjectList.length === 1) {
+      updateSubjectList([emptySubject(0)]);
+      return;
+    }
+
+    subjectList.splice(index, 1);
+    updateSubjectList(subjectList);
+  };
+
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement>,
     index: number,
@@ -59,21 +71,18 @@ export const CalculatorInputContent = () => {
       {device === 'mobile' ? (
         <CalculatorInputContentCardView
           onSubjectListChange={handleSubjectListChange}
+          onSubjectDelete={handleSubjectDelete}
           onInputChange={handleInputChange}
           onCheckboxChange={handleCheckboxChange}
         />
       ) : (
         <CalculatorInputContentTableView
           onSubjectListChange={handleSubjectListChange}
+          onSubjectDelete={handleSubjectDelete}
           onInputChange={handleInputChange}
           onCheckboxChange={handleCheckboxChange}
         />
       )}
-      {subjectList.length === 0 && (
-        <VStack h="5rem">
-          <Body1MediumText>프로젝트를 추가하세요</Body1MediumText>
-        </VStack>
-      )}
     </>
   );
 };

app/src/Calculator/components/CalculatorInputContentCardView/CalculatorInputContentCardListItem.tsx

@@ -5,7 +5,13 @@ import { OrderItemButtonGroup } from '@/Calculator/components/OrderItemButtonGro
 import { ProjectSpotlight } from '@/Calculator/components/ProjectSpotlight';
 import { PROJECT_LIST_TITLES } from '@/Calculator/constants/projectListTitles';
 import type { Subject } from '@/Calculator/types/Subject';
-import { Body1BoldText, HStack, Text, VStack, Writable } from '@shared/ui-kit';
+import {
+  Body1BoldText,
+  HStack,
+  Text,
+  VStack,
+  WritableNum,
+} from '@shared/ui-kit';
 import { CheckboxWithLabel } from '@shared/ui-kit-styled';
 import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter';
 
@@ -23,6 +29,7 @@ export const CalculatorInputContentCardListItem = ({
   item: { name, expEdited, score, bonus, blackhole, finishLevel },
   index,
   onSubjectListChange,
+  onSubjectDelete,
   onInputChange,
   onCheckboxChange,
 }: CalculatorInputContentCardListItemProps) => {
@@ -42,6 +49,7 @@ export const CalculatorInputContentCardListItem = ({
             tableRowList={subjectList}
             index={index}
             onListChange={onSubjectListChange}
+            handleDelete={onSubjectDelete}
           />
         </HStack>
         <ProjectSpotlight
@@ -58,13 +66,12 @@ export const CalculatorInputContentCardListItem = ({
             <Text color={theme.colors.primary.default}>{SCORE}</Text>
           </TextLayout>
           <InputLayout>
-            <Writable
-              type="number"
+            <WritableNum
               min="0"
               max="125"
               name="score"
               onChange={(event) => onInputChange(event, index)}
-              value={score.toString()}
+              value={score}
             />
           </InputLayout>
         </VStack>

app/src/Calculator/components/CalculatorInputContentCardView/index.tsx

@@ -6,6 +6,7 @@ import { CalculatorInputContentCardList } from './CalculatorInputContentCardList
 
 export type CalculatorInputContentCardViewProps = {
   onSubjectListChange: (subjectList: Subject[]) => void;
+  onSubjectDelete: (index: number) => void;
   onInputChange: (
     event: React.ChangeEvent<HTMLInputElement>,
     index: number,

app/src/Calculator/components/CalculatorInputContentTableView/index.tsx

@@ -6,11 +6,12 @@ import { OrderItemButtonGroup } from '@/Calculator/components/OrderItemButtonGro
 import { ProjectSpotlight } from '@/Calculator/components/ProjectSpotlight';
 import { PROJECT_LIST_TITLES } from '@/Calculator/constants/projectListTitles';
 import type { Subject } from '@/Calculator/types/Subject';
-import { MediumText, PrimaryMediumText, Writable } from '@shared/ui-kit';
+import { MediumText, PrimaryMediumText, WritableNum } from '@shared/ui-kit';
 import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter';
 
 type CalculatorInputContentTableViewProps = {
   onSubjectListChange: (subjectList: Subject[]) => void;
+  onSubjectDelete: (index: number) => void;
   onInputChange: (
     event: React.ChangeEvent<HTMLInputElement>,
     index: number,
@@ -70,13 +71,12 @@ export const CalculatorInputContentTableView = ({
               </td>
               <td>
                 <InputLayout>
-                  <Writable
-                    type="number"
+                  <WritableNum
                     min="0"
                     max="125"
                     name="score"
                     onChange={(event) => onInputChange(event, index)}
-                    value={score.toString()}
+                    value={score}
                     style={{ width: '4rem' }}
                   />
                 </InputLayout>

app/src/Calculator/components/OrderItemButtonGroup/index.tsx

@@ -11,12 +11,14 @@ type OrderItemButtonGroupProps = {
   tableRowList: Subject[];
   index: number;
   onListChange: (tableRowList: Subject[]) => void;
+  handleDelete?: (index: number) => void;
 };
 
 export const OrderItemButtonGroup = ({
   tableRowList,
   index,
   onListChange,
+  handleDelete,
 }: OrderItemButtonGroupProps) => {
   const theme = useTheme();
 
@@ -39,6 +41,11 @@ export const OrderItemButtonGroup = ({
   };
 
   const handleClickDelete = () => {
+    if (handleDelete) {
+      handleDelete(index);
+      return;
+    }
+
     tableRowList.splice(index, 1);
     onListChange(tableRowList);
   };

app/src/Calculator/index.tsx

@@ -22,6 +22,7 @@ import { expTablesAtom } from './atoms/expTablesAtom';
 import { subjectListAtom } from './atoms/subjectListAtom';
 import { CalculatorBasicInfoInputGroup } from './components/CalculatorBasicInfoInputGroup';
 import { getDifferences } from './utils/getDifferences';
+import { emptySubject } from './atoms/subjectListAtom';
 
 export const GET_BLACKHOLE_INFO = gql(/* GraphQL */ `
   query GetBlackholeInfo {
@@ -68,6 +69,10 @@ const CalculatorPage = () => {
     setExpTables({ expMaxTable, expReqTable });
   }, [data, setCalculatorUserInfo, setExpTables, setSubjectList]);
 
+  useEffect(() => {
+    setSubjectList([emptySubject(0)]);
+  }, [setSubjectList]);
+
   if (loading || error || !data) {
     return <></>;
   }
@@ -76,7 +81,7 @@ const CalculatorPage = () => {
     <>
       <Seo title="블랙홀 계산기" />
       <VStack w="100%" spacing="4rem">
-        <VStack w="100%" align="start" spacing="1rem">
+        <VStack w="100%" align="start" spacing="2rem">
           <H1BoldText>블랙홀 계산기</H1BoldText>
           <CalculatorBasicInfoInputGroup />
         </VStack>