[fix] 캘린더 css 수정 및 Input 라벨 로직 수정

KUSITMS-30th-TEAM-C · Nov 27, 2024 · 0a8a681 · 0a8a681
1 parent 1e82b06
commit 0a8a681
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 41 deletions.
diff --git a/src/app/archive/components/Calendar/Calendar.tsx b/src/app/archive/components/Calendar/Calendar.tsx
@@ -7,7 +7,7 @@ interface CalendarProps {
   days: Date[]
   activities?: Activity[]
   selectedDate: Date | undefined
-  setSelectedDate: (date: Date) => void
+  setSelectedDate: (date: Date | undefined) => void
 }
 
 export default function Calendar({
@@ -46,29 +46,33 @@ export default function Calendar({
             (sum, activity) => sum + activity.savedTime,
             0,
           )
+          const hasActivity = activitiesForDay.length > 0
 
           return (
             <div key={day.toISOString()} className="flex flex-col items-center">
-              <div
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    setSelectedDate(day)
-                  }
-                }}
-                onClick={() => setSelectedDate(day)}
+              <button
+                type="button"
+                onClick={() =>
+                  setSelectedDate(
+                    selectedDate && isSameDay(day, selectedDate)
+                      ? undefined
+                      : day,
+                  )
+                }
+                disabled={!hasActivity}
                 className={cn(
                   'flex w-full items-center justify-center aspect-square rounded-12 cursor-pointer bg-white',
+
                   dayMonth !== currentMonth && 'text-primary_foundation-20', // 현재 월 날짜
+                  isSameDay(day, currentDate) && 'border border-[#1a1a25]/50',
+                  activitiesForDay.length > 0 && 'bg-red-100 text-red-600', // 활동이 있는 날짜
                   selectedDate &&
                     isSameDay(day, selectedDate) &&
-                    'border border-[#1a1a25]/50', // 선택된 날짜
-                  activitiesForDay.length > 0 && 'bg-red-100 text-red-600', // 활동이 있는 날짜
+                    'bg-accent_100 text-white', // 선택된 날짜
                 )}
               >
                 {format(day, 'd')}
-              </div>
+              </button>
               {activitiesForDay.length > 0 && (
                 <div className="text-10 text-red-500 mt-1">
                   +{totalSavedTime}

diff --git a/src/app/home/components/NoTimePiece.tsx b/src/app/home/components/NoTimePiece.tsx
@@ -7,7 +7,7 @@ import ModalContent from './ModalContent'
 import ModalContent2 from './ModalContent2'
 
 export default function NoTimePiece() {
-  const [isModalOpen, setIsModalOpen] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentSlide, setCurrentSlide] = useState(0)
 
   const modalContents = [

diff --git a/src/app/mypage/edit/page.tsx b/src/app/mypage/edit/page.tsx
@@ -49,7 +49,6 @@ export default function MyPageEdit() {
           닉네임 수정하기
         </h2>
         <Input
-          success="멋진 이름이에요!"
           label="6자 이내의 한글/영문/숫자를 입력해주세요."
           value={nickname}
           placeholder="닉네임을 적어주세요."

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -37,7 +37,7 @@ export default function MyPage() {
                 <strong className="text-24 text-primary_foundation-100 font-[500]">
                   {nickname}
                 </strong>
-                <span className="ml-2">님의 프로필</span>
+                <span className="ml-5">님의 프로필</span>
               </div>
               <Button
                 leftIcon={<Pencil />}
@@ -50,12 +50,13 @@ export default function MyPage() {
             <span className="text-primary_foundation-40 text-14">{email}</span>
           </div>
 
-          <div className="relative w-140 h-140 rounded-full overflow-hidden border-2 bg-accent-10 border-accent-30">
+          <div className="relative w-140 h-140 rounded-full overflow-hidden border-2 bg-accent-10 border-accent-30 flex items-center justify-center">
             <Image
               src={profileImage}
               alt="프로필 이미지"
               width={100}
               height={100}
+              className="object-cover"
             />
           </div>
         </div>

diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
@@ -4,7 +4,6 @@ import { forwardRef } from 'react'
 import { Caution } from '@/components/Icons'
 import Image from 'next/image'
 import { useInput, UseInputProps } from './useInput'
-import If from '../If'
 
 const Input = forwardRef<HTMLInputElement, UseInputProps>((props, ref) => {
   const { endContent, startContent, error, label, success, value } = props
@@ -22,27 +21,36 @@ const Input = forwardRef<HTMLInputElement, UseInputProps>((props, ref) => {
         {isClearable && <button {...getClearButtonProps()}>x</button>}
         {endContent}
       </div>
-      <If condition={!!label && !error && !value}>
-        <p className="text-xs text-[#8d8d92] mt-4 ml-8">{label}</p>
-      </If>
-      <If condition={!!error}>
-        <div className="absolute flex gap-8 text-system_red font-medium text-xs mt-4">
-          <Caution />
-          {error}
-        </div>
-      </If>
-      <If condition={!!success && !error && !!value}>
-        <div className="flex gap-8 mt-4 ml-8 items-center">
-          <Image
-            loader={() => img}
-            src={img}
-            alt="checked"
-            width={20}
-            height={20}
-          />
-          <div className="text-sm text-system_blue">{success}</div>
-        </div>
-      </If>
+      <>
+        {(() => {
+          if (error) {
+            return (
+              <div className="absolute flex gap-8 text-system_red font-medium text-xs mt-4">
+                <Caution />
+                {error}
+              </div>
+            )
+          }
+          if (!!success && !error && !!value) {
+            ;<div className="absolute flex gap-8 mt-4 ml-8 items-center">
+              <Image
+                loader={() => img}
+                src={img}
+                alt="checked"
+                width={20}
+                height={20}
+              />
+              <div className="text-sm text-system_blue">{success}</div>
+            </div>
+          }
+          if (label) {
+            ;<p className="absolute text-xs text-[#8d8d92] mt-4 ml-8">
+              {label}
+            </p>
+          }
+          return null
+        })()}
+      </>
     </>
   )
 })

diff --git a/src/components/ui/HomeHeader.tsx b/src/components/ui/HomeHeader.tsx
@@ -5,13 +5,15 @@ import { StrictPropsWithChildren } from '@/types'
 import { cn } from '@/util'
 import Image from 'next/image'
 import useUserInfo from '@/store/useUserInfo'
+import { useRouter } from 'next/navigation'
 
 interface HomeHeaderProps extends StrictPropsWithChildren {
   title: string
 }
 
 export default function HomeHeader({ children, title }: HomeHeaderProps) {
   const { profileImage } = useUserInfo().userInfo
+  const { push } = useRouter()
   return (
     <div className="flex w-full flex-col">
       <header
@@ -23,15 +25,19 @@ export default function HomeHeader({ children, title }: HomeHeaderProps) {
           <Logo />
           <span className="text-20 pt-3">{title}</span>
         </div>
-        <div className="h-full aspect-square rounded-full bg-primary_foundation-10">
+        <button
+          type="button"
+          onClick={() => push('/mypage')}
+          className="h-full aspect-square rounded-full bg-primary_foundation-10"
+        >
           <Image
             alt="profile"
             src={profileImage}
             width={208}
             height={208}
             className="p-1"
           />
-        </div>
+        </button>
       </header>
       <main className="min-h-screen mt-52">{children}</main>
     </div>