feat: 모두의 정원 등록 페이지 (#362)

* chore: PetCard -> PetPlantCard 네이밍 변경 * chore: calendar URL 삭제 * chore: 모두의 정원 등록 페이지 URL 추가 * refactor: InlineRadio에서 UI 분리 기본적인 ui만 남기고 기능과 세부 ui를 분리하여 컴파운드 컴포넌트의 장점 살리기 * chore: JSX 안쓰는 tsx 파일 ts로 변경 * feat: 게시글 등록 api 로직 * feat: 게시글 등록 msw * feat: 등록 양식 마크업 작성 * refactor: 식물 사전 상세 디자인 깨짐 수정 * fix: Element type is invalid 오류 해결 * test: 사전 식물 상세 스토리북 수정 * design: Inline Radio Option 디자인 수정 * feat: 양식 디자인 및 기본 기능 * feat: 라우터 설정 * feat: 반려 식물 선택 페이지 * feat: 세션 검증 및 디자인 수정 * refactor: 불필요한 async 삭제 * feat: 서버 통신 로직과 결합 * feat: 식물 삭제 버튼 위치 변경 반려 식물 정보 수정 페이지로 이동 * feat: 모두의 정원 등록 버튼 * refactor: 등록 성공 후 목록으로 이동 * fix: 등록 버튼 가려지는 문제 해결 * design: '글쓰기'를 '기록하기'로 변경 * refactor: alt에서 불필요한 내용 삭제 * chore: 파일명 변경 유틸리티 타입인 Pick과 이름이 혼동되지 않게끔 변경 * feat: 난이도를 선택하지 않았으면 게시글에 노출 안함 * feat: 양식 제출 검사 및 내용 입력 필수 - 백엔드와의 원만한 협의하에 결정되었습니다. - 기록의 공유라는 컨셉을 살리기 위해선 기록이 필수라고 생각했어요. * refactor: 절대경로 사용 * feat: 반려식물 요약 프로필 자세하게 변경 * feat: 반려 식물 정보 수정 취소 시 뒤로가기 * feat: 반려 식물 삭제 버튼 롤백 * design: 정보수정 링크 hover 색 변경 * design: 등록하기 -> 기록하기 변경 * fix: typo * feat: profile에 suspense 적용 --------- Co-authored-by: bassyu <[email protected]>
woowacourse-teams · Sep 18, 2023 · cbe82ec · cbe82ec
1 parent 852f7fd
commit cbe82ec
Show file tree

Hide file tree

Showing 37 changed files with 868 additions and 100 deletions.
diff --git a/frontend/src/apis/garden.ts b/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;
diff --git a/frontend/src/components/@common/InlineRadio/InlineRadio.stories.tsx b/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>
   );

diff --git a/.../components/@common/InlineRadio/index.tsx → ...c/components/@common/InlineRadio/index.ts b/.../components/@common/InlineRadio/index.tsx → ...c/components/@common/InlineRadio/index.ts
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts b/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;
-`;
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Main.tsx b/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>
   );
 };

diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Option.style.ts b/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;
+`;
diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Option.tsx b/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>
   );
 };

diff --git a/...end/src/components/dictionaryPlant/DictionaryPlantContent/DictionaryPlantContent.style.ts b/...end/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};
-  }
 `;
diff --git a/frontend/src/components/dictionaryPlant/DictionaryPlantContent/index.tsx b/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>
     </>

diff --git a/frontend/src/components/dictionaryPlant/TagSwitch/TagSwitch.style.ts b/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;
+`;
diff --git a/frontend/src/components/dictionaryPlant/TagSwitch/index.tsx b/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>

diff --git a/frontend/src/components/garden/GardenPostItem/index.tsx b/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>

diff --git a/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts b/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,62 @@ 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;
+`;
+
+export const TertiaryButton = styled.button`
+  ${tertiary}
+
+  &:focus,
+  &:hover {
+    color: ${theme.color.accent};
+  }
+`;
+
+export const TertiaryLink = styled(Link)`
+  ${tertiary}
 
   &:focus,
   &:hover {
-    color: ${({ theme }) => theme.color.accent};
+    color: ${theme.color.primary};
   }
 `;