Merge pull request #89 from Duri-Salon/feat(duri)/ui-modify

[refactor] 토큰 만료로 유저정보 못불러오는 경우 마이페이지 대체뷰 추가 및 로그인으로 가도록 수정
Duri-Salon · Dec 19, 2024 · 6dc2c4a · 6dc2c4a
2 parents f9ebeb2 + 507904c
commit 6dc2c4a
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 91 deletions.
diff --git a/apps/duri/src/components/home/ShopVertical.tsx b/apps/duri/src/components/home/ShopVertical.tsx
@@ -58,63 +58,35 @@ export const ShopVertical = ({
                 gap={3}
                 margin="0 0 0 6px"
               >
-                {
-                  <Tag
-                    key="tag1"
-                    typo="Caption5"
-                    bg={theme.palette.Gray50}
-                    fontColor={theme.palette.Gray500}
-                    width="fit-content"
-                    height="19px"
-                    borderRadius="2px"
-                  >
-                    {shop.shopTag1}
-                  </Tag>
-                }
-                <Tag
-                  key="tag2"
-                  typo="Caption5"
-                  bg={theme.palette.Gray50}
-                  fontColor={theme.palette.Gray500}
-                  width="fit-content"
-                  height="19px"
-                  borderRadius="2px"
-                >
-                  {shop.shopTag2}
-                </Tag>
+                <TagWrapper direction="column" align="flex-start" gap={3}>
+                  {shop.shopTag1 && (
+                    <Tag
+                      key="tag1"
+                      typo="Caption5"
+                      bg={theme.palette.Gray50}
+                      fontColor={theme.palette.Gray500}
+                      width="fit-content"
+                      height="19px"
+                      borderRadius="2px"
+                    >
+                      {shop.shopTag1}
+                    </Tag>
+                  )}
+                  {shop.shopTag2 && (
+                    <Tag
+                      key="tag2"
+                      typo="Caption5"
+                      bg={theme.palette.Gray50}
+                      fontColor={theme.palette.Gray500}
+                      width="fit-content"
+                      height="19px"
+                      borderRadius="2px"
+                    >
+                      {shop.shopTag2}
+                    </Tag>
+                  )}
+                </TagWrapper>
               </HeightFitFlex>
-                <Text typo="Caption4" colorCode={theme.palette.Gray500}>
-                  {shop.address}
-                </Text>
-
-              <TagWrapper direction="column" align="flex-start" gap={3}>
-                {shop.shopTag1 && (
-                  <Tag
-                    key="tag1"
-                    typo="Caption5"
-                    bg={theme.palette.Gray50}
-                    fontColor={theme.palette.Gray500}
-                    width="fit-content"
-                    height="19px"
-                    borderRadius="2px"
-                  >
-                    {shop.shopTag1}
-                  </Tag>
-                )}
-                {shop.shopTag2 && (
-                  <Tag
-                    key="tag2"
-                    typo="Caption5"
-                    bg={theme.palette.Gray50}
-                    fontColor={theme.palette.Gray500}
-                    width="fit-content"
-                    height="19px"
-                    borderRadius="2px"
-                  >
-                    {shop.shopTag2}
-                  </Tag>
-                )}
-              </TagWrapper>
             </HeightFitFlex>
           </Wrapper>
         ))}
@@ -138,4 +110,4 @@ const FitFlex = styled(HeightFitFlex)`
 
 const TagWrapper = styled(HeightFitFlex)`
   min-height: 45px;
-`;
+`;
diff --git a/apps/duri/src/components/shop/MapInfo.tsx b/apps/duri/src/components/shop/MapInfo.tsx
@@ -206,5 +206,5 @@ const LocationBtn = styled(Flex)`
   height: fit-content;
   max-width: 375px;
   bottom: 120px;
-  z-index: 2;
+  z-index: 1;
 `;
diff --git a/apps/duri/src/pages/Home/index.tsx b/apps/duri/src/pages/Home/index.tsx
@@ -145,17 +145,27 @@ const Home = () => {
           </Flex>
 
           {/* AI 스타일링 배너 */}
-          <a href="/ai">
-            <AiBanner height={100} />
-          </a>
-          {/* </StyleBannerWrapper> */}
+          <Flex margin='24px 0 0'>
+            <a href="/ai">
+              <AiBanner height={100} />
+            </a>
+          </Flex>
         </Flex>
+
+        {/* 추천 샵 */}
         <Flex direction="column">
-          {/* 추천 샵 */}
           {isPendingRecommendData ? (
-            <Flex gap={6} justify="flex-start" padding="0 20px">
-              <SkeletonCard width={152} height={198} borderRadius={12} />
-              <SkeletonCard width={152} height={198} borderRadius={12} />
+            <Flex
+              direction="column"
+              align="flex-start"
+              padding="0 20px"
+              margin="24px 0 0"
+            >
+              <Text typo="Title1">여기 샵은 어때요?</Text>
+              <Flex gap={6} justify="flex-start" margin="6px">
+                <SkeletonCard width={152} height={198} borderRadius={12} />
+                <SkeletonCard width={152} height={198} borderRadius={12} />
+              </Flex>
             </Flex>
           ) : (
             <RecommendedShop shopList={recommendedListData ?? []} />

diff --git a/apps/duri/src/pages/My/index.tsx b/apps/duri/src/pages/My/index.tsx
@@ -46,6 +46,12 @@ const MyPage = () => {
     navigate('/login');
   };
 
+  useEffect(() => {
+    if (!userInfo) {
+      navigate('/login');
+    }
+  }, [userInfo]);
+
   const handleClickRegisterButton = () => {
     navigate('/my/pet/register');
   };
@@ -84,7 +90,7 @@ const MyPage = () => {
               backgroundColor={theme.palette.White}
               margin="0 0 10px"
             >
-              <Text typo="Caption4" colorCode={theme.palette.Gray300}>
+              <Text typo="Label3" colorCode={theme.palette.Gray300}>
                 등록된 유저 정보가 없습니다.
               </Text>
             </Flex>
@@ -113,29 +119,32 @@ const MyPage = () => {
               gap={16}
             >
               <Text typo="Label3" colorCode={theme.palette.Gray300}>
-                앗! 등록된 반려견이 없어요.
+                등록된 반려견이 없습니다.
               </Text>
-              <Button
-                typo="Label4"
-                fontColor={theme.palette.White}
-                onClick={handleClickRegisterButton}
-                bg={theme.palette.Black}
-                width="135px"
-                padding="10px"
-                borderRadius="8px"
-              >
-                마이펫 등록하러가기
-              </Button>
+              {userInfo && (
+                <Button
+                  typo="Label4"
+                  fontColor={theme.palette.White}
+                  onClick={handleClickRegisterButton}
+                  bg={theme.palette.Black}
+                  width="135px"
+                  padding="10px"
+                  borderRadius="8px"
+                >
+                  마이펫 등록하러가기
+                </Button>
+              )}
             </HeightFitFlex>
           )}
+
           <Flex direction="column" margin="8px 0" gap={8}>
             <Flex gap={10}>
               <FlexButton
                 padding="13px 35px"
                 backgroundColor={theme.palette.White}
                 borderRadius={8}
                 gap={5}
-                onClick={() => handleNavigate('/my/shop')}
+                onClick={() => (userInfo ? handleNavigate('/my/shop') : null)}
               >
                 <Store width={19} />
                 <Text typo="Label1" margin="0 0 0 2px">
@@ -147,7 +156,9 @@ const MyPage = () => {
                 backgroundColor={theme.palette.White}
                 borderRadius={8}
                 gap={5}
-                onClick={() => handleNavigate('/my/history')}
+                onClick={() =>
+                  userInfo ? handleNavigate('/my/history') : null
+                }
               >
                 <Scissors width={24} height={24} />
                 <Text typo="Label1">이용기록</Text>
@@ -158,17 +169,20 @@ const MyPage = () => {
               backgroundColor={theme.palette.White}
               borderRadius={8}
               gap={10}
-              onClick={() => handleNavigate('/my/review')}
+              onClick={() => (userInfo ? handleNavigate('/my/review') : null)}
             >
               <Write width={18} height={18} />
               <Text typo="Label1">내가 쓴 후기</Text>
             </FlexButton>
           </Flex>
-          <FlexButton margin="40px 0 0 0" onClick={logout}>
-            <Text typo="Caption2" colorCode={theme.palette.Gray300}>
-              로그아웃
-            </Text>
-          </FlexButton>
+
+          {userInfo && (
+            <FlexButton margin="40px 0 0 0" onClick={logout}>
+              <Text typo="Caption2" colorCode={theme.palette.Gray300}>
+                로그아웃
+              </Text>
+            </FlexButton>
+          )}
         </>
       </Flex>
       <DuriNavbar />

diff --git a/apps/salon/src/pages/Home/index.tsx b/apps/salon/src/pages/Home/index.tsx
@@ -281,7 +281,6 @@ const Home = () => {
                 age={request.age}
                 weight={request.weight}
                 neutering={request.neutering}
-                // quotationReqId={request.quotationReqId}
                 memo={request.memo}
                 handleClickRequest={handleClickRequest}
               />

diff --git a/packages/ui/src/styles/GlobalStyles.ts b/packages/ui/src/styles/GlobalStyles.ts
@@ -58,7 +58,4 @@ export const globalStyle = css`
     border: none !important;
     width: 100%;
   }
-  .css-1f7sphi {
-    z-index: -1 !important;
-  }
 `;