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/garden/GardenPostItem/index.tsx

@@ -50,7 +50,7 @@ const GardenPostItem = ({
       <TagArea>
         <DictionaryPlantTag>{dictionaryPlantName}</DictionaryPlantTag>
         <WaterCycleTag>물 주기: {petPlant.waterCycle}일</WaterCycleTag>
-        <ManageLevelTag>{manageLevel}에게 추천해요</ManageLevelTag>
+        {manageLevel !== '정보없음' && <ManageLevelTag>{manageLevel}에게 추천해요</ManageLevelTag>}
       </TagArea>
       <Environment>
         <EnvironmentItem>

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

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
+import theme from 'style/theme.style';
 
 const singleLineText = css`
   overflow: hidden;
@@ -158,34 +159,57 @@ export const EnvironmentTitle = styled.span`
   border-radius: 50%;
 `;
 
-export const EditLink = styled(StyledLink)`
+export const ButtonArea = styled.div`
+  display: flex;
+  justify-content: space-between;
+  column-gap: 10px;
+`;
+
+const ButtonLink = styled(Link)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  margin-right: auto;
-  margin-left: 0;
+  width: 100%;
+  height: 36px;
 
-  font-size: 1.4rem;
-  color: ${({ theme }) => theme.color.grayDark};
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 1px;
 
-  transition: color 0.2s linear;
+  border-radius: 4px;
+`;
 
-  &:focus {
-    color: ${({ theme }) => theme.color.primary};
-  }
+export const PrimaryLink = styled(ButtonLink)`
+  color: ${({ theme }) => theme.color.background};
+  background: ${(props) => props.theme.color.primary};
+`;
+
+export const SecondaryLink = styled(ButtonLink)`
+  color: ${({ theme }) => theme.color.sub};
+  background: ${(props) => props.theme.color.background};
+  border: 1px solid ${({ theme }) => theme.color.primary};
 `;
 
-export const DeleteButton = styled.button`
+const tertiary = css`
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  font-size: 1.4rem;
-  color: ${({ theme }) => theme.color.grayDark};
+  font-size: 1.5rem;
+  color: ${theme.color.grayDark};
+  text-decoration: underline;
 
   &:focus,
   &:hover {
-    color: ${({ theme }) => theme.color.accent};
+    color: ${theme.color.accent};
   }
 `;
+
+export const TertiaryButton = styled.button`
+  ${tertiary}
+`;
+
+export const TertiaryLink = styled(Link)`
+  ${tertiary}
+`;

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

@@ -21,8 +21,10 @@ import {
   EnvironmentItem,
   TimelineLinkArea,
   TimelineLink,
-  EditLink,
-  DeleteButton,
+  PrimaryLink,
+  ButtonArea,
+  TertiaryButton,
+  TertiaryLink,
 } from './PetPlantDetail.style';
 import useDeletePetPlant from 'hooks/queries/petPlant/useDeletePetPlant';
 import usePetPlantDetails from 'hooks/queries/petPlant/usePetPlantDetails';
@@ -37,16 +39,16 @@ interface PetDetailsProps {
 
 const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
   const { data: petPlantDetails } = usePetPlantDetails(petPlantId);
+  const { mutate: deleteMutate } = useDeletePetPlant();
   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,
@@ -66,7 +68,7 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
 
     if (!isConfirmed) return;
 
-    mutate(id);
+    deleteMutate(petPlantId);
   };
 
   const birthDateKorean = convertDateKorYear(birthDate);
@@ -79,16 +81,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 +181,20 @@ const PetPlantDetail = ({ petPlantId }: PetDetailsProps) => {
             {wind}
           </EnvironmentItem>
         </Environment>
-        <ExpandedTextBox>
-          <EditLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
+        <ButtonArea>
+          <TertiaryLink to={generatePath(URL_PATH.petEdit, { id: petPlantId.toString() })}>
             정보 수정하기
-          </EditLink>
-          <DeleteButton type="button" onClick={deletePetPlant}>
-            식물 삭제하기
-          </DeleteButton>
-        </ExpandedTextBox>
+          </TertiaryLink>
+          <TertiaryButton type="button" onClick={deletePetPlant}>
+            삭제하기
+          </TertiaryButton>
+        </ButtonArea>
+        <PrimaryLink
+          to={generatePath(URL_PATH.gardenRegisterForm, { id: petPlantId.toString() })}
+          state={{ nickname, dictionaryPlantName, imageUrl }}
+        >
+          모두의 정원에 등록하기
+        </PrimaryLink>
       </Content>
     </Wrapper>
   );