feat: 모두의 정원 등록 페이지

frontend/src/apis/garden.ts

@@ -0,0 +1,23 @@
+import type { GardenRegisterForm } from 'types/garden';
+import { BASE_URL } from 'constants/index';
+
+export const GARDEN_URL = `${BASE_URL}/garden`;
+
+const headers = {
+  'Content-Type': 'application/json',
+};
+
+const register = (form: GardenRegisterForm) => {
+  return fetch(GARDEN_URL, {
+    method: 'POST',
+    headers,
+    credentials: 'include',
+    body: JSON.stringify(form),
+  });
+};
+
+const GardenAPI = {
+  register,
+};
+
+export default GardenAPI;

frontend/src/components/@common/InlineRadio/InlineRadio.stories.tsx

@@ -22,8 +22,11 @@ const Wrapper = () => {
   return (
     <InlineRadio name="seasons" value={value} setValue={setValue}>
       <InlineRadio.Option value="봄" />
+      <span>|</span>
       <InlineRadio.Option value="여름" />
+      <span>|</span>
       <InlineRadio.Option value="가을" />
+      <span>|</span>
       <InlineRadio.Option value="겨울" />
     </InlineRadio>
   );

frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts

@@ -4,8 +4,3 @@ export const Wrapper = styled.span`
   display: inline-flex;
   font-size: 1.8rem;
 `;
-
-export const Division = styled.p`
-  display: inline-flex;
-  align-items: center;
-`;

frontend/src/components/@common/InlineRadio/ingredients/Main.tsx

@@ -1,24 +1,12 @@
-import { Fragment } from 'react';
-import { Division, Wrapper } from './Main.style';
+import { Wrapper } from './Main.style';
 import RadioProvider, { RadioProviderProps } from 'contexts/radioContext';
-import getFilteredChildren from 'utils/getFilteredChildren';
-import Option from './Option';
 
 const Main = (props: RadioProviderProps) => {
   const { value, setValue, children, name } = props;
 
-  const options = getFilteredChildren(<Option value="" />, children);
-
   return (
     <RadioProvider value={value} setValue={setValue} name={name}>
-      <Wrapper>
-        {options.map((option, index) => (
-          <Fragment key={index}>
-            {option}
-            {index < options.length - 1 ? <Division aria-hidden="true">|</Division> : null}
-          </Fragment>
-        ))}
-      </Wrapper>
+      <Wrapper>{children}</Wrapper>
     </RadioProvider>
   );
 };

frontend/src/components/@common/InlineRadio/ingredients/Option.style.ts

@@ -13,9 +13,12 @@ export const HiddenRadio = styled.input`
 export const Label = styled.label`
   cursor: pointer;
   display: inline-block;
-  padding: 3px 13px;
 
   &:hover {
     font-weight: bold;
   }
 `;
+
+export const Content = styled.span`
+  display: inline-block;
+`;

frontend/src/components/@common/InlineRadio/ingredients/Option.tsx

@@ -1,13 +1,13 @@
 import { useId } from 'react';
-import { HiddenRadio, Label } from './Option.style';
+import { HiddenRadio, Label, Content } from './Option.style';
 import { useRadioContext } from 'hooks/useRadioContext';
 
 interface OptionProps {
   value: string;
 }
 
-const Option = (props: OptionProps) => {
-  const { value } = props;
+const Option = (props: React.PropsWithChildren<OptionProps>) => {
+  const { value, children } = props;
   const { value: contextValue, setValue, name } = useRadioContext();
   const id = useId();
 
@@ -21,7 +21,7 @@ const Option = (props: OptionProps) => {
         checked={value === contextValue}
         onChange={() => setValue(value)}
       />
-      <span>{value}</span>
+      <Content>{children ? children : value}</Content>
     </Label>
   );
 };

frontend/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts

@@ -33,12 +33,13 @@ export const ContentBox = styled.section`
 
   width: 320px;
   margin: 0 auto;
-  div {
-    font: ${(props) => props.theme.font.dictContent};
+`;
+
+export const InformationTagBox = styled.div`
+  font: ${(props) => props.theme.font.dictContent};
 
-    p {
-      font: ${(props) => props.theme.font.dictTitle};
-    }
+  p {
+    font: ${(props) => props.theme.font.dictTitle};
   }
 `;
 
@@ -82,14 +83,12 @@ export const ManageInfoBox = styled.div`
   width: 100%;
   padding: 16px;
 
+  font: ${(props) => props.theme.font.dictContent};
+
   background: #ececec;
   border-radius: 8px;
 
-  p {
+  & > p {
     font: ${(props) => props.theme.font.dictTitle};
   }
-
-  span {
-    font: ${(props) => props.theme.font.dictContent};
-  }
 `;

frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx

@@ -7,6 +7,7 @@ import {
   ContentBox,
   FamilyName,
   HeaderBox,
+  InformationTagBox,
   ManageInfoBox,
   Name,
   PropBox,
@@ -49,15 +50,15 @@ const DictionaryPlantContent = (props: DictionaryPlantExtendCycles) => {
         </div>
       </HeaderBox>
       <ContentBox>
-        <div>
+        <InformationTagBox>
           <TagSwitch title="물 주기" optionMap={waterOptions} />
-        </div>
-        <div>
+        </InformationTagBox>
+        <InformationTagBox>
           <TagBox>
             <TagBox.Title>추천 장소</TagBox.Title>
             {place}
           </TagBox>
-        </div>
+        </InformationTagBox>
 
         <PropsBox>
           <PropBox>
@@ -154,11 +155,9 @@ const DictionaryPlantContent = (props: DictionaryPlantExtendCycles) => {
 
         <ManageInfoBox>
           <p>특별 관리 정보</p>
-          <span>
-            <SeeMoreContentBox>
-              {specialManageInfo !== NO_INFORMATION ? specialManageInfo : '관련 정보가 없어요😇'}
-            </SeeMoreContentBox>
-          </span>
+          <SeeMoreContentBox>
+            {specialManageInfo !== NO_INFORMATION ? specialManageInfo : '관련 정보가 없어요😇'}
+          </SeeMoreContentBox>
         </ManageInfoBox>
       </ContentBox>
     </>

frontend/src/components/dictionaryPlant/TagSwitch/TagSwitch.style.ts

@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const Padding = styled.span`
+  padding: 3px 13px;
+`;

frontend/src/components/dictionaryPlant/TagSwitch/index.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, Fragment } from 'react';
 import InlineRadio from 'components/@common/InlineRadio';
 import { TagVariantType } from 'components/@common/Tag';
 import TagBox from 'components/dictionaryPlant/TagBox';
+import { Padding } from './TagSwitch.style';
 
 interface TagSwitchProps {
   title: string;
@@ -23,8 +24,13 @@ const TagSwitch = (props: TagSwitchProps) => {
       <TagBox.Title>
         {title}
         <InlineRadio name={title} value={selected} setValue={setSelected}>
-          {options.map((optionName) => (
-            <InlineRadio.Option key={optionName} value={optionName} />
+          {options.map((optionName, index) => (
+            <>
+              {index > 0 && <span>|</span>}
+              <Padding key={optionName}>
+                <InlineRadio.Option value={optionName} />
+              </Padding>
+            </>
           ))}
         </InlineRadio>
       </TagBox.Title>

frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts

@@ -158,34 +158,34 @@ export const EnvironmentTitle = styled.span`
   border-radius: 50%;
 `;
 
-export const EditLink = styled(StyledLink)`
+export const ButtonArea = styled.div`
+  display: flex;
+  column-gap: 10px;
+`;
+
+const ButtonLink = styled(Link)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  margin-right: auto;
-  margin-left: 0;
-
-  font-size: 1.4rem;
-  color: ${({ theme }) => theme.color.grayDark};
+  width: 100%;
+  height: 36px;
 
-  transition: color 0.2s linear;
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 1px;
 
-  &:focus {
-    color: ${({ theme }) => theme.color.primary};
-  }
+  border-radius: 4px;
 `;
 
-export const DeleteButton = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  font-size: 1.4rem;
-  color: ${({ theme }) => theme.color.grayDark};
+export const PrimaryLink = styled(ButtonLink)`
+  color: ${({ theme }) => theme.color.background};
+  background: ${(props) => props.theme.color.primary};
+`;
 
-  &:focus,
-  &:hover {
-    color: ${({ theme }) => theme.color.accent};
-  }
+export const SecondaryLink = styled(ButtonLink)`
+  width: 40%;
+  color: ${({ theme }) => theme.color.sub};
+  background: ${(props) => props.theme.color.background};
+  border: 1px solid ${({ theme }) => theme.color.primary};
 `;

frontend/src/components/petPlant/PetPlantDetail/index.tsx

@@ -21,12 +21,11 @@ import {
   EnvironmentItem,
   TimelineLinkArea,
   TimelineLink,
-  EditLink,
-  DeleteButton,
+  PrimaryLink,
+  SecondaryLink,
+  ButtonArea
 } from './PetPlantDetail.style';
-import useDeletePetPlant from 'hooks/queries/petPlant/useDeletePetPlant';
 import usePetPlantDetails from 'hooks/queries/petPlant/usePetPlantDetails';
-import useConfirm from 'hooks/useConfirm';
 import { convertDateKorYear, getDaysBetween } from 'utils/date';
 import { URL_PATH } from 'constants/index';
 import theme from 'style/theme.style';
@@ -37,16 +36,13 @@ interface PetDetailsProps {
 
 const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
   const { data: petPlantDetails } = usePetPlantDetails(petPlantId);
-  const confirm = useConfirm();
-  const { mutate } = useDeletePetPlant();
-
   if (!petPlantDetails) return null;
 
   const {
     id,
     imageUrl,
     nickname,
-    dictionaryPlant: { id: dictId, name: dictName },
+    dictionaryPlant: { id: dictionaryPlantId, name: dictionaryPlantName },
     birthDate,
     daySince,
     waterCycle,
@@ -55,20 +51,9 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
     flowerpot,
     light,
     wind,
-    dday,
+    dday
   } = petPlantDetails;
 
-  const deletePetPlant = async () => {
-    const isConfirmed = await confirm({
-      title: '반려 식물 삭제',
-      message: `정말로 '${nickname}'을(를) 지우실 건가요?`,
-    });
-
-    if (!isConfirmed) return;
-
-    mutate(id);
-  };
-
   const birthDateKorean = convertDateKorYear(birthDate);
   const today = convertDateKorYear(new Date()).slice(5);
   const isBirthday = today === birthDateKorean.slice(5);
@@ -79,16 +64,16 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
 
   return (
     <Wrapper>
-      <Image type="wide" src={imageUrl} alt={`${nickname}(${dictName})`} size="300px" />
+      <Image type="wide" src={imageUrl} alt={`${nickname}(${dictionaryPlantName})`} size="300px" />
       <Content>
         <TitleArea>
           <Title>
             {nickname}
             {isBirthday && <SvgFill icon="crown" aria-hidden="true" />}
           </Title>
-          <StyledLink to={generatePath(URL_PATH.dictDetail, { id: dictId.toString() })}>
+          <StyledLink to={generatePath(URL_PATH.dictDetail, { id: dictionaryPlantId.toString() })}>
             <SubTitle>
-              {dictName}
+              {dictionaryPlantName}
               <SvgStroke icon="dictionary" aria-hidden="true" color={theme.color.grayDark} />
             </SubTitle>
           </StyledLink>
@@ -179,14 +164,17 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
             {wind}
           </EnvironmentItem>
         </Environment>
-        <ExpandedTextBox>
-          <EditLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
-            정보 수정하기
-          </EditLink>
-          <DeleteButton type="button" onClick={deletePetPlant}>
-            식물 삭제하기
-          </DeleteButton>
-        </ExpandedTextBox>
+        <ButtonArea>
+          <PrimaryLink
+            to={generatePath(URL_PATH.gardenRegisterForm, { id: petPlantId.toString() })}
+            state={{ nickname, dictionaryPlantName, imageUrl }}
+          >
+            모두의 정원에 등록하기
+          </PrimaryLink>
+          <SecondaryLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
+            정보 수정
+          </SecondaryLink>
+        </ButtonArea>
       </Content>
     </Wrapper>
   );