feat: 감정기록 페이지 변경된 기획 적용건 및 리팩토링

components/BottomSheetFolderList/BottomSheetFolderList.tsx

@@ -5,9 +5,10 @@ import CheckCirclePr from 'public/svgs/CheckCirclePr.svg';
 import FolderPlus from 'public/svgs/folderplus.svg';
 import { BottomSheetFolderListWrap } from './BottomSheetFolderList.styles';
 import styled from 'styled-components';
-import { useRecoilState } from 'recoil';
-import { createPostRequestState } from '@/store/post/atom';
 import { Folder } from '@/shared/type/folder';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { WriteFormValues } from '@/shared/type/post';
+import { useBlockScroll } from '@/hooks/useBlockModal';
 
 interface BottomSheetFolderListProps {
  folderData: Folder[];
@@ -16,11 +17,18 @@ interface BottomSheetFolderListProps {
 }
 
 const BottomSheetFolderList = ({ folderData, onClose, toggleDialog }: BottomSheetFolderListProps) => {
- const [selectedFolder, setSelectFolder] = useRecoilState(createPostRequestState);
+ const { setValue, control } = useFormContext<WriteFormValues>();
+ const currentFolderId = useWatch({
+ control,
+ name: 'folderId',
+ });
+ // FIXME: 폴더를 선택하면 overflow: hidden이 강제되어 임시방편으로 해결
+ const unBlockScroll = useBlockScroll(true);
 
  const closeFolerList = (selectedForderId: number) => () => {
- setSelectFolder((prev) => ({ ...prev, folderId: selectedForderId }));
+ setValue('folderId', selectedForderId);
  onClose();
+ unBlockScroll;
  };
 
  return (
@@ -34,9 +42,7 @@ const BottomSheetFolderList = ({ folderData, onClose, toggleDialog }: BottomShee
  {folderData
  .map(({ folderId, folderName }) => (
  <FolderListItemWrap key={folderId} onClick={closeFolerList(folderId)}>
- <IconWrap>
- {folderId === selectedFolder.folderId && <Image src={CheckCirclePr} alt="CheckCirclePr" />}
- </IconWrap>
+ <IconWrap>{folderId === currentFolderId && <Image src={CheckCirclePr} alt="CheckCirclePr" />}</IconWrap>
  {folderName}
  </FolderListItemWrap>
  ))

components/Common/FAB/FABMenu.tsx

@@ -14,12 +14,14 @@ const FAB_MENU_LIST = [
  {
  imgSrc: Diary,
  content: '일기를 쓸래요',
+ writeMode: 'diary',
  },
  {
  imgSrc: SpeechBubble,
  content: '고민을 쓸래요',
+ writeMode: 'worry',
  },
-];
+] as const;
 
 const FABMenu = ({ isVisible, toggleVisible }: Props) => {
  const FABMenuRef = useRef<HTMLDivElement>(null);
@@ -32,8 +34,8 @@ const FABMenu = ({ isVisible, toggleVisible }: Props) => {
 
  return (
  <Wrapper ref={FABMenuRef} isVisible={isVisible} onClick={onClickFallback}>
- {FAB_MENU_LIST.map(({ content, imgSrc }, index) => (
- <FABMenuItem key={content} content={content} imgSrc={imgSrc} index={index} />
+ {FAB_MENU_LIST.map((props, index) => (
+ <FABMenuItem key={props.content} index={index} {...props} />
  ))}
  </Wrapper>
  );
@@ -44,7 +46,9 @@ export default FABMenu;
 const Wrapper = styled.div<{ isVisible: boolean }>`
  position: fixed;
  top: 0px;
- left: 0px;
+ left: 50%;
+ transform: translateX(-50%);
+ max-width: 480px;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;

components/Common/FAB/FABMenuItem.tsx

@@ -1,28 +1,32 @@
 import { ROUTES } from '@/shared/constants/routes';
+import { WriteModeType } from '@/shared/type/common';
+import { writeModeStateAtom } from '@/store/writeMode/atom';
 import theme from '@/styles/theme';
 import Image, { StaticImageData } from 'next/image';
 import { useRouter } from 'next/router';
 import React from 'react';
+import { useSetRecoilState } from 'recoil';
 import styled, { css } from 'styled-components';
 import Button from '../Button/Button';
 
 interface Props {
  content: string;
  imgSrc: StaticImageData;
+ writeMode: WriteModeType;
  index: number;
 }
 
-const FABMenuItem = ({ content, imgSrc, index }: Props) => {
+const FABMenuItem = ({ content, imgSrc, writeMode, index }: Props) => {
  const router = useRouter();
+ const setWriteMode = useSetRecoilState(writeModeStateAtom);
+
+ const goToDestination = () => {
+ setWriteMode(writeMode);
+ router.push(ROUTES.WRITE);
+ };
 
  return (
- <CustomizedButton
- color="gray"
- hasBorderRadius
- onClick={() => router.push(ROUTES.WRITE)}
- size="medium"
- index={index}
- >
+ <CustomizedButton color="gray" hasBorderRadius onClick={goToDestination} size="medium" index={index}>
  <Image src={imgSrc} alt={imgSrc.src} />
  {content}
  </CustomizedButton>

components/Common/IconButton/IconButton.tsx

@@ -25,7 +25,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const Button = ({ iconName, alt = '', children, ...rest }: ButtonProps): React.ReactElement => {
  return (
- <ButtonContainer {...rest}>
+ <ButtonContainer type="button" {...rest}>
  <Image src={`/svgs/${iconName}.svg`} alt={alt} width={24} height={24} />
  {children}
  </ButtonContainer>