fix: fix components alignment

academic-relations · Nov 11, 2024 · d477c20 · d477c20
1 parent b9bffb0
commit d477c20
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 28 deletions.
diff --git a/packages/web/.storybook/preview.ts b/packages/web/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import react from "React";
+import React from "react";
 
 import type { Preview } from "@storybook/react";
 

diff --git a/packages/web/src/common/components/Forms/DateRangeInput.tsx b/packages/web/src/common/components/Forms/DateRangeInput.tsx
@@ -24,6 +24,7 @@ const DateRangeInputFrameInner = styled.div`
   align-items: center;
   gap: 12px;
   display: flex;
+  position: relative;
 `;
 
 const availableMonths = [

diff --git a/packages/web/src/common/components/Forms/SearchSelect/index.tsx b/packages/web/src/common/components/Forms/SearchSelect/index.tsx
@@ -106,6 +106,13 @@ const SearchList = styled.div`
   scrollbar-width: none;
 `;
 
+const InputContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
 const SearchSelect: React.FC<SearchSelectProps> = ({
   label = "",
   placeholder,
@@ -148,7 +155,7 @@ const SearchSelect: React.FC<SearchSelectProps> = ({
   return (
     <InputWrapper onFocus={() => setListToggle(true)}>
       {label && <Label>{label}</Label>}
-      <InputWrapper>
+      <InputContainer>
         <Input
           placeholder={placeholder}
           hasError={!!errorMessage}
@@ -164,24 +171,26 @@ const SearchSelect: React.FC<SearchSelectProps> = ({
             color={disabled ? colors.GRAY[200] : colors.BLACK}
           />
         </RightContentWrapper>
-      </InputWrapper>
-      {filteredOptions.length !== 0 && listToggle && (
-        <SearchList onFocus={() => setListToggle(true)}>
-          {filteredOptions.map(option => (
-            <SearchItem
-              key={option}
-              onClick={handleItemClick}
-              selected={selected}
-              isSelected={option === selected}
-            >
-              {option}
-            </SearchItem>
-          ))}
-        </SearchList>
-      )}
-      {errorMessage && !listToggle && !disabled && (
-        <ErrorMessage>{errorMessage}</ErrorMessage>
-      )}
+      </InputContainer>
+      <InputContainer>
+        {filteredOptions.length !== 0 && listToggle && (
+          <SearchList onFocus={() => setListToggle(true)}>
+            {filteredOptions.map(option => (
+              <SearchItem
+                key={option}
+                onClick={handleItemClick}
+                selected={selected}
+                isSelected={option === selected}
+              >
+                {option}
+              </SearchItem>
+            ))}
+          </SearchList>
+        )}
+        {errorMessage && !listToggle && !disabled && (
+          <ErrorMessage>{errorMessage}</ErrorMessage>
+        )}
+      </InputContainer>
     </InputWrapper>
   );
 };

diff --git a/packages/web/src/common/components/Forms/Select.tsx b/packages/web/src/common/components/Forms/Select.tsx
@@ -23,6 +23,7 @@ interface SelectProps {
 const DropdownContainer = styled.div`
   gap: 4px;
   position: relative;
+  display: flex;
 `;
 
 const disabledStyle = css`
@@ -37,7 +38,7 @@ const StyledSelect = styled.div<{
   isOpen?: boolean;
 }>`
   width: 100%;
-  padding: 8px 12px;
+  padding: 8px 32px 8px 12px;
   outline: none;
   cursor: pointer;
   background-color: ${({ theme }) => theme.colors.WHITE};
@@ -66,7 +67,7 @@ const Dropdown = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-top: 4px;
+  margin-top: 40px;
   padding: 8px;
   border: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
   border-radius: 4px;

diff --git a/packages/web/src/common/components/Forms/TextInput.tsx b/packages/web/src/common/components/Forms/TextInput.tsx
@@ -70,6 +70,13 @@ const InputWrapper = styled.div`
   gap: 4px;
 `;
 
+const InputContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
 // Component
 const TextInput: React.FC<TextInputProps> = ({
   label = "",
@@ -97,7 +104,7 @@ const TextInput: React.FC<TextInputProps> = ({
   return (
     <InputWrapper>
       {label && <Label>{label}</Label>}
-      <InputWrapper>
+      <InputContainer>
         <Input
           placeholder={placeholder}
           hasError={!!errorMessage}
@@ -108,7 +115,7 @@ const TextInput: React.FC<TextInputProps> = ({
           {...props}
         />
         {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
-      </InputWrapper>
+      </InputContainer>
     </InputWrapper>
   );
 };

diff --git a/packages/web/stories/Forms/DateRangeInput.stories.tsx b/packages/web/stories/Forms/DateRangeInput.stories.tsx
@@ -14,10 +14,16 @@ const meta: Meta<typeof DateRangeInput> = {
   argTypes: {
     label: { control: "text" },
     disabled: { control: "boolean" },
-    startValue: { control: "text" },
-    endValue: { control: "text" },
-    limitStartValue: { control: "text" },
-    limitEndValue: { control: "text" },
+    startValue: { control: "text", description: "YYYY.MM 형식으로 입력" },
+    endValue: { control: "text", description: "YYYY.MM 형식으로 입력" },
+    limitStartValue: {
+      control: "text",
+      description: "YYYY.MM 또는 YYYY.MM.DD 형식으로 입력",
+    },
+    limitEndValue: {
+      control: "text",
+      description: "YYYY.MM 또는 YYYY.MM.DD 형식으로 입력",
+    },
     onChange: { control: false },
     setErrorStatus: { control: false },
   },