From b6347b41598823e5d69ab74de5b3e8e53310fc8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=82=A8=EC=A0=95=EC=9A=B1?=
 <113816822+HelloWook@users.noreply.github.com>
Date: Fri, 8 Nov 2024 09:55:50 +0900
Subject: [PATCH] =?UTF-8?q?chore=20:=20=EC=9E=91=EC=84=B1=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20input=20=EC=88=98=EC=A0=95=20(#275)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style : input 수정

* chore : readme 수정
---
 README.md                                       | 17 +++++++----------
 src/features/Toast/ui/toastContainer.styled.tsx |  1 +
 .../music-search-input/ui/MusicSearchInput.tsx  |  4 ++--
 src/shared/ui/InputForm/InputForm.styled.tsx    |  5 ++++-
 src/widgets/Sign/Sign.styled.ts                 | 11 +++++++++++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index a06d7f0..de4aed7 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
-
-<img width ="96" alt="img" src="https://github.com/prgrms-fe-devcourse/NFE1-1-3-MOODI/blob/main/public/logo.svg"> 
+<img width ="96" alt="img" src="https://github.com/prgrms-fe-devcourse/NFE1-1-3-MOODI/blob/main/public/logo.svg">
 
 ## 프로젝트 소개
 
@@ -67,7 +66,8 @@
 </table>
 
 ## 기술 스택
- FrontEnd
+
+FrontEnd
 
 <p>
 
@@ -80,8 +80,7 @@
   <img src="https://img.shields.io/badge/Zustand-black?style=for-the-badge&logo=react">
 </p></p>
 
- BackEnd
-
+BackEnd
 
 ## 주요기능
 
@@ -97,14 +96,12 @@
 ![moodi_1](https://github.com/user-attachments/assets/ad2c48f9-3099-43c0-af57-516e0f7402bf)
 ![moodi_2](https://github.com/user-attachments/assets/30561f23-e8ce-4249-929f-1c7c12f43a46)
 
-
 ## 화면 설계서
-###### 🔗Figma 
+
+###### 🔗Figma
+
 <p> https://www.figma.com/design/HfJRPT9zom9TCqLSSPuSBJ/%5BMoodi%5D-%EC%95%BD%EC%8B%9D%EA%B8%B0%ED%9A%8D%EC%84%9C?node-id=0-1&t=F32FGw7hxbz11Wmv-1 </p>
 
 ![image](https://github.com/user-attachments/assets/c6be79d2-52e2-4bfe-8ac1-38271b38393b)
 
 ## 폴더구조
-
-
-
diff --git a/src/features/Toast/ui/toastContainer.styled.tsx b/src/features/Toast/ui/toastContainer.styled.tsx
index 2a9ffd9..0a6f9a3 100644
--- a/src/features/Toast/ui/toastContainer.styled.tsx
+++ b/src/features/Toast/ui/toastContainer.styled.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 export const ToastContainerStyled = styled.div`
+    z-index: 9999;
     position: fixed;
     margin-bottom: 20px;
     top: 20px;
diff --git a/src/features/diary-write/music-search-input/ui/MusicSearchInput.tsx b/src/features/diary-write/music-search-input/ui/MusicSearchInput.tsx
index 709ae5c..873a6a9 100644
--- a/src/features/diary-write/music-search-input/ui/MusicSearchInput.tsx
+++ b/src/features/diary-write/music-search-input/ui/MusicSearchInput.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import InputForm from '@/shared/ui/InputForm/InputForm';
 import { Container, SearchFormWrapper } from './MusicSearchInput.styled';
-import { useState } from 'react';
+
 import { MusicSearchInputProps } from '../model/type';
 import Button from '@/shared/ui/Button/Button';
 
diff --git a/src/shared/ui/InputForm/InputForm.styled.tsx b/src/shared/ui/InputForm/InputForm.styled.tsx
index b21eda7..1a702e2 100644
--- a/src/shared/ui/InputForm/InputForm.styled.tsx
+++ b/src/shared/ui/InputForm/InputForm.styled.tsx
@@ -5,7 +5,10 @@ export const InputContainer = styled.div<{
 }>`
     display: flex;
     flex-direction: column;
-    max-width: ${(props) => props.width};
+    width: ${(props) => props.width};
+    @media (max-width: 760px) {
+        max-width: 100%;
+    }
     font-family: 'Pretendard', sans-serif;
 `;
 
diff --git a/src/widgets/Sign/Sign.styled.ts b/src/widgets/Sign/Sign.styled.ts
index 8446c12..27fd670 100644
--- a/src/widgets/Sign/Sign.styled.ts
+++ b/src/widgets/Sign/Sign.styled.ts
@@ -1,3 +1,4 @@
+import { Button } from '../../stories/Button';
 import styled from 'styled-components';
 
 export const IdContainerStyled = styled.div`
@@ -5,10 +6,20 @@ export const IdContainerStyled = styled.div`
     justify-content: space-around;
     width: 500px;
     align-items: flex-end;
+    @media (max-width: 760px) {
+        max-width: 100%;
+        input {
+            width: 95%;
+        }
+        Button {
+            width: 30%;
+        }
+    }
 `;
 
 export const SignStyled = styled.div`
     width: 500px;
     margin: auto;
     padding-bottom: 150px;
+    max-width: 90%;
 `;