Skip to content

Commit 6dc2c4a

Browse files
authored
Merge pull request #89 from Duri-Salon/feat(duri)/ui-modify
[refactor] 토큰 만료로 유저정보 못불러오는 경우 마이페이지 대체뷰 추가 및 로그인으로 가도록 수정
2 parents f9ebeb2 + 507904c commit 6dc2c4a

File tree

6 files changed

+83
-91
lines changed

6 files changed

+83
-91
lines changed

apps/duri/src/components/home/ShopVertical.tsx

+29-57
Original file line numberDiff line numberDiff line change
@@ -58,63 +58,35 @@ export const ShopVertical = ({
5858
gap={3}
5959
margin="0 0 0 6px"
6060
>
61-
{
62-
<Tag
63-
key="tag1"
64-
typo="Caption5"
65-
bg={theme.palette.Gray50}
66-
fontColor={theme.palette.Gray500}
67-
width="fit-content"
68-
height="19px"
69-
borderRadius="2px"
70-
>
71-
{shop.shopTag1}
72-
</Tag>
73-
}
74-
<Tag
75-
key="tag2"
76-
typo="Caption5"
77-
bg={theme.palette.Gray50}
78-
fontColor={theme.palette.Gray500}
79-
width="fit-content"
80-
height="19px"
81-
borderRadius="2px"
82-
>
83-
{shop.shopTag2}
84-
</Tag>
61+
<TagWrapper direction="column" align="flex-start" gap={3}>
62+
{shop.shopTag1 && (
63+
<Tag
64+
key="tag1"
65+
typo="Caption5"
66+
bg={theme.palette.Gray50}
67+
fontColor={theme.palette.Gray500}
68+
width="fit-content"
69+
height="19px"
70+
borderRadius="2px"
71+
>
72+
{shop.shopTag1}
73+
</Tag>
74+
)}
75+
{shop.shopTag2 && (
76+
<Tag
77+
key="tag2"
78+
typo="Caption5"
79+
bg={theme.palette.Gray50}
80+
fontColor={theme.palette.Gray500}
81+
width="fit-content"
82+
height="19px"
83+
borderRadius="2px"
84+
>
85+
{shop.shopTag2}
86+
</Tag>
87+
)}
88+
</TagWrapper>
8589
</HeightFitFlex>
86-
<Text typo="Caption4" colorCode={theme.palette.Gray500}>
87-
{shop.address}
88-
</Text>
89-
90-
<TagWrapper direction="column" align="flex-start" gap={3}>
91-
{shop.shopTag1 && (
92-
<Tag
93-
key="tag1"
94-
typo="Caption5"
95-
bg={theme.palette.Gray50}
96-
fontColor={theme.palette.Gray500}
97-
width="fit-content"
98-
height="19px"
99-
borderRadius="2px"
100-
>
101-
{shop.shopTag1}
102-
</Tag>
103-
)}
104-
{shop.shopTag2 && (
105-
<Tag
106-
key="tag2"
107-
typo="Caption5"
108-
bg={theme.palette.Gray50}
109-
fontColor={theme.palette.Gray500}
110-
width="fit-content"
111-
height="19px"
112-
borderRadius="2px"
113-
>
114-
{shop.shopTag2}
115-
</Tag>
116-
)}
117-
</TagWrapper>
11890
</HeightFitFlex>
11991
</Wrapper>
12092
))}
@@ -138,4 +110,4 @@ const FitFlex = styled(HeightFitFlex)`
138110

139111
const TagWrapper = styled(HeightFitFlex)`
140112
min-height: 45px;
141-
`;
113+
`;

apps/duri/src/components/shop/MapInfo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -206,5 +206,5 @@ const LocationBtn = styled(Flex)`
206206
height: fit-content;
207207
max-width: 375px;
208208
bottom: 120px;
209-
z-index: 2;
209+
z-index: 1;
210210
`;

apps/duri/src/pages/Home/index.tsx

+18-8
Original file line numberDiff line numberDiff line change
@@ -145,17 +145,27 @@ const Home = () => {
145145
</Flex>
146146

147147
{/* AI 스타일링 배너 */}
148-
<a href="/ai">
149-
<AiBanner height={100} />
150-
</a>
151-
{/* </StyleBannerWrapper> */}
148+
<Flex margin='24px 0 0'>
149+
<a href="/ai">
150+
<AiBanner height={100} />
151+
</a>
152+
</Flex>
152153
</Flex>
154+
155+
{/* 추천 샵 */}
153156
<Flex direction="column">
154-
{/* 추천 샵 */}
155157
{isPendingRecommendData ? (
156-
<Flex gap={6} justify="flex-start" padding="0 20px">
157-
<SkeletonCard width={152} height={198} borderRadius={12} />
158-
<SkeletonCard width={152} height={198} borderRadius={12} />
158+
<Flex
159+
direction="column"
160+
align="flex-start"
161+
padding="0 20px"
162+
margin="24px 0 0"
163+
>
164+
<Text typo="Title1">여기 샵은 어때요?</Text>
165+
<Flex gap={6} justify="flex-start" margin="6px">
166+
<SkeletonCard width={152} height={198} borderRadius={12} />
167+
<SkeletonCard width={152} height={198} borderRadius={12} />
168+
</Flex>
159169
</Flex>
160170
) : (
161171
<RecommendedShop shopList={recommendedListData ?? []} />

apps/duri/src/pages/My/index.tsx

+35-21
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ const MyPage = () => {
4646
navigate('/login');
4747
};
4848

49+
useEffect(() => {
50+
if (!userInfo) {
51+
navigate('/login');
52+
}
53+
}, [userInfo]);
54+
4955
const handleClickRegisterButton = () => {
5056
navigate('/my/pet/register');
5157
};
@@ -84,7 +90,7 @@ const MyPage = () => {
8490
backgroundColor={theme.palette.White}
8591
margin="0 0 10px"
8692
>
87-
<Text typo="Caption4" colorCode={theme.palette.Gray300}>
93+
<Text typo="Label3" colorCode={theme.palette.Gray300}>
8894
등록된 유저 정보가 없습니다.
8995
</Text>
9096
</Flex>
@@ -113,29 +119,32 @@ const MyPage = () => {
113119
gap={16}
114120
>
115121
<Text typo="Label3" colorCode={theme.palette.Gray300}>
116-
앗! 등록된 반려견이 없어요.
122+
등록된 반려견이 없습니다.
117123
</Text>
118-
<Button
119-
typo="Label4"
120-
fontColor={theme.palette.White}
121-
onClick={handleClickRegisterButton}
122-
bg={theme.palette.Black}
123-
width="135px"
124-
padding="10px"
125-
borderRadius="8px"
126-
>
127-
마이펫 등록하러가기
128-
</Button>
124+
{userInfo && (
125+
<Button
126+
typo="Label4"
127+
fontColor={theme.palette.White}
128+
onClick={handleClickRegisterButton}
129+
bg={theme.palette.Black}
130+
width="135px"
131+
padding="10px"
132+
borderRadius="8px"
133+
>
134+
마이펫 등록하러가기
135+
</Button>
136+
)}
129137
</HeightFitFlex>
130138
)}
139+
131140
<Flex direction="column" margin="8px 0" gap={8}>
132141
<Flex gap={10}>
133142
<FlexButton
134143
padding="13px 35px"
135144
backgroundColor={theme.palette.White}
136145
borderRadius={8}
137146
gap={5}
138-
onClick={() => handleNavigate('/my/shop')}
147+
onClick={() => (userInfo ? handleNavigate('/my/shop') : null)}
139148
>
140149
<Store width={19} />
141150
<Text typo="Label1" margin="0 0 0 2px">
@@ -147,7 +156,9 @@ const MyPage = () => {
147156
backgroundColor={theme.palette.White}
148157
borderRadius={8}
149158
gap={5}
150-
onClick={() => handleNavigate('/my/history')}
159+
onClick={() =>
160+
userInfo ? handleNavigate('/my/history') : null
161+
}
151162
>
152163
<Scissors width={24} height={24} />
153164
<Text typo="Label1">이용기록</Text>
@@ -158,17 +169,20 @@ const MyPage = () => {
158169
backgroundColor={theme.palette.White}
159170
borderRadius={8}
160171
gap={10}
161-
onClick={() => handleNavigate('/my/review')}
172+
onClick={() => (userInfo ? handleNavigate('/my/review') : null)}
162173
>
163174
<Write width={18} height={18} />
164175
<Text typo="Label1">내가 쓴 후기</Text>
165176
</FlexButton>
166177
</Flex>
167-
<FlexButton margin="40px 0 0 0" onClick={logout}>
168-
<Text typo="Caption2" colorCode={theme.palette.Gray300}>
169-
로그아웃
170-
</Text>
171-
</FlexButton>
178+
179+
{userInfo && (
180+
<FlexButton margin="40px 0 0 0" onClick={logout}>
181+
<Text typo="Caption2" colorCode={theme.palette.Gray300}>
182+
로그아웃
183+
</Text>
184+
</FlexButton>
185+
)}
172186
</>
173187
</Flex>
174188
<DuriNavbar />

apps/salon/src/pages/Home/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,6 @@ const Home = () => {
281281
age={request.age}
282282
weight={request.weight}
283283
neutering={request.neutering}
284-
// quotationReqId={request.quotationReqId}
285284
memo={request.memo}
286285
handleClickRequest={handleClickRequest}
287286
/>

packages/ui/src/styles/GlobalStyles.ts

-3
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,4 @@ export const globalStyle = css`
5858
border: none !important;
5959
width: 100%;
6060
}
61-
.css-1f7sphi {
62-
z-index: -1 !important;
63-
}
6461
`;

0 commit comments

Comments
 (0)