design: 디자인 퍼블리싱 일부 수정작업 (메인페이지)

src/components/MainLayout/FashionListBox/SearchBox.tsx

@@ -86,7 +86,7 @@ const PrettoSlider = styled(Slider)({
 });
 
 export default function SearchBox() {
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
   const weatherData = useRecoilValue(weatherDataState);
 
@@ -235,7 +235,6 @@ export default function SearchBox() {
     };
 
     const animationData = getAnimationData();
-    // const animationData = require('../../assets/lotties/allRain.json');
 
     //lottie
     const element = useRef<HTMLDivElement>(null);

src/components/MyLayout/MyPostBox.tsx

@@ -6,27 +6,27 @@ import { useRecoilValue } from 'recoil';
 import { userIdState } from '../../utils/Recoil';
 import { UserPostListType } from '../../utils/types';
 
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  height: 600,
-  width: 400,
-  bgcolor: '#FFF',
-  borderRadius: '25px',
-  boxShadow: 24,
-  p: 2,
-};
+// const style = {
+//   position: 'absolute',
+//   top: '50%',
+//   left: '50%',
+//   transform: 'translate(-50%, -50%)',
+//   height: 600,
+//   width: 400,
+//   bgcolor: '#FFF',
+//   borderRadius: '25px',
+//   boxShadow: 24,
+//   p: 2,
+// };
 
 export default function MyPostBox() {
   const userId = useRecoilValue(userIdState);
   const [postList, setPostList] = useState<UserPostListType[]>([]);
-  const [singleId, setSingleId] = useState<string>('');
-  const [openDetail, setOpenDetail] = useState<boolean>(false);
+  // const [singleId, setSingleId] = useState<string>('');
+  // const [openDetail, setOpenDetail] = useState<boolean>(false);
 
-  const handleOpenDetail = () => setOpenDetail(true);
-  const handleCloseDetail = () => setOpenDetail(false);
+  // const handleOpenDetail = () => setOpenDetail(true);
+  // const handleCloseDetail = () => setOpenDetail(false);
 
   const userPostListAPI = async () => {
     try {

src/components/MyLayout/UserInfoBox.tsx

@@ -1,7 +1,17 @@
-import AccessibilityIcon from '@mui/icons-material/Accessibility';
-import { Avatar, Box, Typography } from "@mui/material";
+import { Avatar, Box, Button, Typography } from "@mui/material";
+import { useState } from 'react';
 
 export default function UserInfoBox() {
+    const [follow, setFollow] = useState<boolean>(false);
+
+    const handleFollowChange = () => {
+        if (follow) {
+            setFollow(false);
+        } else {
+            setFollow(true);
+        }
+    }
+
     return (
         <Box display="flex" alignItems="start" gap={2}>
             {/* 왼쪽 컬럼: Avatar와 아래의 텍스트 */}
@@ -11,23 +21,36 @@ export default function UserInfoBox() {
                     alt="User's avatar" 
                     sx={{ width: 100, height: 100, ml: -10 }} 
                 />
-                <Typography sx={{mt: 3, ml: 16}}>
+                <Typography sx={{mt: 3, ml: 16, mb: 5}}>
                     나만의 패션을 찾고 있는 난 미래의 패셔니스타.
                 </Typography>
-                <Typography sx={{mt: 1, mb: 3, ml: -10}}>
-                    <AccessibilityIcon sx={{mb: -1, mr: 1}}/>
-                    163 cm
-                </Typography>
             </Box>
 
             <Box ml={-23} mt={2}>
-                <Typography variant="h6">g.3un</Typography>
+                <Box display='flex' gap={5}>
+                    <Typography variant="h6">g.3un</Typography>
+                    <Button 
+                        variant='contained' 
+                        sx={{
+                            px: 5, 
+                            backgroundColor: follow ? '#9e9e9e' : '#7DAADB', 
+                            '&:hover': {backgroundColor: follow ? 'grey' : '#1f5091'}
+                        }} 
+                        onClick={handleFollowChange}
+                    >
+                        {follow ? 'Unfollow' : 'follow'}
+                    </Button>
+                </Box>
 
-                <Box display="flex" alignItems="center" gap={2} mt={1}>
+                <Box display="flex" alignItems="center" gap={1} mt={1}>
                     <Typography variant="body1">게시글</Typography>
-                    <Typography variant="body1" sx={{fontWeight: 700}}>2</Typography>
-                    <Typography variant="body1">게시글</Typography>
-                    <Typography variant="body1" sx={{fontWeight: 700}}>20</Typography>
+                    <Typography variant="body1" sx={{fontWeight: 700, mr: 1}}>2</Typography>
+
+                    <Typography variant="body1">팔로워</Typography>
+                    <Typography variant="body1" sx={{fontWeight: 700, mr: 1}}>10</Typography>
+
+                    <Typography variant="body1">팔로잉</Typography>
+                    <Typography variant="body1" sx={{fontWeight: 700, mr: 1}}>20</Typography>
                 </Box>
             </Box>
         </Box>