chore : 작성페이지 input 수정 (#275)

* style : input 수정 * chore : readme 수정
prgrms-fe-devcourse · Nov 8, 2024 · b6347b4 · b6347b4
1 parent 65b9ad2
commit b6347b4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,25 @@
+import { Button } from '../../stories/Button';
 import styled from 'styled-components';
 
 export const IdContainerStyled = styled.div`
     display: flex;
     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%;
 `;