From e503eaf3c998616d2f147c3b117fd9c699cb0dd6 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:03:12 +0900 Subject: [PATCH 01/21] =?UTF-8?q?Feat:=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20ui=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/index.tsx | 39 +++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/Skeleton/index.tsx diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx new file mode 100644 index 00000000..6280dc72 --- /dev/null +++ b/src/components/Skeleton/index.tsx @@ -0,0 +1,39 @@ +import { SkeletonContainer } from './styles'; + +interface SkeletonProps { + width?: string | number; + height?: string | number; + borderRadius?: string | number; + className?: string; + style?: React.CSSProperties; +} + +const Skeleton: React.FC = ({ + width = '100%', + height = '16px', + borderRadius = '4px', + className = '', + style = {}, +}) => { + // width와 height가 숫자인 경우 px 단위를 추가 + const getSize = (size: string | number) => { + if (typeof size === 'number') { + return `${size}px`; + } + return size; + }; + + return ( + + ); +}; + +export default Skeleton; From b0f218436bfa0e48fb4bc9b490b692a7b29c82fc Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:04:24 +0900 Subject: [PATCH 02/21] =?UTF-8?q?Feat:=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/styles.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/Skeleton/styles.tsx diff --git a/src/components/Skeleton/styles.tsx b/src/components/Skeleton/styles.tsx new file mode 100644 index 00000000..14638099 --- /dev/null +++ b/src/components/Skeleton/styles.tsx @@ -0,0 +1,19 @@ +import { styled } from 'styled-components'; + +export const SkeletonContainer = styled.div` + background-color: #e0e0e0; + position: relative; + overflow: hidden; + background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + + @keyframes shimmer { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } + } +`; From f19e39445c579384bed771ac5081a2a867e6ba46 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:05:03 +0900 Subject: [PATCH 03/21] =?UTF-8?q?Refactor:=20=EB=A1=9C=EB=94=A9=EC=A4=91?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=20=ED=9B=84=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20=EC=A0=81=EC=9A=A9(=ED=94=84=EB=A1=9C=ED=95=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/index.tsx | 75 +++++++++++++++++++++++++++++++++---- 1 file changed, 68 insertions(+), 7 deletions(-) diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index 4953104f..7a62c668 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useState, useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -19,9 +20,9 @@ import button_plus from '@assets/default/plus.svg'; import CommentBottomSheet from '@components/BottomSheet/CommentBottomSheet'; import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet'; import { OODDFrame } from '@components/Frame/Frame'; -import Loading from '@components/Loading'; import Modal from '@components/Modal'; import NavBar from '@components/NavBar'; +import Skeleton from '@components/Skeleton'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar'; @@ -69,15 +70,19 @@ const Profile: React.FC = () => { try { const response = await getUserInfoApi(profileUserId); const postResponse = await getUserPostListApi(1, 10, profileUserId); - setUserInfo(response.data); - setPosts(postResponse.data.post); - setTotalPosts(postResponse.data.totalPostsCount); + // 1초 동안 스켈레톤 보여주기 확인용! 나중에 다 수정하고 삭제예정! + setTimeout(() => { + setUserInfo(response.data); + setPosts(postResponse.data.post); + setTotalPosts(postResponse.data.totalPostsCount); + setIsLoading(false); + }, 1000); } catch (error) { console.error('데이터 가져오기 실패:', error); - } finally { - setIsLoading(false); + setIsLoading(false); // 실패해도 로딩 상태는 끝나야 하니까 여기서도 false 처리 } }; + fetchData(); }, [profileUserId]); @@ -103,7 +108,63 @@ const Profile: React.FC = () => { setIsModalOpen(true); }; - if (isLoading) return ; + // 로딩 중일 때 스켈레톤 UI 표시 + if (isLoading) { + return ( + + + {isMyPage ? ( + + ) : ( + navigate(-1)} + onClickRightButton={() => setIsOptionsBottomSheetOpen(true)} + /> + )} + +
+ {/* 프로필 섹션 스켈레톤 */} + +
+ + +
+
+ + {/* 버튼 스켈레톤 */} +
+ +
+ + {/* 통계 스켈레톤 */} + + + + + {isMyPage && ( + + + + )} + + + + + + {/* 포스트 스켈레톤 */} + + {[1, 2].map((item) => ( + + ))} + + + {isMyPage && } + + + ); + } return ( From 7921a8aadeee3a7dded890b942faf21ff651e8a3 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:05:21 +0900 Subject: [PATCH 04/21] =?UTF-8?q?Fix:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/styles.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 7db238d6..5e792ffa 100644 --- a/src/pages/Profile/styles.tsx +++ b/src/pages/Profile/styles.tsx @@ -35,7 +35,6 @@ export const Stat = styled.div` export const StatNumber = styled.div` color: ${({ theme }) => theme.colors.text.caption}; - //변경된 컬러시스템에서의 gray4가 800으로 나와있어서 적용해보면 색상이 다르게 나옵니다! text-align: center; font-family: 'Pretendard'; font-size: 1rem; From a09ee4da07b7df657dd7aae231345a08b033514f Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:05:37 +0900 Subject: [PATCH 05/21] =?UTF-8?q?Fix:=20=EB=B2=84=ED=8A=BC=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/ButtonSecondary/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx index af4a1820..22682626 100644 --- a/src/pages/Profile/ButtonSecondary/styles.tsx +++ b/src/pages/Profile/ButtonSecondary/styles.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const Button = styled.button` - width: 100%; + width: 90%; margin: 16px auto; height: 3.1rem; text-align: center; From 3ccc62de796dbb9acf8ad235230e180b7291d44e Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:30:46 +0900 Subject: [PATCH 06/21] =?UTF-8?q?Fix:=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20=ED=8F=AC=EC=8A=A4=ED=8A=B8=204=EA=B0=9C=EB=A1=9C?= =?UTF-8?q?=20=EC=A6=9D=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index 7a62c668..2406deba 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -155,8 +155,8 @@ const Profile: React.FC = () => { {/* 포스트 스켈레톤 */} - {[1, 2].map((item) => ( - + {[1, 2, 3, 4].map((item) => ( + ))} From ba8b981e781e65880d6f3379c292abba5ac265a2 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 15:31:28 +0900 Subject: [PATCH 07/21] =?UTF-8?q?Fix:=20ui=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 5e792ffa..24a43903 100644 --- a/src/pages/Profile/styles.tsx +++ b/src/pages/Profile/styles.tsx @@ -59,6 +59,7 @@ export const PostsContainer = styled.div` gap: 15px; margin-bottom: 100px; padding: 20px; + width: 100%; `; export const AddButton = styled.button` From d9c742fad58cbfd230be3806706cce09538491b1 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 16:11:25 +0900 Subject: [PATCH 08/21] =?UTF-8?q?Fix:=20rem=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx index 6280dc72..f4f5bea8 100644 --- a/src/components/Skeleton/index.tsx +++ b/src/components/Skeleton/index.tsx @@ -15,7 +15,7 @@ const Skeleton: React.FC = ({ className = '', style = {}, }) => { - // width와 height가 숫자인 경우 px 단위를 추가 + // width와 height가 숫자인 경우 rem 단위를 추가 const getSize = (size: string | number) => { if (typeof size === 'number') { return `${size}px`; From d74aaaa1cf126d038a35bc7c4d943d3611089315 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 16:11:35 +0900 Subject: [PATCH 09/21] =?UTF-8?q?FIx:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index 2406deba..5c086bb5 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -37,6 +37,7 @@ import UserProfile from './UserProfile/index'; import { ProfileContainer, Header, + ProfileDetail, StatsContainer, Stat, StatNumber, @@ -126,11 +127,12 @@ const Profile: React.FC = () => {
{/* 프로필 섹션 스켈레톤 */} - -
+ + + - -
+ +
{/* 버튼 스켈레톤 */} From 469d80c7b400446b621267f68b91373b6bc796b4 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 16:11:46 +0900 Subject: [PATCH 10/21] =?UTF-8?q?Fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EC=8B=9C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/styles.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 24a43903..6ce655e4 100644 --- a/src/pages/Profile/styles.tsx +++ b/src/pages/Profile/styles.tsx @@ -12,6 +12,14 @@ export const ProfileContainer = styled.div` padding-top: 0rem; `; +export const ProfileDetail = styled.div` + flex: 1; + margin-left: 15px; + display: flex; + flex-direction: column; + gap: 5px; +`; + export const Header = styled.div` margin: 8px 20px; display: flex; From bf74952ed6edeb451e3e2db83f3fd687062afb42 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 16:13:59 +0900 Subject: [PATCH 11/21] =?UTF-8?q?Fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx index f4f5bea8..cfe5f9fc 100644 --- a/src/components/Skeleton/index.tsx +++ b/src/components/Skeleton/index.tsx @@ -13,7 +13,6 @@ const Skeleton: React.FC = ({ height = '16px', borderRadius = '4px', className = '', - style = {}, }) => { // width와 height가 숫자인 경우 rem 단위를 추가 const getSize = (size: string | number) => { @@ -30,7 +29,6 @@ const Skeleton: React.FC = ({ width: getSize(width), height: getSize(height), borderRadius: getSize(borderRadius), - ...style, }} /> ); From 25a87347f7cf85a01c1f4fb7f585fb685363ef56 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 16:16:45 +0900 Subject: [PATCH 12/21] =?UTF-8?q?Fix:=20=EB=B3=B4=EB=8D=94=20=EB=91=A5?= =?UTF-8?q?=EA=B8=80=EA=B2=8C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx index cfe5f9fc..085694e5 100644 --- a/src/components/Skeleton/index.tsx +++ b/src/components/Skeleton/index.tsx @@ -11,7 +11,7 @@ interface SkeletonProps { const Skeleton: React.FC = ({ width = '100%', height = '16px', - borderRadius = '4px', + borderRadius = '5px', className = '', }) => { // width와 height가 숫자인 경우 rem 단위를 추가 From 236f5af3a810a735903b1ec26c50ec3d8f00d7e7 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 16:46:28 +0900 Subject: [PATCH 13/21] =?UTF-8?q?Fix:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/index.tsx | 7 ++++--- src/pages/Profile/styles.tsx | 5 +++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index 5c086bb5..4637742c 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -46,6 +46,7 @@ import { AddButton, NoPostWrapper, Button, + ButtonSkeleton, } from './styles'; const Profile: React.FC = () => { @@ -136,9 +137,9 @@ const Profile: React.FC = () => { {/* 버튼 스켈레톤 */} -
- -
+ + + {/* 통계 스켈레톤 */} diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 6ce655e4..2aea662a 100644 --- a/src/pages/Profile/styles.tsx +++ b/src/pages/Profile/styles.tsx @@ -102,3 +102,8 @@ export const Button = styled.button` padding: 10px; background: ${({ theme }) => theme.colors.brand.gradient}; `; + +export const ButtonSkeleton = styled.button` + width: 90%; + margin: 16px auto; +`; From 3f0aa01905697c05a8ff4db886eb65b1c16016d2 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 17:20:23 +0900 Subject: [PATCH 14/21] =?UTF-8?q?Refactor:=20profileEdit=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/ProfileEdit/index.tsx | 57 +++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/src/pages/Profile/ProfileEdit/index.tsx b/src/pages/Profile/ProfileEdit/index.tsx index b9eb24a3..f429e18e 100644 --- a/src/pages/Profile/ProfileEdit/index.tsx +++ b/src/pages/Profile/ProfileEdit/index.tsx @@ -15,8 +15,8 @@ import imageBasic from '@assets/default/defaultProfile.svg'; import BottomButton from '@components/BottomButton/index'; import { OODDFrame } from '@components/Frame/Frame'; -import Loading from '@components/Loading/index'; import Modal from '@components/Modal/index'; +import Skeleton from '@components/Skeleton'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; @@ -83,7 +83,7 @@ const ProfileEdit: React.FC = () => { } }; - getUserInfo(); + setTimeout(getUserInfo, 1000); }, []); const handleButtonClick = () => { @@ -155,7 +155,56 @@ const ProfileEdit: React.FC = () => { }; if (isLoading || uploading) { - return ; + return ( + + + navigate(-1)} /> + + + + + + + + + 이름 + + + + + + 닉네임 + + + + + + 소개글 + + + + + + 전화번호 + + + + + + 생년월일 + + + + + + 이메일 + + + + + + + ); } return ( @@ -222,7 +271,7 @@ const ProfileEdit: React.FC = () => { setEmail(e.target.value)} /> - + ); From af367ddbdb4f6dd949cc5d1d5500a7def50cb47f Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 17:33:07 +0900 Subject: [PATCH 15/21] =?UTF-8?q?Refactor:=20AccountSetting=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Account/AccountSetting/index.tsx | 33 ++++++++++++++++++--- src/pages/Account/AccountSetting/styles.tsx | 7 ++--- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/pages/Account/AccountSetting/index.tsx b/src/pages/Account/AccountSetting/index.tsx index 65ba1624..dcbcdf4d 100644 --- a/src/pages/Account/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -12,8 +12,8 @@ import leave from '@assets/default/leave.svg'; import Profile_s from '@assets/default/my-page.svg'; import { OODDFrame } from '@components/Frame/Frame'; -import Loading from '@components/Loading/index'; import Modal from '@components/Modal'; +import Skeleton from '@components/Skeleton'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; @@ -44,8 +44,7 @@ const AccountSetting: React.FC = () => { setIsLoading(false); } }; - - getUserInfo(); + setTimeout(getUserInfo, 1000); }, []); const handleConfirmLogout = () => { @@ -68,7 +67,33 @@ const AccountSetting: React.FC = () => { }; if (isLoading) { - return ; + return ( + + + navigate(-1)} /> + + + + {' '} + + + + + + + + + + + + + + + + + + + ); } return ( diff --git a/src/pages/Account/AccountSetting/styles.tsx b/src/pages/Account/AccountSetting/styles.tsx index 5b1ce005..1a908488 100644 --- a/src/pages/Account/AccountSetting/styles.tsx +++ b/src/pages/Account/AccountSetting/styles.tsx @@ -13,8 +13,6 @@ export const ProfilePicWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - margin-bottom: 1.25rem; - margin-top: 24px; `; export const ProfilePic = styled.div` @@ -24,7 +22,6 @@ export const ProfilePic = styled.div` border-radius: 50%; overflow: hidden; margin-top: 2.125rem; - margin-bottom: 1.375rem; img { width: 100%; @@ -42,7 +39,7 @@ export const Row = styled.div` justify-content: center; align-items: center; width: 100%; - margin-bottom: 10px; + margin-top: 10px; ${Label} { width: auto; @@ -67,7 +64,7 @@ export const List = styled.ul` export const ListItem = styled.li` display: flex; align-items: center; - padding: 15px 1.25rem; + padding: 15px 10px; border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider}; cursor: pointer; From c60e3669049cea4344ff935170a7bc549109c4ce Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 17:37:19 +0900 Subject: [PATCH 16/21] =?UTF-8?q?Refactor:=20=ED=9A=8C=EC=9B=90=ED=83=88?= =?UTF-8?q?=ED=87=B4=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=9E=84?= =?UTF-8?q?=EC=8B=9C=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Account/AccountCancel/index.tsx | 27 ++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/pages/Account/AccountCancel/index.tsx b/src/pages/Account/AccountCancel/index.tsx index 17e4dd2c..5a098877 100644 --- a/src/pages/Account/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; @@ -11,6 +11,7 @@ import back from '@assets/arrow/left.svg'; import BottomButton from '@components/BottomButton/index'; import { OODDFrame } from '@components/Frame/Frame'; import Modal from '@components/Modal/index'; +import Skeleton from '@components/Skeleton'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; @@ -30,8 +31,15 @@ const AccountCancel: React.FC = () => { const [isChecked, setIsChecked] = useState(false); const [modalContent, setModalContent] = useState(null); const [isModalVisible, setIsModalVisible] = useState(false); + const [isLoading, setIsLoading] = useState(true); // Loading state const navigate = useNavigate(); + useEffect(() => { + setTimeout(() => { + setIsLoading(false); + }, 5000); + }, []); + const handleCheckboxChange = () => { setIsChecked(!isChecked); }; @@ -79,6 +87,23 @@ const AccountCancel: React.FC = () => { } }; + if (isLoading) { + return ( + + + navigate(-1)} /> + + + OOTD 탈퇴 전 확인하세요! + + + + + + + ); + } + return ( From f35fc1efb98c86c5d8d74a55e170eaf12ebba409 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 17:40:19 +0900 Subject: [PATCH 17/21] =?UTF-8?q?Fix:=20=EC=82=AC=EC=86=8C=ED=95=9C=20UI?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Account/AccountCancel/index.tsx | 2 +- src/pages/Profile/ProfileEdit/index.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/Account/AccountCancel/index.tsx b/src/pages/Account/AccountCancel/index.tsx index 5a098877..9f93c616 100644 --- a/src/pages/Account/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -37,7 +37,7 @@ const AccountCancel: React.FC = () => { useEffect(() => { setTimeout(() => { setIsLoading(false); - }, 5000); + }, 1000); }, []); const handleCheckboxChange = () => { diff --git a/src/pages/Profile/ProfileEdit/index.tsx b/src/pages/Profile/ProfileEdit/index.tsx index f429e18e..f605ec82 100644 --- a/src/pages/Profile/ProfileEdit/index.tsx +++ b/src/pages/Profile/ProfileEdit/index.tsx @@ -160,8 +160,11 @@ const ProfileEdit: React.FC = () => { navigate(-1)} /> - + + + + From 22b5dbc559e5ebe234580e8afb74d8044e86ee5f Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 18:10:03 +0900 Subject: [PATCH 18/21] =?UTF-8?q?Refactor:=20post=EC=97=90=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Post/index.tsx | 31 +++++++++++++++++++++++++++++++ src/pages/Post/styles.tsx | 39 ++++++++++++++++----------------------- 2 files changed, 47 insertions(+), 23 deletions(-) diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index ad69bbfd..20a178e0 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -7,6 +7,7 @@ import { modifyPostRepresentativeStatusApi, deletePostApi } from '@apis/post'; import { isPostRepresentativeAtom, postIdAtom, userAtom } from '@recoil/Post/PostAtom'; import { getCurrentUserId } from '@utils/getCurrentUserId'; +import back from '@assets/arrow/left.svg'; import Delete from '@assets/default/delete.svg'; import Edit from '@assets/default/edit.svg'; import Pin from '@assets/default/pin.svg'; @@ -14,7 +15,10 @@ import Pin from '@assets/default/pin.svg'; import BottomSheet from '@components/BottomSheet'; import BottomSheetMenu from '@components/BottomSheet/BottomSheetMenu'; import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet'; +import { OODDFrame } from '@components/Frame/Frame'; import Modal from '@components/Modal'; +import Skeleton from '@components/Skeleton'; +import TopBar from '@components/TopBar/index'; import type { BottomSheetMenuProps } from '@components/BottomSheet/BottomSheetMenu/dto'; import type { BottomSheetProps } from '@components/BottomSheet/dto'; @@ -23,6 +27,8 @@ import type { ModalProps } from '@components/Modal/dto'; import PostBase from './PostBase/index'; +import { PicWrapper, NameWrapper, InfoWrapper, PostWrapper } from './styles'; + const Post: React.FC = () => { const user = useRecoilValue(userAtom); const postId = useRecoilValue(postIdAtom); @@ -37,6 +43,8 @@ const Post: React.FC = () => { const [modalContent, setModalContent] = useState(''); const [postPinStatus, setPostPinStatus] = useState<'지정' | '해제'>('지정'); + const [isLoading, setIsLoading] = useState(true); + const navigate = useNavigate(); const currentUserId = getCurrentUserId(); @@ -87,6 +95,10 @@ const Post: React.FC = () => { }; useEffect(() => { + setTimeout(() => { + setIsLoading(false); + }, 5000); + // 현재 게시글이 내 게시글인지 확인 if (user?.id && postId) { setIsMyPost(currentUserId === user.id); @@ -163,6 +175,25 @@ const Post: React.FC = () => { content: modalContent, }; + if (isLoading) { + return ( + + navigate(-1)} /> + + + + + + + + + + + + + ); + } + return ( <> diff --git a/src/pages/Post/styles.tsx b/src/pages/Post/styles.tsx index 5e347dfe..0c610fe8 100644 --- a/src/pages/Post/styles.tsx +++ b/src/pages/Post/styles.tsx @@ -1,28 +1,21 @@ import { styled } from 'styled-components'; -export const InputLayout = styled.div` +export const InfoWrapper = styled.div` display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + flex-direction: row; + align-items: left; +`; + +export const PicWrapper = styled.div` + margin-left: 47px; +`; + +export const NameWrapper = styled.div` + margin-left: 10px; + margin-top: 10px; +`; - textarea { - display: block; - width: calc(100% - 3rem); - height: 5.75rem; - border-radius: 0.125rem; - border: 0.0625rem solid ${({ theme }) => theme.colors.gray[600]}; - margin-bottom: 5.875rem; - z-index: 2; - margin-top: -3.75rem; - outline: none; - padding: 0.8125rem 0.9375rem; - font-family: 'Pretendard Variable'; - font-size: 1rem; - font-style: normal; - font-weight: 300; - line-height: 150%; - color: ${({ theme }) => theme.colors.text.primary}; - resize: none; - } +export const PostWrapper = styled.div` + margin-top: 10px; + padding-inline: 30px; `; From ac91e1e64b551fb8dea0c75fd80e9e511c372c07 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Sat, 22 Mar 2025 18:12:31 +0900 Subject: [PATCH 19/21] =?UTF-8?q?Fix:=20=EB=A1=9C=EB=94=A9=ED=83=80?= =?UTF-8?q?=EC=9E=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Post/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index 20a178e0..84bd872e 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -97,7 +97,7 @@ const Post: React.FC = () => { useEffect(() => { setTimeout(() => { setIsLoading(false); - }, 5000); + }, 1000); // 현재 게시글이 내 게시글인지 확인 if (user?.id && postId) { From 1d329a2b10b83164b2176405dec36623c860f004 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Mon, 24 Mar 2025 20:25:45 +0900 Subject: [PATCH 20/21] =?UTF-8?q?Fix:=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20rem=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx index 085694e5..d79b5d1b 100644 --- a/src/components/Skeleton/index.tsx +++ b/src/components/Skeleton/index.tsx @@ -17,7 +17,7 @@ const Skeleton: React.FC = ({ // width와 height가 숫자인 경우 rem 단위를 추가 const getSize = (size: string | number) => { if (typeof size === 'number') { - return `${size}px`; + return `${size}rem`; } return size; }; From 2b5d4bae90b14e163af3e5ee74e125d24548daf3 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Mon, 24 Mar 2025 20:26:04 +0900 Subject: [PATCH 21/21] =?UTF-8?q?Fix:=20rem=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Account/AccountCancel/index.tsx | 2 +- src/pages/Account/AccountSetting/index.tsx | 10 +++++----- src/pages/Post/index.tsx | 6 +++--- src/pages/Profile/ProfileEdit/index.tsx | 16 ++++++++-------- src/pages/Profile/index.tsx | 16 ++++++++-------- 5 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/pages/Account/AccountCancel/index.tsx b/src/pages/Account/AccountCancel/index.tsx index 9f93c616..61adba0f 100644 --- a/src/pages/Account/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -95,7 +95,7 @@ const AccountCancel: React.FC = () => { OOTD 탈퇴 전 확인하세요! - + diff --git a/src/pages/Account/AccountSetting/index.tsx b/src/pages/Account/AccountSetting/index.tsx index dcbcdf4d..efadc1f0 100644 --- a/src/pages/Account/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -73,22 +73,22 @@ const AccountSetting: React.FC = () => { navigate(-1)} /> - + {' '} - + - + - + - + diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx index 84bd872e..dfae0030 100644 --- a/src/pages/Post/index.tsx +++ b/src/pages/Post/index.tsx @@ -181,14 +181,14 @@ const Post: React.FC = () => { navigate(-1)} /> - + - + - + ); diff --git a/src/pages/Profile/ProfileEdit/index.tsx b/src/pages/Profile/ProfileEdit/index.tsx index f605ec82..28676c02 100644 --- a/src/pages/Profile/ProfileEdit/index.tsx +++ b/src/pages/Profile/ProfileEdit/index.tsx @@ -161,48 +161,48 @@ const ProfileEdit: React.FC = () => { navigate(-1)} /> - + - + 이름 - + 닉네임 - + 소개글 - + 전화번호 - + 생년월일 - + 이메일 - + diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index 4637742c..87397d4d 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -128,38 +128,38 @@ const Profile: React.FC = () => {
{/* 프로필 섹션 스켈레톤 */} - + - - + +
{/* 버튼 스켈레톤 */} - + {/* 통계 스켈레톤 */} - + {isMyPage && ( - + )} - + {/* 포스트 스켈레톤 */} {[1, 2, 3, 4].map((item) => ( - + ))}