diff --git a/README.md b/README.md index a06d7f0..de4aed7 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ - - + ## 프로젝트 소개 @@ -67,7 +66,8 @@ ## 기술 스택 - FrontEnd + +FrontEnd
@@ -80,8 +80,7 @@
- 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 +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
![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%; `;