feat : 라벨첩 페이지 레이아웃 + 전체 레이아웃 수정 (#290)

* feat : 라벨 콜렉션 페이지 추가 * feat : 라벨 관련 타입 선언 * fix : 잘못 전달되던 인자 수정 * fix : [임시] http로 롤백 * style : 전체 스타일 레이아웃 수정 * style : AuthLayer 스타일 추가 * chore : https로 변경 * style : 너비, 높이값 삭제 * style : 공통 컴포넌트들 스타일 수정
prgrms-web-devcourse-final-project · Dec 7, 2024 · 24ecdfe · 24ecdfe
1 parent 77c7d4b
commit 24ecdfe
Show file tree

Hide file tree

Showing 26 changed files with 343 additions and 213 deletions.
diff --git a/src/components/Common/BottleLetter/Label/Label.tsx b/src/components/Common/BottleLetter/Label/Label.tsx
@@ -4,13 +4,13 @@ import { LabelProps } from '@/types/label';
 export const Label = ({ imgSrc, isActive }: LabelProps) => {
     return (
         <div
-            className={`w-[80px] h-[100px] flex justify-center items-center border-[1px] rounded-2xl ${
+            className={`w-full h-full flex justify-center items-center border-[1px] rounded-2xl  ${
                 isActive ? 'border-sample-blue' : 'border-transparent'
             }`}
         >
             <img
                 src={`${imgSrc}`}
-                className="object-contain w-full h-full p-1"
+                className="object-contain max-h-full max-w-full p-1"
             />
         </div>
     );

diff --git a/src/components/Common/Container/Container.tsx b/src/components/Common/Container/Container.tsx
@@ -1,9 +1,21 @@
 import React from 'react';
 
 interface ContainerProps {
+    px?: number;
+    pb?: number;
     children?: React.ReactNode;
 }
 
-export const Container: React.FC<ContainerProps> = ({ children }) => {
-    return <div className="px-6 pb-[100px] w-full h-full">{children}</div>;
+export const Container: React.FC<ContainerProps> = ({
+    px = 0,
+    pb = 6,
+    children
+}) => {
+    return (
+        <div
+            className={`border-box px-${px} py-6 w-full h-full overflow-auto scrollbar-hide`}
+        >
+            {children}
+        </div>
+    );
 };
diff --git a/src/components/Common/Input/NicknameInput.tsx b/src/components/Common/Input/NicknameInput.tsx
@@ -5,13 +5,15 @@ import { Input } from './Input';
 type NicknameInputProps = {
     defaultValue?: string;
     disabled?: boolean;
+    showText?: boolean;
     onValueChange?: (value: string) => void;
     onKeyDown?: (e: React.KeyboardEvent) => void;
 };
 
 export const NicknameInput = ({
     defaultValue,
     disabled,
+    showText = true,
     onValueChange,
     onKeyDown
 }: NicknameInputProps) => {
@@ -20,7 +22,7 @@ export const NicknameInput = ({
             type="text"
             autoComplete="nickname"
             name="nickname"
-            text="닉네임"
+            text={showText ? '닉네임' : null}
             errorMessage={AUTH_INPUT_VALIDATION.nickname.errorMessage}
             pattern={AUTH_INPUT_VALIDATION.nickname.regexp}
             maxLength={15}

diff --git a/src/components/Common/Itembox/Itembox.tsx b/src/components/Common/Itembox/Itembox.tsx
@@ -14,13 +14,13 @@ export const Itembox = ({
     padding = '0',
     children
 }: ItemboxProps) => {
-    const itemboxScaleStyle = `w-[${width}] h-[${height}] p-${padding}`;
+    const itemboxScaleStyle = `w-[${width}] p-${padding}`;
 
     return (
         <div
-            className={`${itemboxScaleStyle} bg-white p-1 rounded-md flex items-center justify-center`}
+            className={`aspect-square bg-white p-1 rounded-md flex items-center justify-center border border-sample-gray aspect-square`}
         >
-            <div className="w-full h-full">{children}</div>
+            {children}
         </div>
     );
 };
diff --git a/src/components/Common/NavigationBar/NavigationBar.tsx b/src/components/Common/NavigationBar/NavigationBar.tsx
@@ -18,7 +18,7 @@ export const NavigationBar = () => {
     ];
 
     return (
-        <nav className="flex justify-around bg-white border-y p-3 fixed bottom-0 w-full z-[999] max-w-[473px]">
+        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px]">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem

diff --git a/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx b/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx
@@ -4,7 +4,7 @@ import { IoIosNotifications } from 'react-icons/io';
 
 export const TopButtonContainer = () => {
     return (
-        <div className="flex justify-between">
+        <div className="flex justify-between px-6 py-4">
             <NavLink to={'/'}>
                 <Logo h={34} />
             </NavLink>

diff --git a/src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx b/src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx
@@ -34,7 +34,7 @@ export const WelcomeMessageContainer = ({
         : '떠다니는 편지를 열심히 찾는 중 이에요.';
 
     return (
-        <div className="absolute z-[3]">
+        <div className="z-[3]">
             {message}
             <p className="font-medium text-title1">{messageBody}</p>
             <p className="font-medium text-sample-textgray">{subMessage}</p>

diff --git a/src/components/Profile/NicknameSection.tsx b/src/components/Profile/NicknameSection.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { useToastStore } from '@/hooks/useToastStore';
-import { checkNickname } from '@/service/auth';
 import { changeNickname } from '@/service/user';
 import { NicknameInput } from '@/components/Common/Input/NicknameInput';
 import { useUserStore } from '@/stores';
@@ -12,15 +11,22 @@ export const NicknameSection = () => {
     const { handleGetUserInfo } = useUserInfo();
     const [isNicknameEditing, setIsNicknameEditing] = useState<boolean>(false);
 
-    const handleEditNickname = () => {
-        if (!isNicknameEditing) setIsNicknameEditing(true);
+    const handleEditNicknameMode = () => {
+        if (!isNicknameEditing) {
+            setIsNicknameEditing(true);
+            return;
+        }
+        setIsNicknameEditing(false);
     };
 
     const handleNicknameChange = async (nickname: string) => {
         try {
-            const response = await changeNickname(nickname);
+            console.log(nickname);
+            const response = await changeNickname({ nickname });
+            console.log(response);
             if (response.isSuccess) {
-                addToast(response.message, 'success');
+                addToast('닉네임을 변경했어요.', 'success');
+                handleEditNicknameMode();
                 handleGetUserInfo();
             }
         } catch (error) {
@@ -34,6 +40,10 @@ export const NicknameSection = () => {
         const $nicknameForm = e.target as HTMLFormElement;
         const nicknameFormData = new FormData($nicknameForm);
         const [nickname] = [nicknameFormData.get('nickname') as string];
+        if (user.nickname === nickname) {
+            addToast('동일한 닉네임이에요.', 'warning');
+            return;
+        }
         handleNicknameChange(nickname);
     };
 
@@ -44,14 +54,17 @@ export const NicknameSection = () => {
                     onSubmit={handleNicknameSubmit}
                     className="flex flex-row items-center justify-center gap-3"
                 >
-                    <NicknameInput defaultValue={user?.nickname} />
+                    <NicknameInput
+                        defaultValue={user?.nickname}
+                        showText={false}
+                    />
                 </form>
             );
         return (
             <div className="flex flex-row items-center justify-center gap-2 font-semibold">
                 {user?.nickname}
                 <img
-                    onClick={handleEditNickname}
+                    onClick={() => handleEditNicknameMode()}
                     className="w-[15px] h-[15px] p-[2px] bg-sample-gray rounded-sm"
                     src="/ic_pen.svg"
                 />

diff --git a/src/components/Profile/ProfileImageSection.tsx b/src/components/Profile/ProfileImageSection.tsx
@@ -56,6 +56,7 @@ export const ProfileImageSection = ({
             const response = await changeProfileImage(imageItem.url);
             if (response) {
                 addToast('프로필 이미지가 변경되었습니다.', 'success');
+                console.log('이미지:', user.profileImageUrl);
                 handleGetUserInfo();
                 handleDismiss();
             }

diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
@@ -8,20 +8,19 @@ export const useUserInfo = () => {
     const { addToast } = useToastStore();
 
     const handleGetUserInfo = async () => {
-        console.log('유저 정보 불러오기:');
         const userInfoResponse = await getUserInfo();
 
         if (!userInfoResponse) {
             addToast('유저 정보를 불러오지 못했습니다.', 'warning');
             logout();
             return false;
         }
-        const userInfoWithEmail = {
+        const userInfo = {
             nickname: userInfoResponse.nickname || '알 수 없음',
             profileImageUrl: userInfoResponse.profileImageUrl || 'testimg.jpg',
             email: userInfoResponse.email || '알 수 없음'
         };
-        setUser(userInfoWithEmail);
+        setUser(userInfo);
         return true;
     };
 

diff --git a/src/index.css b/src/index.css
@@ -10,14 +10,35 @@
 }
 
 @layer base {
-    html,
+    html {
+        @apply w-full h-full;
+    }
     body {
-        @apply h-full;
+        @apply w-full h-full m-0 p-0 flex justify-center;
     }
     #root {
-        @apply mx-auto min-w-[375px] max-w-[477px]  bg-white border h-auto min-h-screen text-sample-black;
+        @apply min-w-[375px] 
+          max-w-[477px]          
+          w-full             
+          bg-white               
+          border                
+          min-h-screen            
+          text-sample-black
+          flex                  
+          flex-col;
+    }
+}
+
+@layer utilities {
+    .scrollbar-hide {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Opera */
     }
 }
+
 @layer components {
     .btn-primary {
         @apply w-full p-2 transition-colors border rounded-md border-sample-blue text-sample-blue hover:bg-sample-blue hover:text-white;

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,8 +2,4 @@ import { createRoot } from 'react-dom/client';
 import './index.css';
 import { App } from '@/App';
 
-createRoot(document.getElementById('root')!).render(
-    <div>
-        <App />
-    </div>
-);
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -3,9 +3,9 @@ import { SliderMenuContainer } from '@/components/Common/SliderMenuContainer/Sli
 import { Toggle } from '@/components/Common/Toggle/Toggle';
 import { BottomSheetContent } from '@/components/HomePage/BottomSheet/BottomSheetContent';
 import { LetterContainer } from '@/components/HomePage/LetterContainer/LetterContainer';
-import { TopButtonContainer } from '@/components/HomePage/TopButtonContainer/TopButtonContainer';
 import { WelcomeMessageContainer } from '@/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer';
 import { useUserStore } from '@/stores/useUserStore';
+
 import { Container } from '@/components/Common/Container/Container';
 import { useEffect, useState } from 'react';
 import { useGetRecommendLetter } from '@/hooks/useGetRecommendLetter';
@@ -23,6 +23,7 @@ export type RecommendLetter = {
     label: string;
 };
 
+
 export const HomePage = () => {
     const { user } = useUserStore();
 
@@ -71,7 +72,6 @@ export const HomePage = () => {
     }
 
     return (
-        <Container>
             <div className="flex flex-col gap-5">
                 <TopButtonContainer />
                 <Toggle
@@ -90,35 +90,38 @@ export const HomePage = () => {
                     />
                     <LetterContainer letters={letters} />
                 </div>
+            <div>
+                <WelcomeMessageContainer nickname={user?.nickname} newLetter />
+                <LetterContainer />
+            </div>
 
-                <div className="flex justify-center px-20">
-                    <button
-                        onClick={() => {
-                            setOpen(true);
-                        }}
-                        className="w-full h-[49px] text-sample-blue flex-center rounded-full border border-sample-blue"
-                    >
-                        키워드 설정
-                    </button>
-                </div>
-
-                <div className="mx-[-20px]">
-                    <BannerContainer />
-                </div>
-
-                <SliderMenuContainer
-                    open={open}
-                    onDismiss={onDismiss}
-                    snapPoints={() => [window.innerHeight * 0.95]}
+            <div className="flex justify-center px-20">
+                <button
+                    onClick={() => {
+                        setOpen(true);
+                    }}
+                    className="w-full h-[49px] text-sample-blue flex-center rounded-full border border-sample-blue"
                 >
-                    <BottomSheetContent
-                        onClick={() => {
-                            setOpen(false);
-                        }}
-                        nickname={user?.nickname}
-                    />
-                </SliderMenuContainer>
+                    키워드 설정
+                </button>
+            </div>
+
+            <div className="mx-[-20px]">
+                <BannerContainer />
             </div>
-        </Container>
+
+            <SliderMenuContainer
+                open={open}
+                onDismiss={onDismiss}
+                snapPoints={() => [window.innerHeight * 0.95]}
+            >
+                <BottomSheetContent
+                    onClick={() => {
+                        setOpen(false);
+                    }}
+                    nickname={user?.nickname}
+                />
+            </SliderMenuContainer>
+        </div>
     );
 };
diff --git a/src/pages/LabelCollectionsPage.tsx b/src/pages/LabelCollectionsPage.tsx
diff --git a/src/pages/Notification/NotificationPage.tsx b/src/pages/Notification/NotificationPage.tsx
@@ -1,4 +1,3 @@
-import { Container } from '@/components/Common/Container/Container';
 import { Margin } from '@/components/Common/Margin/Margin';
 import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar';
 import { NotificationContainer } from '@/components/NotificationPage/NotificationContainer';
@@ -77,26 +76,21 @@ export const NotificationPage = () => {
         }));
 
     return (
-        <Container>
+        <>
             <Margin top={20} />
-
             <TitleClosedTopBar title="알림" />
-
             <Margin top={20} />
-
             <div>
                 <h3 className="text-[14px] text-[#22B8EF]">새로운 소식</h3>
                 <Margin top={8} />
                 <NotificationContainer notifications={unReadNotifications} />
             </div>
-
             <Margin top={20} />
-
             <div>
                 <h3 className="text-[14px] text-[#22B8EF]">이전 알림</h3>
                 <Margin top={8} />
                 <NotificationContainer notifications={readNotifications} />
             </div>
-        </Container>
+        </>
     );
 };