직접입력만 있을 시 대시보드용 화면 구현

components/bottom-sheet/index.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import { Drawer, DrawerContent } from '../ui/drawer'
+
+const BottomSheet = () => {
+  const [bottomSheet, setBottomSheet] = useState({
+    isOpen: false,
+  })
+
+  return (
+    <Drawer
+      open={bottomSheet.isOpen}
+      onOpenChange={(open) =>
+        setBottomSheet((prev) => ({
+          ...prev,
+          isOpen: open,
+        }))
+      }
+    >
+      <DrawerContent>
+        <div className="p-5 flex flex-col space-y-8">
+          <h1 className="text-mainTitle2-bold text-text-main-black11">
+            GRRREW Team
+          </h1>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default BottomSheet

components/compositions/dashboard/best-worth/index.tsx

@@ -168,11 +168,17 @@ function BestWorth({ filter }: { filter: FilterType }) {
       ) : (
         <>
           <h2 className="text-mainTitle2-bold font-bold">
-            가장 중요한 것은{' '}
-            <b style={{ color: orderByMaxValueList?.[0].color }}>
-              {orderByMaxValueList?.[0].legend.split(' ')[2]}
-            </b>
-            이네요
+            {orderByMaxValueList?.[0].legend.split(' ')[2] === '직접' ? (
+              <span>친구가 써준 답변을 확인하세요</span>
+            ) : (
+              <span>
+                가장 중요한 것은{' '}
+                <b style={{ color: orderByMaxValueList?.[0].color }}>
+                  {orderByMaxValueList?.[0].legend.split(' ')[2]}
+                </b>
+                이네요
+              </span>
+            )}
           </h2>
           <div className="flex justify-center py-12 items-center rounded-2xl shadow-basic mt-8 flex-col px-6">
             <div className="w-[180px] h-[180px] mx-auto relative">

components/compositions/dashboard/happy/index.tsx

@@ -52,18 +52,23 @@ const Happy = ({ filter }: { filter: FilterType }) => {
           </>
         ) : (
           <>
-            {' '}
             <h2 className="text-mainTitle2-bold mb-5">
-              기쁠 때
-              <br />
-              <b
-                className="break-keep"
-                style={{
-                  color: orderByMaxValueList?.[0].color,
-                }}
-              >
-                {orderByMaxValueList?.[0].text}
-              </b>
+              {orderByMaxValueList?.[0].text === '직접 입력' ? (
+                <span>친구가 써준 답변을 확인해보세요</span>
+              ) : (
+                <h2 className="text-mainTitle2-bold mb-5">
+                  기쁠 때 <br />
+                  <b
+                    className="break-keep"
+                    style={{
+                      color: orderByMaxValueList?.[0].color,
+                    }}
+                  >
+                    {' '}
+                    <span>{orderByMaxValueList?.[0].text}</span>
+                  </b>
+                </h2>
+              )}
             </h2>
             <div className="flex flex-col justify-center space-y-8 px-8 py-12 rounded-2xl shadow-basic mx-auto">
               {orderByMaxValueList?.slice(0, 3).map((item, index) => {

components/compositions/dashboard/sad/index.tsx

@@ -51,16 +51,22 @@ const Sad = ({ filter }: { filter: FilterType }) => {
         ) : (
           <>
             <h2 className="text-mainTitle2-bold mb-5">
-              슬프거나 화날 때
-              <br />
-              <b
-                className="break-keep"
-                style={{
-                  color: orderByMaxValueList?.[0].color,
-                }}
-              >
-                {orderByMaxValueList?.[0].text}
-              </b>
+              {orderByMaxValueList?.[0].text === '직접 입력' ? (
+                <span>친구가 써준 답변을 확인해보세요</span>
+              ) : (
+                <h2 className="text-mainTitle2-bold mb-5">
+                  슬프거나 화날 때 <br />
+                  <b
+                    className="break-keep"
+                    style={{
+                      color: orderByMaxValueList?.[0].color,
+                    }}
+                  >
+                    {' '}
+                    <span>{orderByMaxValueList?.[0].text}</span>
+                  </b>
+                </h2>
+              )}
             </h2>
             <div className="flex flex-col justify-center  space-y-8 px-8 py-12 rounded-2xl shadow-basic mx-auto">
               {orderByMaxValueList?.slice(0, 3).map((item, index) => {

components/compositions/header/alert/index.tsx

@@ -1,11 +1,11 @@
-import Drawer from '@/components/ui/drawer'
 import React, { useState } from 'react'
 import AlertCard from './alert-card'
+import SideDrawer from '@/components/side-drawer'
 
 const Alert = () => {
   const [openAlert, setOpenAlert] = useState(false)
   return (
-    <Drawer
+    <SideDrawer
       header={{
         center: <p className="text-body1-bold">알림</p>,
         options: {
@@ -50,7 +50,7 @@ const Alert = () => {
         <AlertCard isRead />
         <AlertCard isRead />
       </div>
-    </Drawer>
+    </SideDrawer>
   )
 }
 

components/compositions/header/developer-info/index.tsx

@@ -1,4 +1,3 @@
-import Drawer from '@/components/ui/drawer'
 import React, { useEffect, useRef, useState } from 'react'
 import WriteListCard from '@/components/compositions/header/write-list/wirte-list-card'
 import useFilter, { Filter } from '@/hooks/use-filter'
@@ -10,6 +9,7 @@ import Yh from '@/components/svgs/mimoticons/yh'
 import Es from '@/components/svgs/mimoticons/es'
 import Aa from '@/components/svgs/mimoticons/aa'
 import Logo from '@/components/svgs/logo'
+import SideDrawer from '@/components/side-drawer'
 const container = {
   hidden: { opacity: 0 },
   show: {
@@ -30,7 +30,7 @@ const DeveloperInfo = () => {
   })
 
   return (
-    <Drawer
+    <SideDrawer
       header={{
         center: <p className="text-body1-bold">제작 정보</p>,
         options: {
@@ -123,7 +123,7 @@ const DeveloperInfo = () => {
           </div>
         </div>
       </div>
-    </Drawer>
+    </SideDrawer>
   )
 }
 

components/compositions/header/edit-setting/index.tsx

@@ -1,7 +1,8 @@
 import Button from '@/components/button'
 import InputLabel from '@/components/inputLabel'
 import Inputbox from '@/components/inputbox'
-import Drawer from '@/components/ui/drawer'
+import SideDrawer from '@/components/side-drawer'
+
 import FormLayout from '@/layout/form-layout'
 import { toastError } from '@/lib/client/alert'
 import { cn } from '@/lib/client/utils'
@@ -37,7 +38,7 @@ const EditProfile = () => {
     }
   }
   return (
-    <Drawer
+    <SideDrawer
       header={{
         center: <p className="text-body1-bold">프로필 수정</p>,
         options: {
@@ -82,7 +83,7 @@ const EditProfile = () => {
 
         <Button type="submit">다음</Button>
       </form>
-    </Drawer>
+    </SideDrawer>
   )
 }
 

components/compositions/header/setting/index.tsx

@@ -1,4 +1,3 @@
-import Drawer from '@/components/ui/drawer'
 import React, { useState } from 'react'
 import Modal from '@/components/modal'
 import EditProfile from '@/components/compositions/header/edit-setting'
@@ -7,6 +6,7 @@ import { useSession } from '@/provider/session-provider'
 import { NamuiApi } from '@/lib/namui-api'
 import { toastError } from '@/lib/client/alert'
 import DeveloperInfo from '../developer-info'
+import SideDrawer from '@/components/side-drawer'
 
 const Setting = () => {
   const [openSetting, setOpenSetting] = useState(false)
@@ -22,7 +22,7 @@ const Setting = () => {
     }
   }
   return (
-    <Drawer
+    <SideDrawer
       header={{
         center: <p className="text-body1-bold">설정</p>,
         options: {
@@ -123,7 +123,7 @@ const Setting = () => {
           <DeveloperInfo />
         </section>
       </div>
-    </Drawer>
+    </SideDrawer>
   )
 }
 

components/compositions/header/write-list/index.tsx

@@ -1,4 +1,3 @@
-import Drawer from '@/components/ui/drawer'
 import React, { ReactNode, useState } from 'react'
 import WriteListCard from '@/components/compositions/header/write-list/wirte-list-card'
 import useFilter, { Filter } from '@/hooks/use-filter'
@@ -7,6 +6,7 @@ import { useIntersectionObserver } from '@/hooks/use-observer'
 import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
 import { WritingListResponse } from '@/queries/surveys'
 import { NamuiApi } from '@/lib/namui-api'
+import SideDrawer from '@/components/side-drawer'
 
 const container = {
   hidden: { opacity: 0 },
@@ -50,7 +50,7 @@ const WriteList = ({ trigger }: { trigger?: ReactNode }) => {
   })
 
   return (
-    <Drawer
+    <SideDrawer
       header={{
         center: <p className="text-body1-bold">작성목록</p>,
         options: {
@@ -116,7 +116,7 @@ const WriteList = ({ trigger }: { trigger?: ReactNode }) => {
         </motion.ul>
         <div ref={ref} className="h-2 w-2" />
       </div>
-    </Drawer>
+    </SideDrawer>
   )
 }
 

components/dashboard-container/detail-drawer.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef } from 'react'
-import Drawer from '../ui/drawer'
+
 import useFilter, { Filter } from '@/hooks/use-filter'
 import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
 import { NamuiApi } from '@/lib/namui-api'
@@ -15,6 +15,7 @@ import { cn } from '@/lib/client/utils'
 import { ShareImageContext } from '../share-image'
 import { parseShareCardItems } from '../share-image/constants'
 import { useMount } from '@/hooks/use-mount'
+import SideDrawer from '../side-drawer'
 
 export interface DetailResponse {
   data: Data
@@ -62,7 +63,7 @@ const DetailDrawer = () => {
   return !isMounted ? (
     <></>
   ) : (
-    <Drawer
+    <SideDrawer
       zIndex={19}
       header={{
         center: <p className="text-body1-bold">상세 보기</p>,
@@ -79,7 +80,7 @@ const DetailDrawer = () => {
       {typeof router.query.id === 'string' ? (
         <Content id={router.query.id} type={detailType} />
       ) : null}
-    </Drawer>
+    </SideDrawer>
   )
 }
 

components/share-image/index.tsx

@@ -10,8 +10,10 @@ import { useSession } from '@/provider/session-provider'
 import { parseShareCardItems } from './constants'
 import { Period, Relation, TreeType, treeCardAsset } from '@/model/tree.entity'
 import { cn } from '@/lib/client/utils'
-import Drawer from '../ui/drawer'
+
 import Reason from '@/components/compositions/answers/reason'
+import SideDrawer from '../side-drawer'
+
 type TWO_CHOICE =
   | 'FRIENDLINESS_LEVEL'
   | 'PERSONALITY_TYPE'
@@ -258,7 +260,7 @@ export const ShareImageDrawer = () => {
   if (!context) throw new Error('ShareImageContext')
   const { showShareImage, imageProps } = context
   return (
-    <Drawer
+    <SideDrawer
       zIndex={21}
       header={{
         showHeader: false,
@@ -304,6 +306,6 @@ export const ShareImageDrawer = () => {
           value={imageProps.value}
         />
       )}
-    </Drawer>
+    </SideDrawer>
   )
 }