feat: 스택 검색 기능 구현

src/Assets/index.tsx

@@ -27,6 +27,8 @@ export { default as Loading } from './icons/lodaing.svg?react';
 export { default as Logout } from './icons/logout.svg?react';
 export { default as Article } from './icons/article.svg?react';
 export { default as Study } from './icons/study.svg?react';
+export { default as StudyThumbnail } from './icons/studyThumbnail.svg?react';
+export { default as Setting } from './icons/setting.svg?react';
 
 // Logo
 export { default as BlankLogo } from './images/blank-logo.png';

src/Components/Common/ChipMenu/index.tsx

@@ -30,9 +30,13 @@ const ChipMenuContainer = styled.div<{ checked: boolean }>`
   font-style: normal;
   font-weight: 600;
   line-height: 40px;
+  white-space: nowrap;
 
   &:hover {
     cursor: pointer;
+    border: 1px solid ${({ theme }) => theme.color.black1};
+    background: ${({ theme }) => theme.color.orange4};
+    color: ${({ theme }) => theme.color.white};
   }
 `;
 

src/Components/Common/InfoField/index.tsx

@@ -5,11 +5,12 @@ export interface InfoFieldProps {
   title: string;
   content: string | number;
   width?: string;
-  titleWidth?: string;
+  titleWidth?: number;
   contentWidth?: string;
   flexDirection?: string;
-  gap?: string;
+  gap?: number;
   disabled?: boolean;
+  fontSize?: number;
 }
 
 export const InfoField = ({
@@ -18,6 +19,7 @@ export const InfoField = ({
   contentWidth,
   title,
   content,
+  fontSize,
   flexDirection,
   gap,
   disabled = false,
@@ -30,6 +32,7 @@ export const InfoField = ({
       flexDirection={flexDirection}
       gap={gap}
       disabled={disabled}
+      fontSize={fontSize}
     >
       <div className="field__title">{title}</div>
       <div className="field__content">{content}</div>
@@ -39,20 +42,21 @@ export const InfoField = ({
 
 const InfoFieldWrapper = styled.div<{
   width?: string;
-  titleWidth?: string;
+  titleWidth?: number;
   contentWidth?: string;
   flexDirection?: string;
-  gap?: string;
+  gap?: number;
   disabled?: boolean;
+  fontSize?: number;
 }>`
   display: flex;
   flex-direction: ${(props) => props.flexDirection || 'row'};
   width: ${(props) => props.width};
   text-align: start;
   gap: ${(props) => (props.flexDirection ? '4px' : '24px')};
-  font-size: ${(props) => props.theme.font.medium};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : props.theme.font.medium)};
   font-weight: 500;
-  line-height: 40px;
+  line-height: 24px;
 
   .field {
     &__title {
@@ -62,10 +66,15 @@ const InfoFieldWrapper = styled.div<{
       ${media.tablet} {
         width: auto;
       }
+
+      ${media.mobile} {
+        width: ${({ titleWidth }) => `${titleWidth}px` || 'auto'};
+      }
     }
 
     &__content {
       color: ${({ theme, disabled }) => (disabled ? 'rgba(0, 0, 0, 0.25)' : theme.color.black2)};
+      overflow-x: hidden;
     }
   }
 `;

src/Components/Common/InputText/index.tsx

@@ -1,14 +1,39 @@
-import React, { ForwardedRef } from 'react';
+import { ComponentProps, ForwardedRef, ReactNode, forwardRef } from 'react';
 import styled from 'styled-components';
-
 interface InputTextProps extends React.InputHTMLAttributes<HTMLInputElement> {
   placeholder?: string;
   inputType?: 'text' | 'email' | 'password' | 'member';
+  defaultValue?: string;
+  currentLength?: number;
+  maxLength?: number;
+  icon?: ReactNode;
 }
 
-const InputText = React.forwardRef(
-  ({ placeholder, inputType, onChange, ...props }: InputTextProps, ref: ForwardedRef<HTMLInputElement>) => {
-    return <InputWrapper placeholder={placeholder} ref={ref} type={inputType} onChange={onChange} {...props} />;
+const InputText = forwardRef<HTMLInputElement, ComponentProps<'input'> & InputTextProps>(
+  (
+    { name, placeholder, defaultValue, inputType, onChange, maxLength, currentLength, icon, ...props }: InputTextProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    return (
+      <Box>
+        <InputWrapper
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          name={name}
+          ref={ref}
+          type={inputType ?? 'text'}
+          onChange={onChange}
+          autoComplete="off"
+          {...props}
+        />
+        {maxLength && (
+          <LengthIndicator>
+            {currentLength} / {maxLength}
+          </LengthIndicator>
+        )}
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+      </Box>
+    );
   },
 );
 
@@ -17,18 +42,42 @@ const InputWrapper = styled.input`
   padding: 10px 16px;
   border: 1px solid ${({ theme }) => theme.color.black1};
   border-radius: ${({ theme }) => theme.borderRadius.small};
-  font-size: ${({ theme }) => theme.font.medium};
+  font-size: ${({ theme }) => theme.font.small};
   line-height: 1.5;
   color: ${({ theme }) => theme.color.black};
-
   ::placeholder {
     color: ${({ theme }) => theme.color.black2};
     font-family: 'Pretendard400';
-    font-size: ${({ theme }) => theme.font.medium};
+    font-size: ${({ theme }) => theme.font.small};
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
   }
 `;
 
+const Box = styled.div`
+  position: relative;
+  display: flex;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const LengthIndicator = styled.div`
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  color: #00000073;
+  font-family: Pretendard400;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+`;
+
 export default InputText;

src/Components/Common/StudyToken/index.tsx

@@ -21,9 +21,10 @@ const StudyToken = ({ status }: StudyTokenProps) => {
 
 const StudyTokenWrapper = styled.span<{ status: ApplyStatus | MemberStatus | StudyStatus }>`
   display: flex;
-  padding: 4px 12px;
+  padding: 0px 12px;
   justify-content: center;
   align-items: center;
+  white-space: nowrap;
 
   color: ${({ status, theme }) =>
     status === 'PARTICIPATED'
@@ -45,7 +46,7 @@ const StudyTokenWrapper = styled.span<{ status: ApplyStatus | MemberStatus | Stu
   font-family: 'Pretendard500';
   font-style: normal;
   font-weight: 500;
-  line-height: 30px;
+  line-height: 32px;
 `;
 
 export default StudyToken;

src/Components/Common/TechStack/index.tsx

@@ -23,7 +23,7 @@ export const TechStack = ({ name, imageUrl, selected = false, onClick }: TechSta
 
 const TechStackWrapper = styled.div<{ selected: boolean; imageUrl?: string }>`
   display: inline-flex;
-  padding: 8px 12px 8px 8px;
+  padding: 8px;
   justify-content: center;
   align-items: center;
   gap: 12px;
@@ -44,14 +44,13 @@ const TechStackWrapper = styled.div<{ selected: boolean; imageUrl?: string }>`
   }
 
   .stack__name {
-    width: 108px;
+    width: 84px;
     color: ${({ theme, selected }) => (selected ? theme.color.purple1 : theme.color.black3)};
-    font-family: Pretendard600;
+    font-family: 'Pretendard600';
     font-size: ${({ theme }) => theme.font.xsmall};
     font-style: normal;
     font-weight: 600;
-    line-height: 32px;
-    white-space: nowrap;
+    line-height: 16px;
   }
 
   &:hover {

src/Components/DropdownFilter/index.tsx

@@ -6,7 +6,7 @@ import { useOutSideClick } from '@/Hooks/useOutsideClick';
 import { Up, Down } from '@/Assets';
 import { useFilterOptionsStore } from '@/store/filter';
 import { media } from '@/Styles/theme';
-import StackModal from '../Modal/StackModal';
+import { StackModal } from '../Modal/StackModal';
 
 export interface DropdownFilterProps {
   filterName: string;
@@ -94,10 +94,6 @@ const DropdownFilterWrapper = styled.ul`
     text-overflow: ellipsis;
   }
 
-  &:hover {
-    cursor: pointer;
-  }
-
   ${media.custom(800)} {
     width: 90px;
   }
@@ -123,6 +119,7 @@ const DropdownSelectWrapper = styled.div<{ checked?: boolean }>`
     svg > path {
       fill: ${(props) => props.theme.color.white};
     }
+    cursor: pointer;
   }
   svg > path {
     fill: ${({ theme, checked }) => (checked ? theme.color.orange2 : theme.color.black3)};

src/Components/Footer/index.tsx

@@ -60,7 +60,7 @@ const FooterWrapper = styled.footer`
   background-color: ${({ theme }) => theme.color.gray1};
 
   ${media.custom(800)} {
-    width: 400px;
+    width: 100%;
     margin: 20px auto 0 auto;
   }
 `;

src/Components/Modal/EditProfileModal/EditProfileModal.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import EditProfileModal from '.';
+import { EditProfileModal } from '.';
 import { fn } from '@storybook/test';
 
 const meta = {

src/Components/Modal/EditProfileModal/index.tsx

@@ -14,7 +14,7 @@ interface EdiptProfileModalProps {
   handleEdit: React.Dispatch<SetStateAction<'NOT START' | 'EDIT' | 'END'>>;
 }
 
-const EditProfileModal = ({ userNickname, handleEdit }: EdiptProfileModalProps) => {
+export const EditProfileModal = ({ userNickname, handleEdit }: EdiptProfileModalProps) => {
   const { closeModal } = useModalStore();
   const queryClient = useQueryClient();
   const submitSuccessHandler = () => {
@@ -157,6 +157,10 @@ const FormWrapper = styled.div`
   .input__section {
     display: flex;
     gap: 8px;
+
+    & > div {
+      width: 100%;
+    }
   }
 
   .error__message {
@@ -183,5 +187,3 @@ const ModalBtnsWrapper = styled.div`
     width: 100%;
   }
 `;
-
-export default EditProfileModal;

src/Components/Modal/StackModal/StackModal.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StackModal } from '.';
+
+const meta = {
+  component: StackModal,
+  args: {
+    handleModal: () => {},
+    initialSelectedStacks: [
+      {
+        id: 93,
+        name: 'ReactJS',
+        imageUrl: '/static/stack/images/reactjs.png',
+      },
+      {
+        id: 96,
+        name: 'React Query',
+        imageUrl: '/static/stack/images/react_query.png',
+      },
+    ],
+    handleSelectedStacks: () => {},
+  },
+} satisfies Meta<typeof StackModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};